# คัมภีร์ออกแบบเว็บขายของให้สวย ไม่เหมือน AI ทำ
### ฉบับคนมีของ อยากมีเว็บ — เอาไฟล์นี้ไปป้อน AI ของคุณได้เลย

> วิธีใช้: เปิด Claude / Claude Code / ChatGPT แล้ววางไฟล์นี้เป็น "ความรู้ตั้งต้น" ก่อนสั่งให้มันสร้างเว็บ
> มันจะเข้าใจว่า "สวยแบบมือโปร" หน้าตาเป็นยังไง และจะ **ไม่** ออกมาเป็น AI Slop

---

## 0. ปัญหา: ทำไมเว็บที่ AI สร้างมักดู "ถูก" และขายไม่ออก

เว็บที่ดูเหมือน AI ทำ (เราเรียกว่า **AI Slop**) มีลายเซ็นชัดมาก ลูกค้าดูแล้วรู้สึก "ไม่น่าเชื่อถือ" โดยไม่รู้ตัว เพราะมันซ้ำกับเว็บปลอม/เว็บหลอกลวงเป็นหมื่นเว็บ ผลคือ **คนไม่กล้าจ่ายเงิน**

เป้าหมายของคัมภีร์นี้: ทำให้เว็บคุณดู **ตั้งใจ มีรสนิยม และน่าเชื่อถือ** เหมือนมีดีไซเนอร์จริงทำให้

---

## 1. 7 สัญญาณของ AI Slop (และวิธีแก้ทีละข้อ)

| # | สัญญาณ Slop | ทำไมมันแย่ | แก้เป็น |
|---|---|---|---|
| 1 | **Gradient ม่วง-น้ำเงินฟุ้งทั้งหน้า** | เป็น default ของ template ฟรี ดูซ้ำ ดูถูก | เลือกสีแบรนด์ 1 สี + สีเป็นกลาง (เทา/ครีม) เป็นพื้น 90% ใช้สีเน้นแค่ปุ่มสำคัญ |
| 2 | **Emoji เกลื่อนทุกหัวข้อ** 🚀✨🎯 | ดูเล่นๆ ไม่โปร | ใช้ไอคอนเส้นชุดเดียว (เช่น Lucide) แทน หรือไม่ใช้เลย |
| 3 | **Stock photo / รูป AI generate** | คนจับได้ทันทีว่าไม่ใช่ของจริง | ใช้ **รูปสินค้าจริง / หน้าร้านจริง / ลูกค้าจริง** ถ่ายเองด้วยมือถือก็ยังดีกว่า |
| 4 | **ฟอนต์ default (Arial/ฟอนต์ระบบ)** | ไม่มีบุคลิก | เลือกฟอนต์หัว 1 + ฟอนต์เนื้อหา 1 (ไทยแนะนำ: หัว IBM Plex/Anuphan, เนื้อหา Sarabun/Noto Sans Thai) |
| 5 | **จัดกึ่งกลางทุกอย่าง** | สายตาไม่รู้จะมองตรงไหน อ่านยาก | เนื้อหายาวจัดชิดซ้าย, จัดกลางเฉพาะหัวข้อสั้น/ฮีโร่ |
| 6 | **การ์ดเงาฟุ้งหนาๆ เท่ากันหมด** | ดูพลาสติก ไม่มีลำดับความสำคัญ | เงาบางๆ + เส้นขอบจาง, เน้นแค่การ์ดสำคัญให้เด่นกว่าเพื่อน |
| 7 | **คำพูดลอยๆ "ดีที่สุด / ครบวงจร / นวัตกรรม"** | ไม่มีความหมาย ใครก็พูดได้ | เขียนเฉพาะเจาะจง + มีตัวเลข เช่น "ส่งภายใน 24 ชม. ลูกค้า 3,200 คน" |

**กฎทอง:** ถ้าลบของออกแล้วหน้ายัง "สื่อสารได้" — ลบ. ความว่าง (white space) คือสิ่งที่ทำให้ดูแพง

