AI ไม่ได้กำลังมา
แต่มันมาถึงแล้ว
คำถามไม่ใช่ว่า “AI จะเปลี่ยนโลกไหม”
แต่คือ “คุณจะใช้มันสร้างอะไร?”
DADWORK
เทคโนโลยีเปลี่ยนเร็วขึ้นทุกปี และในช่วงไม่กี่ปีที่ผ่านมา ไม่มีด้านไหนเปลี่ยนเร็วเท่า AI สิ่งที่เมื่อวานยังต้องจ้างคนทำ วันนี้คนธรรมดาคนหนึ่งนั่งทำเองได้ที่โต๊ะกินข้าว ผมเขียนหนังสือเล่มนี้เพราะผมคือคนธรรมดาคนนั้น
ผมเป็นคุณพ่อธรรมดาคนหนึ่ง ไม่ได้เขียนโปรแกรมเป็นอาชีพ แต่เรียนรู้ไปเรื่อย ๆ จนพบว่า AI นำมาประยุกต์ใช้กับงานจริงได้ โดยเฉพาะการเขียนโปรแกรมแบบ Vibe Coding ที่เราบอกสิ่งที่ต้องการเป็นภาษาคน แล้วให้ AI ลงมือเขียนโค้ดแทน เว็บไซต์และเครื่องมือหลายอย่างที่ผมใช้ทำงานอยู่ทุกวันนี้ เกิดขึ้นด้วยวิธีนี้
แต่ถึง AI จะเก่งแค่ไหน พื้นฐานด้านเทคโนโลยีก็ยังสำคัญ คนที่รู้ว่าเว็บไซต์ทำงานอย่างไร โดเมนคืออะไร ไฟล์อยู่ตรงไหน จะสั่งงาน AI ได้ตรงกว่า ตรวจงานได้ และแก้ปัญหาได้เมื่อผลไม่เป็นอย่างที่คิด หนังสือเล่มนี้จึงปูพื้นเท่าที่จำเป็นไปพร้อมกับการลงมือทำ
ผมเขียนหนังสือไม่เก่ง จึงตั้งใจใช้คำที่เข้าใจง่ายที่สุด และเล่าจากสิ่งที่ลงมือทำมาจริง ส่วนไหนที่ควรรู้ลึกขึ้น ผมเพิ่มเนื้อหาไว้ให้ เพื่อให้คุณนำ AI ไปสร้างสรรค์เว็บไซต์ที่ใช้งานได้จริง ในมุมที่เหมาะกับงานของคุณเอง
ขอให้อ่านไปทำไปทีละตอน ไม่ต้องรีบ เมื่ออ่านจบ สิ่งที่ผมอยากให้คุณมีติดมือไม่ใช่แค่ความรู้ แต่คือเว็บไซต์หนึ่งเว็บที่คุณสร้างเอง และความมั่นใจว่าเว็บต่อไปคุณก็ทำได้
— DADWORK
AI ไม่ได้กำลังมา
แต่มันมาถึงแล้ว
คำถามไม่ใช่ว่า “AI จะเปลี่ยนโลกไหม”
แต่คือ “คุณจะใช้มันสร้างอะไร?”
DADWORK
ก่อนเปิดเครื่องมือใด ๆ — ตอบให้ได้ว่าเว็บนี้สร้างให้ใคร และเขาต้องทำอะไรสำเร็จบนเว็บนี้
ก่อนเปิดโปรแกรมหรือพิมพ์ prompt แรก ผมอยากให้คุณตอบคำถามเดียวให้ได้ก่อน: เว็บไซต์นี้สร้างให้ใคร ไม่ใช่ "ให้ทุกคน" หรือ "ให้ลูกค้า" แต่เป็นคนคนหนึ่งที่คุณนึกหน้าออก
เหตุผลง่ายมาก AI ยุคนี้เขียนโค้ดได้เก่งกว่าที่คนส่วนใหญ่คิด มันสร้างหน้าเว็บทั้งหน้าได้ในไม่กี่นาที จัดสี จัดฟอนต์ ทำให้ดูดีบนมือถือได้ สิ่งเดียวที่มันทำแทนเราไม่ได้คือรู้ว่าเว็บนี้มีไว้เพื่อใคร และคนคนนั้นต้องการอะไร
ถ้าเราบอกว่า "สร้างเว็บร้านกาแฟให้หน่อย" มันจะสร้างเว็บร้านกาแฟที่หน้าตาเหมือนอีกหมื่นแห่งบนโลก สวยครับ แต่ไม่มีใครเป็นเจ้าของ ถ้าบอกว่า "สร้างเว็บให้ร้านกาแฟเล็ก ๆ ในซอยที่ลูกค้าส่วนใหญ่เป็นพนักงานออฟฟิศแถวนั้น เข้ามาดูว่าวันนี้มีขนมอะไร แล้วกดสั่งล่วงหน้าทาง LINE" มันจะสร้างเว็บอีกแบบหนึ่งเลย
ผมเคยเห็นคนจำนวนมากเริ่มจากเครื่องมือ ติดตั้งโปรแกรม ลองพิมพ์ ได้เว็บออกมาหนึ่งหน้า แล้วก็ค้าง เพราะไม่รู้ว่าจะทำอะไรต่อ หน้าถัดไปควรเป็นอะไร หรือปุ่มหน้าแรกควรพาคนไปไหน นี่ไม่ใช่ปัญหาของเครื่องมือ แต่เป็นเพราะยังไม่ได้ตัดสินใจว่าเว็บนี้สร้างให้ใคร
ลองนึกภาพช่างก่อสร้างที่เก่งที่สุดในโลก ถ้าคุณบอกแค่ว่า "สร้างบ้านให้หน่อย" เขาก็ต้องถามว่าใครจะอยู่ กี่คน มีเด็กหรือผู้สูงอายุไหม ทำงานที่บ้านหรือเปล่า AI ก็เหมือนช่างคนนั้น ต่างกันตรงที่มันไม่ถามกลับ มันจะเดาแล้วสร้างให้เลย โดยเดาจากค่าเฉลี่ยของทุกเว็บที่เคยเห็น
ก่อนเริ่มงาน ลองเขียนคำตอบสั้น ๆ สามส่วนลงบนกระดาษ: คนนี้เป็นใคร เขาเข้ามาเว็บในสถานการณ์ไหน และหลังเห็นข้อมูลแล้วอยากให้เขาทำอะไร เช่น “พนักงานออฟฟิศที่เลิกงานช้า เปิดเว็บตอนเช้าเพื่อดูเมนูขนม และกดจองก่อนพักเที่ยง” รายละเอียดอย่างเวลา อุปกรณ์ และการกระทำสุดท้าย จะช่วยแยกความต้องการจริงจากคำกว้าง ๆ อย่าง “อยากได้เว็บสวย”
ระวังอย่าเริ่มจากสิ่งที่เราอยากใส่ เช่น ประวัติร้านยาว ๆ หรือภาพเคลื่อนไหวหลายแบบ ให้เริ่มจากเส้นทางของคนคนนั้น: เขามาจากไหน ต้องเห็นอะไรเป็นอย่างแรก และอะไรจะทำให้ตัดสินใจได้เร็วขึ้น ถ้าคำตอบยังใช้แทนคำว่า “ทุกคน” ได้ แปลว่ายังต้องเจาะจงอีกนิด
คุณไม่ต้องรู้จัก HTML ไม่ต้องรู้ว่า CSS คืออะไร ไม่ต้องเคยเปิดโปรแกรมเขียนโค้ด สิ่งที่ต้องมีคือความชัดเจนเรื่องคน กับกระดาษหนึ่งแผ่นไว้จด ตอนต่อ ๆ ไปในเล่มนี้จะพาทำสิ่งที่เหลือ ตั้งแต่วางแผน สั่งงาน AI ไปจนถึงเอาเว็บขึ้นออนไลน์
ถ้ายังไม่แน่ใจว่าเว็บนี้สร้างให้ใคร ไม่ต้องกังวล หน้าถัดไปคือแบบฝึกที่ผมใช้ทุกครั้งที่เริ่มงานใหม่ ใช้เวลาไม่ถึงสิบนาที และคำตอบจะอยู่กับเราไปจนเว็บเสร็จ
หน้านี้คือแบบฝึกเดียวของตอนแรก เลือกคนหนึ่งคน คนจริง ๆ ที่คุณนึกหน้าออก แล้วเขียนเกี่ยวกับเขาให้ได้ห้าบรรทัด นี่คือคนที่เว็บไซต์ของคุณสร้างให้ ตั้งแต่บรรทัดแรกของหน้าแรกไปจนถึงปุ่มสุดท้าย
คำว่า "คนเดียว" สำคัญ เว็บที่พยายามพูดกับทุกคนจะลงเอยด้วยการไม่พูดกับใครเลย ข้อความจะกลาง ๆ ปุ่มจะกลาง ๆ และคนที่เข้ามาจะรู้สึกว่าเว็บนี้ไม่ได้ทำมาเพื่อเขา แต่เว็บที่เขียนถึงคนคนเดียวอย่างชัดเจน กลับดึงคนที่คล้ายกันอีกหลายร้อยคนเข้ามาได้เอง
เขียนคำตอบเป็นภาษาพูดของคุณเอง ไม่ต้องสวย ไม่ต้องเป็นทางการ กระดาษแผ่นนี้ไม่มีใครเห็นนอกจากคุณกับ AI และ AI ชอบภาษาพูดที่ชัดมากกว่าภาษาสวยที่คลุมเครือ
ก่อนส่งคำตอบให้ AI ลองตรวจอีกครั้งว่าในห้าข้อนั้นมีคำที่ชี้เฉพาะอยู่จริงหรือไม่ เช่น "คนทั่วไป" "อยากได้ของดี" หรือ "ใช้งานง่าย" ยังบอกเป้าหมายไม่พอ ให้เปลี่ยนเป็นรายละเอียดที่สังเกตได้ เช่น "แม่ค้าที่ใช้มือถือเครื่องเดียวรับออร์เดอร์ระหว่างขายของ" แล้วระบุสิ่งที่เขาต้องการทำให้สำเร็จหนึ่งอย่าง
สมมติเครดิตเว็บนี้สร้างให้ร้านรับซ่อมจักรยานเล็ก ๆ ในหมู่บ้าน คำตอบห้าข้ออาจหน้าตาแบบนี้: คนที่เข้ามาคือคนในละแวกที่จักรยานเพิ่งเสียและอยากรู้ว่าร้านนี้ซ่อมได้ไหม เข้ามาจากการค้นหา Google บนมือถือ อยากรู้ก่อนเลยว่าร้านเปิดอยู่ไหมและอยู่ตรงไหน สิ่งที่ต้องทำสำเร็จคือกดโทรหรือกดแผนที่ และเขาจะปิดทิ้งทันทีถ้าหาเบอร์โทรไม่เจอภายในสามวินาที
สังเกตว่าคำตอบชุดนี้บอกเราแล้วว่าหน้าแรกต้องมีอะไร เบอร์โทรตัวใหญ่ เวลาเปิดปิด และปุ่มแผนที่ ยังไม่ต้องมีหน้าประวัติร้าน ไม่ต้องมีแกลเลอรีสิบรูป เว็บที่ดีสำหรับคนคนนี้อาจมีแค่หน้าเดียวก็พอ
เมื่อนำไปใช้จริง ให้ส่งข้อมูลนี้ให้ AI พร้อมคำสั่งว่า "สร้างหน้าแรกสำหรับคนกลุ่มนี้ โดยให้เขาเห็นเบอร์โทร เวลาเปิดปิด และปุ่มแผนที่ก่อนส่วนอื่น" จากนั้นตรวจผลบนมือถือด้วยตัวเองอีกครั้ง อย่าให้ AI เติมรายละเอียดที่คุณยังไม่รู้ เช่น ราคา ระยะเวลาซ่อม หรือบริการที่ร้านไม่ได้รับ เพราะข้อมูลที่ดูสมจริงแต่ไม่จริงจะทำให้คนคนนี้หมดความเชื่อถือทันที
เก็บกระดาษแผ่นนี้ไว้ให้ดี มันจะถูกใช้ซ้ำในทุกขั้นตอนของการสร้างเว็บ ตั้งแต่การตัดสินใจว่ามีกี่หน้า ไปจนถึงข้อความบนปุ่ม และมันคือส่วนที่ AI จะอ่านก่อนสิ่งอื่นใดทุกครั้งที่เราสั่งงาน
เว็บไซต์ทุกเว็บมี "งาน" ของมันหนึ่งงาน ไม่ใช่สิบงาน หน้านี้จะช่วยคุณเลือกงานเดียวนั้นให้ได้ เพราะเว็บที่พยายามทำหลายอย่างพร้อมกัน มักจะทำได้ไม่ดีสักอย่าง และคนที่เข้ามาก็จะไม่รู้ว่าควรกดตรงไหน
งานของเว็บคือการกระทำที่คุณอยากให้คนคนนั้นทำมากที่สุดหลังจากอ่านจบ สำหรับธุรกิจเล็ก ๆ ส่วนใหญ่ งานนี้มีอยู่ไม่กี่แบบ และเลือกได้ในหนึ่งนาทีถ้าคุณตอบได้แล้วว่าเว็บสร้างให้ใคร
ก่อนเลือกงาน ลองเขียนเส้นทางของคนหนึ่งคนสั้น ๆ ว่าเขามาจากไหน ต้องการอะไร และควรกดอะไรเป็นขั้นสุดท้าย เช่น ลูกค้าเห็นโพสต์ขนม เข้ามาดูรสชาติ แล้วกดสั่งทาง LINE หากเส้นทางนี้ชัด ปุ่มหลักและเนื้อหาบนหน้าแรกก็ควรพาเขาไปตามลำดับนั้น อย่าเพิ่มปุ่มอื่นเพียงเพราะมีพื้นที่เหลือ
| งานของเว็บ | เหมาะกับ | ปุ่มหลักบนหน้าแรก |
|---|---|---|
| ให้ติดต่อ | ร้านซ่อม ช่าง คลินิก บริการที่ต้องคุยก่อน | โทร / ทัก LINE |
| ให้จอง | ร้านอาหาร สตูดิโอ คอร์สสอน ที่พัก | จองคิว / เลือกวัน |
| ให้สั่งซื้อ | ร้านขนม สินค้าทำมือ ของฝาก | สั่งเลย / ดูสินค้า |
| ให้เชื่อถือ | ฟรีแลนซ์ ที่ปรึกษา บริษัทเล็กที่ลูกค้ามาจากการแนะนำ | ดูผลงาน / ดูรีวิว |
| ให้อ่าน | บล็อก คนที่แบ่งปันความรู้ พอร์ตโฟลิโอส่วนตัว | อ่านบทความ / ติดตาม |
เลือกแถวเดียว ถ้าคุณรู้สึกว่าอยากได้สองแถว ให้ถามว่าแถวไหนทำให้มีรายได้ หรือทำให้เป้าหมายของคุณสำเร็จโดยตรง แถวนั้นคืองานหลัก อีกแถวหนึ่งเป็นได้แค่ตัวเสริม
ร้านขนมที่บ้านของพี่แนน งานของเว็บคือ "ให้สั่งซื้อ" คนเข้ามาจากโพสต์ Instagram เห็นรูปขนมวันนี้ แล้วกดสั่งทาง LINE ได้เลย เว็บไม่ต้องเล่าประวัติร้าน ไม่ต้องมีหน้า "เกี่ยวกับเรา" ยาวสามย่อหน้า ทุกอย่างบนหน้าแรกมีไว้พาคนไปถึงปุ่มสั่งให้เร็วที่สุด
ฟรีแลนซ์ถ่ายภาพงานแต่ง งานของเว็บคือ "ให้เชื่อถือ" คนที่เข้ามาได้ชื่อจากเพื่อนมาแล้ว เขาแค่อยากเห็นผลงานสักสิบภาพแล้วตัดสินใจว่าจะทักไหม เว็บแบบนี้ภาพต้องใหญ่ โหลดเร็ว และปุ่มติดต่อต้องอยู่ท้ายแกลเลอรีพอดี ไม่ใช่ซ่อนอยู่ในเมนู
คลินิกทันตกรรมเล็ก ๆ งานของเว็บคือ "ให้จอง" คนที่ปวดฟันตอนสามทุ่มไม่อยากอ่านอะไรมาก เขาอยากรู้ว่าพรุ่งนี้มีคิวไหมและจะจองยังไง เว็บที่ดีสำหรับเขาคือปุ่มจองที่เห็นทันทีบนมือถือ กับเวลาเปิดที่ชัดเจน
ถ้ายังลังเล ให้ทดสอบด้วยการซ่อนชื่อร้านและอ่านข้อความบนหน้าแรก เหลือเพียงหัวข้อ ปุ่ม และคำอธิบายสั้น ๆ แล้วถามตัวเองว่า คนที่เข้ามาจะรู้หรือไม่ว่าต้องทำอะไรต่อ หากตอบไม่ได้ ให้ตัดปุ่มรองออกก่อน และเขียนปุ่มหลักเป็นคำกริยาที่เห็นผล เช่น "จองคิวพรุ่งนี้" หรือ "สั่งชุดทดลอง" แทนคำกว้าง ๆ อย่าง "คลิกที่นี่"
เมื่อรู้งานของเว็บแล้ว การตัดสินใจอื่น ๆ จะง่ายขึ้นทันที ปุ่มบนหน้าแรกควรเขียนว่าอะไร หน้าไหนจำเป็น หน้าไหนตัดได้ และเวลาบอก AI ว่าให้สร้างอะไร เราจะไม่ได้บอกแค่ว่า "เว็บร้านขนม" แต่บอกว่า "เว็บที่ทำให้คนกดสั่งขนมทาง LINE ได้ในสามคลิก" ซึ่งเป็นคำสั่งที่ AI ทำตามได้จริง
ตอนแรกจบด้วยการเขียนประโยคเดียว ประโยคนี้รวมทุกอย่างที่คุณคิดมาในตอนนี้ไว้ในบรรทัดเดียว และมันจะกลายเป็นบรรทัดแรกของทุก prompt ที่คุณจะพิมพ์ให้ AI ตลอดการสร้างเว็บนี้
เติมช่องว่างสี่ช่องต่อไปนี้ให้ครบ
เว็บไซต์นี้สร้างให้ [คนคนนั้น] ที่เข้ามาเพราะ [อยากรู้อะไร] เพื่อให้เขา [ทำอะไรสำเร็จ] โดยห้าม [สิ่งที่จะทำให้เขาปิดทิ้ง]
ก่อนเขียน ให้เลือกคนที่มีสถานการณ์ชัดเจนที่สุด ไม่ใช่คำกว้าง ๆ อย่าง “ทุกคน” จากนั้นลองอ่านประโยคออกเสียงหนึ่งรอบ หากยังตอบไม่ได้ว่าคนนั้นเข้ามาจากไหนหรือจะกดอะไรต่อ ให้เติมรายละเอียดเฉพาะจุดนั้นก่อน
ตัวอย่างที่กรอกเสร็จแล้วจากร้านขนมที่บ้าน: "เว็บไซต์นี้สร้างให้พนักงานออฟฟิศแถวสีลมที่กดมาจาก Instagram ตอนพักเที่ยง เพราะอยากรู้ว่าวันนี้มีขนมอะไรและราคาเท่าไร เพื่อให้เขากดสั่งทาง LINE ได้ในสามคลิก โดยห้ามให้เขาต้องเลื่อนหาปุ่มสั่งบนมือถือ"
ตัวอย่างจากร้านซ่อมจักรยาน: "เว็บไซต์นี้สร้างให้คนในหมู่บ้านที่จักรยานเพิ่งเสียและค้นหาจาก Google บนมือถือ เพราะอยากรู้ว่าร้านเปิดอยู่ไหมและอยู่ตรงไหน เพื่อให้เขากดโทรหรือกดแผนที่ได้ทันที โดยห้ามให้เบอร์โทรอยู่ต่ำกว่าครึ่งจอแรก"
เพราะทุกคำในประโยคนี้เป็นการตัดสินใจที่ AI ทำแทนเราไม่ได้ ใครคือคนอ่าน เขาต้องการอะไร อะไรคือความสำเร็จ และอะไรคือสิ่งต้องห้าม เมื่อสี่อย่างนี้ชัด ส่วนที่เหลือ ตั้งแต่โครงสร้างหน้า สี ฟอนต์ จนถึงโค้ดทั้งหมด คือสิ่งที่ AI ทำได้ดีอยู่แล้วและทำได้เร็วกว่าเรามาก
ผมใช้วิธีนี้กับทุกเว็บที่สร้าง และสังเกตว่างานที่ประโยคนี้ชัด จะเสร็จเร็วกว่างานที่ประโยคนี้คลุมเครือหลายเท่า ไม่ใช่เพราะ AI เก่งขึ้น แต่เพราะเราเลิกสั่งแก้ไปมาระหว่างทาง
หากมีคนหลายกลุ่ม ให้เริ่มจากกลุ่มที่มีโอกาสลงมือทำมากที่สุดก่อน เช่น เลือก “พนักงานออฟฟิศที่สั่งตอนพักเที่ยง” แทน “คนที่ชอบขนม” แล้วเก็บกลุ่มอื่นไว้ตรวจสอบภายหลัง ระวังอย่าใส่เป้าหมายหลายอย่างในช่อง “ทำอะไรสำเร็จ” เพราะเว็บจะไม่รู้ว่าควรพาผู้ชมไปสู่การสั่งซื้อ การโทร หรือการอ่านข้อมูลเป็นอันดับแรก
เก็บประโยคนี้ไว้ในที่ที่หยิบง่าย โน้ตในมือถือ หรือกระดาษแปะหน้าจอ ตอนต่อไปเราจะเอาประโยคนี้มาแตกเป็นแผนว่าเว็บควรมีกี่หน้า และแต่ละหน้ามีอะไร ก่อนจะให้ AI ลงมือสร้างของจริง
เว็บต้องมีกี่หน้า แต่ละหน้ามีอะไร และเตรียมวัตถุดิบอะไรบ้างก่อนให้ AI ลงมือ
คำถามแรกของการวางแผนเว็บไซต์คือ "ต้องมีกี่หน้า" และคำตอบที่ผมอยากให้จำไว้คือ น้อยที่สุดเท่าที่งานของเว็บยังสำเร็จ เว็บของธุรกิจเล็ก ๆ ส่วนใหญ่ต้องการแค่สามถึงห้าหน้า และหลายเว็บที่ดีมากมีแค่หน้าเดียว
คนที่เพิ่งเริ่มมักคิดกลับกัน อยากมีหน้าเยอะ ๆ เพราะดูเป็นเว็บจริงจัง แต่ทุกหน้าที่เพิ่มเข้ามาคืองานที่ต้องเขียนข้อความ หารูป ตรวจบนมือถือ และดูแลต่อไปอีกหลายปี หน้าที่ว่างเปล่าหรือเขียนครึ่ง ๆ กลาง ๆ ทำให้เว็บดูไม่น่าเชื่อถือกว่าการไม่มีหน้านั้นเลย
ก่อนเพิ่มหน้าใหม่ ลองเขียนเป้าหมายของผู้เข้าชมหนึ่งประโยค เช่น “เห็นบริการแล้วทัก LINE เพื่อขอราคา” จากนั้นตรวจว่าหน้าเดิมมีข้อมูลครบหรือยัง หากยังครบ ให้เพิ่มเป็นส่วนย่อยในหน้าเดิมก่อน ไม่ควรสร้างหน้าเพียงเพราะมีหัวข้อใหม่หนึ่งหัวข้อ
| หน้า | มีไว้ทำไม | จำเป็นไหม |
|---|---|---|
| หน้าแรก | บอกใน 5 วินาทีว่าเราคือใคร ทำอะไร และให้เขากดอะไรต่อ | ต้องมีเสมอ |
| สินค้า / บริการ | รายละเอียดสิ่งที่ขาย ราคา และวิธีสั่งหรือจอง | ต้องมี ถ้าขายมากกว่าหนึ่งอย่าง |
| ผลงาน / รีวิว | หลักฐานว่าเคยทำจริง คนอื่นพอใจจริง | ควรมี ถ้างานของเว็บคือ "ให้เชื่อถือ" |
| เกี่ยวกับเรา | เรื่องของคนที่อยู่หลังร้าน เหตุผลที่ทำสิ่งนี้ | มีได้ แต่สั้น |
| ติดต่อ | เบอร์ LINE แผนที่ เวลาเปิด และฟอร์ม | ต้องมี หรือรวมไว้ท้ายหน้าแรก |
วิธีตัดสินว่าหน้าไหนจำเป็น ให้กลับไปดูงานของเว็บ ถ้างานคือ "ให้ติดต่อ" หน้าแรกกับหน้าติดต่ออาจรวมเป็นหน้าเดียวได้เลย ถ้างานคือ "ให้สั่งซื้อ" หน้าสินค้าคือหัวใจ และหน้าเกี่ยวกับเราเป็นแค่ย่อหน้าเดียวท้ายหน้าแรกก็พอ
ลองทดสอบด้วยเส้นทางของลูกค้าหนึ่งคน: เข้ามาจาก Google หรือ LINE เห็นข้อเสนอ เข้าใจรายละเอียด แล้วติดต่อหรือสั่งซื้อ หากต้องเปิดหลายหน้าเพื่อหาคำตอบเดียวกัน ให้ย้ายข้อมูลสำคัญมาไว้ใกล้ปุ่มถัดไป แต่ระวังอย่ารวมทุกอย่างจนหน้าแรกยาวและหาจุดติดต่อไม่เจอ
เว็บหน้าเดียวที่เลื่อนลงมาเจอทุกอย่างตามลำดับ คือรูปแบบที่คนใช้มือถือชอบที่สุด เพราะไม่ต้องกดเมนู ไม่ต้องรอโหลดหน้าใหม่ ร้านซ่อมจักรยาน ฟรีแลนซ์ ร้านขนมที่บ้าน ทั้งหมดนี้ทำเว็บหน้าเดียวได้ดีมาก โดยแบ่งหน้าเป็นส่วน ๆ ที่เลื่อนลงมาเจอ แทนที่จะแยกเป็นหลายหน้า
เลือกเว็บหลายหน้าก็ต่อเมื่อมีเนื้อหาที่คนอยากเปิดแยกจริง ๆ เช่น ร้านที่มีสินค้าสามสิบชิ้น คอร์สที่มีรายละเอียดยาว หรือบล็อกที่เขียนบทความเรื่อย ๆ
หากแยกหน้าใหม่ ให้ตรวจสามอย่างก่อนส่งงานให้ AI: ชื่อนั้นสื่อความหมายในเมนูหรือไม่ ข้อมูลในหน้านั้นมีมากพอหรือไม่ และผู้เข้าชมมีเหตุผลชัดเจนที่จะเปิดหน้านั้นหรือไม่ ถ้าคำตอบข้อใดเป็น “ไม่” ให้เก็บเนื้อหาไว้ในหน้าเดิมก่อน
เขียนรายชื่อหน้าที่คุณตัดสินใจแล้วลงกระดาษ หนึ่งบรรทัดต่อหนึ่งหน้า ส่วนใหญ่จะได้สามถึงห้าบรรทัด นั่นคือขอบเขตทั้งหมดของเว็บที่เราจะสร้าง และเป็นรายการที่จะบอก AI ตรง ๆ ว่าให้สร้างหน้าอะไรบ้าง ไม่มากไปกว่านี้
เมื่อรู้แล้วว่ามีกี่หน้า ขั้นต่อไปคือตัดสินใจว่าแต่ละหน้ามีอะไรบ้าง เรียงจากบนลงล่าง หน้านี้ให้โครงของแต่ละหน้าที่ใช้ได้จริง คุณแค่เติมเนื้อหาของตัวเองลงไป
ทำไมต้องคิดตรงนี้ก่อนให้ AI สร้าง เพราะ AI จะสร้างหน้าที่ "ครบ" ตามความเข้าใจของมัน ซึ่งมักจะครบเกินไป มีส่วนที่เราไม่ต้องการ และขาดส่วนที่เราต้องการจริง การรู้โครงก่อนทำให้เราสั่งได้ตรง และแก้น้อย
ปุ่มหลักในข้อ 1 กับข้อ 5 ต้องเป็นปุ่มเดียวกัน คำเดียวกัน พาไปที่เดียวกัน คนที่อ่านจบแล้วตัดสินใจได้ ไม่ควรต้องเลื่อนกลับขึ้นไปหาปุ่ม
หน้าสินค้าหรือบริการ — แต่ละรายการมีรูปหนึ่งรูป ชื่อ ราคา คำอธิบายสองบรรทัด และปุ่มสั่งหรือจอง เรียงรายการที่ขายดีที่สุดไว้บนสุด ไม่ใช่เรียงตามตัวอักษร
หน้าผลงานหรือรีวิว — รูปใหญ่ คำบรรยายสั้น และประโยคจากลูกค้าจริงพร้อมชื่อหรือชื่อร้าน สิบชิ้นที่ดีที่สุดดีกว่าห้าสิบชิ้นที่ปนกัน
หน้าเกี่ยวกับเรา — รูปคนจริงหนึ่งรูป กับเรื่องเล่าสามย่อหน้า ทำไมถึงเริ่ม ทำมานานแค่ไหน และตั้งใจอะไรกับลูกค้า เขียนเหมือนเล่าให้เพื่อนฟัง
หน้าติดต่อ — ทุกช่องทางที่ตอบจริง ถ้าไม่เคยเช็กอีเมล อย่าใส่อีเมล แผนที่ที่กดแล้วเปิดนำทางได้ และเวลาเปิดที่ตรงกับความจริง
เขียนโครงของทุกหน้าลงกระดาษแผ่นเดิม ใต้ชื่อหน้าแต่ละหน้า ยังไม่ต้องเขียนข้อความจริง แค่ระบุว่าส่วนนี้มีอะไร เช่น "รูปขนม 6 ชนิด + ราคา + ปุ่ม LINE" โครงนี้จะกลายเป็นคำสั่งที่ AI เข้าใจได้โดยแทบไม่ต้องแปลง
AI สร้างโครงเว็บได้ในนาทีเดียว แต่สิ่งที่ทำให้เว็บนั้นเป็นของคุณจริง ๆ คือวัตถุดิบที่มีแต่คุณเท่านั้นที่มี ข้อความจริง รูปจริง ราคาจริง ช่องทางติดต่อจริง หน้านี้คือรายการที่ต้องเตรียมให้ครบก่อนลงมือ
ผมเรียนรู้เรื่องนี้จากการทำผิด เคยให้ AI สร้างเว็บก่อนแล้วค่อยหารูปทีหลัง ผลคือได้เว็บที่เต็มไปด้วยรูปตัวอย่างสีเทากับข้อความ "ใส่ข้อความที่นี่" ค้างอยู่อย่างนั้นหลายสัปดาห์ เพราะพอเว็บดูเสร็จแล้ว แรงจูงใจที่จะไปถ่ายรูปก็หายไป
| วัตถุดิบ | เตรียมอย่างไร |
|---|---|
| ชื่อร้านหรือชื่อคุณ | สะกดให้ตรงกันทุกที่ ทั้งไทยและอังกฤษ ถ้ามีสองแบบ |
| โลโก้ | ไฟล์ PNG พื้นหลังโปร่ง ถ้ายังไม่มี ใช้ชื่อร้านตัวหนังสือธรรมดาไปก่อนได้ |
| รูปภาพ | รูปจริงของสินค้า ร้าน หรือคุณ 5–10 รูป ถ่ายแนวนอนด้วยแสงธรรมชาติ |
| ข้อความหลัก | ประโยคเดียวว่าทำอะไรให้ใคร กับสามข้อว่าทำไมต้องเป็นเรา |
| รายการสินค้าหรือบริการ | ชื่อ ราคา คำอธิบายสองบรรทัด ต่อหนึ่งรายการ |
| ช่องทางติดต่อ | เบอร์โทร LINE ID หรือลิงก์ LINE แผนที่ Google Maps เวลาเปิด |
| รีวิวหรือผลงาน | ประโยคจากลูกค้าจริง 3 ประโยค พร้อมชื่อที่เขายินยอมให้ใช้ |
สร้างโฟลเดอร์หนึ่งโฟลเดอร์บนเครื่อง ตั้งชื่อเป็นชื่อเว็บ ข้างในมีโฟลเดอร์ย่อยชื่อ images สำหรับรูปทั้งหมด และไฟล์ข้อความหนึ่งไฟล์ที่รวมข้อความทุกอย่างจากตารางข้างบน โฟลเดอร์นี้คือสิ่งที่เราจะเปิดให้ AI เห็นตอนเริ่มสร้าง มันจะหยิบรูปและข้อความจากตรงนี้ไปใช้ได้เอง
ตั้งชื่อไฟล์รูปเป็นภาษาอังกฤษ ตัวพิมพ์เล็ก ไม่มีเว้นวรรค และบอกว่ารูปอะไร เช่น shop-front.jpg, cake-chocolate.jpg, owner.jpg ชื่อแบบ IMG_4821.jpg บอกอะไรไม่ได้เลย ทั้งกับคุณและกับ AI
เรื่องขนาดรูป โทรศัพท์สมัยนี้ถ่ายรูปได้ใหญ่มาก ใหญ่เกินกว่าที่เว็บต้องการ ยังไม่ต้องย่อเองตอนนี้ AI จัดการให้ได้ตอนสร้างเว็บ แค่อย่าส่งรูปที่เบลอหรือมืดไป เพราะนั่นแก้ทีหลังไม่ได้
ถ้ายังมีช่องว่างในตาราง ให้เว้นไว้และจดว่าขาดอะไร อย่ารอให้ครบร้อยเปอร์เซ็นต์ค่อยเริ่ม รูปรีวิวสามารถเติมทีหลังได้ แต่ชื่อ ราคา และช่องทางติดต่อต้องมีก่อน เพราะสามอย่างนี้คือสิ่งที่คนเข้าเว็บมาหา
ปิดตอนนี้ด้วยการวาด ไม่ใช่การพิมพ์ เอากระดาษเปล่าแผ่นเดียว วาดกล่องสี่เหลี่ยมแทนแต่ละหน้า แล้วลากเส้นเชื่อมว่าหน้าไหนกดไปหน้าไหน นี่คือแผนผังเว็บ (sitemap) ของคุณ และมันคือภาพที่ AI จะได้เห็นเป็นอย่างแรก
เหตุผลที่วาดบนกระดาษ ไม่ใช่ในโปรแกรม เพราะกระดาษบังคับให้เราคิดแค่สิ่งสำคัญ ถ้าวาดแล้วมีมากกว่าเจ็ดกล่อง แปลว่าเว็บใหญ่เกินกว่าที่ควรเริ่ม กลับไปตัด
แผนผังของพี่แนนมีสี่กล่อง หน้าแรกอยู่บน ข้างล่างคือ "ขนมวันนี้" "รีวิวลูกค้า" และ "ติดต่อ" ลูกศรหนาจากปุ่ม "สั่งทาง LINE" ชี้ออกไปนอกเว็บที่ไอคอน LINE เพราะงานของเว็บนี้จบที่การกดทักแชต ไม่ใช่การอยู่บนเว็บนาน ๆ
ในกล่องหน้าแรกเขียนไว้ว่า รูปขนมเด่นวันนี้ ประโยคหลัก ปุ่มสั่ง สามเหตุผล รีวิวสองประโยค และท้ายหน้ามีเวลาเปิดกับ LINE ทั้งหมดนี้อยู่บนกระดาษแผ่นเดียว ถ่ายรูปเก็บไว้ในโฟลเดอร์เว็บได้เลย
ถึงตรงนี้คุณมีของสามอย่างที่คนสร้างเว็บส่วนใหญ่ไม่มีตอนเริ่ม ประโยคเดียวที่บอกว่าเว็บสร้างให้ใครและต้องทำอะไรให้เขาสำเร็จ รายชื่อหน้ากับโครงของแต่ละหน้า และโฟลเดอร์วัตถุดิบที่พร้อมใช้ สามอย่างนี้คือแผนทั้งหมด และมันคือสิ่งที่จะทำให้การสั่งงาน AI ในตอนต่อ ๆ ไปเป็นเรื่องตรงไปตรงมา
เปิดให้อ่านทีละบท — กลับมาที่ลิงก์เดิมได้เลย เนื้อหาจะเพิ่มในเล่มนี้เอง
ดูสารบัญทั้งเล่ม · ติดตามตอนใหม่ที่ IG @dadworkofficial
