HTMLメールを導入する場合、1から自分で作成しようと思うと知識が必要なことはもちろん、手間も大きく掛かります。
一般的に、HTMLメールの作成にはテンプレートを使用して、必要な部分のみ編集する方法が採用されます。
本記事では、プログラミングにあまり詳しくないWeb担当の方にも利用してもらいたい、便利なテンプレートサイトをご紹介していきたと思います。
HTMLメールのテンプレートとは
テンプレートは、ダウンロードした時点でHTMLメールのデザインが既に作成されており、テキストや画像などの一部を改修して利用することの出来る「HTMLメールの枠組み」のような役割を果たします。
HTMLメールテンプレートに含まれるもの
HTMLメールのテンプレートには、メール自体を構成するhtmlファイルやCSSデザインなどが含まれています。
その他にもイメージ画像やアイコンなどといったデータが含まれるものもあり、画像を差し替えたり、アイコンをオリジナルのものに切り替えるだけでも、オリジナルのHTMLメールとして利用することが可能です。
HTMLメールでテンプレートを利用するメリット
HTMLメールでテンプレートを利用するメリットとしては、「作成時間を大幅に短縮可能」「対応メールクライアント確認の手間が省ける」の2つが挙げられます。
作成時間を大幅に短縮可能
HTMLメールをテンプレートなしで作成しようと思うと、知識が十分にある人だとしても時間が掛かってしまいます。
HTMLメールの本来の目的は、読みやすく訴求力の高いメールを作成することですので、HTMLメールの枠組み作成に時間を掛けるよりも、コンテンツの中身に時間を割いた方が有意義と言えます。
対応メールクライアント確認の手間が省ける
HTMLメールでは、各種メールクライアントの設定により表示方法が異なるため、環境によっては想定した通りにメールを表示出来ないことがあります。
自分自身で1からHTMLメール用のテンプレートを作成した場合、対応するメールクライアントを調査しなければなりません。
一方で、HTMLメール用のテンプレートを使用することで、既に検証済みのHTMLメールを利用することが出来るため、手間を省くことが可能です。
一般的にHTMLメール用のテンプレートとしてWebサイト上に公開されているものは、有名どころのメールクライアントで動作確認済みですので、安心して利用することが可能となります。
HTMLメールでテンプレートを利用するデメリット
逆にHTMLメールでテンプレートを利用するデメリットとしては「デザインの自由度が下がる」ことが挙げられます。
デザインの自由度が下がる
HTMLメール用のテンプレートを使用すると、どうしてもテンプレートに沿ったコンテンツしか作成出来ないため、1からHTMLメールを作成する場合に比べると自由度は下がってしまいます。
テンプレートにはない、オリジナルのHTMLメールを作成したい場合には、1からご自身でHTMLメールを構築する必要があります。
HTMLメールの無料テンプレートがダウンロード出来るサイト
ここからはHTMLメールのテンプレートが配布されているサイトをいくつかご紹介していきたいと思います。
Cerberus
シンプルでどんな用途にも利用しやすいHTMLメールのテンプレートを無料でダウンロード出来ます。
ダウンロードする方法としては「GitHub」または「公式サイト」から「zip」ファイルを直接ダウンロードすることで取得可能です。
スマートフォン用のレスポンシブ対応もしっかりと行われており、複数のメールクライアントで利用出来ます。
海外サイトですので公式ページは全て英語表記ではありますが、デモ画面でサンプルを確認して利用用途に沿ったテンプレートを選択可能です。
ZURB
HTMLメールのテンプレートをダウンロード出来るサイトとしては定番とも言えるのが「ZURB」です。
シンプルな構成のHTMLテンプレートを5種類無料で利用することが可能です。
テンプレートの構成も「html」ファイルと「css」ファイルというシンプルな構成ですので、HTMLの知識がある人なら改修することもそれほど難しくないでしょう。
Open Source Email Templates
「Open Source Email Templates」では、HTMLメールのテンプレートが豊富に提供されています。
様々なコンセプトに合わせてテンプレートが用意されているため、利用用途に近いものを選びやすいサイトです。
なかなか好みのテンプレートが見つからないという方は一度こちらのサイトも確認してみましょう。
Open Source Email Templatesの公式サイトはこちら >>
BeeFree
BeeFreeでは、ただテンプレートをダウンロード出来るだけでなく、ユーザーがブラウザ上でテンプレートを編集することが可能です。
操作方法はドラッグ&ドロップを中心として、初心者の方でも感覚的に利用出来るような仕組みとなっています。
提供されているデザインの種類も豊富なため、プログラミングの知識がなくても、ブラウザ上の操作だけでオリジナルのHTMLメールを作成してしまうことも可能と言えます。
99designs
日本のデザイン会社が提供しているHTMLメールのテンプレートを利用することが可能です。
「ニュースレター」「プロモーション」「メール通知」の3種類が提供されており、それぞれに「グリーン」「ブルー」「オレンジ」「グレー」のカラーオプションが利用出来ます。
また、高解像度のPSDファイルのダウンロードも可能となっているため、Webデザイン(Photoshop)の知識をお持ちの方であれば、PSDファイルから編集することも可能です。
Mosaico
Mosaicoでは、上述してきたようなHTMLテンプレートをダウンロードして編集するサイトとは異なり、Webブラウザ上でドラッグ&ドロップの操作で自分自身でテンプレートを作成することが出来るサイトです。
大まかなデザインをドラッグ&ドロップで作成し、テキストや画像を入力することでオリジナルのテンプレートを作成していきます。
ボタンの大きさやテキストのフォントなども編集可能で、プログラミングの知識の無い方でも細かい部分までこだわったHTMLメールを作成することが可能です。
海外サイトのため、全て英語での説明ではありますが、直感的に操作出来るためそれほど問題になることは無いでしょう。
さいごに：HTMLメールはテンプレートを活用して効率的に作成しよう
本記事では、HTMLメールのテンプレートについての基本情報とダウンロードサイトについてご紹介していきました。
HTMLメールを1から作成することは労力や時間などのコストを考えてもおすすめ出来るとは言えません。
今回ご紹介したようなテンプレートサイトから、作成したいHTMLメールの枠組みを探して編集することで、効率的にオリジナルのHTMLメールを作成することが可能です。
テンプレートでは思い通りのデザインが実現出来ない場合に、1からHTMLメールの作成を検討してみるのはいかがでしょうか。
