ทำเว็บด้วย Claude

ทำเว็บไซต์ด้วย Claude Code ยังไง ฉบับคนไม่เขียนโค้ด

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

Patrick

Patrick

อัปเดต 2026-07-23 · อ่าน 28 นาที

คำตอบสั้นๆ

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

ขั้นที่คนส่วนใหญ่ข้ามคือขั้นสุดท้าย และนั่นคือสาเหตุที่เว็บซึ่ง AI ทำให้ "ดูเสร็จ" แต่ยังไม่เสร็จจริง

ทำเว็บไซต์ด้วย Claude Code ต้องมีอะไรบ้าง

สามอย่างเท่านั้นครับ

สิ่งที่ต้องมี รายละเอียด ค่าใช้จ่าย
คอมพิวเตอร์ Mac หรือ Windows — iPad และแท็บเล็ตใช้ไม่ได้ เพราะ Claude Code รันได้เฉพาะบนคอมพิวเตอร์ มีอยู่แล้ว
บัญชี Claude แบบ Pro ขั้นต่ำที่ใช้ Claude Code ได้ ถ้าทำเว็บเดียวจบ เดือนเดียวก็พอ ไม่ต้องต่อ 20 ดอลลาร์/เดือน (ราว 650-700 บาท)
อินเทอร์เน็ต + พื้นฐานคอมพิวเตอร์ ระดับเปิดไฟล์ เปิดโฟลเดอร์เป็น แค่นั้นจริงๆ ฟรี

สังเกตว่าไม่มีข้อไหนบอกว่าต้องเขียนโค้ดเป็น และไม่มีข้อไหนบอกว่าต้องเรียนสายคอมพิวเตอร์มาก่อน

ทำเว็บไม่ต้องเขียนโค้ด ทำได้จริงไหม

ได้จริงครับ และผมอยากอธิบายว่ามันได้จริงยังไง เพราะประโยคนี้ถูกใช้ขายของบ่อยจนฟังดูเกินจริงไปแล้ว

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

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

พูดอีกแบบคือ AI รับหน้าที่ช่างเทคนิค ส่วนคุณยังเป็นเจ้าของร้านอยู่เหมือนเดิม

ขั้นที่ 1 เตรียมเครื่องมือและที่เก็บงาน

สิ่งที่ต้องติดตั้งคือ Claude Desktop ไม่ใช่ Claude ในเว็บเบราว์เซอร์ เพราะเวอร์ชันเว็บมองไม่เห็นไฟล์ในเครื่องคุณ ส่วนเวอร์ชัน Desktop มองเห็นทั้งโฟลเดอร์ที่คุณอนุญาต และแก้ไฟล์ในนั้นได้โดยตรง

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

อีกอย่างที่ควรทำตั้งแต่ต้นคือ ผูกงานไว้กับ GitHub ฟังดูน่ากลัวแต่ไม่มีอะไรเลย GitHub คือที่เก็บประวัติการแก้งานทุกครั้ง เหมือนปุ่ม undo ที่ย้อนได้ไม่จำกัด และไม่หายแม้คอมพัง

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

แต่ผลที่ต่างกันจริงๆ คือความกล้า คนที่ไม่มีที่ย้อนกลับจะไม่กล้าลองอะไรเลยเพราะกลัวพัง คนที่มีจะกล้าลองทุกอย่าง เพราะพังแล้วกลับมาได้

ขั้นที่ 2 วางแผนก่อนให้ Claude ลงมือ

ขั้นนี้ใช้เวลา 10 นาที แต่เซฟเวลาได้เป็นชั่วโมง

ตอบสองคำถามให้ได้ก่อน

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

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

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

เคสจริง: จ่าย 15,000 บาท เพื่อแก้ตัวเลขราคา

คนรู้จักผมให้ AI ทำเว็บด้วยเครื่องมือที่ออกแบบมาสำหรับแอปขนาดใหญ่ ทั้งที่เขาต้องการแค่หน้าเดียวบอกราคา

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

