แนวทางออกแบบอีเมล (Email Design Best Practices): สร้างอีเมลให้โดดเด่นทีละบล็อก

อีเมลการตลาดโดยเฉลี่ยได้คลิกจากผู้ที่เปิดอ่านเพียง 6.81% (MailerLite) แปลว่าจากผู้อ่าน 100 คนที่สนใจมากพอจะเปิดอีเมล มี 93 คนที่เลื่อนผ่าน กวาดตาดู แล้วก็ปิดไป

อีเมลเหล่านั้นส่วนใหญ่หน้าตาคล้ายกัน: ภาพ hero จากคลังภาพ stock, ปุ่ม “ช้อปเลย” ตรงกลาง และ footer ที่ก๊อปมาจากแคมเปญที่แล้ว ไม่มีอะไรผิด แต่ก็ไม่มีอะไรน่าแตะเช่นกัน ยิ่งช่วงมหกรรมอย่าง 11.11 และ 12.12 ที่กล่องจดหมายของลูกค้าคนไทยเต็มไปด้วยโปรโมชัน อีเมลที่ดูเหมือนกันหมดก็ยิ่งหายไปในกองครับ

คู่มือนี้จะพาคุณทำให้อีเมลโดดเด่นจริง ๆ เราจะไล่ไปทีละบล็อก ตั้งแต่ hero ถึง footer ผ่านแนวทางออกแบบอีเมล (email design best practices) ที่ช่วยให้ได้คลิก

ทำไมอีเมลส่วนใหญ่ถึงหน้าตาเหมือนกัน

ลองเลื่อนดูแกลเลอรีไอเดียออกแบบอีเมลที่ไหนก็ได้ ตัวอย่างที่ดีที่สุดมีจุดร่วม 1 อย่าง: ทุกบล็อกถูกออกแบบมาเพื่ออีเมลฉบับนั้นโดยเฉพาะ แต่อีเมลส่วนใหญ่ในกล่องจดหมายทำกลับกัน ด้วย 3 เหตุผล

ผลของความผิดพลาดเหล่านี้ปรากฏหลังการเปิดอ่าน หัวเรื่อง (subject line) ทำหน้าที่ของมันแล้ว ผู้อ่านเปิดอีเมลแล้ว แต่ก็ปิดไปโดยไม่คลิก เพราะอีเมลดูเหมือนฉบับอื่น ๆ ในกล่องจดหมาย และไม่มีอะไรดึงสายตา

จะทำให้อีเมลโดดเด่นจริง ๆ ได้อย่างไร

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

และไม่ได้แปลว่านักพัฒนาหรือดีไซเนอร์ต้องเขียน HTML ใหม่ทุกฉบับครับ

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

แนวทางออกแบบอีเมล ทีละบล็อก

นี่คืออีเมลที่เราจะแยกส่วนให้ดู: แคมเปญเซลจากแอปอุปกรณ์วิ่ง 48 ชั่วโมง ลด 25% รองเท้าเทรล สร้างในตัวแก้ไขแบบลากและวางของ Pushwoosh โครงเดียวกันนี้ใช้กับแคมเปญ 11.11 แอปท่องเที่ยวช่วงลอยกระทง หรือโปรส่งท้ายปีได้เลย

อีเมลนี้แบ่งได้เป็น 5 บล็อก นี่คือสิ่งที่ทำให้แต่ละบล็อกโดดเด่น และสิ่งที่เปลี่ยนไปสำหรับผู้อ่าน

ด้านล่าง เราจะเปิดดูแต่ละบล็อกผ่านแนวทางปฏิบัติ ไล่จากบนสุดถึงล่างสุดของอีเมล: ทำไมแต่ละข้อถึงได้ผล และทำได้อย่างไรใน Pushwoosh

ส่วนบนของอีเมล: header และ hero

#1. สร้าง header บน brand system ของคุณ

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

