# บทเรียน 04 — ออกแบบ, ภาพ และคุณภาพก่อนเขียนหน้าเว็บ

ต่อยอดโจทย์รายวิชาได้ใน [สร้างเว็บไซต์หลักสูตรด้วย Codex แบบทีละขั้น](../labs/build-course-website-step-by-step.md) พร้อม prompt ที่รันจริงและภาพผลลัพธ์แต่ละช่วง

เริ่มจากข้อมูลที่มีด้วย [Lab Research → Website brief → Brandbook](../labs/research-to-brand-website.md): มี research prompt, evidence ledger และตัวอย่าง HUSH สำหรับสร้าง mini brandbook, UI icons, key visual และส่งต่อเป็นเว็บไซต์ พร้อม [style board และไฟล์ให้เปิดเทียบ](/labs/hush-brand-kit/)

## ผลลัพธ์การเรียนรู้

เมื่อจบบทเรียน ผู้เรียนจะทำ brief ที่ AI ใช้งานได้, สร้าง design tokens และ asset plan สำหรับหน้าเว็บ, เขียน image prompt ที่ไม่ละเมิดสิทธิ์ และตรวจ mobile/accessibility/performance ก่อนเริ่ม component ได้

ตัวอย่างต่อยอดจากเว็บที่สร้างแล้ว: [Website → Mobile App ด้วยบ้านสบาย](../labs/website-to-mobile-app.md) มี prompt สำหรับออกแบบ website และ mobile app แยกตาม Claude Design, Stitch และ Figma MCP พร้อม [prototype ที่ลองใช้งานได้](/examples/real-estate-mobile/)

เว็บหลักสูตรใช้ **Light mode เป็นค่าเริ่มต้น** และให้เลือก Dark mode โดยจำค่าที่ผู้ใช้เลือก จึงต้องคิด token เป็นบทบาท เช่น canvas, text, border และ action แล้วตรวจ contrast/focus ทั้งสองโหมด ใช้สีและ typography จาก Rawinnipa ตาม `DESIGN.md` ของโครงการ ไม่กลับสีภาพหรือโลโก้ด้วย CSS filter และยังคงพิมพ์คู่มือบนพื้นสว่าง

## ต้องมีก่อนเริ่ม

- จบบทเรียนพื้นฐาน HTML/CSS/JavaScript และเปิด dev server ของหลักสูตรได้
- มีโฟลเดอร์งานที่มี `package.json` และ command `npm run dev`, `npm run build` (ถ้าชื่อ script ต่าง ให้ดู `package.json` ก่อน)
- เข้าใจว่า AI สร้าง “ข้อเสนอ” ไม่ใช่ source of truth; เราเป็นผู้ตรวจรับ

## แนวคิด: ออกแบบจากความจริงของธุรกิจ

![กระบวนการเตรียมภาพจาก art direction ไปยัง prompt สร้างภาพ ต้นฉบับ PNG การย่อและแปลงเป็น WebP แล้วตรวจภาพในหน้าเว็บ](/diagrams/design-assets.svg)

[เปิดแผนภาพขนาดเต็ม พร้อม prompt และแหล่งข้อมูลที่ใช้สร้าง](/diagrams/design-assets.html)

ให้อ่านภาพจากซ้ายไปขวา: art direction และ prompt เป็น source ที่ต้องเก็บคู่กับไฟล์ต้นฉบับ ก่อนสร้าง WebP และตรวจ alt, crop, responsive layout กับน้ำหนักไฟล์ในหน้าเว็บ ข้อเท็จจริงและสิทธิ์ใช้ยังเป็น input ที่ต้องย้อนตรวจได้ อย่าให้ภาพที่สวยกลายเป็นหลักฐานเทียมของราคา รีวิว หรือคุณสมบัติที่เจ้าของยังไม่ยืนยัน

**ฝึกอ่านภาพ:** เลือก asset หนึ่งชิ้นแล้วชี้ source, owner/license, alt intent และตำแหน่งที่ตรวจขนาดหรือ layout shift หากชี้ไม่ได้ ให้ติดป้าย TODO ก่อนนำขึ้นหน้าเว็บ

อย่าเริ่ม prompt ด้วย “make a modern website”. เริ่มจากสิ่งที่ลูกค้าต้องตัดสินใจ: บริษัทต้องให้คนติดต่อ, ร้านเช่าต้องให้คนเลือกวันและส่งคำขอ, storefront ต้องให้คนเข้าใจสินค้าและขอราคา. เขียน **one-page brief** ก่อน:

