การทำเว็บหน้าเดียวให้ร้านค้าของตัวเอง ตอนนี้ทำเองได้ แค่พิมพ์คุยกับ Claude ผู้ช่วย AI ของ Anthropic

สำหรับเจ้าของร้านขนาดเล็กที่อยากมีหน้าเว็บให้ลูกค้าเข้ามาดูเมนูและเช็กเวลาเปิดร้าน แต่ไม่อยากเสียเงินจ้างทำเว็บ และไม่มีเวลาเรียนเขียนโค้ด สิ่งที่ต้องทำมีแค่พิมพ์เล่าข้อมูลร้านให้ Claude ฟังย่อหน้าเดียว เหมือนเล่าให้เพื่อนฟัง แล้ว Claude จะสร้างหน้าเว็บให้ทั้งหน้า

แต่จุดที่พลาดง่ายคือตอนส่งลิงก์ให้ลูกค้า เพราะลิงก์ที่ได้จากปุ่ม Share ใน Claude นั้น เปิดดูได้เฉพาะคนที่ล็อกอินบัญชี Claude อยู่เท่านั้น ลูกค้าทั่วไปที่ไม่มีบัญชีจะเปิดไม่ได้เลย ถ้าอยากให้ทุกคนเปิดดูได้ เราต้องดาวน์โหลดไฟล์หน้าเว็บออกมา แล้วนำไปลากวางที่ Netlify Drop ที่เป็นบริการขึ้นเว็บของ Netlify รอเพียงไม่กี่วินาทีก็จะได้ลิงก์เว็บจริง

แกะโครงสร้างพรอมต์ทำเว็บร้าน แบ่งได้เป็น 5 ส่วน

จุดเริ่มต้นมีแค่เปิดแชตใหม่ แล้วพิมพ์พรอมต์สั้นๆ เพียงย่อหน้าเดียว ในคลิปสอนทำเว็บแบบไม่เขียนโค้ดของช่อง ELAS AI เขาใช้พรอมต์ภาษาอังกฤษสั่งทำเว็บให้คาเฟ่เล็กๆ ชื่อ Cafe Zellige ในเมืองมาราเกช ประเทศโมร็อกโก ดังนี้

Make a one-page website for a small cafe in Marrakech called Cafe Zellige. Modern design and warm colors. A big welcome header, a menu with prices in dirhams, opening hours, the location, and a WhatsApp button to book a table. And it must look great on phones.

พรอมต์นี้อ่านดูเหมือนบรีฟงานให้คนทั่วไปฟัง โดยไม่มีคำสั่งทางเทคนิคเลยแม้แต่คำเดียว ถ้าลองแยกรายละเอียดออกมา จะเห็นว่ามี 5 ส่วนหลักที่นำไปปรับใช้กับร้านอะไรก็ได้:

สำหรับส่วนที่ 4 เจ้าของร้านต้องตัดสินใจเอง โดยเลือกช่องทางที่ร้านใช้อยู่และมีคนคอยตอบจริงๆ ในคลิปเลือกใช้ WhatsApp แต่ถ้าร้านของเราในไทยคุยกับลูกค้าทาง LINE ก็ควรเปลี่ยนเป็นปุ่ม LINE เพราะถ้าใส่ช่องทางที่ร้านไม่ได้เปิดอ่าน ลูกค้าทักมาก็ไม่มีใครตอบ

เมื่อนำมาปรับใช้กับร้านในไทย เราใช้โครงสร้างเดิมทั้ง 5 ส่วนได้เลย แค่เปลี่ยนรายละเอียด เช่น แสดงราคาเป็นเงินบาท เปลี่ยนปุ่มติดต่อเป็นปุ่มเพิ่มเพื่อน LINE แทน WhatsApp และเพิ่มปุ่ม Google Maps เพื่อให้ลูกค้ากดดูเส้นทาง ด้านล่างนี้คือตัวอย่างพรอมต์ภาษาไทยที่เราเขียนขึ้นเอง ไม่ได้มาจากคลิป ใส่ชื่อร้านกับย่านของจริงแทนส่วนในวงเล็บเหลี่ยม แล้วแก้ประเภทร้านกับโทนสีในพรอมต์ให้ตรงกับร้านของคุณได้เลย:

