Website เล่าเรื่องเมืองเชียงใหม่

คู่มือ: สร้างฉากเดินทางเคลื่อนไหวด้วยการ Scroll ด้วย Claude

Scroll-driven Journey Scene with Claude

เปลี่ยนภาพวาด 1 รูปให้กลายเป็นเว็บเพจเล่าเรื่อง: ผู้ชม scroll ลง ตัวละครก็ออกเดินทางผ่านสถานที่ต่าง ๆ จนถึงปลายทาง

1. ผลลัพธ์ที่จะได้

ภาพรวมขั้นตอน: gen ภาพต้นแบบใน ChatGPT → วางแผนเส้นทาง → สั่ง Claude สร้างเว็บ → แก้งานทีละประเด็น → (ถ้าต้องการ) gen ฉากต่อเพื่ออัปเกรดภาพ

ไฟล์ .html ไฟล์เดียว เอาไปวางบนเว็บได้ทันที
ตัวละครจากรูปของเราเดินทางผ่านสถานที่ 4–7 จุด
มีการเปลี่ยนพาหนะกลางทาง (เช่น จักรยาน → รถแดง)
มี parallax, caption, ใบไม้ปลิว, ท้องฟ้าเปลี่ยนตามเวลา
ใช้ได้ทั้ง desktop และมือถือ

2. ขั้นแรก: สร้างภาพต้นแบบใน ChatGPT

ภาพฉากเปิดคือ "ต้นแบบ" ของทั้งเว็บ ทั้งสไตล์ภาพ โทนสี และหน้าตาตัวละคร จะถูกยึดตามรูปนี้ทั้งหมด จึงควรใช้เวลากับขั้นนี้ให้คุ้ม

2.1 องค์ประกอบภาพที่ต้องมี (สำคัญมาก)

┌──────────────────────────────────────────────┐
│  [ท้องฟ้าว่าง ไว้วาง caption]      [landmark]  │
│                                              │
│  [ฉากเมือง/ต้นไม้]          🚲→ ตัวละคร        │
│══════════════ ถนนแนวนอน ════════════════════│  ← ราว 70% ของความสูงภาพ
│  [น้ำ / หญ้า / พืช ด้านหน้า]                   │
└──────────────────────────────────────────────┘

สัดส่วน 16:9 แนวนอน
ถนนหรือพื้นดินวิ่งแนวนอน อยู่ช่วงล่างของภาพ (ราว 70% จากด้านบน) ฉากถัด ๆ ไปจะต่อจากแนวนี้
ตัวละครอยู่ค่อนไปทางขวา หันหน้าไปทางขวา (ทิศทางที่จะเดินทางไป)
ตัวละครไม่ทับ landmark เพราะตรงที่ตัวละครยืนต้องเติมพื้นหลังทีหลัง
ท้องฟ้ามุมบนซ้าย-กลางต้องว่าง ไว้วางชื่อสถานที่และข้อความ
ไม่มีตัวอักษรในภาพ เพราะภาษาไทยในภาพ AI มักเพี้ยน ส่วนป้ายต่าง ๆ Claude จะใส่ให้ทีหลัง

2.2 Prompt แบบเติมช่องว่าง

A wide 16:9 hand-painted watercolor illustration with delicate ink lines on warm cream paper,
soft muted palette, gentle Studio-Ghibli-like storybook mood.
 
Scene: [สถานที่แรก เช่น the old city moat of Chiang Mai with ancient red-brick walls and a wooden gate].
In the background on the right: [landmark เช่น Doi Suthep mountain with a golden chedi on top].
Details: [ต้นไม้ ดอกไม้ สิ่งก่อสร้างประจำถิ่น].
 
A straight road runs horizontally across the lower third of the image.
Below the road: [น้ำ / หญ้า / ดอกไม้ ด้านหน้า].
 
Character: [อธิบายตัวละคร เช่น a young Thai woman in a white blouse and a Lanna-style woven skirt,
holding a paper umbrella], riding a [พาหนะ เช่น vintage bicycle with a flower basket],
side view, facing right, placed right of center, fully visible, not overlapping any landmark.
 
Keep the upper-left sky empty and airy for text. No text, no letters, no signs in the image.

2.3 ตัวอย่าง Prompt ที่ใช้จริง (เชียงใหม่)

