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

    カードレイアウトにもオススメ!Masonryプラグインの使い方

    みなさんこんにちは、mayukouです。今回は、今流行りのカードレイ…

  2. CSS

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

    みなさんこんにちは、mayukouです。「コーポレートサイト作るけど…

  3. Web Design

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

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

  4. Web Design

    自分の頭をデザイン脳に!CSS nite fukuoka vol.8に参加しました

    みなさんこんにちは、mayukouです。このあいだ1月に行われたセミ…

  5. Web Design

    作るごとに成長しよう!キュレーションメディアを作るときに気をつけること。

    みなさんこんにちは、mayukouです。仕事でキュレーション風ニュー…

コメント

  • コメント (0)

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

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

CAPTCHA


メルマガを購読する

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

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


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. CSS

    一手間でおしゃれに。CSSでマテリアルデザイン風のボタンを作る方法
  2. デザイン

    おすすめ!かすれたロゴに最適なスタンプ風なフリーフォント
  3. wordpress

    wordpressが重たい!そんな困った時に便利なプラグイン
  4. ブログ

    [書評]サラリーマンだけが知らない好きなことだけ食っていくための29の方法
  5. food photo

    写真

    カメラ上手に!食べ物を美味しく撮るコツとは?
PAGE TOP