みなさんこんにちは、mayukouです。
ECサイトを運営していると、メルマガを発行することがあります。
みなさんは、購読しているメルマガはありますか？
また、文章だけのメルマガと画像付きのメルマガがあるのをご存知でしょうか。
メルマガは、文章だけのメールよりも
画像付きの（HTMLで作った）メールの方が
お客さんの購入率が高いとのこと。
確かに、画像付きメールは、商品の特徴が伝わりやすくて見てしまいますよね。
あまりセールスがうるさいと嫌がられますが、ネットショップ向きとも言えます。
そこで、発行するメルマガを、画像付きのHTMLに変えてみることにしました。
今回はHTMLメールの作り方をご紹介したいと思います。
スポンサードリンク
HTMLメールの事例
参考になりそうなHTMLメルマガをご紹介します。
オンラインストアZUTTO
綺麗な写真が生かされていて、もっと商品を見たい！と思いますよね。
HTMLメール作りの流れ
流れとしては、
1.イラレなどのソフトでカンプ作成
↓
2.HTML化（コーディング）
↓
3.HTMLメールの表示確認
↓
4.本登録（本番送信登録）
となります。
1.カンプ作成
レスポンシブで作ることも可能なようですが、
今回は、簡単にできる固定幅で作成することになりました。
・スマホ対応なら横幅は600pxに
スマホでも見るようにするには横幅は600pxがちょうどいいサイズ感です。
・PCだけなら横幅850pxほどに
パソコンで見てインパクトを出したいときは、850pxがおすすめです。
・文字は15px以上に
横幅にもよりますが、文字は見易い大きさにしましょう。
・リンクをわかりやすく
クリックまたはタッチできるボタンはわかりやすく大きめにしましょう。
2.HTML化
DreamweaverなどのオーサリングソフトでHTML化しましょう。
ここでのポイントは、
・テーブルでレイアウトする
・インラインCSSを使う…<head>内にCSSを書き込んでも、メールソフトによっては対応していないことがあるのです。
・画像パスは絶対パスにする
の３つです。
そのポイントに従ってコーディングしましょう。
また、以下のHTMLをコピペで使うと作業を早められます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Type" content="text/html; charset=iso-2022-jp"> <title>メルマガ◎号</title> <meta http-equiv="Content-Style-Type" content="text/css"> </head> <body> メルマガ内容 </body> </html> |
3.HTMLメールの表示確認
コーディングしたHTMLをブラウザで確認したら、
自分のメールにテスト送信してみましょう。
4.きちんと表示できていることを確認したら、
本番に送信登録しましょう。
最後に
いかがでしたか？HTMLメールの作り方をご紹介しました。
webの世界では、目にすることも多いメルマガですが、
HTMLメールで効果のあるメルマガを送って、より売上などを上げれるといいですね。
投稿者プロフィール
- Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約６年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞（洋楽）、料理、読書、ブログです。
詳しくはこちら
最新の投稿
- 2018.11.10Photoshop画像からフォントを探してくれる！Photoshopのマッチフォントが素敵。
- 2018.09.02CSSフレームワークサイト制作が早くなる！Bootstrapの特徴
- 2018.08.04jQueryJQueryで要素を消すスクリプト！ECサイトの注意書きにもオススメ！
- 2018.07.31jQueryスマホに使える！３階層のアコーディオンメニューを作りました！
この記事へのコメントはありません。