Sitemap

เมื่อมี Project Brief แล้ว ขั้นต่อไปคือเปลี่ยนโจทย์ให้เป็นโครงหน้าเว็บที่ผู้ใช้เข้าใจได้จริง

ในส่วนนี้คุณจะวาง Section, User Flow, CTA, UX/UI Direction และใช้ AI สร้าง HTML Preview เพื่อดูหน้าตาเว็บก่อนเริ่มทำโปรเจกต์ Next.js

Sitemap คืออะไร

Sitemap คือโครงสร้างหน้าของเว็บไซต์ เช่น:

Home
About
Services
Portfolio
Contact

สำหรับคอร์สนี้ แนะนำให้เริ่มจากเว็บหน้าเดียวก่อน เพราะทำง่าย เห็นผลเร็ว และเหมาะกับการทำ Landing Page หรือ Portfolio

เว็บหน้าเดียวไม่ได้แปลว่าเว็บไม่มีโครงสร้าง แต่หมายถึงทุก Section อยู่ในหน้าเดียวกัน ผู้ใช้เลื่อนอ่านจากบนลงล่าง การจัดลำดับ Section จึงสำคัญมาก เพราะมันทำหน้าที่แทนเมนูหลายหน้า

ตัวอย่าง Sitemap สำหรับ Landing Page:

Landing Page
Thank You Page
Privacy Policy

Landing Page

หน้าหลักที่ใช้เล่า Offer และพาผู้ใช้ไปกด CTA

Thank You Page

หน้าหลังจากผู้ใช้ส่งฟอร์มหรือทำ Action สำเร็จ ใช้ยืนยันผลและบอกขั้นตอนต่อไป

Privacy Policy

หน้าที่อธิบายการเก็บและใช้ข้อมูลส่วนบุคคล โดยเฉพาะเมื่อมีฟอร์มเก็บ Lead