แทนที่จะ: ก๊อปสีจากอีเมลฉบับที่แล้ว และทำเลย์เอาต์ header ใหม่ทุกแคมเปญ → ลอง: brand system 1 ชุด และ header กะทัดรัด (โลโก้กับลิงก์ 2-3 ลิงก์) ที่เหมือนกันทุกอีเมล

ใน Pushwoosh: ตั้งค่า Brand book: โลโก้ สี ฟอนต์ ค่าเริ่มต้นของบล็อก และ brand voice คุณไม่ต้องกรอกเองทั้งหมด: Derive brand จะสแกนเว็บไซต์ ไฟล์ PDF ของ brand book หรือโลโก้ของคุณ แล้วเสนอชุดสี ฟอนต์ และน้ำเสียงให้ ส่วน Apply brand book styles จะเปลี่ยนสไตล์ของเทมเพลตใดก็ได้ รวมถึงเทมเพลตเก่า โดยไม่แตะเนื้อหา

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

จากนั้นสร้าง header ด้วยโลโก้และ Menu block แล้วบันทึกเป็นบล็อกที่ใช้ซ้ำได้ โดยเปิด Keep copies in sync ไว้ เมื่อเพิ่มลิงก์ในเมนู ลิงก์นั้นจะขึ้นในทุกอีเมลพร้อมกัน Footer ก็ทำงานแบบเดียวกัน (ดูข้อ 8)

#2. สร้าง hero จากข้อเสนอจริง ไม่ใช่ภาพ stock

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

แทนที่จะ: ใช้ภาพนักวิ่งยิ้มจากคลังภาพ stock → ลอง: แสดงรองเท้าเทรลที่ลดราคาจริง พร้อมข้อความ “ลด 25% รองเท้าเทรล เพียง 48 ชั่วโมงเท่านั้น” เป็น live text ด้านบน

ใน Pushwoosh: ใน Image block ปุ่ม Generate with AI จะสร้างภาพจาก prompt (“trail running shoes on a wet forest path, warm autumn light”) ในสัดส่วนแบนเนอร์ 16:9 วางภาพนั้นเป็นพื้นหลังของ Card block แล้วหัวข้อและปุ่มจะยังเป็น live text: ยังแสดงผลแม้ภาพถูกบล็อก และโปรแกรมอ่านหน้าจอก็อ่านได้

ส่วนเนื้อหา: ข้อความ, CTA และคอนเทนต์

#3. เขียนหัวข้อแบบเฉพาะบุคคลให้ผู้อ่านแต่ละคน

ทำไมถึงได้ผล: หัวข้อที่พูดถึงสิ่งที่ผู้อ่านรู้จัก (ชื่อ ไซซ์ หรือหมวดที่เคยดู) จะอ่านเหมือนข้อความที่ส่งถึงเขา ไม่ใช่ประกาศที่ส่งถึงทุกคน

แทนที่จะ: “มาดูคอลเลกชันใหม่ของเรา” → ลอง: “คุณมายด์ รองเท้าเทรลไซซ์ของคุณกลับมามีสต็อกแล้ว”

ใน Pushwoosh: แทรกชื่อเป็น merge tag จากแถบเครื่องมือของ Heading และตั้งค่าเริ่มต้น เช่น “นักวิ่ง” สำหรับผู้อ่านที่ไม่มีชื่อในระบบ ถ้าต้องการข้อความต่างกันตามภาษาหรือประเทศ เช่น ภาษาไทยสำหรับลูกค้าในประเทศ และภาษาอังกฤษสำหรับนักท่องเที่ยวต่างชาติ ให้ใช้ Liquid templates

#4. ให้ทุกอีเมลมี CTA เดียวที่โดดเด่นชัดเจน

ทำไมถึงได้ผล: ปุ่มที่เพิ่มขึ้นแต่ละปุ่มจะแบ่งความสนใจ CTA หลัก 1 ปุ่มในสีที่ตัดกันชัดจะบอกผู้อ่านว่าต้องทำอะไรต่อ และบนมือถือ ปุ่มต้องมีพื้นที่แตะอย่างน้อย 44×44 pt ตาม Human Interface Guidelines ของ Apple