ช่วยทำเว็บหน้าเดียวให้ร้านข้าวมันไก่เล็กๆ ชื่อ [ชื่อร้าน] อยู่ที่ [ย่าน จังหวัด] ดีไซน์ทันสมัย โทนสีครีมกับเขียวอ่อน มีส่วนต้อนรับใหญ่ด้านบน เมนูพร้อมราคาเป็นบาท เวลาเปิด-ปิด และที่ตั้งร้าน มีปุ่ม Google Maps ให้ลูกค้ากดดูทาง และปุ่มแอด LINE ของร้านไว้สั่งอาหารหรือถามข้อมูล ต้องดูดีบนมือถือด้วย

หน้าเว็บที่ Claude สร้างขึ้นมาเรียกว่า artifact เป็นหน้าต่างชิ้นงานที่แสดงผลอยู่ข้างๆ ช่องแชต เราคลิกดู สั่งแก้ไขต่อ หรือกลับมาเปิดใหม่ได้ เอกสารของ Claude ระบุว่าฟีเจอร์ artifact ใช้งานได้ทุกแพ็กเกจ รวมถึงแพ็กเกจฟรี แต่ก่อนจะส่งพรอมต์ ให้ตรวจสอบในหน้าตั้งค่า Settings > Capabilities ว่าได้เปิดสวิตช์สำหรับสร้างไฟล์และประมวลผลโค้ดอย่าง Cloud code execution and file creation ไว้แล้วหรือยัง เพราะ artifact ต้องเปิดตัวเลือกนี้ก่อนเสมอ

ได้หน้าเว็บทั้งหน้าในแชตเดียว และสั่งปรับแต่งต่อได้โดยไม่ต้องแตะโค้ด

ในคลิปตัวอย่าง หลังจากกดส่งพรอมต์ไปประมาณ 2 นาที หน้าเว็บของ Cafe Zellige ก็เสร็จสมบูรณ์ ส่วนหัวเว็บเป็นสีเขียวเข้มลายกระเบื้อง zellige ตามชื่อร้าน มีรายการเมนูพร้อมราคาเป็นสกุลเงินเดอร์แฮมของโมร็อกโก มีเวลาเปิดร้าน การ์ดบอกเส้นทางพร้อมปุ่ม Google Maps และด้านล่างสุดมีปุ่มขนาดใหญ่สำหรับจองโต๊ะผ่าน WhatsApp

หลังจากได้หน้าเว็บมาแล้ว เราปรับแต่งต่อได้ 2 วิธี วิธีแรกคือพิมพ์สั่งต่อในช่องแชตเดิม เช่น ในคลิปพิมพ์สั่งเพิ่มส่วนเมนูขายดี 3 รายการพร้อมรูปภาพขนาดใหญ่ และสั่งให้ขยายปุ่ม WhatsApp ให้ใหญ่ขึ้น Claude ก็จะอัปเดตหน้าเว็บเพิ่มส่วนเมนูขายดีมาให้ พร้อมเว้นกรอบสี่เหลี่ยมไว้สำหรับนำรูปอาหารจริงของร้านมาใส่

วิธีที่สองคือคลิกที่ข้อความบนหน้าเว็บตรงๆ แล้วพิมพ์แก้ไขได้ทันที วิธีนี้เหมาะสำหรับปรับแก้เล็กๆ น้อยๆ เช่น แก้ราคาอาหาร หรือเปลี่ยนชื่อเมนู

อย่างไรก็ตาม ข้อมูลจริงของร้านยังคงเป็นหน้าที่ของเจ้าของร้านที่ต้องจัดการเอง ในคลิปบอกไว้ชัดเจนว่าตรงที่อยู่ต้องกรอกที่อยู่จริง และช่องใส่รูปก็ต้องเปลี่ยนเป็นรูปอาหารจริงของทางร้าน ก่อนจะนำลิงก์ไปส่งต่อให้ใครดู จึงต้องตรวจเช็กที่อยู่ เบอร์โทรศัพท์ และรูปภาพของร้านให้ครบถ้วน

ลิงก์จากปุ่ม Share เปิดได้เฉพาะคนที่มีบัญชี Claude

