# 新手上路！EDM 設計入門教學：快速製作出第一封電子報

> 



製作電子報的工具





在介紹基礎概念之前，其實選對工具非常重要，好的電子報工具會幫你把各種細節都把關好，如果你沒有設計的經驗，公司也沒有工程師能夠客製化寫 Email 模板，可以利用電子豹內建的拖放式工具直接進行操作，參考這篇：如何使用拖放式編輯器設計內容？





若想使用其他的 Email 模板可以參考這一篇：找不到適合的模板嗎？利用這 3 款編輯器，輕鬆做出電子報，或是選擇有提供模板工具的 EDM 寄送廠商。






電子報設計元素





一般 EDM 最基礎的組成是信頭+ 內容 + 信尾，為了重複使用，標題和信尾中的元素最好有通用性，也可以讓收件者更容易辨識。








 * 信頭：供收件者辨識寄件者身份，讓收件者一眼就看的出是誰寄的電子報。你可以放上公司的 logo 或是主題名稱。
 * 標題、內容、按鈕：信件的主要大標題與內容，如果是要引導點擊，會需要包含 Call To Action 按鈕，讓收件者到購買頁面或是提供更多資訊的網頁。
 * 信尾：在信尾提供的資訊通常會是相對次要，但「取消訂閱」是必要加入的連結。其他資訊例如：公司資訊、網站連結

**分類：** Email 行銷  
**作者：** tin  
**發布日期：** 2024-07-03T08:30:00.000+08:00


## 製作電子報的工具

