จดหมายข่าว

การออกแบบ Newsletter: แนวทางปฏิบัติที่ดีที่สุดสำหรับเลย์เอาต์อีเมลที่น่าสนใจ

เชี่ยวชาญการออกแบบ newsletter ด้วยแนวทางปฏิบัติที่ดีที่สุดเรื่องเลย์เอาต์ เคล็ดลับตัวอักษร และกลยุทธ์ภาพ สร้าง email newsletter ที่ดูเป็นมืออาชีพและสร้าง engagement

Set Noa
Set Noa
อัปเดต
0 เข้าชม · 7 วัน
newsletter design
การออกแบบ Newsletter?

การออกแบบ newsletter ควรให้ความสำคัญกับการอ่านง่าย การรองรับมือถือ และความสม่ำเสมอทางภาพ คู่มือนี้ครอบคลุมกลยุทธ์เลย์เอาต์ ตัวอักษร การใช้สี การปรับรูปภาพให้เหมาะสม และเครื่องมือออกแบบสำหรับการสร้าง newsletter ที่ผู้สมัครอยากอ่าน

เรียนรู้เพิ่มเติม

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

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

สี่เทมเพลตที่กำลังทำงานจริง

ทุกอย่างที่อยู่ใต้หัวข้อนี้คือข้ออ้างเรื่องเลย์เอาต์ และข้ออ้างเรื่องเลย์เอาต์นั้นราคาถูก ฉะนั้นนี่คือจดหมายข่าวสี่ฉบับที่กำลังทำงานจริง

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

เทมเพลตของ Tajo

สี่เลย์เอาต์ที่กำลังทำงานจริง

แต่ละแผงด้านล่างคือ HTML อีเมลจริงของเทมเพลต วางในกรอบที่มีความกว้างจริง ลากความกว้างลงมาที่ 375 px แล้วดูคอลัมน์เรียงซ้อนกัน

ตามธีมของคุณ — สลับได้ที่ส่วนหัวเพื่อดูอีกแบบหนึ่ง