ขั้นตอนถัดมาในคลิปคือกดปุ่ม Share แล้วเปลี่ยนหัวข้อกำหนดสิทธิ์เข้าถึงอย่าง general access เป็นตัวเลือก Anyone with the link เพื่อให้ทุกคนที่มีลิงก์เปิดดูได้ พร้อมทั้งบอกว่าเมื่อตั้งค่าแล้ว ใครๆ ก็เปิดเว็บนี้ได้ จะส่งทาง WhatsApp หรือนำไปแปะไว้บนหน้าโปรไฟล์ Instagram ก็ได้ แต่เอกสาร Share artifacts ของ Claude มีเงื่อนไขสำคัญที่เจ้าของร้านต้องรู้ก่อนนำลิงก์ไปใช้งาน

เอกสารของ Claude ระบุว่า artifact ทุกชิ้นจะเป็นส่วนตัว หรือ Private ตั้งแต่แรกเสมอ ไม่มีใครมองเห็นจนกว่าเราจะกดแชร์ วิธีแชร์คือเปิด artifact ขึ้นมา กดปุ่ม Share แล้วเลือกในหัวข้อ Who has access ว่าจะอนุญาตให้ใครเปิดได้บ้าง ซึ่งก็คือส่วน general access ในคลิป จากนั้นจึงคัดลอกลิงก์ไปส่งต่อ สำหรับแพ็กเกจ Pro และ Max จะมีตัวเลือกให้ตั้งค่าได้ 2 แบบ คือ Only you สำหรับเปิดดูคนเดียว และ Anyone with the link สำหรับทุกคนที่มีลิงก์

แต่ในหัวข้อที่อธิบายว่าใครเปิดดู artifact ที่แชร์ได้บ้าง เอกสารระบุไว้อย่างชัดเจนด้วยประโยคนี้:

นั่นหมายความว่า คำว่า Anyone with the link ตามเอกสารของ Claude หมายถึง "ทุกคนที่มีลิงก์และล็อกอินบัญชี Claude อยู่แล้ว" ไม่ใช่คนทั่วไปทุกคนบนอินเทอร์เน็ต ลิงก์จากปุ่มนี้จึงเหมาะสำหรับส่งให้เพื่อนหรือหุ้นส่วนที่มีบัญชี Claude ช่วยตรวจดูความเรียบร้อยของหน้าเว็บก่อนนำไปใช้งานจริง แต่ไม่เหมาะสำหรับนำไปแปะบนหน้าโปรไฟล์ Instagram ให้ลูกค้าเปิดดู

อีกเรื่องหนึ่งที่ควรรู้คือ การตั้งค่าแชร์นี้ยังทำในแอปพลิเคชัน Claude บนมือถือ ทั้งบนระบบ iOS และ Android ไม่ได้ ถ้าต้องการตั้งค่า ต้องทำผ่าน Claude บนเว็บเบราว์เซอร์ หรือผ่านโปรแกรม Claude Desktop บนคอมพิวเตอร์เท่านั้น

Share กับ Publish คนละปุ่มและคนละเงื่อนไข

ถ้าเคยได้ยินคนบอกว่า ลิงก์ artifact ของ Claude ใครๆ ก็เปิดดูได้โดยไม่ต้องมีบัญชี เรื่องนั้นจริงเฉพาะกับชิ้นงานรุ่นเก่าที่กด Publish แล้ว ชิ้นงานรุ่นเก่านี้ Claude เรียกว่า legacy artifact คือ artifact ที่สร้างขึ้นในแชตก่อนวันที่ 16 กันยายน 2026

จุดที่ชวนสับสนคือบนแพ็กเกจ Free, Pro และ Max artifact รุ่นเก่าจะมีปุ่มชื่อ Publish แทนปุ่ม Share โดยลิงก์ที่ได้จากปุ่ม Publish นั้น ใครก็เปิดดูและใช้งานได้โดยไม่ต้องมีบัญชี Claude แม้ว่าทั้งสองปุ่มจะทำหน้าที่แชร์งานเหมือนกัน แต่กลุ่มคนที่เข้าถึงได้กลับต่างกันโดยสิ้นเชิง

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

วิธีนำเว็บขึ้นออนไลน์จริงด้วย Netlify Drop ทีละขั้นตอน

ในคลิปพูดถึงอีกหนึ่งทางเลือกไว้สั้นๆ ว่า ดาวน์โหลดไฟล์ไปโฮสต์ที่ไหนก็ได้ โฮสติ้งคือบริการรับฝากไฟล์เว็บไว้บนอินเทอร์เน็ต ให้คนอื่นเปิดดูผ่านลิงก์ได้ ทางนี้จึงไม่ผูกกับบัญชี Claude ของคนที่เปิดลิงก์

