เวลาทีมการตลาดจะเปิดตัวคอร์ส เวิร์กช็อป หรือแคมเปญใหม่แล้วอยากทำ Landing Page เพื่อวัตถุประสงค์อะไรซักอย่าง แน่นอนว่าเราอาจเริ่มต้นจาก brief สั้น ๆ ตามด้วย reference แล้วค่อยไปถกกันในทีมว่า เว็บควรวางอะไรไว้ก่อน ปุ่มสมัครควรอยู่ตรงไหน ข้อเสนอชัดพอหรือยัง โดยที่ยังเห็นภาพกันไม่ชัดนัก
ล่าสุด Google ออกเครื่องมือใหม่ให้นักการตลาดได้ใช้ในสถานการณ์นี้กันแล้วมีชื่อว่า Google Stitch เครื่องมือทดลองจาก Google Labs ที่จะช่วยให้เราได้เห็นภาพไอเดียเป็น Landing Page หรือแม้แต่ Application ของจริงได้ง่ายขึ้น
ซึ่งนั้นก็ตรงตัวกับชื่อ Stitch ที่หมายถึง การเย็บ การร้อยต่ออะไรบางอย่างเข้าด้วยกัน ซึ่งในที่นี้ก็คงจะหมายถึงการเรียงร้อยไอเดียสร้างเป็นหน้าตาเว็บหรือแอปพลิเคชั่น ร้อยต่อหน้าจอหลายๆหน้าจอเป็น Flow การใช้งานให้เห็นชัดเจน ไปจนถึงความหมายของการร้อยต่องานออกแบบเข้ากับงานพัฒนาเว็บไซต์หรือแอปพลิเคชั่นนั่นเอง
Marketing Oops! ได้ลองทดสอบ Google Stitch สร้าง Landing Page คอร์สสอน AI สำหรับนักการตลาดเพื่อดูว่า brief แบบข้อความจะถูกเปลี่ยนเป็น landing page ได้ยังไง ดังนั้น บทความนี้จึงพาไปดูตั้งแต่วิธีเริ่มทำ prompt วิธีแก้ไข วิธีใช้ preview ไปจนถึงสิ่งที่ทีมต้องทำต่อก่อนนำงานไปใช้จริงกัน
เปลี่ยน Marketing Brief ให้เป็น Prompt ที่ Stitch เข้าใจ
การเขียน prompt ให้ Stitch ควรคิดเหมือนการเขียน brief ให้ designer คนหนึ่ง ยิ่งเราบอกหน้าที่ของหน้าเว็บ กลุ่มผู้ใช้ ข้อมูลสำคัญ โทนภาพ สี และองค์ประกอบที่ต้องมีได้ครบ รอบแรกก็จะมีจุดให้แก้น้อยลง
สำหรับการทดลองใช้เราลองใช้เป็นตัวอย่างสร้าง Landing Page สำหรับคอร์สเรียน AI นักการตลาดที่มีชื่อว่า Marketing Prompt Bootcamp ซึ่งเราก็ควรจะใช้ prompt ที่ครอบคลุมประมาณนี้
สร้าง Landing Page บนเดสก์ท็อปสำหรับ “Marketing Prompt Bootcamp” เวิร์กช็อป 1 วันสำหรับนักการตลาดไทยที่ต้องการนำ AI ไปใช้กับงานประจำวัน เป้าหมายของหน้าเว็บคือทำให้ผู้สนใจกรอกฟอร์มเพื่อรับรายละเอียดเพิ่มเติม ประกอบด้วย Hero Section ที่มีหัวข้อชัดเจนและปุ่ม CTA, สิ่งที่จะได้เรียนรู้, Agenda, ส่วนแนะนำวิทยากร, FAQ และส่วนฟอร์มลงทะเบียน ใช้สไตล์ editorial ที่ทันสมัยและน่าเชื่อถือ ใช้สีน้ำเงินเข้ม สีขาว และสีคอรัล ข้อความที่ปรากฏบนหน้าจอเป็นภาษาไทยทั้งหมด ให้ความสำคัญกับการอ่านง่ายทั้งบนเดสก์ท็อปและมือถือจากที่เราได้ทดลอง Stitch สามารถรับ prompt ภาษาไทยและสร้างผลลัพธ์ออกมาเป็นหน้าจอที่ใช้คุยต่อได้ดีในระดับหนึ่งเลย
เมื่อเราสั่งงานไป Google Stitch จะทำงานอย่างรวดเร็วด้วยการสร้าง Design System และหน้าตาของเว็บไซต์ขึ้นมาให้เราก่อน โดยเราสามารถปรับแก้ตั้งแต่ สี ฟ้อนท์ ดีไซน์ปุ่มกด รวมถึง icon ต่างๆได้
เรายังสามารถแก้ไขรายละเอียดต่างๆในหน้าเว็บได้เช่นตัวหนังสือบน Hero Section ตัวหนังสือในปุ่มกดต่างๆ 
โดยระบบจะมีทางเลือกให้เราแก้ไขข้อความด้วยตัวเราเองก็ได้หรือจะให้แก้ไขด้วย AI ก็ทำได้
สร้างเว็บเวอร์ชั่นสำหรับอุปกรณ์อื่น
เมื่อสร้างเว็บบน Desktop ได้แล้วเรายังสามารถสร้างเว็บไซต์ในเวอร์ชั่นสำหรับอุปกรณ์อื่นๆได้ด้วยอย่างเช่นเวอร์ชั่นสำหรับมือถือ ที่อาจต้องมีการจัดเรียงที่แตกต่างจากเวอร์ชั่น Desktop ด้วย ซึ่งเราก็สามารถทำได้ง่ายๆแค่พิมพ์ prompt
ช่วยสร้างหน้าเว็บเวอร์ชั่นสำหรับมือถือให้หน่อยจากนั้นระบบก็จะสร้างเว็บในเวอร์ชั่นสำหรับมือถือมาให้โดยจะโชว์หน้าตาที่ด้านข้างให้เราในเวลาไม่ถึงนาที
จากนั้นเรายังสามารถสร้างหน้าเพจสำหรับ Action ต่างๆบนหน้าเว็บของเราได้ ในกรณีนี้เราลองสร้างหน้าเว็บ Registration Complete ในกรณีที่คนกรอกข้อมูลลงทะเบียนแล้วเรียบร้อยซึ่งก็สามารถพิมพ์ Prompt ได้ง่ายๆเลยว่า
ช่วยสร้างหน้า Registration Complete หลังจากคนกดส่งข้อมูลลงทะเบียนแล้วให้หน่อย
ระบบก็จะออกแบบหน้าตาของหน้านั้นออกมาให้ในทันทีโดยจะโชว์หน้าเพจมาที่ข้างๆหน้าจอหลักให้เราแบบภาพตัวอย่างด้านล่างนี้
แน่นอนว่าเราก็สามารถสร้างหน้าเว็บนี้สำหรับเวอร์ชั่นมือถือได้เช่นกันแค่ prompt ว่า
ช่วยสร้างหน้าเว็บนี้เวอร์ชั่นมือถือให้หน่อยนั่นเองกด Preview เพื่อดู Flow ก่อนส่งต่อ
เมื่อสร้างหน้าเว็บที่จำเป็นครบถ้วนแล้วเราก็สามารถกด Preview ดู Flow ของหน้าเว็บ Landing Page ที่เราสร้างด้วยการกดปุ่ม Preview ที่มุมขวาบนของหน้าจอได้เลย
หน้าจอนี้เราจะสามารถทดลองกดปุ่มต่างๆบนหน้า Landing Page ของเราได้เลยเช่นปุ่ม ส่งข้อมูล ลงทะเบียนว่าเมื่อกดแล้วจะไปสู่หน้า Registration Complete ได้ถูกต้องหรือไม่ รวมไปถึงดูได้ว่าการแสดงผลในหน้าจอของอุปกรณ์อื่นๆอย่าง Tablet หรือ มือถือสมาร์ทโฟน เป็นอย่างไร้ดวยการกดที่เครื่องหมายอุปกรณ์ด้านขวาตามที่วงกลมสีแดงเอาไว้ในภาพด้านบน
เมื่อกดแล้วเราก็จะได้เห็น Layout ที่แสดงผลบนมือถือสมาร์ทโฟนแบบนี้ด้วยเช่นกัน
อย่างไรก็ตามการ Preview คือ prototype สำหรับตรวจ flow และหน้าตาเบื้องต้น ยังไม่ได้หมายความว่า form ส่งข้อมูลได้จริง หรือเว็บไซต์พร้อม publish แล้ว ทีมจึงควรใช้รอบนี้เช็ก 4 เรื่องสำคัญ ได้แก่ ข้อความบนหน้าเว็บ ลำดับข้อมูล mobile layout และจุดที่คนใช้อาจลังเลก่อนคลิกไปด้วยพร้อมๆกัน
Export จาก Stitch ไปต่ออย่างไร
หลังจากทีมได้หน้าจอที่พอใจกับ Stitch แล้ว ขั้นต่อไปคือการส่งงานออกไปทำต่อ สามารถทำได้ด้วยการกดปุ่ม “ส่งออก” หรือ Export ที่หน้าจอมุมขวาบนของ Stitch จะเห็นว่ามีหลายตัวเลือก เช่น Figma, AI Studio, Netlify, Lovable, Bolt, MCP และไฟล์ .zip
ทางแรกคือ Figma เหมาะกับทีมที่ต้องการส่งงานไปให้ designer ตรวจและปรับดีไซน์ต่ออย่างละเอียด เช่น จัด layer, ปรับสีและฟอนต์ให้ตรง brand guideline, ทำ component อย่างปุ่ม card และ form field รวมถึงเช็ก responsive design ก่อนส่งต่อให้ developer
ทางที่สองคือ Netlify เหมาะกับทีมที่อยากทดลองนำหน้าเว็บขึ้นเป็นลิงก์ demo เพื่อให้ทีมอื่นกดดูได้เร็วขึ้น เช่น ใช้ตรวจ flow ของ landing page ดูตำแหน่ง CTA หรือทดสอบประสบการณ์บนมือถือก่อนพัฒนาเป็นเว็บไซต์จริง
ทางที่สามคือ ไฟล์ .zip เหมาะกับทีม developer ที่ต้องการดาวน์โหลดไฟล์ออกมาเปิดดู แก้โค้ด และนำไปต่อกับระบบขององค์กรเอง ส่วนตัวเลือกอื่นอย่าง AI Studio, Lovable, Bolt และ MCP เหมาะกับทีมที่มี workflow ด้าน AI development หรือ technical มากขึ้น
โดยสรุปแล้ว Google Stitch เหมาะกับทีมที่อยากเปลี่ยน brief ให้กลายเป็นหน้าตาเว็บหรือแอปอย่างรวดเร็ว โดยเฉพาะงานอย่าง landing page, หน้ารับลงทะเบียน, หน้าเปิดตัวสินค้า หรือหน้าเก็บ lead ที่ต้องเห็น flow และ CTA ตั้งแต่ต้น นับเป็นอีกเครื่องมือ AI ใหม่ๆที่น่าเรียนรู้และนำมาช่วยย่นระยะเวลาของนักการตลาดได้อีกตัวหนึ่ง
ที่มา: Google Developers Blog
