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. jQuery

    軽量のスクリプトで簡単に!レスポンシブメニューを実装できるResponsive Nav

    みなさんこんにちは、mayukouです!今回は、うちのブログで結構…

  2. Web Design

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

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

  3. Web Design

    スキルアップ!Webデザイナーになるための勉強をしたい人にオススメ書籍まとめ

    みなさんこんにちは、mayukouです。webの業界は、日々進歩して…

  4. Web Design

    丸からスライドして出てくる検索ボックスの作り方

    みなさまこんにちは、mayukouです。今日は天気がいいのでランニ…

  5. Web Design

    【有料記事】スキルアップしよう。デザイン力が育つ方法とは。

    みなさんこんにちは、mayukouです。デザイナー5年目の私が、仕事…

コメント

  • コメント (0)

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

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

CAPTCHA


メルマガを購読する

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

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


最近の記事

  1. photoshopでカンプ作成

instagramもやっています

facebook更新中!

スポンサー

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

  1. お仕事紹介

    お仕事紹介:保育園のお祭りパンフレットを作りました!
  2. CSS

    グローバルメニューに最適♫メニュー幅を均一にしてくれるtable cellが便利…
  3. illustration

    インスタ映えな挿絵が描ける!ステキな水彩画イラストの描き方本に出会いました。
  4. photoshopでカンプ作成

    Photoshop

    photoshop CCでデザインカンプを作成。メリットとデメリット
  5. Web Design

    CSS nite in FUKUOKA vol.6に行ってきました。
PAGE TOP