บริการ Netlify Drop ช่วยให้เราทำขั้นตอนนี้ได้ง่ายๆ เพียงแค่ลากโฟลเดอร์ไปวาง ทาง Netlify เองก็ระบุว่า Netlify Drop เป็นตัวเลือกยอดนิยมสำหรับคนที่ต้องการขึ้นเว็บจากโค้ดที่เครื่องมือ AI สร้างขึ้น ขั้นตอนทั้งหมดมีเพียงเท่านี้:

1. ดาวน์โหลดไฟล์หน้าเว็บออกมาจาก Claude
2. สร้างโฟลเดอร์ใหม่ขึ้นมา 1 โฟลเดอร์ แล้วย้ายไฟล์หน้าเว็บที่ดาวน์โหลดมาไปใส่ไว้ในนั้น
3. เปลี่ยนชื่อไฟล์หน้าหลักให้เป็น index.html ข้อนี้เป็นคำแนะนำที่เราเพิ่มเอง เพราะเอกสารของ Netlify ระบุว่า ถ้าไม่มีไฟล์นี้อยู่ในโฟลเดอร์ชั้นบนสุด หน้าเว็บอาจแสดงผลไม่ถูกต้อง
4. เปิดเว็บเบราว์เซอร์แล้วเข้าไปที่ app.netlify.com/drop
5. ลากทั้งโฟลเดอร์ หรือไฟล์ zip ของโฟลเดอร์นั้น ไปวางลงในช่อง Drop zone
6. รอระบบประมวลผลไม่กี่วินาที ก็จะได้ลิงก์เว็บจริงที่ลงท้ายด้วย netlify.app

ก่อนจะลากไฟล์ไปวาง มีเรื่องสำคัญเรื่องเดียวที่เราต้องตัดสินใจ คือจะล็อกอินเข้าสู่ระบบ Netlify ก่อนหรือไม่ โดยแต่ละแบบมีสิ่งที่ต้องจัดการต่อดังนี้:

• ลากวางทันทีโดยไม่ล็อกอิน: ทำได้รวดเร็ว แต่ Netlify จะล็อกหน้าเว็บไว้ด้วยรหัสผ่านชั่วคราว ทำให้คนอื่นยังเปิดดูไม่ได้ จนกว่าเราจะ claim หรือยืนยันความเป็นเจ้าของโปรเจกต์ ด้วยการสมัครสมาชิกหรือล็อกอินเข้าสู่ระบบ
• ล็อกอินก่อน หรือ claim เรียบร้อยแล้ว: ใครจะเห็นเว็บได้บ้างขึ้นอยู่กับแพ็กเกจที่ใช้ แพ็กเกจแบบ Credit-based ที่คิดเป็นเครดิตครอบคลุมทั้ง Free, Personal และ Pro ในแพ็กเกจกลุ่มนี้ ถ้าทีมของคุณเปิดตัวเลือก Private by default ที่ตั้งค่าเริ่มต้นให้เป็นส่วนตัวไว้ โปรเจกต์จะยังเป็นส่วนตัว ทำให้เห็นได้เฉพาะตัวเราและสมาชิกในทีมเท่านั้น จนกว่าจะเข้าไปเปลี่ยนสถานะเป็นสาธารณะ หรือ Public ส่วนตัวเลือกนี้จะเปิดไว้ตั้งแต่แรกหรือไม่ ขึ้นอยู่กับว่าสร้างทีมไว้ตอนไหน

ถ้ามองข้ามขั้นตอนนี้ไป ลิงก์ netlify.app ที่ยังติดรหัสผ่านหรือยังตั้งเป็นส่วนตัวอยู่ ลูกค้าก็จะเปิดดูไม่ได้ ไม่ต่างจากปัญหาของลิงก์จากปุ่ม Share ในตอนแรก

อัปเดตเว็บรอบถัดไป ลิงก์เดิมไม่เปลี่ยน