| ช่อง | ตัวอย่างบริษัทสถาปัตย์ |
| --- | --- |
| ผู้ใช้ | เจ้าของธุรกิจที่กำลังเลือกผู้รับเหมา |
| งานหลักของหน้า | ดูผลงานและนัดคุย 30 นาที |
| หลักฐานความน่าเชื่อถือ | โปรเจกต์จริง, ขั้นตอนทำงาน, contact ที่ตอบได้ |
| mood ที่มีเหตุผล | แผนผัง, วัสดุ, caption แบบ editorial; ไม่ใช่ gradient สำเร็จรูป |
| signature เดียว | project index ที่เปิดรายละเอียดแบบต่อเนื่อง |
| mobile first | CTA โทร/ส่งคำถามยังอยู่ในระยะนิ้วโป้ง |

สร้าง tokens เป็น CSS variables แล้วให้ทุก component อ้างอิง token แทน random hex. เลือก 4–6 สีที่มีหน้าที่ (`--ink`, `--paper`, `--accent`, `--muted`, `--danger`) และฟอนต์อย่างน้อย display/body/utility. UI copy ต้องตั้งชื่อ action ตามสิ่งที่จะเกิดขึ้น เช่น “ขอใบเสนอราคา” ไม่ใช่ “Submit”.

## Lab: ทำ asset brief และหน้า style board

1. เปิด terminal ที่ root ของ project แล้วสร้าง branch/working directory ตาม workflow ของทีม. ตรวจ script ที่มีจริง:

   ```bash
   npm run
   npm run dev
   ```

   **ผลที่คาดหวัง:** เห็น local URL และหน้าเดิมโหลดได้. ถ้า `Missing script` ให้ดู `package.json`; อย่าสร้าง script ใหม่โดยเดา.

2. สร้าง `docs/briefs/company-visual-brief.md` (หรือไฟล์ note ที่ทีมกำหนด) ด้วยตาราง six fields ข้างบน. เพิ่มรายการหน้า/section, CTA หนึ่งอย่างต่อหน้า และ state ของ form: default, invalid, sending, sent, network error.

3. สร้าง token sheet ใน CSS ของตัวอย่าง `/examples/company/` และทำ section เล็ก ๆ ที่โชว์ heading, body, button, link focus, input error และ card. ใช้ HTML จริง ไม่ใช่ภาพ mockup.

