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

最近のメルマガは、HTMLメールが主流です。HTML形式のメルマガは、視覚的なデザイン性が高いメリットがありますが、HTMLやCSSの知識が必要になってしまいます。

メルマガ担当者がHTMLやCSSの深い知識がなくてもメルマガを作成できる、「すぐに使える」、「無料」のメルマガデザインのテンプレートとデザインギャラリーをご紹介します。

メルマガのデザインは即席のテンプレートを活用しよう

HTMLメール形式のメルマガのデザインは、どこまでも時間をかけて工夫をすることができます。

メルマガの基礎と一般知識について
メルマガの基礎や概要、メルマガ運営で必要となる知識については「メルマガとは?読めば全てがわかる徹底解説」でまとめました。

HTML形式のメルマガは、ある環境でレイアウトが崩れたり、表示できなかったりと、想定しないトラブルが発生します。HTMLやCSSの知識があっても、自社でメルマガのデザインをつくりこむことは、あまりおすすめできません。

メルマガのデザインには、デザインテンプレートの活用をおすすめします。広く配布されているメルマガのテンプレートであれば、環境依存によるレイアウトの崩れなどのトラブルをできるだけ避けることができます。

メルマガの作り方のまとめ
メルマガの作り方の手順やテクニックは「メルマガの作り方を徹底解説〜担当者のためのメルマガ配信手順」でまとめました。合わせてご覧くださいませ。

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

メルマガのデザインテンプレートは数多く存在します。その中から、ダウンロードしてすぐに使えるメルマガのデザインテンプレートを配布しているサイトをご紹介します。

Free newsletter templates


http://templates.cakemail.com

Free newsletter templatesでは、ジャンル別にさまざまなメルマガのテンプレートがダウンロードできます。メルマガのテンプレートのみ扱っている点も、嬉しいポイントです。

右上にログインとサインアップのボタンがありますが、サインアップしなくてもテンプレートはダウンロードできます。

テンプレートを選択して、プレビューボタンを押せば、テンプレートをダウンロードする前に、テンプレートの中身を見ることができます。

メルマガのデザインテンプレート配布サイトでは一番お手軽です。

99 designs


https://99designs.jp/

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

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

メルマガのデザインテンプレートの配布サイトは日本語化されていますが、テンプレートの中身は英語なので注意してください。

メルマガのデザインテンプレート利用時の注意点

本記事でご紹介するメルマガテンプレートでも、テンプレートをダウンロードすると、画像とHTMLファイルに分かれています。HTMLファイルをメルマガ配信ツールにコピーしても画像が表示されません。画像は、別途、メルマガ配信ツールにアップロードしてください。

いくつかのテンプレートでは、メルマガ配信ツールにHTMLをコピーするだけで画像が表示されるデザインテンプレートがあります。HTMLのIMGタグに、画像をバイナリーで表示する方法をとっています。

メルマガをデザインする作業上、とても簡単で作業ミスがありません。しかし、この方法は受信者の環境によっては、画像が表示できない可能性があります。

メルマガのデザイン作成サイトの活用例

メルマガをHTML形式でデザインするときは、かんたんなHTMLのコーディングの知識が必要でした。しかしここで紹介するサイトでは、WEB上でメルマガのデザインができます。できたデザインはダウンロードにより、メルマガ配信ツールに落とし込めば、そのままメルマガ配信が可能です。

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


https://topol.io/

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

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

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

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

メルマガのデザインテンプレートから編集する

今回は、「Autumn email template」をテンプレートとしてHTMLメールのデザインを作る流れを紹介します。HTMLメールのレイアウトを変更するためには、HTMLやCSSの知識が必要です。今回は、テンプレートのレイアウトの変更なしで、テンプレートの画像と文字を編集することで、自社用のHTMLメルマガのデザインをします。

まず画像の編集・変更について説明します。変更したい画像を選択して、左側のChoose Imageを選択するだけです。ここで、変更したい画像を選択・アップロードします。画像にURLリンクを設定したい場合には、Edit ImageをクリックしてURLリンクを設定しましょう。

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

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

メルマガのデザインのアイデア創出の方法として、デザインギャラリーが参考になります。メルマガ担当者なら、いくつかのメルマガデザインギャラリーはブックマークしておきましょう。

Pinterest


https://www.pinterest.jp/

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

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

Email-Gallery


http://www.email-gallery.com/
海外のメルマガ(newsletter)のデザインを探すときには、Email-Galleryがおすすめです。

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

さいごに

メルマガのデザインについてまとめました。特にHTMLメールでメルマガをデザインするときには、できるだけテンプレートをダウンロードして編集のみにとどめておくと良いでしょう。

メルマガデザインのアイデアのために、メルマガのデザインギャラリーをブックマークしておきましょう。最近のメルマガのデザイントレンドを学ぶ上でも有効です。