Web Design

今すぐできる!HTMLメールの作り方


みなさんこんにちは、mayukouです。
ECサイトを運営していると、メルマガを発行することがあります。
みなさんは、購読しているメルマガはありますか?
また、文章だけのメルマガと画像付きのメルマガがあるのをご存知でしょうか。

メルマガは、文章だけのメールよりも
画像付きの(HTMLで作った)メールの方が
お客さんの購入率が高いとのこと。
確かに、画像付きメールは、商品の特徴が伝わりやすくて見てしまいますよね。
あまりセールスがうるさいと嫌がられますが、ネットショップ向きとも言えます。

そこで、発行するメルマガを、画像付きのHTMLに変えてみることにしました。
今回はHTMLメールの作り方をご紹介したいと思います。

スポンサードリンク

HTMLメールの事例

参考になりそうなHTMLメルマガをご紹介します。

オンラインストアZUTTO

42-zutto

綺麗な写真が生かされていて、もっと商品を見たい!と思いますよね。

 

HTMLメール作りの流れ

流れとしては、
1.イラレなどのソフトでカンプ作成

2.HTML化(コーディング)

3.HTMLメールの表示確認

4.本登録(本番送信登録)

となります。

1.カンプ作成

comp-mail
レスポンシブで作ることも可能なようですが、
今回は、簡単にできる固定幅で作成することになりました。

スマホ対応なら横幅は600pxに
スマホでも見るようにするには横幅は600pxがちょうどいいサイズ感です。

PCだけなら横幅850pxほどに
パソコンで見てインパクトを出したいときは、850pxがおすすめです。

文字は15px以上に
横幅にもよりますが、文字は見易い大きさにしましょう。

リンクをわかりやすく
クリックまたはタッチできるボタンはわかりやすく大きめにしましょう。

 

2.HTML化

DreamweaverなどのオーサリングソフトでHTML化しましょう。
ここでのポイントは、
テーブルでレイアウトする
インラインCSSを使う…<head>内にCSSを書き込んでも、メールソフトによっては対応していないことがあるのです。
画像パスは絶対パスにする
の3つです。
そのポイントに従ってコーディングしましょう。
また、以下のHTMLをコピペで使うと作業を早められます。

 

3.HTMLメールの表示確認

コーディングしたHTMLをブラウザで確認したら、
自分のメールにテスト送信してみましょう。

4.きちんと表示できていることを確認したら、
本番に送信登録しましょう。

 

最後に

いかがでしたか?HTMLメールの作り方をご紹介しました。
webの世界では、目にすることも多いメルマガですが、
HTMLメールで効果のあるメルマガを送って、より売上などを上げれるといいですね。

投稿者プロフィール

mayukou
mayukou
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約6年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら

Twitterをフォローしていただくと、最新情報を見逃しません♫

関連記事

  1. Web Design

    意外と知らなかった…google map をホームページに貼付ける方法

    みなさま、こんにちは。mayukouです。今回は、仕事で必要に…

  2. Web Design

    webデザインのトレンドと取り入れよう!デザインの参考になるwebリソース 〜海外編〜

    みなさんこんにちは、mayukouです。あっという間に土曜の半日が…

  3. Web Design

    デザインが成功するテンプレがここに。「なるほどデザイン」を読みました

    みなさんこんにちは、mayukouです。今回は、デザイン関連のお勧め…

  4. jQuery

    横幅いっぱいに表示可能なスライダーのjQueryプラグイン 「Skippr」が便利!

    みなさんこんにちは。11月に入り寒くなりましたね。今年もあと2ヶ月と…

  5. Photoshop

    Photoshop の水彩画ブラシで描いた植物イラストのご紹介

    みなさんこんにちは、mayukou です。肌寒いような暖かくなった…

  6. Web Design

    コピペでOK!wordpressに設置するシンプルな検索ボックス

    こんにちは。mayukouです。最近は、wordpressのカスタマ…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

CAPTCHA


メルマガを購読する

Web Design Cafeの メルマガを購読する

更新情報や、お知らせ、お得情報をゆる〜く配信(月1程度)。


最近の記事

instagramもやっています

facebook更新中!

スポンサー

こんなサイトも作ってます。

  1. お仕事紹介

    【お仕事紹介】学生向けアンケートパンフレット作りました
  2. 日記

    wordpressでコーギーブログ始めました♫
  3. 書評

    売り上げ不振の悩みを解決!「どうすれば売れるのか」を読んで
  4. Photoshop

    点線もかける!Photoshopでラインを引く方法を新たに発見(ストローク機能)…
  5. Web Design

    今後のデザインのトレンドとして注目!コンテンツファーストのサイトをまとめてみた
PAGE TOP