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

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

  • このエントリーをはてなブックマークに追加

前回に引き続き、非デザイナー向けに無料ツールを利用したHTMLメールの作り方をご紹介します。

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

 

>>HTMLメール用テンプレート集をプレゼント!

 

いよいよ、メール本文を作ろう!

前回は、家づくりにおける設計や土台・骨組みづくりにあたる”メールテンプレートの作成”について解説しました。本記事ではいよいよ、外装や内装の仕上げにあたる”メール本文の作成”についてご紹介します。

今回使用するのはscratchpadという無料のHTML編集ツールです。こちらも英語のツールですが、使い方は至ってシンプル、心配は無用です。

 

ツールを起動

下記URLをクリックして、ツールを起動します
http://scratchpad.io/

Scrathpad

 

メールテンプレートを貼りつけ

★メールテンプレートのソースファイルを左画面に貼りつけます

前回作成したindex.htmlをnotepadなどのテキストエディターで開くと、ソースファイルを出力することができます。ソースファイルを左画面に貼りつけると、右画面にHTMLの表示イメージがリアルタイムで出力されます。

html_mail_template_15 shadow_flat

 

不要箇所を削除

★「Webバージョン」「アップデート設定」などは今回利用しませんので、削除します

左画面のエディター上で109-144行目を削除すると、右画面上部のバーが削除されます。

html_mail_template_9

 

ヘッダー画像を差し替える

★ヘッダー画像のURLを指定する

label=”Header Image”と定義されているimgタグ(<img ~/>)のsrc=”~”部分に差し込みたい画像ファイルのURLを絶対パス(http://~で始まるURL)で記述します。URLを指定すると、右画面の赤枠部分に画像が差しこまれます。

html_mail_template_10

 

メール本文を編集する

★テキストのみブロックを編集する

label=”Text only”と定義されたlayoutタグ(<layout>~</layout>)には見出しと説明文を1種類ずつ含みます。(画像は含みません)
「Add a title」と「Enter your description」を書き換えることで、それぞれ見出しと説明文を編集することができます。

html_mail_template_11

 

★テキスト&画像のブロックを編集する

label=”Text with full-width image”やlabel=”Text with right-aligned image”と定義されたlayoutタグ(<layout>~</layout>)には見出しと説明文に加えて画像を含みます。テキストのみのブロックと同様に見出しと説明文を書き換え、さらにimgタグ(<img ~/>)に差し込みたい画像のURLを指定しましょう。(src=”~”を追記する)

html_mail_template_12

 

見出し・説明文・画像をそれぞれ指定すると、下記のようにリアルタイムで表示イメージが出力されます。

html_mail_template_13

 

フッターを修正する

★登録変更・解除フォームのURLを指定する

登録変更・解除の前後にあるaタグ(<a href=”~”>~<a>)に登録変更・解除用のフォームURLを指定します。

html_mail_template_14

 

htmlとして保存する

★完成したソースをHTMLファイルとして保存する

完成したソースファイルはnotepadなどのテキストエディターにコピー&ペーストしてHTMLファイルとして保存しましょう。

 

完成したメールを見てみよう

これでHTMLメールの完成です!最後にもう一度アウトプットを確認してみましょう。
(アウトプットイメージはこちら)

html_mail_mml

 

いかがでしたか。前回と比べるとやや難しかったかもしれませんが、無料でCoolなHTMLメールを手に入れるために、ぜひチャレンジしてみてくださいね!

「もっとラクにHTMLメールを作りたい!」そんな方にはエディタ機能が付いたメール配信システムがおすすめです。

関連ページ:メール配信サービス「配配メール」のHTMLエディタ

 

メール配信のお悩み配配メールで解決!無料資料をプレゼント
The following two tabs change content below.

メルラボ編集部

「Mail Marketing Lab(メルラボ)」編集部。メールマーケティングの効果を上げるためのさまざまな情報を発信します。
  • このエントリーをはてなブックマークに追加

関連するおすすめ記事

  • 配配メールバナー