メルマガに適した画像サイズとは？【HTMLメールの画像・フォントサイズを解説】

HTMLメールの配信でスマートフォンでも見やすい画像サイズを理解することは、メールマガジンを効果的に運用するために重要なポイントの一つです。

メールマガジンの配信を始めたばかりであれば、以下のような疑問が生じると思います。

『スマートフォンでも見やすいメルマガの画像サイズは？』
『HTMLメールのフォントサイズはどうすればいいの？』

今回のコラム記事では、メールマガジンの配信を始めたばかり、これから始めようとしているメルマガ担当者様に向けています。
メルマガに適した画像サイズを説明するのに加えて、スマートフォンでも見やすいメルマガの作成ポイントに関しても解説をしていきます。

メルマガをスマートフォンで読む人が多い

以前までは、パソコンでメルマガを読むのが一般的でした。
しかし、スマートフォンの普及でメルマガをスマートフォンで読む人が増えています。

Benchmark Japanが行った調査「メールマガジン購読状況調査 2021年度版」では、以下のようなデータがあります。
パソコンとスマートフォンのどちらでメルマガを読むのかという質問に対して「スマートフォンとパソコンの両方だが、パソコンが多い」が1番多い結果でした。

また、Benchmark Japanの調査によると、スマートフォンとパソコンを併用してメルマガを読む人は約6割です。
ほかにも、仕事よりもプライベートのほうがスマートフォンでメルマガを読む割合が多い結果も出ています。

以上のように、パソコンでメルマガを読む人は多いですが、スマートフォンも併用してメルマガを読んでいる人が多いとBenchmark Japanの調査結果でわかります。

パソコンだけでなくスマートフォンでも見やすいメルマガにすることが、メルマガの目的を達成するには必要です。

メルマガ（HTMLメール）の画像サイズ

メルマガの本文内に画像を掲載する場合は、テキストメールではなくHTMLメールの形式で作成します。

パソコンだけでなく、スマートフォンでも見やすい画像サイズとして、横幅を600pxで作成することをおすすめします。

600pxよりも大きい横幅で画像を作成した場合は、スマートフォンの画面内に収まらず横スクロールが必要になる可能性があるので注意しましょう。

CTAボタンの画像サイズ

CTAボタンは四方50pxの余白を確保したうえで、横幅600pxに収まるように作成しましょう。

メルマガにCTAボタンを複数設置する場合は、画面のタップできる要素の間を20px以上空けることで、ユーザーの誤タップを防止できます。

なお、スマートフォンでメルマガを閲覧した際に最初に表示される、ファーストビューの範囲内にCTAボタンの設置をおすすめします。
ファーストビューにCTAを設置すると、クリックされる可能性が高まるためです。

iPhoneであれば、縦幅1100pxに収まるようにCTAボタンを作成すると、iPhone7以降の機種でファーストビューに収まります。
Androidのスマートフォンは画面サイズがさまざまなため、iPhoneを基準として作成するとよいでしょう。

メルマガのフォントサイズ

スマートフォンで見やすいデザインでメルマガを作成するためには、フォントサイズにも注意する必要があります。

HTMLメールを作成する場合は、フォントサイズを15px以上に設定することでスマートフォンでも見やすい文字サイズになります。

強調したいテキスト部分は、フォントサイズを24px以上に設定することで、メリハリの効いたデザインになります。
必要に応じて、フォントサイズの変更をしましょう。

メルマガの文字数の目安

iPhoneの標準メールアプリでテキストメールを受信した場合、1行に表示される文字数は約20文字です。

メルマガのフォントサイズを大きくしすぎると画面のスクロールが増えるため、ユーザーの離脱につながります。
反対に、フォントサイズが小さすぎてもメルマガが読みにくくなるため、離脱につながってしまいます。

フォントサイズを設定する際は、1行につき最大20文字で収まるように設定するといいでしょう。

また、スマートフォンで見やすいメルマガを作成するためには、メルマガの件名や1文あたりの文字数も考慮に入れて作成する必要があります。

HTMLメールのソースコードのサイズに注意

