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

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

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

今回は非デザイナーの筆者が、無料ツールを利用して実際にお客様に送るHTMLメールを作ってみました。アウトプットはこちらです。 #メルラボの運営元である『株式会社ラクス』では『配配メール』というメール一斉送信システムを提供しており、今回は『配配メール』のお客様にメルラボをご紹介する目的でメールを作成しました。 html_mail_mml いかがですか?プロ並み!…とはいきませんが、素人が作ったにしてはなかなか悪くない(ですよね?)。本講座(全2回)を終えた頃には皆さんもこの程度のHTMLメールが作れるようになりますよ。Let’s challenge!!

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

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

ツールを起動

★下記URLをクリックして、ツールにアクセスします。 https://www.campaignmonitor.com/email-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メールの作り方~後編~
配配メール「信頼と実績のメール配信サービス」
  • このエントリーをはてなブックマークに追加

関連するおすすめ記事

タグで調べる・探す

お役立ち資料