メールマーケティングラボは、メールを使ったコミュニケーション、メールマーケティングの効果をあげるための様々な情報を発信します
【非デザイナー向け】無料ツールを利用したHTMLメールの作り方~前編~

【非デザイナー向け】無料ツールを利用したHTMLメールの作り方~前編~

「HTMLメール…一度は試してみたいけれど、Webデザインなんてサッパリだし、制作会社に頼むお金もないし、やっぱり諦めるしかないかな…」こんな悩みをお持ちの方はいませんか?本講座では2回にわたって無料ツールを利用した簡単なHTMLメールの作り方をご紹介します。

どの程度のHTMLメールが作れるの?

今回は非デザイナーの筆者が、無料ツールを利用して実際にお客様に送るHTMLメールを作ってみました。アウトプットはこちらです。
#メルラボの運営元である『株式会社ラクス』では『配配メール』というメール一斉送信システムを提供しており、今回は『配配メール』のお客様にメルラボをご紹介する目的でメールを作成しました。
html_mail_mml

いかがですか?プロ並み!…とはいきませんが、素人が作ったにしてはなかなか悪くない(ですよね?)。本講座(全2回)を終えた頃には皆さんもこの程度のHTMLメールが作れるようになりますよ。Let’s challenge!!

まずはメールテンプレートを作ろう!

HTMLメールの作成工程は大きく、(1)メールテンプレートの作成と、(2)メール本文の作成にわかれます。家づくりに例えると、(1)は設計や土台・骨組みづくり、(2)は外装・内装の仕上げといったイメージです。前編の本記事では、(1)メールテンプレートの作成手順をご紹介したいと思います。
今回、テンプレートの作成に使用するのはCampaign Monitor社が提供する無料ツールです。英語のツールですが、インターフェースが非常に優れていますので、“英語が苦手”という方でも簡単に使えると思います。それでは、さっそくメールテンプレートを作ってみましょう!

ツールを起動

★下記URLをクリックして、ツールにアクセスします。
http://www.campaignmonitor.com/templates/

★ツールを起動(画像クリックで拡大)

html_mail_template_1

テンプレートを選択

★テンプレートレイアウトを選択(画像クリックで拡大)
テンプレートは4種類から選べます。今回は一番シンプルな「Simple annoucement」を選択します。

html_mail_template_2

★テンプレートをカスタマイズ

 ★基本設定(クリックで選択)
テンプレート全体に適用されるスタイルを定義します。ひとまず「言語」を「日本語」に設定すればOKです。

html_mail_template_3

★Header設定(クリックで画像拡大)
今回はヘッダーに画像を使用します(テキストでもOK)。また、ソーシャルシェアリング設定はOFFにします。

html_mail_template_4

★Content設定(クリックで画像拡大)
ここでは背景やテキストの色を定義します。カラーコードを知らなくてもパレットから選択することができるので楽ちん。

html_mail_template_5

★Footer設定(クリックで画像拡大)
さきほどと同様に今度はフッターの色を指定し、さらに署名を入力します。これでテンプレートの作成は完了!

html_mail_template_6

テンプレートをダウンロード

★メールテンプレートをダウンロード(クリックで画像拡大)
作成したテンプレートをダウンロードしましょう。フォームが表示されますが、登録しなくともダウンロード可能です。

html_mail_template_7

これでメールテンプレートができあがりました。あっけないほど簡単でしたね。最後にダウンロードしたテンプレートを確認して今回の講座はおしまいです。zipファイル解凍するとindex.htmlというファイルがありますので、ブラウザで開いてみましょう。

html_mail_template_8

あれっ、さっき設定した画像がない?!どこかで操作を間違えたかな?と慌てる必要はありません。今回はあくまでもHTMLの土台・骨組みを作成しただけなので、これでOKです。画像を挿入やテキストの修正方法については、次回の講座でしっかりと解説したいと思います。お疲れさまでした!(執筆/編集:陶山 大介

後編はこちら
【非デザイナー向け】無料ツールを利用したHTMLメールの作り方~後編~





メール配信システム「配配メール」



The following two tabs change content below.

Daisuke Suyama

法人向けクラウドサービスを提供する株式会社ラクスで製品企画を担当しております。
Loading Facebook Comments ...
Scroll To Top