(公開日2023年08月25日)
企業の営業・マーケティング担当者ならびに個人事業主の方に向けて記事を書いています。顧客に情報を提供するため、メルマガやHTMLメールを配信されている方は多くいるでしょう。そしてメルマガに含まれるバナーの最適なサイズを知りたい方は少なくないはずです。
この記事では、メルマガに使うバナーの最適なサイズ、バナーを設置する際のポイント、バナーを設置する際の目的、メリット・デメリットについて解説します。メルマガを配信する際に役立ててみてください。
・のぼりのようなもの
・厳選した情報を伝えるもの
バナーを直訳すると「旗」「のぼり」という意味で、関連したウェブサイトを紹介する「のぼり」のようなものです。サイト上でキャンペーンや商品・サービスの情報を分かりやすく伝える広告画像といってもよいでしょう。
広い意味でのバナーにはサイトバナーと広告用バナーがありますが、サイトバナーはウェブサイトで内部リンクされたページへの移動を促すものです。メルマガに使われるバナーは広告用バナーで、自社や商品・サービスを紹介します。
バナーは他のページにリンクされており、画像をクリックすると関連ページへ移動できます。たとえば商品・サービスの内容を説明するページや、自社のランディングページがターゲットです。
さまざまな情報が入り乱れたネット上では、ユーザーは何を見たらよいのか迷ってしまいがちです。ただ漫然とネットサーフィンをしているだけでは、自分の要求する情報を何も得ることはなく、終わってしまうかもしれません。
バナーの提供者は、ユーザーが必要としている情報を厳選して、バナーを通じてユーザーへ伝えます。ユーザーは画像を主体としたバナーを見ることで違和感がなく情報を確認できるのがメリットです。バナーにはこういった役割があるため、メリハリがついて見やすいデザインが求められます。
IAB（米インターネット広告協会）が定める規格によると、バナーには4種類あります。
・レクタングル：長方形のバナー
・スクエア：正方形のバナー
・ビルボード：横長のバナー
・スカイスクレイパー：縦長のバナー
このうち、ビルボードとスカイスクレイバーは、スマートフォンに不向きで、スマートフォンで受信することが多いメルマガでは用いられません。レクタングルとスクエアについて解説します。
太めの長方形のバナーで、GoogleやYahoo!に載せるバナー広告にも対応しています。そして多くのメルマガでも利用可能です。日本では最も使われている種類のバナーといってよいでしょう。
ウェブサイトのサイドカラムに用いることが多いのですが、記事の下へ横並びに表示されるダブルレクタングルといった使い方があります。メルマガではダブルレクタングルが一般的な使い方です。
パソコン・スマートフォンのどちらにも使えるサイズであり、HTMLメールを使ったメルマガのバナーとして最適です。使いやすいのがメリットですが、アピール力がやや弱いのがデメリットです。
レクタングルのサイズ例を示します。
・300 x 250 (px)
・336 x 280 (px)
・350 x 250 (px)
正方形のバナーで、GoogleやYahooでは定型サイズが決まっていますが、メルマガで使う際のサイズは自由です。日本ではレクタングルについで多く使われているバナーでしょう。
パソコン・スマートフォンのどちらにも使えますが、スマートフォンで見ると存在感があります。スマートフォンの縦長の画面にフィットして、正方形のバナーが表示されるからです。
スクエアのサイズ例を示します。
・200 x 200 (px)
・250 x 250 (px)
・300 x 300 (px)
レクタングル、スクエアどちらのバナーを用いるにしても、スマートフォンで表示する際は１カラム、その他のデバイスで表示する際は2カラムに設定するとよいでしょう。つまり最適なバナーサイズはメルマガの横幅の半分です。
メルマガの横幅が600pxの際はバナーの横幅は300px、メルマガの横幅が700pxの際はバナーの横幅は350pxに設定してください。その結果、最適なバナーサイズは以下のようになります。
・300 x 250 (px)
・300 x 300 (px)
・350 x 250 (px)
・350 x 350 (px)
以下の４点に注意してください。
注意点1：適切なカラーを用いる
注意点2：大胆なタイポグラフィを使う
注意点3：端的なキャッチコピーを活用する
注意点4：レスポンシブデザインを使う
メルマガに用いるカラーは、ブランドカラーを中心に色相を統一してください。色を増やし過ぎるとまとまりがなくなり、誰にも見向き去れなくなります。色の配分は「70:25:5」の法則に従うとよいでしょう。
・背景となるベースカラー：70％
・テキストや枠のメインカラー：25％
・強調するアクセントカラー：5％
アクセントカラーはベースカラーの反対色を用いると目を引きやすいです。ただし使い過ぎると強調する効果がなくなるため、全体の5％くらいに抑えてください。テキストを強調する際は、カラーだけでなくフォントの太さも変えましょう。
複数のバナーがある場合、コンバージョンにつなげるバナーは、他のバナーとは異なったカラーを使うとよいでしょう。また特別なイベントを紹介する際には、いつもと異なるカラーを用いる手法もあります。
タイポグラフィとは文字や文章を読みやすく、美しく見せるための技法です。強調する箇所は、太くて大きなフォントを使うと、読者の視覚に訴えてメッセージをダイレクトに伝えられます。
ただしバナーの画像にテキストを重ねる際に、多数のフォントを混在させると見にくいです。フォントの組み合わせはシンプルにしましょう。できるだけ1種類で統一し、強調する部分だけ異なるフォントを用いてください。
キャッチコピーとは、受信者に訴求したい内容を端的に表現した文章です。短い文章でインパクトを与えます。文章が長いと読者は読んでくれません。1行に収まらない場合は、改行を入れて文の横幅を小さくします。また文章が多すぎると、厳選した画像が台無しになるでしょう。
キャッチコピーでユーザーに興味を持ってもらうには、一目見ただけで商品・サービスの特徴が伝わらなければ意味がありません。効果的な実例を示します。
・JR東海：そうだ、京都へ行こう
・カルビー：やめられないとまらない
・ニトリ：お、ねだん以上。
キャッチコピーはバナーにおいて重要な役割をもちます。出来栄えはバナーのクリック率への影響が大きいです。キャッチコピーを作成するにはセンスとスキルが必要であり、自分で作るのが難しい場合は、コピーライターに依頼した方がよいでしょう。
最近はメルマガをスマートフォンで受信する読者が増えています。スマートフォンでもパソコンでも見られるように、レスポンシブデザインでメルマガをデザインすることが必要です。
HTMLメールを使ってメルマガをデザインする際に、スマートフォンでは、バナーの横幅を画面幅にフィットさせ、1カラムで表示します。パソコンでは、複数のバナーを2カラムで表示させるとよいでしょう。
目的1：見てほしいウェブサイトを紹介する
目的2：コンバージョンに役立つ
案内したい情報を載せたウェブサイトへ移動してもらうことが目的です。そのためにはバナーが読者の目を引き、さらに興味を抱いて、クリックしてもらわなければなりません。目立つためには画像が効果的ですし、興味を抱いてもらうためにはキャッチコピーが重要です。
ただしメルマガの読者の要求を満たすことが必須であり、読者にメリットがなければ、バナーをクリックしてもらえません。ですから凝ったデザインよりも「分かりやすさ」が大切です。この点を重視してバナーを制作してください。
バナーはコンバージョンに直結させることで、売り上げをアップさせる役割があります。たとえば商品購買の申し込み、お問い合わせ、資料請求などのランディングぺージへ誘導することです。
商品の情報やキャンペーン情報を伝え、読者に商品の購入を促すことが目的です。ですからメルマガの読者にアクションを起こしてもらうために、「期間限定キャンペーン」といったフレーズを入れることでクリック率をあげるとよいでしょう。
■メリット
■デメリット
バナーは画像を用いるため、視覚的に訴求しやすいのが一番のメリットです。テキストだけのキャッチフレーズは読み飛ばされる可能性が高いですが、画像が含まれていると印象に残ります。またくり返し画像を示すことで、ブランドイメージの定着にも有効です。
さらにバナーを意識して読んでいなくても、何となく覚えていることがあります。くり返し同じバナーを見ているうちに、画像・キャッチコピー・ブランドカラーが意識下に植えつけられ、 PR効果を発揮するわけです。
バナーは誰にでも簡単に作れるものではありません。優れたデザイン力が必要ですし、キャッチコピーを作成するにもスキルが不可欠です。企業の営業・マーケティング担当者が本業の合間に制作するには手間がかかり過ぎるでしょう。
専門のデザイナー、コピーライターに制作を依頼するため時間とコストがかかります。訴求効果の高いバナーを制作しようとするなら、能力の高いプロに依頼することが必要であり、コストがかかることは避けられません。
よくあるQ&Aをご紹介します。
A：通常のディスプレイならば、72ppiの解像度があればきれいに画像を表示できます。画像解像度とは、画像を構成する点の密度のことで、1インチの1辺に何個の点があるかを示すものです。72ppiは1インチの1辺に72個のピクセルが並び、1インチ四方の中に5,184個のピクセルが含まれます。
同じ画像でも表示するサイズによって解像度が異なります。たとえば800pxの画像を表示した場合の解像度は以下のとおりです。
・4インチのスマートフォン：200ppi
・16インチのパソコン：50ppi
・50インチのディスプレイ：16ppi
たとえばメルマガに800pxの横幅をもつ画像を載せるとしましょう。メルマガの横幅を700px（約7.3インチ）とすると、画像解像度は800 ÷ 7.3 = 110ppiです。もちろん元の横幅よりも狭い画面に表示するわけですから、当然きれいに表示できます。
A：最適な横幅は以下のような条件を満たすサイズです。
・スマホ向けに最適化されている
・さまざまなデバイスで見やすい
・横幅に合わせて適切な文字数を表示できる
条件を満たすためには、600〜700pxが最適だと思われます。この横幅にすると、パソコンのメーリングクライアントで横36文字以内、スマートフォンで横18文字前後で表示されます。
参考記事：デザイン性に優れたメルマガの横幅はどれくらい？最適解を教えます
最適なバナーサイズは、300 x 250、300 x 300、350 x 250、350 x 350であることを解説しました。またバナーの役割は、見てほしいウェブサイトを紹介すること、コンバージョンに役立てることです。バナーを設置する際には、カラー・フォント・キャッチコピーに気をつけてください。
効果のあるバナーを制作するには優れたデザイン力が必要ですし、キャッチコピーを作成するにもスキルは欠かせません。株式会社ビーエーディーはHTMLメール制作のスペシャリストです。メルマガ・HTMLメールのバナー制作をお任せください。
HTMLメール制作会社に興味がある方は、以下のリンクページをご覧ください。
