สร้าง Landing Page บริษัทคุณใน 20 นาที (ตามที่ผมทำ)

บทนี้ผมจะพาทำตัวจริง บน Lovable เพราะมันครบที่สุดสำหรับมือใหม่ — frontend, backend, database พร้อม deploy ฟรีในตัว

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

ขั้นที่ 1 — สมัคร Lovable

ไปที่ lovable.dev กด Start for free ผมแนะนำ login ด้วย Google หรือ GitHub ไม่ต้องตั้ง password ใหม่

ฟรีให้ generate ได้จำนวนหนึ่งต่อวัน เพียงพอทำเว็บเล็กๆ Pro ราคา ~$25/เดือน เริ่มฟรีก่อน ถ้าใช้บ่อยค่อยอัพ

ขั้นที่ 2 — เขียน Initial Prompt ให้ครบ

อันนี้สำคัญที่สุด ผมเคยพิมพ์สั้นๆ ว่า "สร้างเว็บให้บริษัทผม" — ได้ออกมาเหมือนเทมเพลตทั่วไป ไม่ตรงเลย

ตอนนี้ผมจะเขียน initial prompt ครบโครงตั้งแต่แรก จะได้ไม่ต้อง iterate เยอะ

สร้าง landing page ให้ "[ชื่อบริษัทคุณ]" ที่ทำ [บริการ/สินค้า]

**โครงสร้างหน้า (บนลงล่าง):**
1. Navbar: โลโก้ซ้าย | menu (หน้าแรก, บริการ, ผลงาน, ติดต่อ) | ปุ่ม "ปรึกษาฟรี" ขวา
2. Hero: พาดหัว "[สโลแกนของคุณ]" + sub-text 1 บรรทัด + ปุ่ม CTA "ปรึกษาฟรี" และ "ดูผลงาน"
3. Features 3 ข้อ ใช้ icon: [จุดแข็ง 1] | [จุดแข็ง 2] | [จุดแข็ง 3]
4. ผลงาน/สินค้า: 6 การ์ดมีรูป placeholder, ชื่อ, คำอธิบาย 1 บรรทัด, ราคา (ถ้ามี)
5. กระบวนการทำงาน: 4-5 ขั้นแสดงเป็นเส้นแนวนอน (มีตัวเลขในวงกลม + ชื่อ + รายละเอียดสั้น)
6. รีวิว: 3 testimonial จากลูกค้า (ชื่อ + รูปอวตาร์ + ข้อความ)
7. FAQ: 5 คำถามคำตอบที่ลูกค้ามักถาม
8. Contact: form (ชื่อ, อีเมล, เบอร์, ข้อความ) + แผนที่ + เบอร์โทร + social icons
9. Footer: copyright + link social

**Design:**
- สีหลัก: [ระบุสี]
- สีรอง: [ระบุสี]
- ฟอนต์: Sarabun สำหรับภาษาไทย, Inter สำหรับภาษาอังกฤษ
- มุมโค้ง, เงาเบา, สไตล์ modern แต่อบอุ่น
- Responsive — สวยทั้ง desktop, tablet, mobile

ข้อความทั้งหมดเป็นภาษาไทย

ขั้นที่ 3 — รอ Lovable สร้าง

ใช้เวลา 2-5 นาที Lovable จะเลือก stack เอง (ส่วนใหญ่เป็น React + Tailwind), สร้างไฟล์, ขึ้น preview ให้

ระหว่างรอผมเปิด Notes เตรียมรายการสิ่งที่อยากแก้รอบสองไว้

ขั้นที่ 4 — Iterate ทีละจุด

หลังเห็นเวอร์ชันแรก คงไม่เป๊ะ 100% — เป็นเรื่องปกติ บอก Lovable ให้แก้ทีละจุด ผมเน้นย้ำว่า ทีละจุด เพราะถ้าขอแก้ 5-6 อย่างพร้อมกัน มันงงและพังบ่อย

ตัวอย่างคำสั่งที่ผมใช้

"Hero: ปุ่ม 'ปรึกษาฟรี' ใหญ่ขึ้น และเปลี่ยนเป็นสีน้ำตาลเข้มเพื่อให้เด่นกว่าพื้นหลัง"

"Menu cards: ใส่ hover effect — ซูมเล็กน้อยและ shadow เข้มขึ้น"

"เพิ่ม section หลัง Features ชื่อ 'กระบวนการ' แสดง 4 ขั้น: 1 นัดดูสถานที่ 2 ออกแบบและเสนอราคา 3 เซ็นสัญญา 4 เริ่มก่อสร้าง"

"FAQ ให้เป็น accordion คลิกเพื่อขยายแต่ละข้อ"

ขั้นที่ 5 — Publish

กดปุ่ม Publish มุมขวาบน Lovable ให้ URL แบบ yourproject.lovable.app ใช้แชร์ลูกค้าได้เลย

ถ้าอยากใช้ domain ของบริษัท เช่น yourcompany.com

1. ซื้อ domain จาก Namecheap หรือ GoDaddy (ปีละ ~300-400 บาท)
2. ใน Lovable — Settings → Domain → Add custom domain
3. ทำตามคำแนะนำตั้ง DNS — ใช้เวลา 5-10 นาที

เคล็ดที่ผมใช้ — ให้ Claude ช่วยเขียน prompt

ผมไม่ค่อยเก่ง prompt ที่ละเอียดมาก เลยใช้ Claude เป็นที่ปรึกษาเขียน prompt ให้ก่อน แล้วก็อปไปใส่ Lovable

ผมจะใช้ Lovable สร้าง landing page บริษัทผม ขอช่วยเขียน prompt ครบที่ผมจะ paste ใส่ Lovable ได้เลย

ข้อมูลบริษัท:
- ชื่อ: [...]
- ทำ: [...]
- จุดแข็ง 3 ข้อ: [...]
- กลุ่มลูกค้า: [...]
- สโลแกน: [...]
- โทนสีที่อยากได้: [เช่น 'อบอุ่น เป็นกันเอง']
- บรรยากาศ: [เช่น 'ดูเชื่อถือได้ ไม่หรูเกิน']

ขอ prompt ที่:
- โครงสร้างหน้าครบทุก section (มี hero, features, ผลงาน, รีวิว, contact, footer)
- ระบุสี, ฟอนต์, ความ responsive
- ภาษาไทยทั้งหมด
- ใส่ตัวอย่าง content คร่าวๆ ให้ Lovable แทนที่ placeholder

ข้อผิดพลาดที่ผมเคยเจอ

• Prompt สั้นไป → ได้เว็บกลางๆ ไม่ใช่ของบริษัทเรา แก้: ใส่ข้อมูลบริษัทจริงเข้าไปเยอะๆ
• ขอแก้หลายอย่างพร้อมกัน → Lovable ทำพังครึ่ง แก้: ทีละ section ทีละจุด
• ลืมระบุภาษา → ออกมาเป็นอังกฤษหมด แก้: เขียน "ภาษาไทยทั้งหมด" ตั้งแต่แรก
• ลืมพูดเรื่อง mobile → เปิดบนมือถือพัง แก้: เน้นคำว่า "responsive — สวยทั้ง desktop และ mobile"