メルマガヘッダーサイズのベストは？大手3社のヘッダーサイズを調査してみた

メルマガの配信にHTML形式を採用している企業が増えています。

サービスや商品の画像を利用し、視覚的に訴求をすることができるHTML形式のメルマガは、スマホの普及に伴い受信者からの印象もよくなっているようです。

メルマガは件名以降「ヘッダー」「リード文」「本文」「フッター」で構成されていますが、受信者が一番最初に目にするヘッダーは開封率にも大きく影響する要素です。

ヘッダーの作成時は、メルマガの内容を一目で伝えることができるようなデザインと、受信側のデバイスで正常に表示されるサイズ調整が必要になります。

デバイスに合わないサイズのヘッダーを作成してしまうと、HTMLメールの良さである、画像を使った訴求効果が十分に発揮されません。

この記事では、PC・スマホそれぞれのヘッダーのサイズに関して、大手企業が配信しているメルマガを基に解説しています。

解説しているサイズに合わせた画像のビジュアルも用意しているので、ヘッダーのサイズ調整にご活用ください。

一般的なメルマガの横幅サイズ

実際のメルマガを使った解説の前に、一般的に利用されているヘッダーのサイズについて知っておきましょう。

詳しくは後述していますが、ヘッダーはメルマガの横幅と関係しています。

メルマガの横幅は500〜700px前後で作成されていることが多く、背景色とロゴなどを同色にした場合はメルマガの横幅がそのままヘッダーのサイズになります。

後述しているamazonのように、ヘッダーにボタンを配置している場合はヘッダー全体に占めるロゴの割合は少なくなります。

今回の記事では、以下のようなヘッダーの構成になっているメルマガを集めました。

どれも背景と同色になっていますが、メルマガの横幅やボタンの有無などによって印象が違うヘッダーになります。

配置やデザインにも注目してみましょう。

メルマガのヘッダーサイズまとめ

実際に配信されているメルマガのヘッダーサイズを調査してまとめました。

参考までに、フォントサイズもまとめてあるので、文字と画像のバランスにも注意して見てみましょう。

参考までにですが、現在のウェブサイトはPCで横幅サイズ1000px前後、スマホで750px前後で作成されています。

メルマガのヘッダーは、ロゴを配置しどの企業からのメルマガなのかを分かりやすくするだけでなく、クリックできるボタンや画像を設定し、クリック率をアップさせる狙いもあります。

ヘッダーのサイズやデザインを工夫し、趣旨がわかりやすいメルマガの配信を心がけましょう。

NIKE

スポーツブランドの「NIKE」のメルマガです。

ヘッダーになっているのは、ロゴがある部分なのでわかりづらいですが、横長の画像が設定されています。

スマホの場合は上記の画像のように表示されています。

ロゴ自体のサイズはそれほど大きくないですが、背景とヘッダーが同色になっているため640pxの横幅になっています。

NIKEではレスポンシブデザインを採用しているようなので、PCでもスマホでも同じデザインが表示されています。

レスポンシブデザインとは、画面のサイズに応じて自動で画像や文字のサイズを調整するウェブデザインです。

近年のHTML形式のメルマガは、メール配信ソフトが提供してる「HTMLメールエディタ」を利用して作成しているため、レスポンシブデザインは一般的な仕様となっています。

メール配信システムを利用することで、エディタを含むメルマガ集客に便利な機能を使うことができるようになります。

メール配信システムの詳細は、エディタの実際の編集画面を使いながら後半で解説していますので、そちらもぜひご覧ください。

amazon

こちらも640pxで横幅が組まれています。

ロゴの部分だけだと274pxとなっているので、やや小さめです。

フォントサイズは「画像・文字サイズ確認用ツール」を使って、目安として算出しています。

ロゴのamazonの部分が20px（15pt）になっており、PCのメール画面で確認すると以下のように見えます。

本文との文字バランスの兼ね合いもありますが、15〜20pxあればヘッダー部でも存在感のある文字になるでしょう。

NIKEとは違い、マイストア・タイムセールなどのボタンをヘッダーに配置しているのも、amazonが配信しているメルマガの特徴です。

コンテンツ部分とは違いヘッダーは基本的には変えずに配信をするので、配置するボタンは常に受信者に発信したい情報にしましょう。