A wide 16:9 hand-painted watercolor illustration with delicate ink lines on warm cream paper,
soft muted greens, terracotta and cream palette, calm storybook mood.
 
Scene: the old city moat of Chiang Mai in the morning. Ancient red-brick city walls with an open
wooden gate on the left, a frangipani tree with white flowers in the top-left corner, palm trees,
a pink blossom tree, Lanna temple roofs and white temple walls on the right.
In the background on the right: misty Doi Suthep mountain with a small golden chedi on the peak.
 
A straight light sandy road runs horizontally across the lower third of the image.
Below the road: a grassy stone bank and the calm moat reflecting the walls, with lotus flowers
and banana leaves in the foreground corners. A few leaves and birds drifting in the air.
 
Character: a young Thai woman with black hair in a low bun and a white flower behind her ear,
wearing a white long-sleeve blouse, an orange woven shawl and a Lanna-pattern tube skirt,
holding a cream paper umbrella, riding a sage-green vintage bicycle with a wicker basket of
white flowers. Side view, facing right, placed right of center, fully visible,
not overlapping the mountain or temples.
 
Keep the upper-left sky empty and airy for text. No text, no letters, no signs in the image.

2.4 เทคนิคใน ChatGPT

ภาพไม่ใช่แนวนอน: ให้สั่งซ้ำ Please regenerate in landscape 16:9
ตัวละครหันผิดทาง: สั่ง Same image, but the character faces right
ตัวละครทับ landmark: สั่ง Move the character slightly left so it does not overlap the mountain
มีตัวอักษรโผล่ในภาพ: สั่ง Remove all text and signs
ดาวน์โหลดไฟล์ขนาดใหญ่สุด ที่ได้ แล้วนำไปแนบให้ Claude
เก็บแชทนี้ไว้ เพราะจะใช้ gen ฉากถัดไปให้สไตล์ตรงกัน (ดูหัวข้อ "อัปเกรด")

💡 ตัวละครคือหัวใจของงาน ถ้าหน้าตาหรือชุดยังไม่ถูกใจ ให้แก้ให้จบในขั้นนี้ เพราะตัวละครจะถูกตัดออกไปใช้ตลอดทั้งเรื่อง รวมถึงตอนนั่งในพาหนะด้วย

3. สิ่งที่ต้องเตรียม

| รายการ | รายละเอียด | |---|---| | Claude | บัญชีที่ใช้ Claude ได้ (แนะนำ Pro ขึ้นไป) | | การตั้งค่า | เปิด Code execution and file creation ใน Settings → Capabilities | | รูปฉากเปิด | ภาพที่ gen จาก ChatGPT ในหัวข้อ 2 (16:9 ตัวละครหันขวา) | | วิดีโอตัวอย่าง | (ไม่บังคับ) screen recording ของเว็บแบบที่อยากได้ | | เส้นทาง | รายชื่อสถานที่ตามลำดับ และจุดที่จะเปลี่ยนพาหนะ |

เลือกรูปฉากเปิดยังไงให้ได้ผลดี

✅ ตัวละครอยู่ค่อนไปทางขวาของภาพ และหันหน้าไปทางขวา
✅ พื้นหลังรอบตัวละครเรียบหรือซ้ำกันได้ (ถนน ท้องฟ้า ต้นไม้)
✅ มีแนวถนนหรือพื้นดินที่ชัดเจน
❌ ตัวละครทับกับ landmark สำคัญ (เติมพื้นหลังได้ยาก)
❌ มีตัวละครหลายตัวซ้อนกัน

4. วางแผนเรื่องก่อนเขียน Prompt

ตอบแค่ 3 คำถามนี้ก็พอ ส่วนการเคลื่อนไหวในแต่ละฉาก ปล่อยให้ Claude คิดให้ได้เลย

① จะไปที่ไหนบ้าง (เรียงตามลำดับ) เขียนสถานที่ 1 ที่ พร้อมจุดเด่น 1 อย่าง

| สถานที่ | จุดเด่น | |---|---| | 1. | | | 2. | | | 3. | | | 4. | | | 5. | |

② เปลี่ยนพาหนะไหม จาก ______ เป็น ______ ที่ ______

③ ตัวละครคือใคร ______

ตัวอย่าง (เชียงใหม่)