スマートフォン版のGmailアプリでメールを受信した場合「メッセージ全体を表示」というボタンをタップしないと、メールの全文が表示されないケースがあります。

このケースはHTMLメールを受信した際によく起こる事例で、HTMLメールのソースコードのサイズが102KBを超えると発生します。

省略されずにメール全文を表示させるためには、以下の2点に注意してメルマガを作成しましょう。

• メルマガに掲載するコンテンツの量を調整する
• シンプルなHTMLファイルの記述を心がける

表示制限の対象となるのはHTMLメールのソースコードの容量のため、画像ファイルの容量は含まれません。

多くのコンテンツを掲載するメルマガの場合は、シンプルなHTMLの記述を心がけたとしてもメールの全文が表示されない可能性があります。

HTMLメールの作成ができたら、事前にテスト配信を行い、Gmailアプリでメールを確認するとよいでしょう。

スマートフォンで見やすいメルマガを作成するポイント

画像サイズやフォントサイズ以外に、スマートフォンで見やすいメルマガを作成するためには、以下の点に注意するとよいでしょう。

• HTMLメールのテンプレートを使用する
• レスポンシブ対応のHTMLメールを作成する
• メール配信システムを利用する

これらの内容に関して、説明します。

HTMLメールのテンプレートを使用する

HTMLメールのテンプレートを利用することで、スマートフォンでも見やすいデザインのメルマガを簡単に、効率よく作成できます。

HTMLメールの作成にはHTMLやCSSなどの知識が必要なので、初心者の方がいきなりHTMLメールを作成するのは時間がかかるでしょう。
その点、デザインの枠組みができているHTMLメールのテンプレートを活用することで、作業効率を大幅に短縮できます。

インターネット上にはHTMLメールのテンプレートが無料で配布されているため、メルマガの目的や用途に合ったテンプレートを選ぶとよいでしょう。

レスポンシブ対応のHTMLメールを作成する

レスポンシブ対応のHTMLメールを作成することで、パソコンでもスマートフォンでも見やすいデザインのメルマガが作成できます。

レスポンシブ対応のHTMLメールは、ユーザーの離脱防止、クリック率・コンバージョン率の向上といった効果が期待できます。

ちなみに、HTMLメールをレスポンシブ対応させる手順は、Webサイトのレスポンシブ対応と少し異なるので注意しましょう。

メール配信システムを利用する

メルマガを配信する際は、OutlookやGmailのようなメールソフトからではなく、メール配信システムの利用をおすすめします。

メール配信システムとは、メールの配信業務を効率化してくれるツールのことです。
メールソフトよりも、メール配信システムにはメールの作成や配信に便利な機能が搭載されています。

メール配信システムでは、HTMLメールのテンプレートを用意しているのが多いです。
また、スマートフォンでも見やすいデザインが施されている、専門的な知識やスキルがなくてもHTMLメールを作成できる、などの機能がメール配信システムにはそなわっています。

メール配信後の効果測定もメール配信システムで行えるため、効果の高いメール配信が可能になります。

まとめ

今回は、メルマガに適した画像サイズやフォントサイズについて説明しました。

メルマガで使用する画像のサイズに関して覚えておくべき点は、以下のとおりです。

• パソコンだけでなくスマートフォンでも見やすい画像サイズ、フォントサイズで作成する
• Gmailで省略して表示されないように、コンテンツ量とHTMLの記述に注意する
• さまざまなノウハウを活用し、スマートフォンで見やすいメルマガを作成する

今回紹介したポイントに注意して、メルマガ配信の効果を最大化できるように努めましょう。

なお、当サイト『ビスサイ』ではホームページ制作サービス（サブスクリプション）を提供しております。

ビズサイでは、ホームページの目的に応じて3種類のプランをご用意しており、お申込みから公開まで最短5営業日の期間でホームページ制作ができます。

ドメインからメールアドレスを作成できるので、メルマガ配信と同時にホームページを新規で立ち上げたい、ホームページのリニューアルをしたい方は当サイトがピッタリです（くわしいサービスはこちら）。