เมื่อเรากลับไปแก้ไขหน้าเว็บใน Claude แล้วดาวน์โหลดไฟล์เวอร์ชันใหม่ออกมา ให้เปิดเข้าไปที่หน้าโปรเจกต์เดิมใน Netlify แล้วลากโฟลเดอร์ที่อัปเดตแล้วไปวางลงในส่วน Production deploys หน้าเว็บจะอัปเดตข้อมูลใหม่ให้อัตโนมัติ และลิงก์เว็บไซต์เดิมก็ยังใช้งานได้ตามปกติ ไม่ต้องตามไปแก้ลิงก์ที่แปะไว้ในโปรไฟล์โซเชียลมีเดียเลย

เรื่องขนาดไฟล์ก็มีผลเช่นกัน เอกสารของ Netlify แนะนำว่า ขนาดของโฟลเดอร์ทั้งหมดรวมกันไม่ควรเกิน 50MB เพื่อให้ระบบทำงานได้ดีที่สุด และไม่ควรมีไฟล์ใดไฟล์หนึ่งอย่างเช่นรูปภาพ ที่มีขนาดเดี่ยวๆ เกิน 10MB เพราะอาจทำให้ขั้นตอนการนำเว็บขึ้นระบบค้างได้

เว็บแบบนี้เหมาะกับใคร: ร้านขนาดเล็ก พอร์ตโฟลิโอ หรืองานอีเวนต์

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

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

ถ้าต้องการทำหน้าเว็บโปรโมตสินค้าอย่าง Landing Page ที่เน้นงานดีไซน์สวยงามเป็นพิเศษ Claude ยังมีเทมเพลต Design ให้ใช้งานได้ในทุกแพ็กเกจ โดยส่งออกงานเป็นไฟล์ HTML ที่เปิดเดี่ยวๆ ได้ อ่านเรื่อง Claude Design เพิ่มเติมได้ในบทความของเรา

ส่วนใครที่อยากศึกษาต่อยอดไปจนถึงการทำเว็บหลายหน้า หรือสร้างเว็บแอปพลิเคชัน แนะนำให้อ่านคู่มือสำหรับมือใหม่ที่เราสรุปไว้ในบทความ Claude Code พื้นฐาน

เช็กลิสต์ 5 ข้อที่ต้องตรวจทานก่อนส่งลิงก์ให้ลูกค้า

• เปิดดูเว็บบนหน้าจอมือถือของตัวเอง แล้วเลื่อนตรวจดูตั้งแต่บนสุดจนล่างสุด
• ตรวจสอบชื่อร้าน ที่อยู่ เวลาเปิด-ปิด และราคาสินค้าให้ถูกต้องครบถ้วน
• ทดลองกดปุ่มติดต่อทุกปุ่ม เช่น ปุ่มแอด LINE หรือปุ่ม Google Maps แล้วดูว่าเปิดไปยังช่องทางของร้านได้จริง
• เปลี่ยนรูปภาพประกอบทั้งหมดให้เป็นรูปถ่ายจริงของร้าน
• ทดลองเปิดลิงก์ในหน้าต่างที่ไม่ระบุตัวตน หรือ Incognito window ที่ไม่ได้ล็อกอินบัญชีใดๆ ไว้

การตรวจเช็กข้อสุดท้ายจะช่วยแก้ปัญหาได้พร้อมกันทั้งสองจุด ทั้งลิงก์ Share ที่บังคับให้ต้องมีบัญชี Claude และลิงก์ Netlify ที่อาจยังติดรหัสผ่านหรือยังตั้งเป็นส่วนตัวอยู่

หน้าเว็บเดียวกันสร้างลิงก์ออกมาได้สองแบบ ลิงก์หนึ่งเปิดได้เฉพาะคนที่ใช้ Claude แต่อีกลิงก์หนึ่งลูกค้าทุกคนเปิดได้ ทุกวันนี้ ความท้าทายของการทำเว็บให้ร้านค้าจึงไม่ได้อยู่ที่การเขียนโค้ดอีกต่อไป แต่อยู่ที่การเลือกวิธีนำไฟล์ขึ้นเว็บเพื่อให้ได้ลิงก์ที่ลูกค้าทุกคนเปิดได้จริง

ที่มา:

• คลิป I Made a Website With AI, No Code (Claude Tutorial) จากช่อง ELAS AI
• บทความ Share artifacts จาก Claude Help Center
• บทความ What are artifacts and how do I use them? จาก Claude Help Center
• บทความ Netlify Drop Quickstart จาก Netlify Docs
• บทความ Netlify Drop vs Vercel Drop จาก Netlify