| สถานที่ | จุดเด่น | |---|---| | 1. คูเมืองเชียงใหม่ | กำแพงอิฐ | | 2. ดอยสุเทพ | พระธาตุบนยอดดอย | | 3. น้ำพุร้อนสันกำแพง | น้ำพุพวยพุ่ง | | 4. ร่มบ่อสร้าง | ร่มกระดาษสา | | 5. ถนนคนเดินสันกำแพง | โคมล้านนา | | 6. นิมมานเหมินท์ | ร้านกาแฟ | | 7. อ่างแก้ว | ดอยสุเทพยามเย็น |

② เปลี่ยนจาก จักรยาน เป็น รถแดง ที่ ถนนคนเดินสันกำแพง

③ ผู้หญิงใส่ชุดพื้นเมือง ถือร่ม ปั่นจักรยาน

💡 4–7 สถานที่กำลังดี ถ้ามากกว่านี้ แต่ละฉากจะสั้นจนรู้สึกผ่านไปเร็วเกิน

5. Prompt หลัก (คัดลอกไปใช้ได้เลย)

แนบรูปฉากเปิด (และวิดีโอถ้ามี) แล้ววาง prompt นี้ โดย แก้เฉพาะส่วนใน [ ]

คุณคือ creative front-end developer ที่เชี่ยวชาญ scroll-driven storytelling และภาพประกอบสไตล์สีน้ำ
 
## งาน
สร้างเว็บเพจ HTML ไฟล์เดียว เป็น "ฉากเดินทางเคลื่อนไหวแนวนอน" ที่ขับเคลื่อนด้วยการ scroll
เมื่อผู้ใช้ scroll ลง กล้องจะเลื่อนไปทางขวา และตัวละครเดินทางผ่านสถานที่ต่าง ๆ ตามลำดับ
(ถ้าแนบวิดีโอตัวอย่าง ให้ศึกษาจังหวะและลูกเล่นจากวิดีโอนั้นก่อนเริ่ม)
 
## Input
- รูปฉากเปิด: [แนบรูป] ในรูปมีตัวละคร [อธิบาย เช่น ผู้หญิงปั่นจักรยานถือร่ม]
- เส้นทาง (ตามลำดับ):
  1. [สถานที่ในรูป] – จุดเด่น: [...]
  2. [สถานที่ถัดไป] – จุดเด่น: [...]
  3. [...] – จุดเด่น: [...]
  4. [...] – จุดเด่น: [...]
- จุดเปลี่ยนพาหนะ: ที่ [สถานที่] เปลี่ยนจาก [จักรยาน] เป็น [รถแดง/ตุ๊กตุ๊ก/เรือ]
- ปลายทาง: [สถานที่สุดท้าย]
- ภาษา caption: [ไทย + อังกฤษบรรทัดเล็ก]
 
## ขั้นตอนที่ต้องทำ
1. ใช้ Python (rembg + OpenCV) ตัดตัวละครออกจากรูปเป็น PNG/WebP โปร่งใส
   (รวมพร็อพที่ตัวละครถือหรือติดตัวอยู่ด้วย)
   แล้วเติมพื้นหลังตรงที่ตัวละครเคยอยู่ให้เนียน ด้วยการ patch จากส่วนข้างเคียงร่วมกับ seamlessClone
   ตรวจผลด้วยการดูภาพจริงทุกครั้ง
2. วาดฉากต่อจากรูปต้นฉบับเป็น SVG สไตล์สีน้ำ
   - ดึงสีจากรูปต้นฉบับมาใช้
   - ให้แนวถนนและเส้นขอบฟ้าอยู่ระดับเดียวกับในรูป
   - ใช้ feTurbulence + feDisplacementMap ให้ขอบดูเหมือนภาพวาดมือ
   - ไล่ขอบขวาของรูปต้นฉบับให้จาง เพื่อให้กลืนกับฉากที่วาดต่อ
3. ทุกสถานที่ต้องมีจุดจำที่ชัดเจน 1–2 อย่าง (landmark, ป้ายชื่อ, ของดังประจำที่นั้น)
   และมีการเคลื่อนไหวเบา ๆ อย่างน้อย 1 อย่างต่อฉาก