อ่าน HTML ของ The Letter 6 KB ไม่ต้องผ่านขั้นตอนบิลด์ 
<!DOCTYPE html>
<html lang="th" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>The Letter</title>
<style>
  body { margin:0; padding:0; width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
  table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
  img { border:0; outline:none; line-height:100%; -ms-interpolation-mode:bicubic; display:block; }
  a { text-decoration:underline; }
  @media only screen and (max-width:620px) {
    .wrap { width:100% !important; }
    .stack { display:block !important; width:100% !important; max-width:100% !important; }
    .gutter { padding-left:20px !important; padding-right:20px !important; }
    .cta { display:block !important; width:100% !important; box-sizing:border-box !important; text-align:center !important; }
    .h1 { font-size:26px !important; line-height:32px !important; }
    .thumb { width:100% !important; height:auto !important; max-width:100% !important; }
    /* A digest row is the one two-column layout that should NOT stack: the
       thumbnail shrinks and stays beside the headline, because a roundup is
       read by scanning and a full-width decorative image per story destroys
       that. */
    .row-thumb { width:80px !important; }
    .row-thumb img { width:80px !important; height:80px !important; }
    .hide-sm { display:none !important; }
  }
@media (prefers-color-scheme: dark) {

    .d-bg { background-color:#151515 !important; }
    .d-card { background-color:#1c1c1c !important; }
    .d-ink { color:#f2f2f2 !important; }
    .d-mute { color:#a8a8a8 !important; }
    .d-rule { border-color:#3a3a3a !important; }
  }
</style>
</head>
<body class="d-bg" style="margin:0;padding:0;background-color:#f0efec;">
<span style="display:none;font-size:1px;color:#fefefe;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">ข้อความที่คุณเก็บไว้ในแอปจดบันทึกทำงานหนักกว่าปฏิทินคอนเทนต์ของคุณ</span><span style="display:none;font-size:1px;color:#fefefe;">&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;</span>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-bg" style="background-color:#f0efec;">
  <tr><td align="center" style="padding:32px 12px;">
    <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" class="wrap d-card" style="width:600px;max-width:600px;background-color:#ffffff;">

      <tr><td style="padding:0;">
        <img src="/_astro/letter-masthead.BcPkHvz4.png" width="600" height="250" alt="หัวจดหมาย Meridian Press: ส่วนโค้งสีน้ำเงินร่วมศูนย์ตัดด้วยแถบทแยง" style="width:100%;height:auto;max-width:600px;">
      </td></tr>

      <tr><td class="gutter" style="padding:36px 88px 0 88px;font-family:'Leelawadee UI',Tahoma,sans-serif;">
        <p class="d-mute" style="margin:0 0 6px 0;font-size:13px;line-height:18px;color:#6b6b6b;">Meridian Press · ฉบับที่ 47</p>
      </td></tr>

      <tr><td class="gutter" style="padding:0 88px;font-family:'Leelawadee UI',Tahoma,sans-serif;">
        <h1 class="h1 d-ink" style="margin:0 0 20px 0;font-size:34px;line-height:42px;font-weight:400;color:#141414;">คลังเก็บนั่นแหละคือตัวสินค้า</h1>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">สามสัปดาห์ก่อนผมไปตามหางานที่เขียนไว้เมื่อปี 2019 แล้วหาไม่เจอ ไม่มีในเว็บไซต์ ไม่มีในไฟล์ส่งออก ไม่มีในระบบค้นหาของแพลตฟอร์มเอง หนึ่งพันสองร้อยฉบับ และดัชนีเดียวที่ยังใช้ได้คือความทรงจำของผม</p>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">นี่คือส่วนที่ไม่มีใครบอกคุณเกี่ยวกับการทำจดหมายข่าวมาหกปี การส่งนั้นง่าย การเก็บรักษาไม่ง่าย</p>
      </td></tr>

      <tr><td class="gutter" style="padding:8px 88px 28px 88px;">
        <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
          <tr><td class="quote" style="border-left:3px solid #0084d1;padding:4px 0 4px 0;padding-left:20px;font-family:'Leelawadee UI',Tahoma,sans-serif;">
            <p class="d-ink" style="margin:0;font-size:19px;line-height:30px;font-style:italic;color:#141414;">ทุกอย่างที่คุณเผยแพร่คือเงินฝาก แต่แทบไม่มีใครสร้างช่องทางถอนออก</p>
          </td></tr>
        </table>
      </td></tr>

      <tr><td class="gutter" style="padding:0 88px;font-family:'Leelawadee UI',Tahoma,sans-serif;">
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">สัปดาห์นี้ผมจึงสร้างฉบับเก่าขึ้นใหม่ให้เป็นคลังเก็บของจริง มีแท็ก มีการค้นหาแบบเต็มข้อความ และมีที่อยู่ถาวร ใช้เวลาเก้าวัน ยอดผู้ติดตามไม่ขยับ เวลาที่ผู้อ่านอยู่บนเว็บเพิ่มขึ้นสามเท่า</p>
        <p class="d-ink" style="margin:0 0 28px 0;font-size:18px;line-height:30px;color:#242424;">ทั้งหมดอยู่ด้านล่างนี้ รวมถึงส่วนที่ล้มเหลวด้วย</p>
      </td></tr>

      <tr><td class="gutter" style="padding:0 88px 36px 88px;font-family:'Leelawadee UI',Tahoma,sans-serif;">
        <a href="https://example.com" style="font-size:17px;line-height:24px;font-weight:600;color:#0084d1;text-decoration:underline;">อ่านฉบับเต็ม &rarr;</a>
      </td></tr>

      <tr><td class="gutter d-rule" style="padding:0 88px;border-top:1px solid #e4e2de;"></td></tr>

      <tr><td class="gutter" style="padding:24px 88px 40px 88px;font-family:'Leelawadee UI',Tahoma,sans-serif;">
        <p class="d-mute" style="margin:0 0 10px 0;font-size:14px;line-height:22px;color:#6b6b6b;">เขียนด้วยมือทุกวันพฤหัสบดี ตอบกลับมาได้ ผมอ่านเอง</p>
        <p class="d-mute" style="margin:0;font-size:13px;line-height:20px;color:#8a8a8a;">Meridian Press, 14 Harbour Lane, Bristol BS1 4TT<br>
        <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">ยกเลิกการรับข่าวสาร</a> &middot; <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">ดูในเบราว์เซอร์</a></p>
      </td></tr>

    </table>
  </td></tr>
</table>
</body>
</html>

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

สี่เทมเพลตไม่ใช่สี่สไตล์ แต่เป็นสี่คำตอบสำหรับงานสี่แบบ

  • The Letter สำหรับนักเขียนที่คุณค่าทั้งหมดคือตัวหนังสือ ภาพเดียว ระยะขอบ 88 px ลิงก์ข้อความแทนปุ่ม ปุ่มในจดหมายส่วนตัวอ่านแล้วเหมือนโฆษณา
  • The Digest สำหรับบทสรุปที่ถูกกวาดสายตา แถวมีหมายเลข มีเวลาอ่านก่อนทุกพาดหัว และมีคำเชิญชวนเดียวที่ด้านล่างแทนที่จะมีหก
  • The Storefront สำหรับการเปิดตัวสินค้า นี่คือเลย์เอาต์เดียวที่การเปิดด้วยภาพเป็นสิ่งถูกต้อง และก็ยังสร้างมาให้ภาพล้มเหลวได้
  • The Brief สำหรับตัวเลข สามตัวชี้วัดอยู่เหนือทุกสิ่ง และแผนภูมิแท่งที่ทำจากเซลล์ตารางแทนที่จะเป็น PNG

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

มีหนึ่งฉบับที่เราทำผิดตั้งแต่รอบแรก และนั่นแหละคือฉบับที่ควรเอ่ยถึง เดิมที The Digest เรียงแถวบทความซ้อนกันบนมือถือ ซึ่งเป็นสิ่งที่คู่มืออีเมลแบบตอบสนองทุกเล่มแนะนำ การเรียงซ้อนเปลี่ยนภาพย่อ 112 px สามภาพให้กลายเป็นภาพประดับเต็มความกว้างสูง 335 px สามภาพ และบทสรุปหกเรื่องก็กลายเป็นการเลื่อนหน้าจอยาว ๆ ตอนนี้แถวนั้นคือเลย์เอาต์สองคอลัมน์เดียวในชุดที่ไม่เรียงซ้อน กฎเรื่องการเรียงซ้อนพูดถึงคอลัมน์ของเนื้อหา ภาพย่อไม่ใช่คอลัมน์ของเนื้อหา

วิธีสร้างเทมเพลตแบบนี้ใน Brevo

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

เริ่มจากปุ่มหลักก่อน เพราะเป็นบล็อกที่มีการตั้งค่ามากที่สุด

Brevo

The Storefront บนพื้นที่ทำงาน

โปรแกรมแก้ไขอีเมลแบบลากและวางของ Brevo แสดงเทมเพลต The Storefront บนพื้นที่ทำงาน เลือกปุ่มหลักไว้ พร้อมการตั้งค่าป้ายกำกับ ลิงก์ สี ความโค้งมุม และระยะห่างในแผงด้านขวา
คอลัมน์ซ้าย: บล็อกที่คุณลากเข้ามา คอลัมน์ขวา: ทุกอย่างเกี่ยวกับบล็อกที่เลือก พื้นที่ทำงานแสดงอีเมลกว้าง 600 px ภายในโปรแกรมกว้าง 680 px นั่นคือเหตุผลที่เลย์เอาต์มือถือไม่ปรากฏ ถ้าเป็น 600 px พอดี จุดเปลี่ยนของเทมเพลตเองจะทำงาน แล้วคุณจะแก้เวอร์ชันโทรศัพท์ทั้งที่ปุ่มสลับบอกว่าเดสก์ท็อป

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

Brevo

แผนภูมิที่ไม่มีภาพอยู่เลยสักภาพ

โปรแกรมแก้ไขอีเมลของ Brevo แสดงเทมเพลต The Brief บนพื้นที่ทำงาน เลือกแผนภูมิแท่งไว้ และแผงด้านขวาแสดงว่าแผนภูมิสร้างจากเซลล์ตารางโดยไม่ใช้ภาพ
แผนภูมิที่ส่งออกเป็น PNG จะสูญเสียตัวเลขไปกับการปิดกั้นภาพ กับการกลับสีของโหมดมืด และกับโปรแกรมอ่านหน้าจอทุกตัว สี่แถวตารางที่มีเซลล์สีและป้ายข้อความไม่สูญเสียอะไรเลย และไม่มีน้ำหนักไฟล์

งานตัวอักษรก็ทำงานแบบเดียวกัน เลือกบล็อกข้อความแล้วแผงจะให้ฟอนต์ ขนาด ระยะบรรทัด และระยะห่าง ซึ่งก็คือเครื่องมือทั้งหมดที่ The Letter ต้องการ

Brevo

ข้อความยกมาก็คือบล็อกข้อความที่มีเส้นอยู่ด้านข้าง

โปรแกรมแก้ไขอีเมลของ Brevo แสดงเทมเพลต The Letter บนพื้นที่ทำงานและเลือกข้อความยกมาไว้ เป็น Georgia 19px บนระยะบรรทัด 30px ตัวเอียง พร้อมเส้นซ้าย 3px
ไม่มีคอมโพเนนต์พิเศษใด ๆ เป็นบล็อกข้อความ เส้นซ้าย 3 px ในสีเน้น และระยะห่างด้านใน 20 px ในจดหมายข่าวที่ดี เกือบทุกอย่างที่ดูเหมือนออกแบบเฉพาะ แท้จริงคือบล็อกมาตรฐานที่เปลี่ยนคุณสมบัติไปสองอย่าง

ส่วนภาพก็มีแผงของตัวเอง ที่ข้อความแทนอยู่บนสุด ไม่ใช่อยู่ท้ายรายการตั้งค่า

Brevo

ข้อความแทนคือช่องกรอก ไม่ใช่สิ่งที่นึกได้ทีหลัง

โปรแกรมแก้ไขอีเมลของ Brevo แสดง The Digest บนพื้นที่ทำงานและเลือกภาพย่อของบทความไว้ แสดงข้อความแทน ขนาดแสดงผล 112px ไฟล์ต้นทาง 480px และขนาดไฟล์ 17 KB
ขนาดแสดงผล 112 px ไฟล์ต้นทาง 480 px อัตราส่วน 2× นี่แหละที่ทำให้ภาพย่อคมชัดบนจอเรตินา ข้อความแทนอยู่ลำดับแรกเพราะเป็นส่วนของภาพที่ผู้ติดตามส่วนใหญ่จะได้รับจริง

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

พื้นฐานการออกแบบ Newsletter

การออกแบบรับใช้เนื้อหา

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

สัญญาณของการออกแบบ Newsletter ที่ดี:

  • ผู้อ่านสามารถสแกน Newsletter ทั้งหมดได้ใน 10-15 วินาที
  • เนื้อหาที่สำคัญที่สุดมองเห็นได้ทันที
  • แต่ละส่วนมีจุดเริ่มต้นและจุดสิ้นสุดที่ชัดเจน
  • CTA โดดเด่นโดยไม่รบกวน
  • Newsletter ดูตั้งใจ ไม่ใช่บังเอิญ

สัญญาณของการออกแบบ Newsletter ที่ไม่ดี:

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

หลักการลำดับชั้นภาพ

ลำดับชั้นภาพควบคุมลำดับที่ผู้อ่านประมวลผลข้อมูล ใน Newsletter สร้างลำดับชั้นผ่าน:

ระดับลำดับชั้นองค์ประกอบการปฏิบัติออกแบบ
หลักหัวเรื่องหลักตัวอักษรใหญ่ที่สุด ตัวหนา ตำแหน่งบนสุด
รองส่วนหัวหมวดตัวอักษรขนาดกลาง สีที่ตัดกัน
ตติยภูมิเนื้อหาตัวอักษรมาตรฐาน ขนาดอ่านได้
รองรับMetadata (วันที่ ผู้แต่ง)ตัวอักษรเล็กกว่า สีจางกว่า
การกระทำปุ่ม/ลิงก์ CTAสีที่ตัดกัน รูปแบบปุ่ม

กลยุทธ์เลย์เอาต์

เลย์เอาต์คอลัมน์เดียว

เลย์เอาต์คอลัมน์เดียวคือมาตรฐานทองคำสำหรับ Newsletter และแนวทางที่แนะนำสำหรับผู้เผยแพร่ส่วนใหญ่

ข้อดี:

  • แสดงผลได้อย่างสมบูรณ์บนทุกอุปกรณ์และขนาดหน้าจอ
  • สร้างการไหลของการอ่านตามธรรมชาติจากบนสู่ล่าง
  • ลดความซับซ้อนของการตัดสินใจออกแบบ
  • ลดปัญหาการแสดงผลข้าม Email Client
  • ตรงกับวิธีที่ผู้คนอ่านบนมือถือ (การเลื่อนแนวตั้ง)

เหมาะสำหรับ: Newsletter ที่เน้นข้อความ Newsletter ส่วนตัว เนื้อหาการศึกษา การวิเคราะห์แบบยาว

โครงสร้าง:

  1. ส่วนหัว (โลโก้ หมายเลขฉบับ วันที่)
  2. บทนำหรือหมายเหตุส่วนตัว
  3. ส่วนเนื้อหาหลัก
  4. ส่วนเนื้อหารอง (คั่นด้วยตัวแบ่ง)
  5. CTA หรือการเชิญชวนการมีส่วนร่วม
  6. ส่วนท้าย

เลย์เอาต์แบบการ์ด

จัดระเบียบเนื้อหาเป็นการ์ดภาพที่ชัดเจน แต่ละอันมีขอบ พื้นหลัง หรือเงาเป็นของตัวเอง

ข้อดี:

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

เหมาะสำหรับ: การรวบรวมเนื้อหา ลิงก์ที่คัดสรร การแสดงสินค้า Newsletter หลายหัวข้อ

เคล็ดลับการออกแบบสำหรับการ์ด:

  • ใช้ขนาดและการเว้นระยะการ์ดที่สม่ำเสมอ
  • รักษาสูงสุด 2 การ์ดต่อแถว (ซ้อนเป็น 1 บนมือถือ)
  • รวมขอบหรือสีพื้นหลังที่ละเอียดอ่อนเพื่อกำหนดการ์ด
  • รักษา Padding ที่สม่ำเสมอภายในแต่ละการ์ด

เลย์เอาต์แบบผสม

ผสมผสานคอลัมน์เนื้อหาหลักกับ Sidebar ที่แคบกว่าสำหรับเนื้อหาเสริม

ข้อดี:

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

ข้อจำกัด:

  • ต้องยุบเป็นคอลัมน์เดียวบนมือถือ
  • ซับซ้อนกว่าในการสร้างและดูแล
  • อาจรู้สึกรกถ้าไม่จัดระเบียบดี

เหมาะสำหรับ: Newsletter ของบริษัท สิ่งพิมพ์แบบสื่อ รูปแบบที่มีเนื้อหามาก

ตัวอักษรสำหรับ Newsletter

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

การเลือกฟอนต์

Email Client มีการรองรับฟอนต์จำกัด ใช้ Web-safe Font เป็นตัวเลือกหลัก:

ฟอนต์สไตล์เหมาะสำหรับ
ArialSans-serif ที่สะอาดและสมัยใหม่ทั่วไป ธุรกิจ
HelveticaSans-serif ที่ขัดเกลาแบรนด์พรีเมียม
GeorgiaSerif ที่สง่างามบทบรรณาธิการ แบบยาว
Times New RomanSerif แบบคลาสสิกแบบดั้งเดิม เป็นทางการ
VerdanaSans-serif กว้าง อ่านง่ายข้อความขนาดเล็ก มือถือ
Trebuchet MSSans-serif สมัยใหม่สร้างสรรค์ ไม่เป็นทางการ

Web Font: คุณสามารถระบุ Web Font (เช่น Open Sans หรือ Lato) พร้อม Web-safe Fallback พวกมันแสดงผลใน Apple Mail iOS Mail และ Android Client บางตัว แต่จะ Fallback ไปใช้ทางเลือกที่ปลอดภัยใน Outlook และ Gmail รุ่นเก่า

ขนาดฟอนต์

องค์ประกอบขนาดขั้นต่ำขนาดที่แนะนำ
ข้อความเนื้อหา14px16px
ส่วนหัวหมวด20px22-24px
หัวเรื่องหลัก24px28-32px
คำบรรยาย/Metadata12px13-14px
ข้อความปุ่ม CTA14px16px
ข้อความ Preheader12px14px

การเว้นบรรทัดและความอ่านง่าย

  • ความสูงบรรทัด: 1.4-1.6 สำหรับข้อความเนื้อหา (24-26px ที่ขนาดฟอนต์ 16px)
  • การเว้นย่อหน้า: 16-24px ระหว่างย่อหน้า
  • ความยาวบรรทัด: 50-75 ตัวอักษรต่อบรรทัด (ป้องกันความเหนื่อยล้าของสายตา)
  • การเว้นตัวอักษร: ค่าเริ่มต้นสำหรับข้อความเนื้อหา เพิ่มขึ้นเล็กน้อยสำหรับข้อความขนาดเล็ก

การจัดรูปแบบข้อความ

  • ตัวหนา: ใช้สำหรับวลีสำคัญและการเน้น ไม่ใช่ย่อหน้าทั้งหมด
  • ตัวเอียง: ใช้อย่างประหยัดสำหรับคำพูด ชื่อเรื่อง หรือการเน้นเบาๆ
  • ขีดเส้นใต้: สงวนไว้สำหรับลิงก์เท่านั้น (ข้อความที่ขีดเส้นใต้ที่ไม่ใช่ลิงก์ทำให้ผู้อ่านสับสน)
  • ตัวพิมพ์ใหญ่ทั้งหมด: ใช้เฉพาะสำหรับป้ายกำกับสั้นหรือปุ่ม ไม่ใช่ข้อความเนื้อหา
  • สี: ใช้สี Accent สีเดียวสำหรับลิงก์ รักษาข้อความเนื้อหาสีเทาเข้ม (#333) หรือใกล้ดำ

กลยุทธ์สี

การสร้างชุดสีสำหรับ Newsletter

จำกัด Newsletter ของคุณไว้ที่ 3-4 สี:

บทบาทสีการใช้งานตัวอย่าง
หลักส่วนหัว ปุ่ม CTA จุดเน้นสีน้ำเงินแบรนด์
ข้อความเนื้อหา ส่วนหัวรองสีเทาเข้ม (#333333)
พื้นหลังเนื้ออีเมลขาว (#FFFFFF) หรือเทาอ่อน (#F5F5F5)
Accentลิงก์ การไฮไลต์ CTA รองสีรองของแบรนด์

การเข้าถึงสี

  • รักษาอัตราส่วนคอนทราสต์ขั้นต่ำ 4.5:1 ระหว่างข้อความและพื้นหลัง
  • อย่าพึ่งพาสีเพียงอย่างเดียวในการสื่อข้อมูล
  • ทดสอบชุดสีของคุณด้วยเครื่องมือจำลองตาบอดสี
  • ตรวจสอบว่าลิงก์แยกแยะได้จากข้อความปกติ (ใช้การขีดเส้นใต้ ไม่ใช่แค่สี)

ข้อควรพิจารณาสำหรับ Dark Mode

Email Client หลายอันตั้งค่า Dark Mode เป็นค่าเริ่มต้น ออกแบบโดยคำนึงถึง Dark Mode:

  • หลีกเลี่ยงพื้นหลังขาวล้วน (#FFFFFF) ใช้ Off-white เล็กน้อย (#FAFAFA)
  • อย่าใช้ PNG โปร่งใสที่มีองค์ประกอบสีเข้ม (มันหายไปใน Dark Mode)
  • ทดสอบโลโก้บนพื้นหลังทั้งสว่างและมืด
  • เพิ่ม Meta Tag สำหรับการรองรับ Dark Mode Color Scheme
  • ใช้ขอบหรือ Outline บนรูปภาพสีเข้มเพื่อให้มองเห็นได้

การใช้รูปภาพใน Newsletter

เมื่อไหรที่ควรใช้รูปภาพ

รูปภาพควรเพิ่มคุณค่าที่ข้อความเพียงอย่างเดียวไม่สามารถให้ได้:

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

การปรับปรุงรูปภาพ

ข้อกำหนดคำแนะนำ
รูปแบบJPEG สำหรับรูปถ่าย PNG สำหรับกราฟิก
ความกว้างมาตรฐาน 600px 1200px สำหรับ Retina
ขนาดไฟล์ต่ำกว่า 200KB ต่อรูปภาพ
ขนาดอีเมลรวมต่ำกว่า 100KB ไม่รวมรูปภาพ
Alt Textคำอธิบาย 125 ตัวอักษรหรือน้อยกว่า
อัตราส่วน2:1 สำหรับ Hero Image 1:1 สำหรับ Thumbnail

อัตราส่วนรูปภาพต่อข้อความ

รักษาอัตราส่วนข้อความต่อรูปภาพที่ดีเพื่อหลีกเลี่ยง Spam Filter และรักษาความอ่านง่าย:

  • 60:40 ข้อความต่อรูปภาพ คืออัตราส่วนที่แนะนำ
  • อีเมลที่เป็นรูปภาพเป็นหลัก (อีเมลรูปภาพเท่านั้น) มีอัตรา Spam สูงกว่า
  • รวมเวอร์ชันข้อความของข้อมูลสำคัญเสมอ ไม่ใช่แค่ในรูปภาพ
  • ออกแบบสำหรับ Client ที่บล็อกรูปภาพ: Newsletter ของคุณควรเข้าใจได้โดยไม่มีรูปภาพ

การออกแบบ Newsletter ที่ให้มือถือมาก่อน

ข้อกำหนดการออกแบบมือถือ

ด้วยการเปิด Newsletter บนอุปกรณ์มือถือมากกว่า 60% การออกแบบมือถือไม่ใช่ทางเลือก

กฎเลย์เอาต์มือถือ:

  • ความกว้างเนื้อหาสูงสุด: 600px (แสดงผลดีบนทุกอุปกรณ์)
  • เป้าหมายการแตะขั้นต่ำ: 44x44 พิกเซลสำหรับปุ่มและลิงก์
  • ขนาดฟอนต์ขั้นต่ำ: 16px สำหรับข้อความเนื้อหาบนมือถือ
  • เลย์เอาต์คอลัมน์เดียวที่ซ้อนตามธรรมชาติ
  • ปุ่ม CTA เต็มความกว้างบนมือถือ
  • การเว้นระยะที่เหมาะสมระหว่างองค์ประกอบที่คลิกได้ (ป้องกันการแตะผิด)

เทคนิคการออกแบบ Responsive

เทคนิคเดสก์ท็อปมือถือ
ส่วนหลายคอลัมน์วางเคียงกันซ้อนแนวตั้ง
รูปภาพขนาดภายในเนื้อหาเต็มความกว้าง ปรับขนาด
ลิงก์นำทางแนวนอนซ้อนหรือซ่อน
ปุ่ม CTAแบบ Inline หรือชิดขวาเต็มความกว้าง
ขนาดฟอนต์มาตรฐานใหญ่ขึ้นเล็กน้อย
Padding20-40px15-20px

การทดสอบการแสดงผลมือถือ

ทดสอบการออกแบบ Newsletter ของคุณบน:

  • iPhone (Safari/Mail)
  • Android (Gmail App)
  • iPad
  • Gmail (เว็บ)
  • Outlook (เดสก์ท็อปและเว็บ)
  • Apple Mail (เดสก์ท็อป)

ใช้เครื่องมืออย่าง Litmus หรือ Email on Acid สำหรับการทดสอบการแสดงผลอัตโนมัติข้าม Email Client 90+ แบบ

การออกแบบส่วนต่างๆ ของ Newsletter

ส่วนหัว

ส่วนหัวของคุณสร้างตัวตนและกำหนดความคาดหวัง:

  • โลโก้: ขนาดที่เหมาะสม (ไม่ใหญ่เกินไป โดยทั่วไปกว้าง 150-200px)
  • ตัวระบุฉบับ: หมายเลขฉบับ วันที่ หรือชื่อฉบับ
  • ลิงก์ดูออนไลน์: สำหรับผู้ติดตามที่มีปัญหาการแสดงผล
  • รักษาให้กระชับ: ส่วนหัวไม่ควรผลักเนื้อหาออกไปใต้ Fold

ตัวแบ่งส่วน

ตัวแบ่งที่ชัดเจนระหว่างส่วนเนื้อหาช่วยให้ผู้อ่านสแกน:

  • เส้นแนวนอน: เส้นบางง่ายๆ (1-2px) ในสีที่เป็นกลาง
  • การเปลี่ยนสีพื้นหลัง: สลับระหว่างส่วนขาวและเทาอ่อน
  • การเว้นระยะเพิ่มเติม: Padding 30-40px ระหว่างส่วน
  • ส่วนหัวส่วน: ข้อความตัวหนา ใหญ่กว่า พร้อมสไตล์ที่สม่ำเสมอ

ส่วนท้าย

ส่วนท้ายที่ออกแบบดีทำให้ประสบการณ์สมบูรณ์:

  • ลิงก์ยกเลิก (กฎหมายกำหนด ทำให้ค้นหาง่าย)
  • ลิงก์โซเชียลมีเดีย
  • ที่อยู่ทางไปรษณีย์จริง (ข้อกำหนด CAN-SPAM)
  • ลิงก์ดูในเบราว์เซอร์
  • ตัวเลือกส่งต่อให้เพื่อน
  • Tagline หรือพันธกิจสั้นๆ ของแบรนด์

เครื่องมือออกแบบ Newsletter

ตัวแก้ไขในแพลตฟอร์ม

แพลตฟอร์ม Newsletter ส่วนใหญ่มีตัวแก้ไขการออกแบบในตัว:

แพลตฟอร์มประเภทตัวแก้ไขความยืดหยุ่นออกแบบคลัง Template
BrevoDrag-and-dropสูง40+ Template
MailchimpDrag-and-dropสูง100+ Template
ConvertKitตัวแก้ไขแบบง่ายปานกลางจำกัด
Substackเน้นข้อความต่ำน้อยมาก

ตัวแก้ไขแบบ Drag-and-drop ของ Brevo ทำให้การออกแบบ Newsletter ระดับมืออาชีพเข้าถึงได้โดยไม่ต้องมีความรู้ด้านการเขียนโค้ด สำหรับธุรกิจที่ใช้ Tajo คุณสามารถกรอกส่วน Newsletter แบบไดนามิกด้วยคำแนะนำสินค้าและเนื้อหาที่เป็นส่วนตัวตามพฤติกรรมผู้ติดตาม

แหล่งข้อมูลออกแบบ

  • Canva: สร้างรูปภาพส่วนหัว Newsletter กราฟิกโซเชียล และภาพประกอบ
  • Unsplash/Pexels: ภาพถ่าย Stock ฟรี
  • Really Good Emails: แกลเลอรีแรงบันดาลใจอีเมลที่ออกแบบดี
  • MJML: กรอบการทำงานอีเมล Open-source สำหรับการออกแบบแบบกำหนดเอง
  • Figma: ออกแบบ Template Newsletter แบบกำหนดเองพร้อมการส่งออก Email Plugin

รายการตรวจสอบการออกแบบ Newsletter

ก่อนส่ง Newsletter ใดๆ ตรวจสอบ:

เลย์เอาต์:

  • เลย์เอาต์คอลัมน์เดียวหรือหลายคอลัมน์ Responsive ที่เหมาะสม
  • ความกว้างเนื้อหา 600px หรือน้อยกว่า
  • ลำดับชั้นภาพที่ชัดเจนจากส่วนหัวถึงส่วนท้าย
  • ส่วนต่างๆ แยกกันชัดเจน

ตัวอักษร:

  • ข้อความเนื้อหา 16px หรือใหญ่กว่า
  • ความสูงบรรทัด 1.4-1.6
  • ส่วนหัวสร้างโครงสร้างเนื้อหาที่ชัดเจน
  • ข้อความลิงก์อธิบายได้ (ไม่ใช่ “คลิกที่นี่”)

รูปภาพ:

  • รูปภาพทั้งหมดมี Alt Text
  • รูปภาพปรับปรุงขนาดไฟล์แล้ว
  • Newsletter อ่านได้โดยไม่มีรูปภาพ
  • รูปภาพ Retina สำหรับจอ High-DPI

มือถือ:

  • ทดสอบบน iPhone และ Android แล้ว
  • ปุ่ม CTA เต็มความกว้างบนมือถือ
  • ขนาดฟอนต์อ่านได้บนหน้าจอเล็ก
  • เป้าหมายการแตะขั้นต่ำ 44px

การเข้าถึง:

  • คอนทราสต์สีตรงตามอัตราส่วน 4.5:1
  • เนื้อหามีโครงสร้างด้วยส่วนหัวที่เหมาะสม
  • ไม่มีข้อมูลที่สื่อสารด้วยสีเท่านั้น
  • รองรับ Screen Reader

แบรนด์:

  • สีตรงกับชุดสีแบรนด์
  • โลโก้มีขนาดและตำแหน่งที่ถูกต้อง
  • น้ำเสียงและเสียงสอดคล้องกับแบรนด์
  • ส่วนท้ายรวมองค์ประกอบทางกฎหมายที่จำเป็นทั้งหมด

การพัฒนาการออกแบบ Newsletter

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

  • ติดตามความลึกการเลื่อน: ผู้อ่านไปถึงด้านล่างของ Newsletter ไหม
  • ติดตาม Click Map: ส่วนใดได้รับการคลิกมากที่สุด ส่งเสริมเนื้อหาที่คล้ายกัน
  • สำรวจผู้ติดตาม: ถามเกี่ยวกับความต้องการด้านการออกแบบทุกปี
  • ทดสอบ A/B เลย์เอาต์: เปรียบเทียบเลย์เอาต์แบบการ์ดกับแบบเส้นตรง การวางรูปภาพ และสไตล์ CTA
  • ทบทวนคู่แข่ง: ศึกษาว่าอะไรได้ผลใน Newsletter ที่ประสบความสำเร็จในพื้นที่ของคุณ

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

เริ่มอย่างเรียบง่าย รักษาความสม่ำเสมอ และปรับปรุงตามข้อมูล การออกแบบ Newsletter ของคุณควรพัฒนาพร้อมกับกลุ่มเป้าหมาย ไม่ใช่นำหน้าพวกเขา

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

อะไรทำให้การออกแบบ newsletter ดี?
การออกแบบ newsletter ที่ดีใช้ลำดับชั้นการมองเห็นที่ชัดเจน การสร้างแบรนด์ที่สม่ำเสมอ ตัวอักษรที่อ่านง่าย (อย่างน้อย 16px) เลย์เอาต์คอลัมน์เดียวเพื่อรองรับมือถือ และการใช้พื้นที่ว่างอย่างมีกลยุทธ์ ช่วยนำสายตาผู้อ่านจากพาดหัวไปยังเนื้อหาและไปยังปุ่มเรียกร้องให้ดำเนินการ
Newsletter ควรเน้นข้อความหรือเน้นรูปภาพ?
ความสมดุลที่เหมาะสมขึ้นอยู่กับประเภทเนื้อหาของคุณ แต่ newsletter ส่วนใหญ่ทำงานได้ดีที่สุดด้วยอัตราส่วนข้อความต่อรูปภาพ 60/40 การออกแบบที่เน้นข้อความก่อนช่วยให้อ่านได้เมื่อรูปภาพถูกบล็อกและปรับปรุงอัตราการส่งถึง ใช้รูปภาพเพื่อสนับสนุนเนื้อหา ไม่ใช่แทนที่
เลย์เอาต์ newsletter ที่ดีที่สุดคืออะไร?
เลย์เอาต์คอลัมน์เดียวมีประสิทธิภาพมากที่สุดสำหรับ newsletter เพราะใช้งานได้กับทุกอุปกรณ์ อ่านผ่านได้ง่าย และนำความสนใจในรูปแบบเชิงเส้น ใช้ตัวแบ่งส่วนที่ชัดเจนและการจัดรูปแบบที่สม่ำเสมอเพื่อจัดระเบียบเนื้อหาภายในคอลัมน์เดียว
แชร์บทความนี้:
กลับไปยังบทความทั้งหมด

ขอสิทธิ์ใช้งานล่วงหน้า

กรอกชื่อพร้อมอีเมลหรือหมายเลขโทรศัพท์ แล้วเราจะติดต่อกลับพร้อมรายละเอียดการเข้าใช้งาน Tajo

ตรวจจับอัตโนมัติ

บทความที่เกี่ยวข้อง

newsletter

จดหมายข่าวอีเมล: คู่มือฉบับสมบูรณ์สำหรับการสร้างจดหมายข่าวที่ได้ผล

newsletter

เทมเพลตจดหมายข่าวฟรี: 15 ดีไซน์ที่ดีที่สุดสำหรับทุกอุตสาหกรรม

newsletter

Newsletter Sign Up: วิธีปรับแต่งฟอร์มให้ได้สมาชิกเพิ่ม

wordpress

คู่มือจดหมายข่าวบน WordPress: ปลั๊กอิน ฟอร์มสมัครสมาชิก การส่ง ระบบอัตโนมัติ และการส่งถึงกล่องจดหมาย (2026)

business-tools

ทางเลือกแทน Brevo: เปรียบเทียบ 8 แพลตฟอร์มอย่างตรงไปตรงมา

business-tools

Brevo API: คู่มือเชิงปฏิบัติสำหรับนักพัฒนา

รับ Brevo