แทนที่จะ: ใส่ปุ่ม 3 ปุ่มขนาดเท่ากัน (“ช้อปเลย”, “ดูรายละเอียด”, “ดูทั้งหมด”) หรือปุ่มที่ฝังอยู่ในรูปภาพ → ลอง: ปุ่ม live text 1 ปุ่ม “หาไซซ์ของฉัน” ในสี accent ของแบรนด์

ใน Pushwoosh: จัดสไตล์ Button block ด้วยพื้นหลังสีทึบหรือ gradient, มุมโค้ง และ padding แล้วตั้ง padding บนมือถือให้ใหญ่ขึ้น เพื่อให้ปุ่มมีขนาดพอดีนิ้วโป้ง

#5. เติม product grid ด้วยข้อมูลจริงแบบ live

ทำไมถึงได้ผล: สินค้าที่หมดแล้วและราคาที่ไม่อัปเดตทำให้เสียทั้งคลิกและความเชื่อใจ

แทนที่จะ: ก๊อปรองเท้า 6 คู่ใส่เทมเพลตตั้งแต่วันจันทร์ แล้ว 2 คู่ขายหมดก่อนวันพฤหัส → ลอง: grid รองเท้าเทรลตามสิ่งที่ผู้อ่านแต่ละคนเคยดู ดึงจากแคตตาล็อกจริงแบบ live

ใน Pushwoosh: Products block จะเติมสินค้าตามกฎของแคตตาล็อก จากตะกร้าที่ผู้รับทิ้งไว้ หรือด้วยกลยุทธ์แนะนำสินค้า เช่น สินค้าขายดี สินค้ากลับมามีสต็อก หรือตามสิ่งที่ผู้รับเคยดู ฟีดของ Product catalog sync ทุกชั่วโมง ราคาและสต็อกจึงอัปเดตเสมอโดยไม่ต้องมีใครแก้อีเมล ช่วงแฟลชเซล 11.11 ที่สต็อกเปลี่ยนเร็ว ข้อนี้ช่วยได้มากครับ

สำหรับแอปสื่อและคอนเทนต์ News block ทำแบบเดียวกันกับบทความจากฟีดของคุณ พร้อมบทนำที่ AI เขียนไว้ใต้หัวข้อแต่ละเรื่อง

#6. ให้ผู้ชมแต่ละกลุ่มมีส่วนเนื้อหาของตัวเอง

ทำไมถึงได้ผล: สมาชิกขาประจำกับลูกค้าที่ไม่ได้สั่งซื้อมา 3 เดือน ต้องการเหตุผลในการคลิกที่ต่างกัน

แทนที่จะ: ใช้ข้อความ “คอลเลกชันใหม่” แบบเดียวกันกับทุกคน → ลอง: ส่วนเนื้อหา 1 ส่วนที่มี 3 เวอร์ชัน: สิทธิ์เข้าถึงก่อนสำหรับสมาชิก loyalty, ส่วนลด 25% สำหรับคนที่ไม่ได้ใช้งานมา 90 วันขึ้นไป และสินค้ามาใหม่สำหรับทุกคนที่เหลือ

ใน Pushwoosh: เพิ่ม display condition ให้แต่ละเวอร์ชัน โดยอิงจาก Tags หรือ Liquid expression แล้วเชื่อมต่อกันด้วย IF / ELSE IF / ELSE สร้างและตรวจ QA แคมเปญเดียว แต่ได้อีเมล 3 แบบในกล่องจดหมาย

#7. ทำให้ความเร่งด่วนจับต้องได้ด้วยการนับถอยหลัง

ทำไมถึงได้ผล: คำว่า “เร็ว ๆ นี้” เป็นนามธรรม เส้นตายที่มองเห็นได้จะเปลี่ยน “ไว้ทีหลังก็ได้” ให้เป็นการตัดสินใจที่ผู้อ่านต้องทำตอนนี้