4. Scroll mechanics
   - ใช้ sticky stage ภายใน scroll container ที่สูงพอ
   - map ค่า scroll progress เป็นตำแหน่งตัวละครแบบ piecewise
   - ตรงจุดเปลี่ยนพาหนะให้มีช่วง "หยุดนิ่ง": พาหนะใหม่วิ่งเข้ามาจอด ตัวละครค่อย ๆ จางหาย
     แล้วไปปรากฏในพาหนะแทน
   - กล้องตามตัวละคร (ตัวละครอยู่ราว 60% ของความกว้างจอ) และใช้ easing/lerp ให้ลื่น
   - ทำ parallax 3 ชั้น: ภูเขาไกล / ฉากหลัก / พืชด้านหน้า
5. รายละเอียดเสริม
   - ล้อหมุนตามระยะทาง และตัวละครโยกขึ้นลงตอนเคลื่อนที่
   - ใบไม้ปลิวบน canvas ตามความเร็วการ scroll
   - ท้องฟ้าค่อย ๆ เปลี่ยนจากเช้าเป็นเย็นตลอดเส้นทาง
   - caption ของแต่ละสถานที่ fade เข้า-ออกตามตำแหน่งตัวละคร
   - มีจุดนำทางด้านขวาจอ กดแล้วกระโดดไปแต่ละสถานที่ได้
   - มีปุ่ม "กลับไปจุดเริ่มต้น" ตอนจบ
6. Quality
   - รองรับมือถือแนวตั้ง
   - เคารพการตั้งค่า prefers-reduced-motion
   - ฝังรูปเป็น base64 ไว้ในไฟล์เดียว
   - ถ่าย screenshot ด้วย Playwright ที่หลายตำแหน่ง scroll ทั้ง desktop และ mobile
     แล้วแก้จุดที่ดูผิดก่อนส่งงาน
 
## Output
- ไฟล์ .html ไฟล์เดียวที่พร้อมวางบนเว็บ
- สรุปสั้น ๆ ว่าแต่ละฉากมีอะไร และบอกข้อจำกัดตรง ๆ

6. Prompt สำหรับแก้งาน (รอบที่ 2 เป็นต้นไป)

แก้ทีละประเด็น จะได้ผลดีกว่าสั่งรวมทีเดียว

| ปัญหาที่เจอ | Prompt ที่ใช้ | |---|---| | รอยต่อรูปแรกกับฉากถัดไปเห็นชัด | รอยต่อตรงขอบขวาของรูปแรกยังเห็นเส้น ช่วยไล่จางให้กว้างขึ้น และใส่หมอกบาง ๆ ตรงรอยต่อ | | ฉากที่วาดต่อสีจัดเกิน | ต้นไม้และอาคารในฉาก SVG สีจัดเกินเมื่อเทียบกับรูปต้นฉบับ ช่วยลด saturation และ opacity ให้ดูเป็นสีน้ำมากขึ้น | | landmark ไม่ชัด | ฉากที่ [x] ยังดูไม่ออกว่าเป็น [สถานที่] ช่วยเพิ่ม [จุดจำ] ให้เด่นขึ้น | | ข้อความทับกับภาพ | caption ทับกับหลังคาในฉาก [x] ช่วยลดความสูงของอาคาร หรือเลื่อนตำแหน่ง caption | | มือถือตัวละครใหญ่เกิน | บนมือถือ ตัวละครและพาหนะใหญ่เกินไป ช่วยปรับ scale ให้เห็นฉากกว้างขึ้น | | สีเย็นเข้มเกิน | โทนสีช่วงเย็นแดงเกินไป ช่วยลด tint ลงครึ่งหนึ่ง | | อยากให้ scroll ยาว/สั้นลง | ช่วยปรับความยาว scroll ให้ [ยาวขึ้น/สั้นลง] ประมาณ [30]% |

7. อัปเกรด: ให้ทุกฉากสวยเท่ารูปแรก

ฉากที่ Claude วาดด้วย SVG จะดูเรียบกว่าภาพวาดจริง ถ้าอยากให้ทั้งเรื่องเป็นลายมือเดียวกัน ให้ทำดังนี้

ขั้นที่ 1: กลับไปที่ แชท ChatGPT เดิมที่ gen ภาพต้นแบบ แล้ว gen ภาพทีละฉากด้วย prompt แบบนี้ สไตล์จะได้ต่อเนื่องกัน

Watercolor illustration, same style as the reference image, soft paper texture,
muted greens and warm cream palette. Scene: [สถานที่ + จุดจำ].
Wide landscape 16:9, a road running horizontally across the lower third,
no people, no vehicles, empty sky in the upper-left area for text.