สุดท้ายต้องจ่ายให้โปรแกรมเมอร์ 500 ดอลลาร์ หรือราว 15,000 บาท เพื่อแก้หน้าบอกราคาแค่ไม่กี่จุด

สำหรับเว็บ landing page ของธุรกิจทั่วไป HTML กับ CSS ธรรมดาเพียงพอแล้ว การใช้ของใหญ่กว่านั้นก็เหมือนสร้างครัวระดับอุตสาหกรรมเพื่อทำข้าวไข่เจียวกินเองที่บ้าน

ขั้นที่ 3 ให้ Claude เขียนข้อความ แล้วค่อยออกแบบ

ลำดับนี้สลับไม่ได้ครับ เขียนก่อน ออกแบบทีหลัง

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

สิ่งแรกที่คนเห็นเมื่อเปิดเว็บคือ headline และกฎง่ายๆ มีสามข้อ

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

เทียบให้เห็นภาพชัดๆ ครับ

แบบที่อ่านแล้วยังไม่รู้อะไร เปลี่ยนเป็น
คอร์สเรียนทำขนม เรียนทำเค้กให้สวยขายได้ใน 3 วัน แม้ไม่เคยจับแป้งมาก่อน
บริการให้คำปรึกษาด้านการเงินครบวงจร ช่วยฟรีแลนซ์ไทยจัดการภาษีก่อนเดือนมีนาคม
นวัตกรรมใหม่สำหรับชีวิตยุคดิจิทัล เครื่องชงกาแฟพกพา 3 นาที สำหรับสายตื่นเช้าที่ต้องรีบออกจากบ้าน
Portfolio นักออกแบบกราฟิก ประสบการณ์ 5 ปี ออกแบบโลโก้ให้แบรนด์ไทย 80+ ราย งบไม่เกิน 8,000 บาท ส่งงานใน 7 วัน

สังเกตว่าคอลัมน์ขวาไม่ได้เขียนสวยกว่า แค่ตอบให้ครบว่า ทำอะไร ให้ใคร ได้ผลอะไร ภายในเท่าไหร่

พอข้อความนิ่งแล้วค่อยออกแบบ และตรงนี้มีกับดักที่เห็นได้ทันที

ออกแบบเว็บไซต์ด้วย AI แล้วทำไมหน้าตาเหมือนกันหมด

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

เรื่องสีมีที่มาจริงๆ ครับ ปี 2025 Adam Wathan ผู้สร้าง Tailwind CSS ซึ่งเป็นเครื่องมือทำเว็บที่ได้รับความนิยมที่สุดตัวหนึ่งของโลก โพสต์ขอโทษต่อสาธารณะ ว่าเขาตั้งค่าสีเริ่มต้นของปุ่มทุกปุ่มไว้เป็น indigo-500 เมื่อห้าปีก่อน ผลคือคลิปสอน เทมเพลต และตัวอย่างจำนวนมหาศาลบนอินเทอร์เน็ตใช้สีนั้น AI เรียนจากข้อมูลเหล่านั้น พอคุณสั่งให้มันทำเว็บ มันจึงพร้อมใจกันออกมาเป็นสีคราม

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

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

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

ขั้นที่ 4 deploy เว็บ ฟรี ด้วย Cloudflare Pages

ตรงนี้ง่ายกว่าที่คิดมากครับ

เว็บที่เปิดได้แค่ในเครื่องคุณยังไม่นับว่าเป็นเว็บไซต์ มันต้องออนไลน์อยู่บนอินเทอร์เน็ตจริงๆ ให้คนอื่นเข้าได้ตลอด 24 ชั่วโมง ขั้นตอนนี้ศัพท์เทคนิคเรียกว่า deploy

บริการที่ผมใช้คือ Cloudflare Pages เพราะฟรี ขั้นตอนคือเชื่อม Cloudflare เข้ากับ GitHub ที่เราผูกไว้ตั้งแต่ขั้นแรก เลือกโปรเจกต์ กดปุ่มเดียว แล้วรอราว 2-3 นาที เว็บก็ออนไลน์

