ฉันสร้างแลนดิงเพจ (LP) ให้กับผลิตภัณฑ์ใหม่ที่ฉันดูแลอยู่ โดยใช้ "Claude Code เพียงอย่างเดียว" และในเดือนที่สามหลังเปิดตัว ยอดขายต่อเดือนก็ทะลุ 10 ล้านเยน ไม่ได้จ้างนักออกแบบ ไม่มีต้นทุนพัฒนา ไม่ต้องส่งงานให้บริษัทผลิต LP สิ่งที่ฉันใช้มีแค่ Claude Code กับ "เวลาที่ใช้เขียนพรอมป์ต์" เท่านั้น
รายละเอียดตัวเลขมีดังนี้:
- ราคาสินค้า: 98,000 เยน (คอร์สออนไลน์ ซื้อครั้งเดียวจบ)
- ยอด Conversion ต่อเดือน: ประมาณ 105
- ยอดขายต่อเดือน: ประมาณ 10.3 ล้านเยน
- CVR (อัตรา Conversion) ผ่าน LP: ประมาณ 1.8% ของทราฟฟิกจากโฆษณา
- ต้นทุนการผลิต LP จริง: ไม่กี่พันเยนต่อเดือนสำหรับค่า Claude Code + โดเมน/เซิร์ฟเวอร์
ในยุคที่ใคร ๆ พูดกันว่า "การจ้างบริษัทผลิต LP มีค่าใช้จ่าย 300,000 ถึง 1,000,000 เยน" ต้นทุนการผลิตของฉันกลับแทบเป็นศูนย์ ยิ่งไปกว่านั้น ฉันให้ Claude Code จัดการทุกอย่างหลังเปิดตัว (AB testing, แก้คอนเทนต์, เปลี่ยนเซกชัน) ความเร็วในการปรับปรุงจึงเทียบไม่ได้กับยุคที่จ้าง outsource ในบทความนี้ ฉันจะเปิดเผยกระบวนการทั้งหมดพร้อมกับ พรอมป์ต์จริงที่ฉันใช้
สิ่งที่คุณจะได้เรียนรู้จากบทความนี้
- กระบวนการทั้งหมดในการสร้าง LP ด้วย Claude Code (Requirements → Copy → Implementation → Measurement → Improvement)
- ข้อความเต็มของพรอมป์ต์ที่ใช้จริงในแต่ละขั้นตอน
- สิ่งที่ฉันคำนึงถึงในโครงสร้าง LP เพื่อให้ได้ CVR 1.8%
- วิธีให้ Claude Code จัดการ AB testing และการปรับปรุงหลังเปิดตัว
- จุดที่ฉันติดปัญหาและวิธีหลีกเลี่ยง
ทำไมฉันถึงตัดสินใจสร้างด้วย "Claude Code เพียงอย่างเดียว"
ฉันเคยจ้าง outsource ผลิต LP มาแล้ว 3 ครั้ง ราคาตั้งแต่ 350,000 ถึง 800,000 เยนต่อหน้า แม้จะไม่ผิดหวังกับผลงานสุดท้าย แต่ปัญหาเชิงโครงสร้างก็โผล่ชัดเจนขึ้นเมื่อเริ่มใช้งานจริง:
- แก้ไขช้าและเสียเงิน: แม้แต่การเปลี่ยนแปลงเล็กน้อยอย่างการแก้คอนเทนต์หรือย้ายเซกชันก็ต้องเสียทั้งเวลาและเงิน เป็นไปไม่ได้เลยที่จะทำ AB testing ให้ไว เมื่อทุกครั้งต้องรอใบเสนอราคา
- คอนเทนต์ ดีไซน์ และการพัฒนาแยกส่วนกัน: เมื่อคนเขียนคอนเทนต์ คนออกแบบ และคนเขียนโค้ดเป็นคนละคน ความสอดคล้องก็หายไป กลายเป็นเกมกระซิบที่ข้อมูลคลาดเคลื่อน
- ไม่มีใครแก้ไขโดยอิงข้อมูล: บริษัทผลิตเก่งเรื่อง "การสร้าง" ไม่ใช่ "การขาย" พวกเขาไม่รู้เสมอไปว่าจะเปลี่ยนข้อมูล GA4 ให้เป็นสมมติฐานและการแก้ไขได้อย่างไร
Claude Code คือ AI coding agent ที่ทำงานบนเทอร์มินัล มันไม่ใช่แค่เขียนโค้ด แต่ยังจัดการโครงสร้างไฟล์ พรีวิว HTML/CSS/JS รับผิดชอบงานเขียนคอนเทนต์ และยังปรับปรุงเว็บตามข้อมูลจาก GA4 หรือ heatmap ได้อีกด้วย ความสามารถรอบด้านแบบนี้เองคือปัจจัยชี้ขาด
ผลิตภัณฑ์และสิ่งที่ต้องเตรียม
- ผลิตภัณฑ์: คอร์สออนไลน์ทักษะ B2B (98,000 เยน)
- ทราฟฟิก: Meta Ads (Instagram/Facebook) + ผลค้นหา งบโฆษณาต่อเดือนประมาณ 1.8 ล้านเยน
- ช่องทางการขาย: โฆษณา → LP → ชำระเงิน (Stripe) ขายตรง เรียบง่าย
- ทักษะของฉัน: อ่าน HTML/CSS ได้ แต่เขียนให้สวยไม่ได้ แทบไม่ใช้เครื่องมือออกแบบ
- เครื่องมือ: Claude Code, GitHub, Cloudflare Pages, GA4, Microsoft Clarity
ที่สำคัญ ฉันแทบไม่ได้เขียนโค้ดเองเลย Claude Code ทำหน้าที่เป็นตัวกลางระหว่าง "ผู้กำกับ" กับ "ผู้ลงมือทำ"
กระบวนการ 5 ขั้นตอน
- Requirements: ให้ Claude Code "สัมภาษณ์" คุณเกี่ยวกับตัวผลิตภัณฑ์และลูกค้า
- Structure และ Copy: สร้างโครงสร้างเซกชันและคอนเทนต์ทั้งหมด
- Design และ Implementation: ลงมือพัฒนาด้วย HTML/CSS และปรับแต่งผ่านการพรีวิว
- Measurement และ Deployment: ติดตั้ง GA4/Clarity แล้วเปิดตัว
- Improvement Loop: ป้อนข้อมูลกลับไปให้ AI เพื่อทำ AB testing
STEP 1: Requirements - พรอมป์ต์แบบ "สัมภาษณ์"
อย่าแค่สั่งว่า "ทำ LP ให้หน่อย" AI ต้องการข้อมูลเฉพาะเจาะจงเพื่อไม่ให้ผลลัพธ์ออกมาแบบเจนเนอริก ฉันใช้พรอมป์ต์ให้ Claude Code สัมภาษณ์ฉัน โดยถามคำถามเฉพาะเกี่ยวกับกลุ่มเป้าหมาย ความกังวลของลูกค้า และเหตุผลด้านราคา ฉันป้อนข้อมูลดิบจากแบบสำรวจลูกค้าและบันทึก Slack ให้มัน ผลลัพธ์ที่ได้คือไฟล์ requirements.md ที่มีโครงสร้างชัดเจน
STEP 2: โครงสร้างและคอนเทนต์
ฉันให้ Claude Code สร้างโครงสร้างเซกชันจาก requirements โดยเน้นการลดความกังวลของลูกค้า แทนที่จะยึดเทมเพลตสำเร็จรูปอย่าง PASONA สำหรับคอนเทนต์ ฉันไม่ได้ให้มันเขียนทั้งหมดในครั้งเดียว แต่ขอ 10 ตัวเลือกต่อเซกชัน เพื่อเลือกทิศทางที่ดีที่สุด และฉันก็สั่งห้าม AI สร้างรีวิวปลอมหรือใช้การกล่าวอ้างเกินจริงที่ผิดกฎหมายอย่างเด็ดขาด
STEP 3: ดีไซน์และการพัฒนา
ฉันใช้ Claude Code พัฒนาเว็บแบบ mobile-first ประสิทธิภาพสูงด้วย HTML/CSS/JS แบบ static การให้มันสร้างเฉพาะ "First View" (ส่วนแรกที่เห็นเมื่อเปิดหน้า) ก่อน ทำให้ฉันปรับโทนดีไซน์ให้ตรงกันได้ก่อนจะขยายไปทั้งหน้า ฉันใช้ "การสั่งด้วยคำพูด" เพื่อปรับระยะห่าง ขนาดปุ่ม และเลย์เอาต์แบบเรียลไทม์ สำหรับแรงบันดาลใจด้านดีไซน์ ฉันส่งสกรีนช็อตของ LP ที่ชอบให้มันดู แล้วให้มันแปล "จุดเด่น" ของแต่ละแบบมาปรับใช้กับโปรเจกต์ของฉัน
STEP 4: การวัดผลและการเปิดตัว
ฉันให้ Claude Code ติดตั้ง GA4 และ Microsoft Clarity โดยเฉพาะการติดตามเหตุการณ์ "section read-through" เพื่อดูว่าผู้อ่านหลุดออกจากหน้าตรงจุดไหนบ้าง การเปิดตัวใช้ Cloudflare Pages และ GitHub โดยมี AI คอยควบคุมทุกขั้นตอน
STEP 5: วงจรการปรับปรุง
เริ่มต้นที่ CVR 0.9% ฉันป้อนข้อมูล CSV จาก GA4 และสกรีนช็อตจาก Clarity กลับไปให้ Claude Code มันเสนอการแก้ไขหลักสามอย่าง: จัดลำดับเซกชันราคาใหม่ เปลี่ยน FAQ ให้เป็นเซกชัน "จัดการข้อโต้แย้ง" และทดสอบ AB กับ hero copy การเปลี่ยนแปลงเหล่านี้ดัน CVR ขึ้นเป็น 1.8% จนทำยอดขายทะลุ 10 ล้านเยน การวนซ้ำแบบนี้เกิดขึ้นในเวลาไม่กี่ชั่วโมง ไม่ใช่ไม่กี่สัปดาห์
สรุป: 3 หลักการออกแบบพรอมป์ต์
- Role + ไฟล์บริบท + รูปแบบผลลัพธ์: กำหนดบทบาทที่ชัดเจน และอ้างอิงไฟล์อย่าง
requirements.md - อย่าสร้างทุกอย่างในครั้งเดียว: กำหนด milestones เพื่อให้เห็นพ้องกันเป็นขั้นตอน (สัมภาษณ์ → โครงสร้าง → คอนเทนต์ → พัฒนา)
- ข้อห้ามและสิทธิ์ในการโต้แย้ง: สั่งให้ AI ห้ามใช้ข้อมูลปลอม และให้มันโต้แย้งได้หากการเปลี่ยนแปลงใดอาจทำให้ CVR ลดลง
Claude Code เปลี่ยนการผลิต LP จาก "การซื้อเวลาด้วยเงิน" เป็น "การซื้อเวลาด้วยพรอมป์ต์"