ขั้นที่ 2: แนบรูปทั้งหมดกลับไปที่ Claude แล้วสั่ง

นี่คือภาพฉากที่ 2–[n] ตามลำดับ ช่วยแทนฉาก SVG เดิมด้วยรูปเหล่านี้
ต่อภาพให้เนียนด้วยการไล่จางที่ขอบ และปรับแนวถนนให้ตรงกันทุกภาพ
โดยเก็บตัวละคร การเปลี่ยนพาหนะ และลูกเล่นเดิมไว้ทั้งหมด

💡 ต้องใส่ "no people, no vehicles" ใน prompt ทุกครั้ง เพราะตัวละครจะถูกวางซ้อนทีหลัง

8. แก้ปัญหาที่พบบ่อย

| อาการ | สาเหตุ / วิธีแก้ | |---|---| | Claude บอกว่ารันโค้ดไม่ได้ | ยังไม่ได้เปิด Code execution → ไปเปิดใน Settings แล้วเริ่มแชทใหม่ | | ตัดตัวละครไม่ได้ (rembg ใช้ไม่ได้) | สั่ง ถ้า rembg ใช้ไม่ได้ ให้วาดตัวละครใหม่เป็น SVG แทน | | ตัดตัวละครแล้วขาดบางส่วน (เช่น ตะกร้า) | สั่ง ตอนตัดตัวละคร ตะกร้าหน้ารถหายไป ช่วยเพิ่มเข้าไปใน mask ด้วย | | พื้นหลังที่เติมเป็นรอยเบลอ | สั่ง ช่วยลองเติมด้วยการ copy patch จากด้านข้าง แทน inpaint แบบเบลอ | | ฟอนต์ไม่ตรง | ฟอนต์โหลดจาก Google Fonts ต้องเปิดไฟล์แบบออนไลน์ | | ไฟล์ใหญ่ | สั่ง ช่วยบีบอัดรูปเป็น WebP คุณภาพ 80 | | กระตุกบนมือถือ | สั่ง ช่วยลดจำนวนใบไม้ปลิวบนมือถือ และลด filter บนฉากที่มีการเคลื่อนไหว |

9. นำไปใช้บนเว็บ

วางเป็นหน้าเต็ม: อัปโหลดไฟล์ .html ขึ้นเว็บโฮสติ้ง (Netlify, GitHub Pages, Wix custom code)
ฝังในหน้าเว็บที่มีอยู่:

<iframe src="journey.html" style="width:100%;height:100vh;border:0" title="ฉากเดินทาง"></iframe>

⚠️ ถ้าฝังแบบ iframe การ scroll จะเกิดภายในกรอบ iframe ถ้าอยากให้ scroll ทั้งหน้า ให้วางเป็นหน้าเต็มแทน

10. Checklist ก่อนส่งงาน

[ ] ตัวละครเริ่มต้นตรงตำแหน่งเดิมในรูป ไม่กระโดด
[ ] ตรงที่ตัวละครเคยอยู่ไม่มีรอยเบลอหรือรอยปะให้เห็น
[ ] รอยต่อรูปแรกกับฉากถัดไปกลืนกัน
[ ] ทุกสถานที่ดูออกว่าคือที่ไหน
[ ] การเปลี่ยนพาหนะลื่นไหล ตัวละครไม่หายไปเฉย ๆ
[ ] caption อ่านง่าย ไม่ทับภาพสำคัญ
[ ] จุดนำทางด้านขวากดได้ทุกจุด
[ ] เปิดบนมือถือแล้วยังดูดี
[ ] scroll จนจบแล้วมีปุ่มกลับจุดเริ่มต้น

11. ต่อยอดไอเดีย

ธุรกิจท่องเที่ยว: ทำแผนที่ทริปแบบเล่าเรื่องสำหรับโรงแรม หรือทัวร์ 1 วัน
Brand story: เส้นทางของสินค้าตั้งแต่ไร่จนถึงมือลูกค้า
Portfolio ส่วนตัว: เส้นทางชีวิตและอาชีพ แต่ละสถานที่คือแต่ละช่วงงาน
สื่อการสอน: วัฏจักรน้ำ เส้นทางการค้าโบราณ หรือประวัติศาสตร์ท้องถิ่น

จัดทำโดย Custocare Co., Ltd. — We Customize with Care