この記事では、スマホユーザーが嫌うメルマガの特徴を踏まえつつ、文字サイズや画像、ボタン配置など、スマホに最適なメルマガレイアウトを作る具体的な方法を解説します。
さらに、簡単に作成するためのツールや、参考になる事例もご紹介します！
コンビーズのハチミツマガジン
コンビーズではメルマガ運用やマーケティング活動をしているあなたのお役に立つ情報を無料で配信しています。ぜひぜひご登録ください！
- いますぐメルマガに登録！
メルマガはスマホとパソコンどちらでみられやすい？
この記事をご覧になっている方は、もしかすると「メルマガはスマホで見る人が多いのでは？」と感じていらっしゃるかもしれません。
では、実際のところ、どのくらいの人がスマホで、そしてどのくらいの人がパソコンでメルマガを閲覧しているのでしょうか。
Benchmark Japanが2023年度に実施したメールマガジン購読状況調査からその割合を見てみましょう。
| 仕事用メルマガ スマホのみで見る・スマホで見ることが多い人は46.5% パソコンのみで見る・パソコンで見ることが多い人は53.5% |
| プライベート用 スマホのみで見る・スマホで見ることが多い人は61.4% パソコンのみで見る・パソコンで見ることが多い人は38.7% |
このデータから、特にプライベート用ではスマホでの閲覧が増えている傾向が見られますが、仕事用ではまだパソコンでの閲覧が多いことがわかります。
スマホでメルマガを見る人が増えているのは明らかですが、パソコンで見る人も仕事用、プライベート用ともに約4〜5割近くいることがわかります。
これは決して無視できない割合です。
スマホでの閲覧環境を整えることは非常に重要ですが、パソコンで読む読者も置き去りにしてはいけません。
より多くの読者に快適に読んでもらうためには、スマホでもパソコンでも、どちらの端末で見てもレイアウトが崩れず綺麗に表示されるようなメルマガ作成を心がける必要があります。
スマホユーザーが嫌うメルマガの特徴とは？
それでは、メルマガがスマホでも多くの人に読まれているということが理解できたところで、今度はスマホユーザーが嫌うメルマガの特徴や傾向をみていきましょう。
そもそも、同じインターネット上にアップロードされたメルマガでありながら、PC向けに作られたメルマガはスマホだと読みにくいという現象はなぜ起きるのでしょう。
ここでは特に、ユーザー側からみたメルマガの「読みやすさ」について考えてみようと思います。
文字が小さくて読みにくい
パソコンの画面に比べて、スマホの画面は当然ながら物理的にずっと小さく、表示できる範囲も狭いです。
パソコンと同じ感覚で文字サイズを設定すると、スマホでは想像以上に小さく表示されてしまいがちです。
多くの人は、移動中や休憩中など、すきま時間にスマホでメールをチェックします。
じっくり時間をかけて読むというよりは、短時間でサッと内容を把握したいと思っています。
そんな時に文字が小さいと、読む気が失せてしまいます。
文章が長くわかりにくい
スマホはPCよりも「読み流される」デバイスです。
1行の文字数が短いと、文章を読んでいるときに横方向への視線移動が少なくて済みます。
行の最後まで読んだ後、次の行の先頭にスムーズに視線を移しやすくなり、目が疲れにくくなります。
長い行は、どこまで読んだか見失ったり、次の行の頭を探すのが大変になったりすることがあります。
さらに忙しい中でメールを開いた読者は、長い文章を見ただけで読むのを諦めてしまう傾向が強くなります。
レイアウトが崩れている
メールの形式にはHTMLメールとテキストメールの2種類があります。
HTMLメールとは、画像や色、装飾などを用いてデザインされたメールです。
文字だけのテキストメールと違い見た目を自由にデザインできますが、ゼロから作るにはHTMLなどの専門的な知識が必要になります。
ですが、メルマガ配信ツールなどを使えば直感的な操作で比較的簡単に作成できます。
HTMLメールは、文字の色や大きさ、画像の配置などを自由にデザインできる一方で、受信環境によって表示が大きく変わる可能性があります。
スマホ画面に合わせて最適化されていないHTMLメールの場合、文字や画像が画面の横幅からはみ出して表示されたり、意図しない場所に要素が配置されたりして、レイアウトが大きく崩れてしまうことがあります。
一方、装飾ができないテキストメールでも、レイアウトが崩れることがあります。
特に、送信側が意図しない場所で改行が入ってしまったりすることがあります。
これは、受信者側が使用している端末やメールソフトの違いなどによって、画面サイズなどの仕様が異なるために発生します。
これらのレイアウト崩れは、HTMLメール、テキストメールに関わらず、スマホでの閲覧において非常にストレスのかかる問題であり、情報へのアクセスを妨げ、読者の離脱を招く大きな原因となります。
タップしにくい・誤タップしやすい
メルマガの重要な要素であるボタンや本文中のリンクが、スマホで見たときに小さすぎたり、互いの間隔が狭すぎたりすると、指で正確にタップするのが難しくなります。
特に移動中や片手で操作している場合、狙った場所をタップできずに何度も失敗したり、意図しない別のリンクやボタンを誤ってタップしてしまったりといったストレスが発生します。
このような操作性の悪さは、せっかく読者が行動を起こそうと思った気持ちを削いでしまい、クリック率の低下に直結します。
スマホでのタップ操作を考慮した、適切なサイズと配置が重要です。
スマホに最適なメルマガデザイン
スマホでの見やすさは読者からの反応に直結します。
レイアウトが崩れたり、文字が小さすぎたりすると、せっかくの情報も読まれることなく閉じられてしまう可能性が高まります。
ここでは、多くの読者にとって快適なメルマガを提供するための具体的な方法を解説します。
レスポンシブデザインにする
これを解決する有効な手段が、レスポンシブデザインにすることです。
レスポンシブデザインとは、読者のデバイス（スマホ、タブレット、PCなど）の画面サイズに応じて、メルマガのレイアウトが自動的に最適化される仕組みです。
この対応は、メルマガをHTMLメール形式で作成する際に、特定の記述を加えることで実現します。
残念ながらテキストメールではできません。
これにより、スマホで見ると文字が小さすぎたり、画像が画面からはみ出したりする問題を解消できます。
特に、画像サイズの調整や文字サイズの指定は、レスポンシブ対応において重要なポイントとなります。
多くのメルマガ配信ツールでは、レスポンシブ対応のテンプレートが用意されていたり、簡単な設定で対応できたりします。
専門的なコーディング知識がなくても、これらの機能を活用することで、見やすいメルマガを作成することが可能です。
文字サイズは15pt以上
メルマガの本文の文字サイズは、読みやすさを大きく左右する要素です。
ウェブサイトやメールのデザインにおいて、本文の標準的な文字サイズとして15pxや16pxが広く使用されています。
これは、スマホ、PCのどちらの画面で見ても小さすぎず、内容をスムーズに読み進める上で支障がないサイズ感だからです。
したがって、スマホでの読みやすさを意識して最低限15pxで文字サイズを設定すれば、そのサイズはPC画面で見た際にも適切に表示され、問題なく読めるでしょう！
画面サイズは幅600px
メルマガをHTMLで作成する際に、スマホからの閲覧を想定した作成時の幅は、一般的に600pxから700px程度が推奨されています。
具体的にスマホで見たときに最適になるよう、横幅600pxで画面を作成すると良いでしょう。
このサイズでレイアウトを組むことで、多くのスマホの画面幅に適切に収まり、横スクロールを必要とせずに全体を表示できます。
1行に使う文字数は20文字がちょうどいい
多くのスマホユーザーが快適に読めるとされている1行の文字数は、15文字から20文字程度です。
これは自動改行される1行の最大文字数ではなく、読みやすいとされる文字数です。
それでは1行の最大文字数はいくつなのかを調べようとしても、厳密にすべてのデバイスで自動改行される共通の文字数を出すことは難しいのが現状です。
これは、スマホの機種による画面幅の違いや、読者が設定している文字サイズ、そして利用しているメールソフトの種類によって表示のされ方が異なるためです。
一般的なスマホ画面の幅と標準的な文字サイズ（15px程度）を考慮すると、おおよそ30～40文字程度が一つの目安として、多くの場合は自動で改行されずに画面内に収まることが多い範囲と言えます。
もし、テキスト装飾などによってどうしても20文字以内に収まりきらない可能性がある場合は、1行の最大文字数の目安として参考にして、必ず実際のスマホ環境でテスト確認を行いながら作成することが重要です。
画像は600px〜700px程度のサイズに！
HTMLメールでメルマガを作成する場合、スマホでの表示を考慮した画像やメール全体のコンテンツ幅として、600px〜700px程度が多くの情報源で推奨されています。
特に600pxは、多くのメールクライアントでレイアウトが崩れにくく、スマホとPCのどちらからでも見やすい一般的な基準サイズとされています。
この推奨サイズで画像を作成し、さらにレスポンシブ対応を施すことで、スマホの画面幅に合わせて画像が適切に縮小表示されるようになります。
これにより、画像が画面から切れてしまったり、コンテンツを見るために横スクロールが必要になったりするのを効果的に防ぐことができます。
ボタンは四方50px以上
HTMLメールでメルマガを作成する際には、読者がアクションを起こしやすくするためにボタンを設置することが可能です。
これらのタップできるリンクエリアは、指で操作しやすいように四方50px以上のサイズに設定することをおすすめします。
誤タップを防ぎ、快適な操作性を提供するために、リンクエリア間には最低でも20pxの隙間を設けると良いでしょう。
ボタンは読者の目に留まりやすいよう、ファーストビューに収まるように配置するのが理想です。
また、情報量が多いコンテンツの場合は、読者がいちいち上部に戻る手間を省けるよう、適切な間隔で繰り返しボタンを配置することも有効です。
配置する際は、ボタンが周囲のテキストや画像の中に埋もれてしまわないように、デザインや配色で目立たせることが非常に重要になります。
メルマガの容量は100kb以下にする
メルマガをスマホで閲覧する際、容量が大きいと受信に時間がかかり、読者にストレスを与えてしまう可能性があります。
受信に時間がかかったり、うまく表示されなかったりすると、途中で読むのを諦めてしまう読者もいるでしょう。
さらに、スマホで多く利用されているGmailでは、メールサイズが102KBを超えるとメールが途中で「クリッピング」されてしまい、続きが表示されなくなるという仕様があります。
これより容量が大きいと、せっかく盛り込んだ画像や文章の一部が表示されなくなり、作成者の意図した内容が正確に伝わらなくなってしまいます。
もし作成したメルマガの容量が100KBを超えてしまった場合は、使用している画像のサイズを小さくしたり、画像を圧縮したりすることで容量を減らす工夫が必要です。
例えば、ウェブ上には「TinyPNG」のような画像を自動で圧縮してくれる無料ツールがあります。
TinyPNGより参照
これらのツールに画像をアップロードするだけで、画質を大きく損なうことなくファイルサイズを小さくできます。
今回は67％の容量が圧縮されました！
また、動画を使用すると容量が大きくなりやすいですが、代わりにGIFアニメーションを活用することで、少し画質は落ちるものの容量を大幅に節約できる場合があります。
容量を意識したメルマガ作成は、スマホユーザーにとっての読みやすさに直結し、結果としてメルマガの開封率やクリック率の向上にも繋がります。
▼しっかり届くのに、安くてシンプル。20年以上愛されているメルマガツールはこちら▼
効率よくメルマガを作る方法
テンプレートを利用する
効率的に読みやすいメルマガを作成するには、メルマガのレイアウトのひな形となるテンプレートを利用するのが効果的です。
テンプレートを使えば、見本となるテキストや画像を差し替えるだけで、デザインされたメールを作成できます。
これは、ゼロから自分でデザインやコーディングをする必要がないため、大幅な時短につながります。
テンプレートはネット上で無料または有料で入手可能です。
文字だけのテキストメール用のひな形だけでなく、デザイン性の高いHTMLメール用のひな形も数多く配布されています。
中にはレスポンシブ対応したテンプレートもあり、作成したメルマガがどのスマホ端末で見ても意図した通りにきれいに表示される可能性が高まります。
自分でHTMLの知識がなくても、テンプレートを使えばプロがデザインしたようなHTMLメールを作成できるのが大きなメリットです。
ただし、テンプレートに用意されているテキストや画像を差し替える際に、予期せずスタイルが崩れてしまうことがあります。
このようなレイアウト崩れを修正するためには、ある程度のHTMLやCSSの専門知識が必要になる場合がある点は理解しておきましょう。
事前にいくつかのテンプレートを試してみて、使いやすいものを選ぶのがおすすめです。
メルマガ配信ツールを利用する
メルマガを効率的に作成するには、メルマガ配信ツールの利用が非常に有効です。
多くのメルマガ配信ツールには、専門的な知識がない人でも比較的簡単に魅力的なHTMLメールを作成できるよう、様々な機能が用意されています。
例えば、豊富なテンプレートがあらかじめ用意されていたり、直感的な操作でレイアウトを編集できる使いやすい編集画面（エディタ）が提供されていたりします。
また、多くのシステムでは、作成したメルマガが様々な受信環境でどのように表示されるかを確認できる機能を提供しています。
これにより、配信前にスマホでの見え方をチェックし、レイアウト崩れがないかを確認できます。
さらに、スマホでの表示崩れが起こりにくいように設計されたテンプレートを提供しているサービスも増えています。
最近のメルマガ配信ツールの多くは、自動でレスポンシブ対応をしてくれる機能を備えています。
これにより、パソコン向けとスマホ向けそれぞれの表示に自動的に最適化されるため、端末ごとに異なるメルマガを作成する手間が省けます。
本文の自動改行ツールがおすすめ！
スマホでメルマガを読む際、画面が小さいため、パソコンで表示した時と同じように長い文章が続くと非常に読みにくく感じられます。
読者にスムーズに内容を理解してもらうためには、文章を適度に細かく改行し、視覚的に区切りをつけることが重要です。
しかし、メルマガの本文全体を手動で細かく改行していく作業は、特に文章量が多い場合に非常に手間がかかり、時間も要します。
そこで活躍するのが、本文の自動改行ツールです。
WEB上には無料で使える自動改行ツールがたくさん公開されています。
これらのツールを利用すれば、手動での改行作業を大幅に効率化できます。
例えば、「指定した文字数でテキスト改行ツール」のような機能を持つツールがあります。
このツールはその名前の通り、入力した文章を、あらかじめ指定した文字数ごとに自動で改行してくれる機能を持っています。
指定した文字数ごとに改行をしてくれるので、その結果をコピーしてメルマガの作成画面に貼り付けます。
自動改行されたテキストを基に、句読点の位置や文章のまとまりを見ながら手作業で微調整を加えることで、さらに自然で読みやすい改行に仕上げることができます。
このように自動改行ツールを活用することで、手作業による改行の手間を減らしつつ、スマホユーザーにとって読みやすい、視覚的に整えられたメルマガ本文を効率的に作成することが可能になります。
スマホに最適なメルマガデザインの事例
NIKE
NIKEのメルマガより参照
スマホでメルマガを読む際、特に重要なのは情報の「見やすさ」と「読みやすさ」です。
NIKEのメルマガは、この点において参考になる工夫が見られます。
まず、画像と比べて文字の幅を意図的に狭くしている点が挙げられます。
これは、スマホの小さな画面で一行あたりの文字数を少なくし、読者の視線の動きを左右に大きく振らせないための配慮です。
これにより、テキストが塊に見えにくくなり、スムーズに読み進めることができます。実際に、多くの行が30文字以内に収まるように調整されているようです。
これは、一般的にスマホで快適に読める一行の文字数とされており、読者にストレスを与えにくい工夫と言えます。
さらに、本文の左右に十分な余白を設けていることも特徴です。
この余白は単なる空白ではなく、文字の密集感を軽減し、ページ全体にゆとりを持たせる効果があります。
余白が適切に取られていることで、視覚的な圧迫感が減り、内容に集中しやすくなります。
このようなデザインの積み重ねが、スマホユーザーにとって快適な読書体験を提供し、結果としてメルマガの内容がより伝わりやすくなることにつながります。
ユニクロ
ユニクロのメルマガより参照
ユニクロのメルマガからは、文字を読むのを嫌にさせないためのテクニックを学ぶことができます。
特に参考になるのが、文字サイズの使い分けによる「メリハリ」の作り方です。
見出しや特に伝えたい重要な文章は文字サイズを大きくし、本文は標準的なサイズにするなど、意図的にサイズに差をつけることで、読者はぱっと見ただけで情報の階層を把握できます。
これにより、長い文章でもどこに注目すれば良いかが明確になり、「読むのが大変そう」という抵抗感を減らすことができます。
また、ユニクロのメルマガは全体的に適切に余白が広く取られている点も見逃せません。
要素と要素の間、文章の行間などに適切な余白があることで、情報が整理されて見え、視覚的なノイズが減ります。
これも読みやすさを向上させる重要なポイントです。
さらに、上部に配置されているターゲット別の商品カテゴリーへ誘導するボタンなども、誤タップを防ぐために十分に間隔を空けて配置されています。
このような細かい配慮がユーザー体験の向上につながります。
これらのユニクロのデザインテクニックは、自身のメルマガ作成において非常に役立つはずです！
ぜひ参考にしてみてくださいね！
復習問題！
この記事では読みやすいメルマガの作り方を解説しました！
記事の内容を○×クイズにしました。ぜひ復習につかってみてくださいね！
| 問題番号 | 問題文 |
| 1 | プライベートで購読しているメルマガは、スマホよりもパソコンで閲覧されることの方が多い。 |
| 2 | スマホユーザーは、文字が小さく読みにくいメルマガを好む傾向がある。 |
| 3 | スマホに最適なメルマガの本文の文字サイズは、最低でも15px以上が推奨されている。 |
| 4 | スマホからの閲覧を想定したHTMLメールの作成時の幅は、一般的に600pxから700px程度が推奨されている。 |
| 5 | スマホで快適に読める1行の文字数は、15文字から20文字程度が理想とされている。 |
| 6 | スマホでの表示を考慮したHTMLメール内の画像の幅は、600px〜700px程度にするのが良い。 |
| 7 | メルマガに設置するボタンのタップできるリンクエリアは、四方50px以上のサイズに設定することが推奨されている。 |
| 8 | 誤タップを防ぎ快適な操作性を提供するため、タップ可能なリンクエリア間には最低でも20pxの隙間を設けることが推奨されている。 |
| 9 | Gmailでは、メルマガの容量が102KBを超えると、メールが途中でクリッピングされてしまうことがある。 |
| 10 | メルマガの容量を抑えるためには、動画よりもGIFアニメーションを活用することが有効な場合がある。 |
| 11 | レスポンシブデザインは、テキストメールのスマホ最適化にも有効な手段である。 |
| 12 | 本文の自動改行ツールは、スマホで読まれやすいように文章を調整するのに役立つ。 |
解き終わったら以下の回答をどうぞ！
| 問題番号 | 回答 | 簡単な解説 |
| 1 | × | プライベート用は61.4%がスマホで閲覧しており、パソコン（38.7%）より多い傾向が見られます。 |
| 2 | × | 文字が小さすぎると読む気が失せてしまうため、スマホユーザーは読みにくいメルマガを嫌います。 |
| 3 | 〇 | 本文の文字サイズは、スマホ・PCどちらでも読みやすいように15px以上が推奨されています。 |
| 4 | 〇 | スマホからの閲覧を想定したHTMLメールの作成時の推奨幅は、一般的に600pxから700px程度です。 |
| 5 | 〇 | スマホで快適に読める1行の文字数は、15文字から20文字程度が理想とされています。 |
| 6 | 〇 | HTMLメール内の画像の推奨サイズは600px〜700px程度で、さらにレスポンシブ対応を施すことでスマホに最適化されます。 |
| 7 | 〇 | ボタンなどのタップエリアは、指で操作しやすいように四方50px以上のサイズに設定することが推奨されています。 |
| 8 | 〇 | 誤タップを防ぎ快適な操作性を提供するため、リンクエリア間には最低でも20pxの隙間を設けることが推奨されています。 |
| 9 | 〇 | Gmailでは102KBを超えるとメールが途中でクリッピングされてしまうため、容量を100KB以下に抑えるのが望ましいとされています。 |
| 10 | 〇 | 動画は容量が大きくなりやすいため、代わりにGIFアニメーションを活用することで容量を節約できる場合があります。 |
| 11 | × | レスポンシブデザインはHTMLメールで特定の記述を加えることで実現する仕組みであり、テキストメールには適用できません。 |
| 12 | 〇 | 自動改行ツールを利用することで、手動での改行作業を効率化し、スマホで読みやすい文章を作成するのに役立ちます。 |
AIプロンプトを無料プレゼント！
コンビーズメールライト
まさかの月額3,300円〜。業界最安クラスなのに、安心のメール配信サービス
当方がご提供しているコンビーズメールライトは業界最安クラス月額3,300円〜のシンプルで使いやすいメール配信サービス。クレジットカード情報不要で開始できる無料トライアルもご用意しております。
初めてでも、使い方は無限大。大規模ビジネスはもちろんのこと、個人事業やサークル運営にも幅広く活用できます。
とにかくシンプルで使いやすく、安定してお客様に届きやすい。
だから初心者の方でも安心して使い始めることができます。
| 初期費用 | 0円 |
|---|---|
| 価格 | 月5000通：3,300円/月～ |
| 割引・キャンペーン | 要問い合わせ |
| 無料トライアル | あり |
この記事を書いた人
宇都宮凛奈
ライターとしてまだまだ成長中。いろんなデザインを見るのが好き。空と海の写真を撮るのが趣味。
コメント