ค่าใช้จ่ายเดียวที่เพิ่มขึ้นคือโดเมน ถ้าคุณอยากได้ชื่อเว็บเป็นของตัวเองแทนชื่อที่ระบบแจกให้ อันนี้ไม่ฟรี แต่ก็ไม่ได้แพง

ขั้นที่ 5 ตรวจคุณภาพ ขั้นที่คนข้ามมากที่สุด

นี่คือขั้นที่แยกเว็บ "ดูเสร็จ" ออกจากเว็บ "เสร็จจริง"

สุขภาพของเว็บไซต์วัดกัน 4 ด้าน

ด้าน คำถามที่ต้องตอบ ตรวจได้ที่
SEO คนหาเว็บเราเจอไหม pagespeed.web.dev
ความปลอดภัย เว็บเราปลอดภัยหรือเปล่า securityheaders.com
การเข้าถึง ทุกคนใช้เว็บเราได้ไหม รวมถึงคนพิการ pagespeed.web.dev
ความเร็ว เว็บโหลดเร็วพอที่คนจะรอไหม pagespeed.web.dev

ทีนี้มาดูทีละด้านครับ

SEO — คนหาเว็บเราเจอไหม

Google ไม่ได้มองเห็นเว็บของคุณแบบที่เราเห็น แต่มัน อ่าน ถ้าคุณไม่ได้บอกมันว่าเว็บนี้คือเว็บอะไร มันก็ไม่รู้

ผลพลอยได้อีกอย่างคือเวลาส่งลิงก์เข้ากลุ่มไลน์ ลิงก์ที่ทำ SEO แล้วจะขึ้นเป็นการ์ดมีหัวข้อและรูป ส่วนลิงก์ที่ไม่ได้ทำจะเป็นข้อความเปล่าที่คนเลื่อนผ่าน

ความปลอดภัย — ร้านเล็กๆ ใครจะมาแฮก

ข้อนี้คนมองข้ามมากที่สุด และคำถามที่ได้ยินบ่อยที่สุดก็คือประโยคข้างบนนี่แหละ

เคสจริง: เว็บที่ไม่มีใครรู้จัก แต่มีคนเข้าตั้งแต่อาทิตย์แรก

ผมเคยลองเอาเว็บทดสอบขึ้นออนไลน์โดยไม่โปรโมทที่ไหนเลย ไม่บอกใครสักคน

ไม่ถึงหนึ่งอาทิตย์ มี request เข้ามาจากหลายประเทศ ส่วนใหญ่เป็นบอท ซึ่งไม่ได้อันตรายทั้งหมด แต่ประเด็นคือเมื่อเว็บออนไลน์แล้ว คุณคุมไม่ได้เลยว่าใครจะเข้ามา

กราฟ Requests by Country แสดง request จาก United States 714, Andorra 155, Netherlands 142, Canada 128, Singapore 100 และประเทศอื่นๆ
นี่คือหน้าจอจริงของเว็บทดสอบตัวนั้นครับ สังเกตว่าไม่มีประเทศไทยติดอันดับเลย ทั้งที่ผมเป็นคนไทยและไม่ได้บอกใครสักคน

และการโดนโจมตีไม่ได้แปลว่าต้องมีฐานข้อมูลให้ขโมย

เคสจริง: British Airways ปี 2018

สายการบินที่มีทีมความปลอดภัยขนาดใหญ่ ถูกเจาะผ่านสคริปต์ของผู้ให้บริการภายนอกที่เว็บดึงมาใช้ โค้ดที่ถูกแทรกเข้ามายาวไม่กี่สิบบรรทัด แต่คัดลอกข้อมูลบัตรลูกค้าไปราว 380,000 รายการ สุดท้ายหน่วยงานกำกับดูแลของอังกฤษ (ICO) ปรับเป็นเงิน 20 ล้านปอนด์

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

การเข้าถึงของคนพิการ — และทำไมมันช่วย SEO

