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デザイナーになるための勉強をしたい人にオススメ書籍まとめ

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

  3. CSS

    レスポンシブ対応!CSSで二重線のボーダーボックスを作る方法

    みなさんこんにちは、mayukouです。先日、ホームページを作る際に…

  4. Web Design

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

    みなさんこんにちは。今日は福岡はあいにくの雨ですが、いかがお過ごし…

  5. Web Design

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

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

  6. Photoshop

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

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

コメント

  • コメント (0)

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

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

CAPTCHA


メルマガを購読する

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

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


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. jQuery

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

    2015年の振り返りと今年の抱負
  3. Photoshop

    Photoshopのウィンドウを見やすく!ワークスペースを工夫してみよう
  4. 未分類

    便利!IllustratorやPhotoshopを使ったボタンの作り方記事まとめ…
  5. Illustrator

    助かった!Illustratorが重たい時の対処方法
PAGE TOP