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デザインのお仕事を始めてなんとか約5年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。

詳しくはこちら


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

関連記事

  1. Web Design

    WordPressでポートフォリオサイトをリニューアルしました。wordpressで作るメリットとデ…

    みなさんこんにちは、mayukouです。約3年ぶりにポートフォリオサ…

  2. Web Design

    カフェのサイトをwordpressでリニューアル制作しました。その時の覚書

    みなさんこんにちは、mayukouです。さて、今回はwordpres…

  3. Photoshop

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

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

  4. Sass

    使わない方が良い?WordPress 案件をsassでカスタマイズして思う3つのこと。

    みなさんこんにちは、mayukouです。先月、仕事の案件でwordp…

  5. Web Design

    クライアントに喜ばれる!集客用ホームページを作る手順

    もっとあなたに作って欲しい!とどんどん注文がくるwebデザイナーになり…

コメント

  • コメント (0)

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

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

CAPTCHA


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. Web Design

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

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

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

    Photoshopでスタンプ表現が簡単に!PSD素材で一発表現!
  5. デザイン

    【随時更新】クリスマス&年賀状に使えるイラスト素材を無料配布します♩
PAGE TOP