---

## 2. รากฐาน 5 อย่างที่ทำให้เว็บ "ดูแพง"

### 2.1 ระบบสี (Color System)
- เลือก **1 สีหลัก** (สีแบรนด์) + **1 สีเน้น** (สำหรับปุ่ม/ลิงก์) + **โทนเป็นกลาง** (เทา/ครีม/ขาว) เป็นพื้น
- พื้นหลัง 90% ควรเป็นกลาง สีสดใช้แค่จุดที่อยากให้คนกด
- หลีกเลี่ยงสีสดหลายสีพร้อมกัน → ดูรก
- อยากดูพรีเมียม: ลดความสด (saturation) ลง ใช้โทนหม่นนิดๆ

### 2.2 ตัวอักษร (Typography)
- ฟอนต์หัว 1 ตัว + ฟอนต์เนื้อหา 1 ตัว — พอ
- ขนาดต้องต่างกันชัด: หัวใหญ่ (32–56px), หัวรอง (20–24px), เนื้อหา (16–18px)
- เนื้อหา line-height 1.6–1.8 อ่านสบายตา
- อย่าใช้ตัวหนาทั้งย่อหน้า — เน้นเฉพาะคำสำคัญ

### 2.3 ระยะห่าง (Spacing)
- ใช้สเกลที่สม่ำเสมอ เช่น 4, 8, 12, 16, 24, 32, 48, 64px
- ให้ที่ว่างรอบ section เยอะๆ (แต่ละ section ห่างกัน 64–96px)
- ของที่เกี่ยวกันอยู่ใกล้กัน, ของที่ไม่เกี่ยวอยู่ห่างกัน (Proximity)

### 2.4 ลำดับสายตา (Visual Hierarchy)
- หน้าหนึ่งมี **ปุ่มเป้าหมายหลัก 1 ปุ่ม** ที่เด่นที่สุด (เช่น "สั่งซื้อ")
- ขนาด + สี + ตำแหน่ง บอกความสำคัญ — สิ่งสำคัญต้องใหญ่/เด่นกว่า
- คนสแกนหน้าเป็นรูปตัว F หรือ Z — วางของสำคัญไว้บน-ซ้าย และจุดตัดสินใจ

### 2.5 รูปจริง (Real Imagery)
- รูปสินค้าจริงบนพื้นสะอาด > รูป AI สวยๆ เสมอ
- ถ่ายมือถือ: แสงธรรมชาติ, พื้นเรียบ, มุมตรง, ครอปให้พอดี
- มีรูป "คนใช้สินค้าจริง" / "บรรยากาศร้านจริง" จะเพิ่มความเชื่อใจมาก

---

## 3. โครงสร้างเว็บขายของที่ต้องมี (Checklist มือใหม่)

เรียงจากบนลงล่าง — นี่คือลำดับที่พาคนแปลกหน้า → ลูกค้า

1. **Nav บางๆ** — โลโก้ + เมนูสั้น + ปุ่ม "สั่งซื้อ/ทักแชต"
2. **Hero** — ประโยคเดียวบอกว่า "ขายอะไร เพื่อใคร ดียังไง" + รูปสินค้าเด่น + ปุ่มหลัก 1 ปุ่ม
3. **สินค้า / จุดเด่น** — โชว์สินค้าจริง 3–6 ภาพ + บอกประโยชน์ (ไม่ใช่แค่สเปก)
4. **ทำไมต้องเรา** — 3 เหตุผลสั้นๆ ที่ต่างจากคู่แข่ง (ของจริง ไม่ใช่คำสวย)
5. **หลักฐานความน่าเชื่อถือ (Social Proof)** — รีวิวจริง, ยอดขาย, รูปลูกค้า, โลโก้คนที่เคยซื้อ
6. **ราคา / ข้อเสนอ** — ชัดเจน ไม่ซ่อน + โปร/ของแถมถ้ามี
7. **คำถามที่พบบ่อย (FAQ)** — ตอบข้อกังวลก่อนซื้อ (ส่งกี่วัน, คืนได้ไหม, จ่ายยังไง)
8. **ปุ่มปิดการขาย** — "สั่งซื้อ / ทักไลน์" เด่นๆ ซ้ำอีกครั้งล่างสุด
9. **Footer สร้างความเชื่อใจ** — ที่อยู่จริง, เบอร์, ช่องทางติดต่อ, นโยบาย

