最近のメルマガは、HTMLメールが主流です。調査によると、国内企業でもっとも配信されているメルマガの形式はHTML形式のものです。HTML形式のメルマガは、デザイン性が高いメリットがありますが、HTMLやCSSの知識が必要です。
「専門知識はないけれど、効果的なデザインにしたい…」というメルマガ担当者のために、「すぐに使える」、「無料」のメルマガデザインのテンプレートとデザインギャラリーを厳選しました。さらに、私たちマケフリ編集部のメルマガ活用例もご紹介します。
この記事のもくじ
メルマガのテンプレート配布サイトまとめ
この章では、メルマガデザインをダウンロードできるサイトを紹介します。ダウンロードしたテンプレートは、中の文章を変えるだけで、すぐにメルマガとして活用できます。
Cakemail
テンプレートのダウンロードに、サインアップやログインは不要です。ダウンロード前に、テンプレートの中身を知りたい場合は、Viewボタンをを押せば、デバイス別のプレビューを確認できます。
Cakemailは、テンプレートのダウンロードから活用するまでのステップが少ないため、とにかく早くテンプレートが欲しい担当者におすすめです。
99 designs
メルマガのデザインテンプレートは、ニュースレター（メルマガ）、プロモーション、告知用の３つにカテゴリわけされています。また、メルマガのデザインの色合いも、グリーン、ブルー、オレンジ、グレーの４色から選択でき、高解像度のPSD版もダウンロードできます。
なお、メルマガのデザインテンプレートの配布サイトは日本語ですが、テンプレートの中身は英語表記されています。
Open Source Email Templates
クリックするだけで、HTMLメールのテンプレートをダウンロードでき、メール配信ツールに貼り付けるだけで利用可能です。
Cerberus
近年では、スマートフォンやタブレットでメールを閲覧する読者も多いため、レスポンシブ対応は必須です。
Cerberusのテンプレートは、GmailやOutlookなどの主要なメーラー表示に対応しているため、安心して活用できます。加えて、CerberusのHTMLメールテンプレートは、CSSがインライン化されています。そのため、ダウンロードしたファイルの中身を、メール配信ツールやマーケティングオートメーションなどにコピペするだけで、デザインが反映されます。
ただし、Cerberusに掲載されているHTMLメールのテンプレートは、シンプルなものがほとんどです。よく言えば使い勝手がよいのですが、悪く言えば他社と似たり寄ったりです。BtoC企業などで、なるべく他社が使っていないようなデザインを取り入れたい場合、おすすめはできません。
Zurb
Zurbでは、スマートフォン対応のHTMLメールのテンプレートが無料でダウンロードできます。
対法人営業、マーケティングでもすぐに使えそうな、基本的なレイアウトのテンプレートがあります。HTMLメールのテンプレートの文字を書き換えるだけで、スマートフォン対応のHTMLメールを自分で作成できます。
ただし、ZurbのHTMLメールのテンプレートは、CSSとHTMLが別のファイルに分かれています。つまり、ダウンロードしたHTMLファイルをお使いのメール配信ツールにコピペしただけでは、テンプレートのデザインが反映されません。
お使いのツールでZurbのHTMLメールを編集して配信する際には、CSSをHTMLメールにインライン化する必要があります。
加えて、このHTMLメールのテンプレートは、Outlook2007-13で最適化されていないのでご注意ください。最新の対応状況は、ZurbのHTMLメールテンプレート対応表でご確認いただけます。
メルマガのデザイン作成サイトのご紹介と活用例
デザイン作成サイトは、メルマガテンプレート配布サイトと違い、細かい配置や、写真、色などがWeb上で変更できます。そのため、HTMLやCSSといったマークアップ言語をよく知らなくてもデザイン可能です。完成したデザインをダウンロードし、メルマガ配信ツールに落とし込めば、そのままメルマガ配信が可能です。
紹介するHTMLメール作成サイト１：Topol.io
Topol.ioは、HTMLメールをブラウザ上でデザインできるサービスです。本サイトでメルマガのデザインを作るには、Topol.io上のテンプレートを選択するか、白紙の状態からはじめます。
会員登録せずに利用できるので、気軽にお試しいただけます。
HTMLメールとは、HTML言語を使って視覚効果を高めたメールをさします。くわしくは「HTMLメールとは？ビジネスで使えるHTMLメールの作り方を解説！」が参考になります。合わせてご覧くださいませ。
フリーで使えるイメージも用意されています。会員登録等は必要ありません。
今回は、同サイトのテンプレートを使って、メルマガのデザインをする方法の解説をします。2021年4月の同サービスの仕様に基づいて説明していますので、以降、多少の機能変更があって、解説と実際の操作が異なる可能性があることは、あらかじめご了承くださいませ。
Topol.ioを使ってメルマガをデザインテンプレートから編集する
今回は、無料で利用できるテンプレートをもとに、HTMLメールのデザインを作る流れを紹介します。HTMLメールのレイアウトを変更するためには、HTMLやCSSの知識が必要です。今回は、テンプレートのレイアウトの変更なしで、テンプレートの画像と文字を編集することで、自社用のHTMLメルマガのデザインをします。
アイコンやボタンの変更は、変えたい箇所を選択すると表示される、Choose imageのボタンから可能です。アイコンにURLリンクを設定したい場合には、Image linkの欄にURLを貼り付けて設定しましょう。
テキスト部分の変更は、変更したいテキストを選択して編集するだけです。文字コードがUTFであるため、日本語入力にも対応しています。フォントや配置、色などブラウザ上で全て変更できます。
紹介するHTMLメール作成サイト２：BeeFree.io
テンプレート選択画面では、使用用途やカテゴリーに分けてソートできます。beefreeでは、BtoBの日々のメルマガから、BtoCのセール情報まで、多様なテンプレートを使えます。
beefree.ioを使ってメルマガをデザインテンプレートから編集する
beefree.ioでのメルマガデザイン作成についてご紹介します。
画像の編集・変更は、Change imageから可能です。画像をクリックした時の動きは、ACTION欄で変更できます。ACTIONでは、下記が可能です。
- Webページのリンクをつける
- アドレスにメールを送信する
- 電話をかける
- SMSを作成する
テキストの編集についてご紹介します。テキストは、変更したい場所をクリックするだけで変更できます。beefree.ioも、日本語入力に対応しています。
テンプレートにコンテンツを追加したい場合も、操作はかんたんです。まずは、ROWSのタブからコンテンツを挿入するためのボックスを、はめ込みたい箇所にドラッグします。挿入できるコンテンツの種類は、テキストから動画まで、多岐にわたります。続いて、CONTENTのタブから、挿入したいコンテンツをドラッグします。
メルマガのデザインギャラリーまとめ
メルマガのデザインのアイデア創出の方法として、デザインギャラリーが参考になります。メルマガ担当者なら、いくつかのメルマガデザインギャラリーはブックマークしておきましょう。最近のメルマガのデザイントレンドを学ぶ上でも有効です。
「メルマガ」と検索すれば、日本語のメルマガが多数ヒットします。さらに、「メルマガ 飲食店」や、「メルマガ 不動産」のように複数ワードで検索することもできます。
Email-Gallery
気になるキーワード（英語）で検索できます。Browseをクリックすることで、特定分野のメルマガのデザインを探してみましょう。
HTMLメールのデザインは、なるべくツールを活用しよう
より簡単にHTML形式のメールマガジンを作成するには、メール配信ツールやマーケティングオートメーションの活用がオススメです。
多くのツールには、予めHTML形式のテンプレートが搭載されています。このテンプレートを活用することで、HTMLやCSSの知識がないデザイン未経験者でも簡単にHTML形式のメルマガが作成できます。
マケフリ編集部には、元々デザインの知見を持っていたメンバーはいません。マーケティングオートメーションKairos3 Marketingを用いてHTMLメール（マルチパートメール）のメルマガを配信しています。Kairos3 Marketingでは、HTMLメールの作成に加え、メルマガ配信後の開封率やクリック率といった各種数値の計測が可能です。そのため、仮説を立ててABテストを実施し、PDCAサイクルを回せます。Kairos3 Marketingは月額15,000円（税抜）よりご利用いただけます。ご興味がありましたら、詳細は下記URLよりご確認ください。https://www.kairosmarketing.net/marketing-automation
※この記事は、4月26日に更新しました。