在介紹基礎概念之前，其實選對工具非常重要，好的電子報工具會幫你把各種細節都把關好，如果你沒有設計的經驗，公司也沒有工程師能夠客製化寫 Email 模板，可以利用電子豹內建的**拖放式**工具直接進行操作，參考這篇：[如何使用拖放式編輯器設計內容？](https://blog.newsleopard.com/how-to-use-drag-and-drop-editor-20190606/?ref=cms.newsleopard.com)

若想使用其他的 Email 模板可以參考這一篇：[找不到適合的模板嗎？利用這 3 款編輯器，輕鬆做出電子報](https://blog.newsleopard.com/%e5%88%a9%e7%94%a8%e9%80%993%e6%ac%be%e7%b7%a8%e8%bc%af%e5%99%a8%ef%bc%8c%e8%bc%95%e9%ac%86%e5%81%9a%e5%87%ba%e9%9b%bb%e5%ad%90%e5%a0%b1%e7%89%88%e5%9e%8b/?ref=cms.newsleopard.com)，或是選擇有提供模板工具的 EDM 寄送廠商。

## 電子報設計元素

一般 EDM 最基礎的組成是**信頭+ 內容 + 信尾**，為了重複使用，標題和信尾中的元素最好有通用性，也可以讓收件者更容易辨識。

![信頭+ 內容 + 信尾](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2016/11/template1.jpg)

信件元素

-   **信頭：**供收件者辨識寄件者身份，讓收件者一眼就看的出是誰寄的電子報。你可以放上公司的 logo 或是主題名稱。
-   **標題、內容、按鈕：**信件的主要大標題與內容，如果是要引導點擊，會需要包含 Call To Action 按鈕，讓收件者到購買頁面或是提供更多資訊的網頁。
-   **信尾：**在信尾提供的資訊通常會是相對次要，但「取消訂閱」是必要加入的連結。其他資訊例如：公司資訊、網站連結、聯絡方式等等。  
    此外，其他選擇性內容，也適合放在信尾，如：收到電子報的原因、版權聲明、隱私權聲明。

延伸閱讀：[4 個 call to action 測試，協助你提升電子報點擊率](https://blog.newsleopard.com/4%E5%80%8Bcall-to-action%E6%B8%AC%E8%A9%A6%EF%BC%8C%E5%8D%94%E5%8A%A9%E4%BD%A0%E6%8F%90%E5%8D%87%E9%9B%BB%E5%AD%90%E5%A0%B1%E9%BB%9E%E6%93%8A%E7%8E%87/?ref=cms.newsleopard.com)

## 設計出符合活動主題的圖片

電子報設計的技巧，以**規劃配色**、**重點圖片**最能輕鬆吸引讀者，其他的部分盡量保持簡潔。

配色建議訂定與品牌相關的色系，或是以行銷活動主題相關的顏色來發想。圖片可以善用免費的素材、設計工具，來製作吸引人的區塊，並且善用左右圖文排版、雙欄、三欄設計，製造版面的豐富性。

延伸閱讀：[設計師愛用的五個免費圖庫 + 設計工具](https://blog.newsleopard.com/free-images-and-design-tool/?ref=cms.newsleopard.com)

## Email 內圖片和文字互相搭配

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2022/07/templat2.jpg)

圖片、文字分開設計

傳統的 Email 設計通常會是一張大圖，或是好幾張圖片加上連結拼接而成。然而，比起都是圖片組成的電子報，收件端更偏好由**大量文字**組成的電子報內容。

因此，在設計時需要**避免將文字內容都壓在圖片裡**，而是應該儘可能的以文字編寫電子報，並只在必要時使用圖片，而這樣也可以確保你的信件在手機上有良好的閱讀體驗：如果文字都在圖片裡，會造成手機版文字太小、根本無法閱讀，更嚴重的狀況是，若第一次收到的使用者沒有點選「顯示圖片」按鈕，他就只會看到一封空白的郵件，會直接影響你的抱怨、取消訂閱數。

由於業界針對圖片佔比並沒有一個固定的說法，因此為了不讓圖片佔比太高，豹編覺得 20% 是一個不錯的參考值。( Facebook 廣告圖片建議的文字比例是 20% )

那麼，要怎麼開需求給設計？建議是寬 800px 以內的 jpg 檔，72dpi（儲存成網頁用）並且檔案大小不要超過 200KB，郵件的載入速度也會影響整體的體驗 。

## 利用響應式設計 EDM、或是以手機為中心思考的出發點

響應式設計 (Responsive Email Design) 是指郵件能夠同時在電腦、手機、平板等不同的載具上有良好的閱讀體驗。

例如：在電腦上看是雙欄位設計，在手機顯示的是一欄式設計，讓文字與按鈕不至於太小看不到。因此上一段提到的圖文分開製作就很重要。

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2021/06/rwd-emails.jpg)

圖片來源：電子豹母親節模版

## 寄出信件前進行測試

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2022/07/templat3.jpg)

製作完後，最好針對主流收件裝置進行測試，包括手機版收件軟體、網頁版 Gmail、桌機版 Outlook 等等。如果你使用的是[拖放式編輯器](https://blog.newsleopard.com/how-to-use-drag-and-drop-editor-20190606/?ref=cms.newsleopard.com)，**供應商基本上會幫你確認好各種載具相容性的問題**，這時你只要專心檢查：

1.  文字內容、圖片是否正確
2.  連結是否正確
3.  圖片的 alt 有沒有都放上去

### 測試深色模式

現在手機、電腦很多人開始使用深色模設定，這會讓你的 Email 相同的載具、不同的設定底下呈現不一樣的狀況，有關於深色模式如何因應？可以參考：[如何優化 Email 在深色模式（dark mode）的設計呈現？](https://blog.newsleopard.com/dark-mode-design-for-email/?ref=cms.newsleopard.com)

## 多蒐集他人的電子報案例

![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2022/07/emails.png)

圖片來源：[Really Good Emails](https://reallygoodemails.com/?ref=cms.newsleopard.com)

如果有在下 Facebook 廣告或 Adwords 廣告的話，你可能知道觀察他人的廣告是靈感來源的一部份。對於電子報來說，這也同樣適用。

**訂閱競品的電子報**，能協助你短期內累積可參考的電子報內容。

[Really Good Emails](https://reallygoodemails.com/?ref=cms.newsleopard.com) 提供許多國外的 Email 設計版型參考。

## 開始優化

在版型設計妥當，也準備好素材之後，就可以開始準備優化電子報內容了。該從什麼地方開始下手？包括主旨、Call to action 都是很好的對象。

* * *

[![](https://prod-newsleopard-blog.s3.amazonaws.com/wp-content/uploads/2023/07/customized-banner-1.png)](https://newsleopard.com/newsleopard/services/customized-design?ref=cms.newsleopard.com)