> ถ้าทำได้แค่ครึ่งเดียว ให้เลือก: Hero + สินค้าจริง + Social Proof + ปุ่มซื้อ + ช่องทางติดต่อ

---

## 4. หลัก UX ที่ทำให้คน "กดซื้อ"

- **ปุ่มหลักต้องชัดและซ้ำ** — เห็นทุกครั้งที่เลื่อนถึงจุดตัดสินใจ
- **ลดแรงเสียดทาน** — อย่าบังคับสมัครสมาชิกก่อนซื้อ, ฟอร์มสั้นที่สุด
- **บอกราคาตรงๆ** — ราคาที่ซ่อนทำให้คนหนี
- **มือถือมาก่อน** — ลูกค้าไทย 80%+ เปิดจากมือถือ ออกแบบให้นิ้วกดง่าย ปุ่มใหญ่
- **เร็ว** — รูปอย่าใหญ่เกิน, หน้าโหลดช้า = คนปิดหนี
- **ความเชื่อใจอยู่ทุกจุด** — รีวิว, การรับประกัน, ช่องทางติดต่อจริง

---

## 5. วิธีสั่ง AI ให้ทำออกมาระดับมือโปร (ไม่ใช่ Slop)

อย่าสั่งลอยๆ ว่า "ทำเว็บขายของให้หน่อย" — มันจะคืน Slop มาให้. ต้องป้อน 3 อย่าง:

1. **Design System** — บอกสี/ฟอนต์/บุคลิก (ดูไฟล์ `CLAUDE.md` ในชุดนี้)
2. **Brief สินค้า** — ขายอะไร ใคร จุดเด่น ราคา รูปมีอะไรบ้าง โทนแบรนด์
3. **กฎห้าม Slop** — แปะรายการข้อ 1 ด้านบนให้มันเลี่ยง

แล้วใช้พรอมต์ในไฟล์ `mega-prompt.txt` เป็นตัวสั่ง

**เคล็ดลับ:** หลังได้เว็บแล้ว ให้สั่งต่อว่า "วิจารณ์งานตัวเองด้วยเกณฑ์ 7 ข้อ AI Slop แล้วแก้ให้ดูแพงขึ้น ลดของที่ไม่จำเป็น เพิ่ม white space" — AI จะขัดเกลาตัวเองได้อีกขั้น

---

## 6. ก่อนปล่อยเว็บ — เช็ก 10 ข้อ

- [ ] เปิดมือถือแล้วอ่านง่าย ปุ่มกดง่าย?
- [ ] มีปุ่มเป้าหมายหลักชัดเจน ซ้ำพอ?
- [ ] รูปเป็นของจริง ไม่ใช่ stock/AI?
- [ ] มีรีวิว/หลักฐานความน่าเชื่อถือจริง?
- [ ] บอกราคา + วิธีจ่าย + การส่งชัดเจน?
- [ ] มีช่องทางติดต่อจริง (ไลน์/เบอร์/ที่อยู่)?
- [ ] สีไม่เกิน 1 หลัก + 1 เน้น, ไม่มี gradient ฟุ้ง?
- [ ] ไม่มี emoji เกลื่อน / คำสวยลอยๆ?
- [ ] หน้าโหลดเร็ว (รูปไม่ใหญ่เกิน)?
- [ ] มี FAQ ตอบข้อกังวลก่อนซื้อ?

---

จัดทำโดย **Skills Lab** — สอนเจ้าของกิจการสั่ง AI สร้างระบบให้ธุรกิจ
อยากให้เราออกแบบ/สร้างให้: https://skills-lab.co/start/