4. วางภาพ hero ที่มี `width`/`height` หรือ CSS `aspect-ratio` ตั้งแต่ก่อนโหลด และรูป product/card ทุกใบต้อง reserve space. ภาพหรือ iframe ที่ไม่มี dimension เป็นสาเหตุ CLS ที่พบบ่อย ([web.dev: Optimize CLS](https://web.dev/articles/optimize-cls)). ใส่ `alt` เพื่อบอกสาระของภาพ; ถ้าเป็นภาพตกแต่งจริง ๆ ใช้ `alt=""`.

5. ทดสอบด้วย keyboard: กด Tab จาก address bar จนถึง CTA และส่ง form. focus ต้องเห็น, ลำดับต้องสอดคล้องเนื้อหา และ overlay ต้องปิด/ออกได้. WCAG 2.2 กำหนด target pointer อย่างน้อย 24×24 CSS px ในกรณีปกติ และการลากต้องมีทางเลือก single-pointer ([WCAG 2.2, 2.5.7–2.5.8](https://www.w3.org/TR/WCAG22/)).

6. เปิดระบบ Reduce Motion ใน OS แล้ว refresh. เพิ่ม baseline CSS:

   ```css
   @media (prefers-reduced-motion: reduce) {
     *, *::before, *::after {
       animation-duration: 0.01ms;
       animation-iteration-count: 1;
       scroll-behavior: auto;
       transition-duration: 0.01ms;
     }
   }
   ```

   จากนั้นปรับเฉพาะ component ที่จำเป็น ไม่ใช้ animation เป็นช่องทางเดียวในการสื่อความหมาย. Media query นี้รู้ว่าผู้ใช้ขอลด motion และใช้เพื่อ remove/reduce/replace motion ที่ไม่จำเป็น ([MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/%40media/prefers-reduced-motion)).

7. รัน `npm run build` และเปิด Lighthouse ใน Chrome เป็นสัญญาณก่อน deploy. หลังมี production traffic ให้ตัดสินจาก field data p75: LCP ≤2.5 s, INP ≤200 ms, CLS ≤0.1; Lighthouse lab result ไม่เท่ากับข้อมูลผู้ใช้จริง ([LCP](https://web.dev/articles/optimize-lcp), [INP](https://web.dev/articles/optimize-inp), [CLS](https://web.dev/articles/optimize-cls)).

## Image prompt และสิทธิ์การใช้ภาพ

AI image prompt ต้องระบุ **subject, composition, lighting/material, intended crop, negative constraints** และต้องไม่สั่งให้เลียนแบบศิลปิน/แบรนด์มีชีวิตหรือใช้โลโก้/ตัวละครที่ไม่ได้รับอนุญาต. เก็บที่มา, license, creator, URL, วันที่ดาวน์โหลด และขนาดใน asset manifest. การสร้างด้วย AI ไม่ได้ทำให้เครื่องหมายการค้าหรือภาพบุคคลใช้ได้อัตโนมัติ; ภาพลูกค้าจริงต้องมี consent/release. อย่าใส่ข้อมูลส่วนบุคคลหรือภาพที่ไม่มีสิทธิ์ลง service สร้างภาพ.

ตัวอย่าง prompt ที่นำกลับใช้ได้:

```text
สร้างภาพ editorial สำหรับ hero ของบริษัทสถาปัตยกรรมในกรุงเทพฯ:
facade คอนกรีตและไม้ในแสงเช้าครึ้ม, มุมมองระดับสายตา,
พื้นที่ว่างด้านซ้าย 40% สำหรับข้อความ, landscape 3:2, รายละเอียดวัสดุจริง,
ไม่มีข้อความ โลโก้ คนที่ระบุตัวตนได้ หรือแบรนด์. ใช้เป็นภาพประกอบแนวคิดเท่านั้น;
ก่อนเผยแพร่ต้องตรวจ license และสิทธิ์ commercial use ของเครื่องมือ.
```

## เกณฑ์ตรวจรับ

- [ ] brief ระบุผู้ใช้ งานหลัก CTA และ states ครบ
- [ ] tokens ถูกใช้จริงในหน้า และภาพทุกชิ้นมี source/license record
- [ ] keyboard focus, input label/error และ 24px targets ผ่านการตรวจด้วยมือ
- [ ] Reduce Motion ให้ประสบการณ์อ่าน/ใช้งานได้โดยไม่พึ่ง motion
- [ ] build ผ่าน และไม่มี layout shift ร้ายแรงจาก asset ที่ไม่มีพื้นที่สำรอง

## ข้อผิดพลาดที่พบบ่อย

| อาการ | สาเหตุ | วิธีแก้ |
| --- | --- | --- |
| หน้า AI ดูเหมือนทุกเว็บ | prompt ระบุแต่ style adjective | เพิ่ม audience, real content, one job และ signature ที่มีเหตุผล |
| ปุ่ม icon กดยาก | icon เป็น target เล็ก | ขยาย hit area โดยไม่ต้องขยายภาพ icon |
| พอภาพโหลดหน้าเด้ง | ไม่มี intrinsic dimensions | ใส่ `width`/`height` หรือ `aspect-ratio` |
| motion หยุดแล้วใช้ไม่ได้ | animation ซ่อนข้อมูล/CTA | แสดง final state และให้ interaction ทำงานโดยไม่ต้อง motion |

## แบบประเมิน

ให้อธิบายหน้าของตนใน 90 วินาที: ใครเข้ามา, เขาทำอะไรได้, หลักฐานอะไรช่วยตัดสินใจ, asset ใดมีสิทธิ์ชัดเจน และเปิด Reduce Motion แล้ว journey ยังสมบูรณ์อย่างไร. ผู้สอนให้คะแนน 40% intent/copy, 30% accessibility, 20% asset provenance, 10% build/measurement.

อ่านต่อ: [มาตรฐานคุณภาพและ commerce](../research/web-quality-commerce.md).

## ต่อเครื่องมือออกแบบกับ coding agent

อ่าน [บททดลอง Design Tools และ MCP](../labs/design-tools-and-mcp.md) เพื่อเลือกเส้นทางจาก Claude Design, Google Stitch หรือ Figma ไปสู่เว็บไซต์ใน repository บทนี้ครอบคลุมการติดตั้ง/เชื่อมต่อที่เอกสารทางการรองรับ การอ่าน frame และ token การส่งต่อด้วยไฟล์ และการตรวจสิ่งที่ AI สร้างจากแบบออกแบบ มี prompt ฉบับเต็มสำหรับสร้างแบบ อ่านบริบท และทำ implementation

ในเวลาอบรม 8 ชั่วโมง ให้เลือกสาธิตหนึ่งเส้นทางในช่วง design ของวันแรก แล้วทำส่วนเชื่อมต่อและเปรียบเทียบเครื่องมือเพิ่มเติมด้วยตัวเอง เวลาในบททดลองไม่ใช่ชั่วโมงที่บวกเพิ่มในตารางอบรม

## ฝึกต่อด้วย brandkit

เมื่อมี brief และทิศทางแบรนด์แล้ว ใช้ [Lab brandkit สร้าง overview board 3 × 3](../labs/brandkit-skill.md) เพื่อฝึกส่ง prompt พร้อม reference, ตรวจผลราย panel และทำ website handoff มี [ภาพ HUSH ที่สร้างจริงพร้อมไฟล์ต้นทาง](/labs/brandkit-hush/) สำหรับเปิดเทียบ เป็น Lab เสริม 60–90 นาที ไม่เพิ่มชั่วโมง workshop