メルマガのデザインはこれで完璧!メルマガテンプレート活用術とデザインギャラリーまとめ

最近のメルマガは、HTMLメールが主流です。調査によると、国内企業でもっとも配信されているメルマガの形式はHTML形式のものです。HTML形式のメルマガは、デザイン性が高いメリットがありますが、HTMLやCSSの知識が必要です。

「専門知識はないけれど、効果的なデザインにしたい…」というメルマガ担当者のために、「すぐに使える」、「無料」のメルマガデザインのテンプレートとデザインギャラリーを厳選しました。さらに、私たちマケフリ編集部のメルマガ活用例もご紹介します。

メルマガのテンプレート配布サイトまとめ

この章では、メルマガデザインをダウンロードできるサイトを紹介します。ダウンロードしたテンプレートは、中の文章を変えるだけで、すぐにメルマガとして活用できます。

Cakemail

Cakemailでは、ジャンル別にさまざまなメルマガのテンプレートをダウンロードできます。

テンプレートのダウンロードに、サインアップやログインは不要です。ダウンロード前に、テンプレートの中身を知りたい場合は、Viewボタンをを押せば、デバイス別のプレビューを確認できます。

Cakemailは、テンプレートのダウンロードから活用するまでのステップが少ないため、とにかく早くテンプレートが欲しい担当者におすすめです。

99 designs

99 designsでは、「無料のテンプレートをダウンロード!」のリンクから、メルマガのテンプレートを無料でダウンロードできます。

メルマガのデザインテンプレートは、ニュースレター(メルマガ)、プロモーション、告知用の3つにカテゴリわけされています。また、メルマガのデザインの色合いも、グリーン、ブルー、オレンジ、グレーの4色から選択でき、高解像度のPSD版もダウンロードできます。

なお、メルマガのデザインテンプレートの配布サイトは日本語ですが、テンプレートの中身は英語表記されています。

Open Source Email Templates

Open Source Email Templatesは、他のサイトにくらべ多くのテンプレートが掲載されています。そのため、利用目的や用途に合わせたテンプレートを選べるでしょう。

クリックするだけで、HTMLメールのテンプレートをダウンロードでき、メール配信ツールに貼り付けるだけで利用可能です。

Cerberus

CerberusのHTMLメールのテンプレートは、レスポンシブに対応しています。レスポンシブとは、閲覧者の画面サイズに合わせて、自動でメールの横幅等を調整する機能です。

近年では、スマートフォンやタブレットでメールを閲覧する読者も多いため、レスポンシブ対応は必須です。

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メール作成サイト1:Topol.io

Topol.ioは、HTMLメールをブラウザ上でデザインできるサービスです。本サイトでメルマガのデザインを作るには、Topol.io上のテンプレートを選択するか、白紙の状態からはじめます。

会員登録せずに利用できるので、気軽にお試しいただけます。

HTMLメールについて
HTMLメールとは、HTML言語を使って視覚効果を高めたメールをさします。くわしくは「HTMLメールとは?ビジネスで使えるHTMLメールの作り方を解説!」が参考になります。合わせてご覧くださいませ。

フリーで使えるイメージも用意されています。会員登録等は必要ありません。

今回は、同サイトのテンプレートを使って、メルマガのデザインをする方法の解説をします。2021年4月の同サービスの仕様に基づいて説明していますので、以降、多少の機能変更があって、解説と実際の操作が異なる可能性があることは、あらかじめご了承くださいませ。

Topol.ioを使ってメルマガをデザインテンプレートから編集する

今回は、無料で利用できるテンプレートをもとに、HTMLメールのデザインを作る流れを紹介します。HTMLメールのレイアウトを変更するためには、HTMLやCSSの知識が必要です。今回は、テンプレートのレイアウトの変更なしで、テンプレートの画像と文字を編集することで、自社用のHTMLメルマガのデザインをします。
まず画像の編集・変更について説明します。まずは、変更したい画像を選択して、左側のRemove Imageで、もともと挿入されている画像を削除します。その後、変更したい画像を選択・アップロードします。

アイコンやボタンの変更は、変えたい箇所を選択すると表示される、Choose imageのボタンから可能です。アイコンにURLリンクを設定したい場合には、Image linkの欄にURLを貼り付けて設定しましょう。

テキスト部分の変更は、変更したいテキストを選択して編集するだけです。文字コードがUTFであるため、日本語入力にも対応しています。フォントや配置、色などブラウザ上で全て変更できます。

紹介するHTMLメール作成サイト2:BeeFree.io

beefree.ioも、かんたんにWeb上でメルマガテンプレートのデザインが可能です。Topol.ioと同様に、会員登録を行う必要はありません。

テンプレート選択画面では、使用用途やカテゴリーに分けてソートできます。beefreeでは、BtoBの日々のメルマガから、BtoCのセール情報まで、多様なテンプレートを使えます。

beefree.ioを使ってメルマガをデザインテンプレートから編集する

beefree.ioでのメルマガデザイン作成についてご紹介します。

画像の編集・変更は、Change imageから可能です。画像をクリックした時の動きは、ACTION欄で変更できます。ACTIONでは、下記が可能です。

  • Webページのリンクをつける
  • アドレスにメールを送信する
  • 電話をかける
  • SMSを作成する

テキストの編集についてご紹介します。テキストは、変更したい場所をクリックするだけで変更できます。beefree.ioも、日本語入力に対応しています。

テンプレートにコンテンツを追加したい場合も、操作はかんたんです。まずは、ROWSのタブからコンテンツを挿入するためのボックスを、はめ込みたい箇所にドラッグします。挿入できるコンテンツの種類は、テキストから動画まで、多岐にわたります。続いて、CONTENTのタブから、挿入したいコンテンツをドラッグします。

メルマガのデザインギャラリーまとめ

メルマガのデザインのアイデア創出の方法として、デザインギャラリーが参考になります。メルマガ担当者なら、いくつかのメルマガデザインギャラリーはブックマークしておきましょう。最近のメルマガのデザイントレンドを学ぶ上でも有効です。

Pinterest

メルマガのデザインギャラリーとして、Pinterestが活用できます。日本のメルマガも検索できます。

「メルマガ」と検索すれば、日本語のメルマガが多数ヒットします。さらに、「メルマガ 飲食店」や、「メルマガ 不動産」のように複数ワードで検索することもできます。

Email-Gallery

海外のメルマガ(newsletter)のデザインを探すときには、Email-Galleryがおすすめです。

気になるキーワード(英語)で検索できます。Browseをクリックすることで、特定分野のメルマガのデザインを探してみましょう。

HTMLメールのデザインは、なるべくツールを活用しよう

より簡単にHTML形式のメールマガジンを作成するには、メール配信ツールやマーケティングオートメーションの活用がオススメです。

多くのツールには、予めHTML形式のテンプレートが搭載されています。このテンプレートを活用することで、HTMLやCSSの知識がないデザイン未経験者でも簡単にHTML形式のメルマガが作成できます。

マケフリ編集部のメルマガ活用例
マケフリ編集部には、元々デザインの知見を持っていたメンバーはいません。マーケティングオートメーションKairos3を用いてHTMLメール(マルチパートメール)のメルマガを配信しています。Kairos3では、HTMLメールの作成に加え、メルマガ配信後の開封率やクリック率といった各種数値の計測が可能です。そのため、仮説を立ててABテストを実施し、PDCAサイクルを回せます。Kairos3は月額15,000円(税抜)よりご利用いただけます。ご興味がありましたら、詳細は下記URLよりご確認ください。https://www.kairosmarketing.net/marketing-automation

※この記事は、4月26日に更新しました。