ข้อนี้ฟังดูเหมือนเรื่องน้ำใจ แต่มันมีผลกับ SEO โดยตรง

เอกสารของ Google Search Central ระบุว่า alt text คือข้อมูลที่สำคัญที่สุดในการอธิบายรูปภาพให้ระบบเข้าใจ และมันก็คือสิ่งเดียวกับที่โปรแกรมอ่านหน้าจอของคนตาบอดใช้ ทำครั้งเดียวได้ผลสองทาง

ความเร็ว — เกิน 3 วินาที คนกดออก

ถ้าเว็บโหลดเกิน 3 วินาที คนกดออกก่อนเห็นเนื้อหา นึกถึงตัวเองก็ได้ครับ เจอเว็บที่หมุนติ้วๆ เรารอหรือเราเลื่อนผ่าน

ตรวจได้ฟรีที่ pagespeed.web.dev สำหรับความเร็ว SEO และการเข้าถึง และ securityheaders.com สำหรับความปลอดภัย ทั้งคู่ใช้เวลาไม่ถึงนาที

นี่คือหน้าตาของผลตรวจครับ อันแรกคือเว็บที่ยังไม่ได้ทำอะไรเลย

ผลตรวจ securityheaders.com ได้เกรด F หัวข้อความปลอดภัยขึ้นสีแดงทั้ง 6 รายการ
เกรด F ครับ ทุกหัวข้อขึ้นสีแดง แปลว่าไม่ได้มีมาตรฐานความปลอดภัยเลยสักอย่าง

และนี่คือเว็บเดียวกัน หลังแก้ตามขั้นตอนในบทนี้

ผลตรวจ securityheaders.com ได้เกรด A+ หัวข้อความปลอดภัยขึ้นสีเขียวทั้ง 6 รายการ
A+ ครับ หน้าตาเว็บไม่ได้เปลี่ยนเลยแม้แต่นิดเดียว เปลี่ยนแค่สิ่งที่คนเข้าเว็บมองไม่เห็น

ส่วนฝั่งความเร็วและ SEO ก็ดูจาก PageSpeed ได้เลย

ผลตรวจ PageSpeed แสดงคะแนน Performance 97, Accessibility 92, Best Practices 100 และ SEO 100
97 / 92 / 100 / 100 ครับ เขียวหมดทั้ง 4 ด้าน ไม่ต้องได้ 100 ทุกช่องก็ผ่านเกณฑ์แล้ว

ผลลัพธ์ตอนตรวจครั้งแรกมักทำให้ตกใจครับ จากเว็บที่ผมตรวจมาเอง เว็บที่ทำด้วย AI โดยไม่รู้เรื่องเหล่านี้ ส่วนใหญ่ไม่ใช่แค่ไม่ผ่านเกณฑ์ความปลอดภัย แต่แทบไม่มีเลย

แล้วมีอะไรที่ AI ทำเว็บให้ไม่ได้บ้าง

มีครับ และควรรู้ไว้ก่อนเริ่ม

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

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

สรุป

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

ลำดับที่ใช้ได้จริงคือ เตรียมเครื่องมือและที่เก็บงาน วางแผน เขียนข้อความก่อนออกแบบ เอาขึ้นออนไลน์ แล้วตรวจคุณภาพ 4 ด้านก่อนปล่อยจริง

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

แหล่งอ้างอิง

ตัวเลขและเคสทุกอันในบทความนี้ตรวจสอบได้ครับ ไม่ได้เขียนลอยๆ

ส่วนตัวเลข "เว็บที่ทำด้วย AI ส่วนใหญ่ไม่ผ่านเกณฑ์ความปลอดภัย" มาจากเว็บที่ผมตรวจเองระหว่างทำคอร์สนี้ ไม่ใช่งานวิจัย ผมจึงเขียนไว้แบบนั้นตรงๆ

แอดไลน์ รับ E-book ฟรี — สรุป Claude ทำเว็บ ครบ 9 บท

หรือดูชุดเครื่องมือ CNC Web Kit