แทนที่จะ: ใส่ “เซลใกล้หมดแล้ว!” ทั้งในหัวเรื่อง หัวข้อ และปุ่ม → ลอง: ตัวนับถอยหลังไปยังเวลาสิ้นสุดจริงของเซล 48 ชั่วโมง วางไว้ข้าง CTA เหมาะมากกับเซลที่จบเที่ยงคืนของวัน 11.11 หรือ 12.12

ใน Pushwoosh: วาง Timer block ลงไป ตั้งวันที่ เวลา และ timezone สิ้นสุด (สำหรับลูกค้าในไทยคือ GMT+7) แล้วจัดสไตล์ตัวเลขด้วยสีแบรนด์ ถ้าข้อเสนอนั้นใช้แลกที่หน้าร้านแทน Barcode block จะสร้างโค้ดที่สแกนได้ให้ผู้รับแต่ละคน

ส่วนล่าง: footer

#8. สร้าง footer ครั้งเดียว แล้ว sync ให้ตรงกันทุกอีเมล

ทำไมถึงได้ผล: Footer มีลิงก์ยกเลิกการรับอีเมล ที่อยู่ไปรษณีย์ และข้อความทางกฎหมาย จึงต้องถูกต้องในทุกอีเมล

แทนที่จะ: ก๊อปวาง footer จากแคมเปญหนึ่งไปอีกแคมเปญ จนข้อความทางกฎหมายมี 2 เวอร์ชัน → ลอง: footer 1 ชุดที่อัปเดตในที่เดียว

ใน Pushwoosh: สร้าง footer 1 ชุดด้วยสไตล์แบรนด์ พร้อมลิงก์ยกเลิกการรับอีเมล ที่อยู่ไปรษณีย์ และลิงก์โซเชียล (ใส่ลิงก์ LINE Official Account ของคุณไว้ตรงนี้ได้ด้วย) แล้วบันทึกเป็นบล็อกที่ใช้ซ้ำได้โดยเปิด Keep copies in sync ไว้ แก้ที่อยู่ครั้งเดียว ทุกอีเมลที่ใช้ footer นี้จะอัปเดตตาม รวมถึงอีเมลที่ตั้งเวลาส่งไว้แล้ว

เคล็ดลับ: Smart check จะแจ้งเตือนเมื่ออีเมลการตลาดไม่มีที่อยู่ไปรษณีย์ใน footer และเตือนเมื่ออีเมลเกินขีดจำกัดการตัดข้อความของ Gmail ที่ประมาณ 102 KB ซึ่ง footer จะเป็นส่วนแรกที่ถูกตัด

ออกแบบอีเมลได้เร็วขึ้นด้วยเครื่องมือ AI

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

ผู้ช่วย AI

อธิบายอีเมลที่ต้องการใน AI tab แล้วผู้ช่วยจะประกอบอีเมลทั้งฉบับให้คุณ

ภาพและ alt text ด้วย AI

Generate with AI สร้างภาพจาก prompt ได้ใน Image block โดยตรง ส่วน Generate alt with AI จะเขียน alt text จากตัวภาพเอง

หัวเรื่องและ preheader ด้วย AI

เมื่อสร้างเนื้อหาเสร็จ คลิกเดียวก็ได้ร่างหัวเรื่องและ preheader จากสิ่งที่อยู่ในอีเมลจริง ๆ

แปลภาษาอัตโนมัติ

AI จะเติมเวอร์ชันภาษาที่ยังขาด เช่น ภาษาอังกฤษหรือจีนสำหรับลูกค้าต่างชาติ แทนการพิมพ์ทีละภาษาเอง

Brand book และบล็อกที่ sync กัน

สไตล์ header และ footer จากข้อ 1 และข้อ 8 ทำให้ไม่มีใครต้องสร้างพื้นฐานใหม่ทุกครั้งที่มีแคมเปญใหม่

สร้างอีเมลที่โดดเด่นฉบับแรกของคุณ

คำถามที่พบบ่อย