﻿ 知らないと損!?HTMLメールを作るときに知っておくべきデザインやサイズ、フォントについて｜お役立ちコラム｜【導入社数8,000社突破】メルマガ・メール配信サービスの配配メール
お問い合わせ（平日9:00～18:00）
東京：03-6675-3612
名古屋：052-218-6937
大阪：06-6376-5222
福岡：092-739-8085
特徴
見込み客を見える化
手厚いアフターフォロー
かんたん操作
機能は必要なものだけ
スパム判定を回避
セキュリティ
料金
機能
機能
基本配信機能
メール作成機能
管理機能
分析/効果測定機能
メールマーケティング機能
導入事例
コラム
資料請求
導入の流れ
よくある質問
ニュース
特徴
見込み客を見える化
手厚いアフターフォロー
かんたん操作
機能は必要なものだけ
スパム判定を回避
セキュリティ
料金
機能
機能
基本配信機能
メール作成機能
管理機能
分析/効果測定機能
メールマーケティング機能
導入事例
よくあるご質問
メール・メルマガ配信コラム（コラム）
メールマーケティングとは？
ニュース・リリース
サイトマップ
フォームでの資料請求・お問い合わせ
資料請求・お問い合わせ
お電話でのお問い合わせ（平日9:00～18:00）
東京
名古屋
大阪
福岡
お役立ちコラム
メルマガ配信・一斉メール配信サービスの【配配メール】
お役立ちコラム
知らないと損!?HTMLメールを作るときに知っておくべきデザインやサイズ、フォントについて
知らないと損!?HTMLメールを作るときに知っておくべきデザインやサイズ、フォントについて
メルマガ
メール書き方
Tweet	
デザイン性の高いHTMLメール。テキストメールと違い、画像や動きを入れることで、マーケティング効果を高めることができます。昔よりもツールが増えたことで、専門知識がなくても作りやすくなっています。ただし、スマホでストレスなく情報を見るためには、注意するべきサイズもあることを覚えておきましょう。
目次
表示・非表示
デザインでイメージを伝えられるHTMLメール
HTMLメールのメリット
HTMLメールの注意点
最大のメリットは画像表示
HTMLメールで画像が表示される仕組み
数字で見るHTMLメール
横幅の設定
フォントの設定
リンク設置ボタンのサイズ
受信環境を考えた4つの対策
1.マルチパート配信
2.レスポンシブデザイン
3.リキッドレイアウト
4.フレキシブルレイアウト
ユーザーの読みやすさを考えたHTMLメール作り
デザインでイメージを伝えられるHTMLメール
スマホの普及により、htmlメールは今や一般的となりました。HTMLメールは画像などを使い、ユーザーの視覚にうったえることで興味を引くことができます。テキストメールと違うメリットとデメリットについて、確認してみましょう。
HTMLメールのメリット
・画像を使って視覚的に商品、サービスをアピールできる
・開封率、クリック率といった効果測定ができる
・マーケティングの改善ができる
・ブランドイメージを植え付けやすい
HTMLメールの注意点
・作るのに専門的な知識が必要になる場合がある
・表示が受信者の端末環境に左右される
・メール容量が大きくなる
・自動的に迷惑メールに振り分けられる可能性がある
HTMLメールの利用で注意したいのが、レイアウトが崩れる可能性があることです。受信者の端末環境によって、表示されない、デザインが崩れるなど予想外の見栄えになってしまいます。できるのであれば、送信前にいくつかの端末で表示を確認すると良いでしょう。
最大のメリットは画像表示
HTMLメールを利用するメリットの中でも着目したいのが、「表現力の高さ」です。テキストメールと違い、画像を利用したメールによって視覚的なインパクトを与えることができます。マーケティング効果の向上を期待することができます。
関連記事はこちら無料でHTMLメールを作れる？メルマガ配信に使える無料ツールをご紹介
HTMLメールで画像が表示される仕組み
画像表示の仕組みを知るためには、HTMLメールの仕組みを知る必要があります。まず、HTMLメールは「メール」という配信原稿と「ミラーページ」や「ランディングページ」、「画像フォルダ」から構成されます。ミラーページは、メールと基本内容は同じでありながら、ユーザーの環境設定によりメールが正しく表示されない場合に使用されるページです。ランディングページはメールおよびミラーページ内のURLをクリックした先に表示されるページのことを指します。メール、ミラーページ、ランディングページの3つのページ内で使用される画像が画像フォルダ内に収められています。
ミラーページやランディングページ、画像フォルダのデータはサーバー上に置かれ、一般的に同じフォルダ内に収められます。この場合、画像は「相対パス」という「基準とされたページからその画像までの経路」を示すアドレスが利用されます。一方、メールのデータはシステムを通して配信されるため「絶対パス」という「基準のページに関わらず、画像にたどり着くためのアドレス」が利用されます。「http://~」などから始まるURLがこれに当たります。
HTMLメールでの画像表示では、絶対パスが利用されている必要があります。誤って相対パスが使われていたり、画像がサーバーにあげられていなかったりする場合には画像が表示されなくなります。HTMLメールでの画像は、「絶対パスによって指定のサーバー内へとたどり着くことで表示される」という仕組みで成り立っています。
関連記事はこちらテキストメールとHTMLメールの違いとは？目的に応じて使いわけるコツ
数字で見るHTMLメール
HTMLメールのメリットは、視覚的にアピールできる点。そして、最近ではスマホでHTMLメールを見るのが主流となっています。そのことから、スマホでどう見えるかは重要なポイントとなるでしょう。 HTMLは設定するサイズによって「見やすさ」が変わってきます。HTMLメルマガを作る時にどのように設定するのが良いのか確認してみましょう。
横幅の設定
受信者がメールを読むかの判断は、第一印象が大切です。HTMLメールは、その点で大きなメリットを持ちます。しかし、横にスクロールしなければ全文が読めないメールは、受信者の関心を削ぐ要因となるのです。
現在HTMLメールの横幅は600pxか850pxで設定ができます。それぞれのメリットは、受信する端末によって違います。
【600px】
・メリット→スマホで見やすい
・デメリット→PCで見た時印象が弱い
【850px】
・メリット→PCで見た時インパクトがある
・デメリット→スマホで見た時小さくなるので、文字が読みづらい
ただ、受信者にあわせメールを作り直すのは手間も時間もかかってしまいます。その補助策として考えられているのが、背景色をつける方法です。600pxで作成したメールに背景色をつけることで、PCではデザインとしてみることができます。一方スマホでは、背景色は表示されないため見やすいメールになるのです。
フォントの設定
横幅をスマホで見やすい600pxにした時、拡大せずに読めるフォントサイズは「15pt以上」です。基本的に拡大して読むユーザーはいないものとして考え、15pt以上でメールを作成します。また、より伝えたい情報は24pt以上にするなど、工夫することでメリハリのある内容にすることもできるでしょう。
そして、文字数も重要なポイントとなります。横幅600px、フォントサイズ15ptの場合、だいたい45文字が1行あたりの表示文字数になります。横幅の設定でも伝えた通り、横にスクロールして読むメールは、読まれない可能性が高くなるので注意してください。
「横幅600px」「フォントサイズ15pt以上」「1行あたり45文字以内」を意識するとスマホで読みやすいメールが作れるでしょう。
リンク設置ボタンのサイズ
ユーザーを自社サイトや商品・サービスの詳細ページに誘導するためにリンクが設置されます。URLを貼るだけでもリンクは設置できますが、せっかくHTMLでデザインするのであればリンク設置ボタンを入れましょう。画面上でも目立たせることで、ユーザーを目的地に誘導しやすくなります。
スマホの画面でタップできるようにするには、ボタンを作る際、縦横50px以上が必要になります。また、いくつかリンクを設置するのであれば、各リンクエリア間に20pxの隙間を入れるといいでしょう。
ボタンサイズを大きくすることで目立たせることはできますが、間隔が近いと押し間違える可能性もあります。それでは、ユーザーのストレスになるので「見やすさ」「使いやすさ」を意識してメールを作るようにします。
受信環境を考えた4つの対策>
ユーザーが受信する環境はそれぞれ違います。せっかく作り上げたメールでも閲覧されなければ意味がありません。多くのユーザーが利用するのはスマホになりますが、他の端末でも利用できる方法があるなら知っておくべきでしょう。
次は、PC、スマホ、タブレットなど機器の違いがあっても対応できる方法を4つ紹介していきます。
1.マルチパート配信
スマホの普及で一般化したといっても、すべてのユーザーがHTMLメールを見ているわけではありません。メールソフトが対応していないと、表示崩れや表示されないといった事態になります。そのため、マルチパート配信の設定は必須となるでしょう。
マルチパート配信は、受信者の環境に合わせてメールの表示を切り替えるといった機能です。HTMLデータとテキストデータの両方をもったメールを送ることで、受信者の環境にあったデータが表示されます。
関連記事はこちらマルチパートメールはメルマガに向いている！基礎知識と導入方法
2.レスポンシブデザイン
レスポンシブデザインは、画面サイズに合わせデザインを変更することができます。端末の画面サイズに合わせ表示を変えるので、PC、スマホのどちらでも読みやすいメールを送ることができるのです。
とても便利な機能ですが、PCをベースに作っていると、画面サイズの小さいスマホで見えづらくなります。端末にあわせて設定を精査するので、作るのに時間がかかる点と、データが重くなる点には注意が必要です。
3.リキッドレイアウト
リキッドレイアウトは、要素を割合で指定することで、画面サイズに合わせ表示させます。文章や画像などコンテンツをそれぞれ1つの枠に入れるようにして、枠ごとに表示サイズを調整します。大きなレイアウトズレをおこすリスクを軽減できますが、画面サイズの大きな端末だと幅広い印象になります。
4.フレキシブルレイアウト
リキッドレイアウトをベースとして、「表示サイズの最大値・最小値を固定」する方法。現在多くのメルマガで　利用されています。画面サイズに合わせ枠を調整する点は同じですが、最大値・最小値を指定するので、大きな画面では余白が生まれます。PCなどの大きな画面で見た時の幅を固定したい、といった場合によく利用されるレイアウトです。
紹介したような機能を使えば、いろいろな端末に向け情報を発信することができます。しかし、一から知識や技術を学ぶのは、時間も労力もかかるでしょう。そういった面倒事を解決するには、メール配信サービスを利用するのも一つの手段となります。
テンプレート等で簡単にHTMLメールを作成できるだけでなく、ほとんどの場合マルチパート配信にも対応しています。そのため、あまり知識がなくてもユーザーに確実にメールを届けることができます。
ユーザーの読みやすさを考えたHTMLメール作り
スマホで見やすいHTMLメールは「横幅600px」、「フォントサイズ15pt以上」が基本となります。そして、ユーザーにとって読みやすいメールは、拡大やスクロールといった操作をせずに読めることがポイントです。横にスクロールさせないと、全文が読めないメールはストレスになります。15pt以上であれば45文字以内で文章を区切るようにしてください。
PCやタブレットにも対応できる設定はありますが、多くのユーザーが利用しているのはスマホになります。今回紹介した数字を意識して、スマホでも読みやすいHTMLメール作りを心がけましょう。
人気記事
メールの一斉送信で効率化！メルマガ配信ソフトの活用方法について 2018年1月29日
メールを一斉送信する方法とは？複数送信するときのマナーもご紹介 2017年11月02日
メルマガとは？10分でメルマガを説明できるようになる基礎講座 2018年4月27日
人気記事
メールの一斉送信で効率化！メルマガ配信ソフトの活用方法について 2018年1月29日
メールを一斉送信する方法とは？複数送信するときのマナーもご紹介 2017年11月02日
メルマガとは？10分でメルマガを説明できるようになる基礎講座 2018年4月27日
【例文あり】ステップメールは「型」で差がつく！成功の秘訣を解説 2018年2月27日
メルマガスタンドとは？無料で使えるメルマガ配信システムをご紹介 2018年6月20日
おすすめ記事
MA・CRM・SFAの違いとそれぞれの役割とは？ 2020年6月24日
インサイドセールス導入成功のための3つのポイントとは？ 2020年6月30日
メール配信システムとマーケティングオートメーションを徹底比較！抑えるべき5つのポイント 2018年3月8日
メールマーケティングとは何か？メルマガとの違いややり方を解説 2018年3月8日
ステップメールとは？作成手順5ステップとシーン別の注意点をご説明！ 2018年5月31日
今なら売上UPノウハウが詰まった
メルマガ成功事例集をプレゼント！
資料請求・お問い合わせ
03-6675-3612
受付時間 | 平日 9:00～18:00 (土日祝日除く)
メルマガ配信・一斉メール配信サービスの【配配メール】
お役立ちコラム
知らないと損!?HTMLメールを作るときに知っておくべきデザインやサイズ、フォントについて
無料トライアル
インストール不要、ソフトウェアのダウンロードも不要、
本番環境そのままのサービスをぜひお気軽にお試しください。
※無料トライアルで登録可能なアドレスは100件迄となります。
お申込みはこちら
資料請求・
お問い合わせ
機能やプランの詳細から運用のご相談内容まで、営業担当がお答えします。
お問い合わせはこちら
資料ダウンロード
メールマーケティング
実践ガイドブック
資料の詳細はこちら
メルマガQ&A集
資料の詳細はこちら
メルマガ登録
配配メールの最新情報をお届けするほか、メール配信にまつわる実践に役立つ情報をお届けします。
メールアドレス
※ご登録いただいた方は、「個人情報の取り扱いについて」に同意したものとみなします。
関連サイト
メールマーケティングに
特化したメディア
システム連携特化のメール
配信システム
ラクスの販売代理店制度
お問い合わせ（平日9:00～18:00）
東京：03-6675-3612
名古屋：052-218-6937
大阪：06-6376-5222
福岡：092-739-8085
おかげ様でラクスグループのサービスは、クラウドサービス47,366社、レンタルサーバーサービス22,826社、合計70,192社のご契約を頂いております。
（2020年9月末現在）「配配メール」は、株式会社ラクスの登録商標です。
運営会社
個人情報取り扱いについて
個人情報保護方針
迷惑メール問い合わせ窓口
コラム
サイトマップ
© 2015 RAKUS Co.,Ltd.. All Rights Reserved.