スマホの場合は上記の画像のように表示されます。

スマホで表示すると本文の部分は、目を凝らさないと見えないサイズになっています。

文字サイズの変更だけでなく、改行などの工夫もすることで読者に親切なメルマガの本文にすることができるでしょう。

メルカリ

こちらのヘッダーも左右に白い背景を設定しているので、ロゴの画像以上に実際のヘッダーサイズがあります。

上記の表は左右の白い背景も含めた数字を記載してあります。

PCでメルマガを表示した場合は、以下のようなビジュアルになります。

amazonのメルマガは横幅640pxで配信されているので、メルカリは大きめに作られていることがわかります。

ヘッダー含め全体のフォントサイズも大きく、親しみがわくデザインになっているのではないでしょうか。

「みんなのメルカリ教室」という文字を大きくしている分、ボタンはありませんが、本文の画像も含めて一目でメルカリの出品に関するコンテンツであることがわかる作りです。

HTMLメールエディタを使えばヘッダーの調整が簡単に！

ご紹介してきたようなメルマガは、HTMLと呼ばれるウェブ上の言語を利用して作成しています。

HTMLを使うことで、ヘッダーや文字のサイズや色を変更し、画像を配置したメルマガを作成することができるようになります。

現代では企業のメルマガでも一般的に利用されているHTMLメールですが、HTMLを自分で記載して配信している企業はほとんどないでしょう。

HTMLの記載には専門的な知識が不可欠で、手作業で作成するよりもメール配信システムを利用し、ドラッグ&ドロップなどでHTMLメールを作成した方がコスパが良いからです。

もちろん、エディタを利用すればヘッダーのサイズも自動で設定してくれるので、自分でHTMLを記載しレスポンシブデザインに加工する必要はありません。

ここからは、メール配信システムの一つである「ブラストメール」が提供しているHTMLメールエディタを例にエディタ機能を使ったHTMLメール作りを解説します。

レイアウトを選ぶ

まずはレイアウトを選びましょう。

ブラストメールでは、10個のレイアウトとクリスマスなどに使える限定デザインを多数提供しています。

自分でブロックの数や配置を変更することもできます。

挿入する画像を選ぶ

ヘッダー部を選択し「編集」というボタンを押すと、ヘッダーに利用する画像を選択することができます。

ヘッダー画像の選択後は全体の背景色や文字の色なども指定することができます。

もちろん、ヘッダー部を含むHTMLメールに挿入する画像は、自分でアップロードすることもできるので、自社のロゴなどを使いヘッダーを作成しましょう。

HTMLやエディタの詳細は以下の記事にも記載しているので、ご参考ください。

HTMLメールの作り方を5分で解説！最も簡単に作成する方法もこっそり教えます

まとめ

メルマガのヘッダーには、以下のような役割があります。

上記のような役割は、メルマガのヘッダーサイズやデザインと大きく関係しています。

この記事では「NIKE」「amazon」「メルカリ」といった読者の多いメルマガを分析しましたが、ヘッダーの横幅は600px〜700px前後で作成されていました。

ロゴと背景の兼ね合いもありますが、横幅の狭いスマホでも綺麗にヘッダー画像を表示させるには「メルカリ」が採用している760px程度がオススメです。

ボタンを配置する場合などは、ロゴのサイズを小さめに設定しますが、どちらも視認性のあるサイズを設定しなければなりません。

また、今回解説しているようなHTML形式のメルマガはレスポンシブデザインを採用しないと、受信媒体によっては正しく表示されない可能性もあります。

しかし、メルマガのデザインやレスポンシブデザインの自作には専門知識が必要で、毎回HTMLを作成し配信している企業はほとんどありません。

そのため多くの企業では、ご紹介したようなメール配信ソフトが提供している「HTMLメールエディタ」を利用してHTMLメールを作成しています。

エディタを利用することで、解説したようにHTMLメールのデザインを簡単に作れるだけでなく、レスポンシブデザインも設定することができます。

ただし、メール配信システムの中にはエディタ機能を提供していないものもあるので、注意が必要です。

以下の記事では、ランキング形式で各メール配信ソフトの機能や金額を比較しています。

【2021年最新】メール配信システム20選！機能・料金を徹底比較

エディタ機能を提供しており、自社の想定に合うメール配信ソフトを探してみましょう。