
メルマガのヘッダーデザインはどう決める?サイズの選び方やデザインのコツを紹介
企業やオンラインショップなどから送られてくるメルマガ。
お得な情報が記載されていたり、メルマガから会員サイトへ移動して手続きなどもできるので、気が付けば利用していたという方も多いのではないでしょうか。
メルマガのヘッダー部分にはバナーが設置されていることが多く、どの企業やブランドから送られたものなのか一目で分かるようなデザインになっています。
魅力的なヘッダーデザインは読者の興味や関心を引き、さらにブランドの印象を決定づける大きな役割を果たします。
今回は、メルマガにヘッダーを設置する目的や適したサイズ、おすすめのデザインテンプレートをご紹介いたします。
メルマガにヘッダーを設置する目的

まず、メルマガとはメールマガジンの略称です。企業やショップが顧客や会員へ送るメールのことを指します。
メルマガはマーケティングの手法の一つ。企業やショップ側が様々な情報を自由なタイミングで配信できるのが特徴です。
ユーザーがWEBサイトで商品を購入したりサービスを利用した際に、自身のメールアドレスを登録すると定期的に配信されるケースが多く、顧客や会員に役立つコンテンツ、セールやクーポンなどの情報が含まれています。
メルマガの基本構成は、このような流れになっています。
- ヘッダー
- タイトルまたは導入文
- 見出し
- 本文
- CTA(読者がクリックできる部分)
そのメルマガのヘッダー部分、最上部に文字や写真、イラストで構成されている「バナー」を設置することは、視覚的なインパクトを与えてユーザーの興味を引き付け、メルマガの情報を読み進めてもらうために有効といえます。
また商品やサービス、ブランドのイメージ向上にも繋がります。
デメリットとしては、バナーのデザインによって反応が違ってしまうこと、制作に時間やコストがかかることを理解しておきましょう。
メルマガのヘッダーサイズはどれくらい?

メルマガのヘッダーサイズは、一般的には幅600~700ピクセル、高さ150〜200ピクセルです。
ですがこれはあくまでも基本サイズであり、メルマガを読むデバイスや表示環境によって変化します。
そのため、どのデバイスでも読みやすいように、レスポンシブデザインを採用するのがおすすめです。
レスポンシブデザインにすると、デバイスの種類に合わせて見やすい表示に最適化することができます。
メルマガヘッダーのデザインを作るコツ

メルマガのヘッダーは、読者がメールを開いたときに必ず目にする部分です。
バナーを目に留めてクリックしてもらうためには、ユーザーの興味を引き、情報が分かりやすいデザインにする必要があります。
そのようなバナーを作るために、いくつかコツがあるので見ていきましょう。
- テキストは少なめにする
- 情報には優先順位をつける
- テーマに合った画像やイラストを使う
- レイアウトを見やすく整える
まず、ヘッダーに設置するバナーは横に長いサイズ。掲載するテキストはなるべく少ない方が良いでしょう。
伝えたい内容がいくつかある場合は、優先順位をつけてフォントサイズを変えるとメリハリのあるデザインになります。
また、メルマガの情報に合った画像やイラストを使用すると、読者は一目でどのような内容か分かります。
さらに、目に留まってほしい情報を一番大きく配置します。
人の目線は上から下、右から左へと流れていくため、「Z」の書き順、もしくは「N」の書き順のように要素を配置すると、視線の流れを自然に誘導できるでしょう。
メルマガのヘッダーにはテキストも効果的に使おう
メルマガのヘッダー部分、もしくはその近くに設置するテキストは、シンプルかつインパクトのある内容を心がけましょう。
ブランド名やメルマガのタイトルは必須要素ですが、それ以外のテキストは最小限に抑えるのがおすすめです。
メルマガを読むデバイスによっても違いはありますが、スマホ画面では17字前後で表示されます。
これを前提として、長文にせずに改行を使ったり、文章の間に装飾線や空白行をいれたりすると良いでしょう。
メルマガヘッダーのデザインはテンプレートにおまかせ
メルマガのヘッダーに入れるバナーを作る時間がない、デザインが決まらないという方には、デザインACのメルマガヘッダーテンプレートがおすすめです。




まとめ
メルマガのヘッダーは、メルマガを開封、表示したときに最初に見える部分です。
スクロールしなくても全て目に入る部分であり、メルマガの第一印象が決まる部分といっても良いでしょう。
ヘッダーのデザインを、メルマガの構成で重要な部分として工夫すれば、読者の反応もまた違ってくるのではないでしょうか?
ぜひデザインACのテンプレートを使って、読者が読みたくなるメルマガのヘッダーを作ってくださいね。
▶デザインACのメルマガヘッダーテンプレートはこちらから
\ 無料会員登録はこちら! /