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

ต่อยอดโจทย์รายวิชาได้ใน สร้างเว็บไซต์หลักสูตรด้วย Codex แบบทีละขั้น พร้อม prompt ที่รันจริงและภาพผลลัพธ์แต่ละช่วง

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

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

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

ตัวอย่างต่อยอดจากเว็บที่สร้างแล้ว: Website → Mobile App ด้วยบ้านสบาย มี prompt สำหรับออกแบบ website และ mobile app แยกตาม Claude Design, Stitch และ Figma MCP พร้อม prototype ที่ลองใช้งานได้

เว็บหลักสูตรใช้ 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; เราเป็นผู้ตรวจรับ

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

เปิดแผนภาพขนาดเต็ม พร้อม prompt และแหล่งข้อมูลที่ใช้สร้าง

ให้อ่านภาพจากซ้ายไปขวา: 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 ก่อน:

สร้าง 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 ที่มีจริง:

   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). ใส่ 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).

6. เปิดระบบ Reduce Motion ใน OS แล้ว refresh. เพิ่ม baseline 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).

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, INP, CLS).

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

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

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

สร้างภาพ 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 ที่ไม่มีพื้นที่สำรอง

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

แบบประเมิน

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

อ่านต่อ: มาตรฐานคุณภาพและ commerce.

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

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

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

ฝึกต่อด้วย brandkit

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