こんにちは、ツバサです。
「来月のセール用バナー作って」と依頼された。バナーという言葉自体はなんとなくわかるけど、どんなサイズで作ればいいのか、どこに設置するのか、具体的なことがよくわからなかったので調べてみた。
バナーとは
ひとことで言うと、Webサイト上に設置する画像形式の広告・告知用パーツのこと。バナー（Banner）は英語で「旗」「のぼり」を意味する単語で、クリックすると特定のページに遷移するリンク付きの画像として使われる。
デジタルハリウッドのバナー解説記事によると、バナーには大きく2種類ある。
| 種類 | 説明 | サイズ |
|---|---|---|
| サイトバナー | 自社サイト内に設置する告知・誘導用の画像 | 自由（設置場所に合わせる） |
| 広告バナー | Google広告やSNS広告で使うディスプレイ広告 | 媒体ごとに規定あり |
ECサイトの運営では両方に関わることが多い。サイト内のセール告知バナーを作ることもあれば、Google広告用のバナーを用意することもある。
EC実務で出てくる場面
EC担当をしていると、バナーを作る・設置する場面がかなり頻繁にある。
セール・キャンペーンの告知
今回の僕のケースがこれ。サイトのトップページやカテゴリページにセール告知のバナーを設置して、セール会場（特設ページ）に誘導する。楽天市場ではスーパーSALEやお買い物マラソンのたびにバナーの差し替えが必要になる。ランサーズのECバナー解説記事でも、ECサイトのバナーはデザインと設置場所の両方が重要だと書いてあった。
広告用バナーの入稿
Google広告のディスプレイ広告を出す場合、規定サイズのバナー画像を複数パターン用意する必要がある。Google広告のヘルプページに対応サイズの一覧が載っていて、代表的なものはこのあたりだ。
- 300×250px（レクタングル）：最も汎用的なサイズ
- 728×90px（リーダーボード）：ページ上部の横長バナー
- 160×600px（ワイドスカイスクレイパー）：サイドバー用の縦長バナー
- 320×50px（モバイルバナー）：スマホ画面下部のバナー
楽天・Amazonのモール内バナー
楽天市場ではRMSの中でバナーを設定する場面がある。トップページのスライドバナーや、商品ページ内のおすすめ商品バナーなど。ebisumartのECバナー作成記事でも、モールごとにバナーの推奨サイズや仕様が異なるので、出店先のガイドラインを確認するのが大事だと紹介されていた。
覚えておきたいポイント
情報を詰め込みすぎない
バナーはスペースが限られている。あれもこれも載せたくなるけど、伝えたいメッセージは1つに絞るのが鉄則。「最大50%OFF」「送料無料」「期間限定」のうち、一番強い訴求ポイントを大きく見せて、残りは補足程度にとどめる。SATORIのバナーサイズ解説記事でも、ワンメッセージ・ワンビジュアルが基本と書いてあった。
画像のalt属性を忘れずに
バナー画像にもalt属性は必要だ。バナーがリンク付き画像の場合、alt属性にはリンク先の内容を書く。「夏のセール会場はこちら」のように、バナーの役割がテキストで伝わるようにしておく。
ファイルサイズに注意
バナー画像が重すぎるとページの読み込み速度が落ちる。とくにトップページに複数のバナーを並べる場合は、1枚あたりのファイルサイズを100〜200KB以下に抑えたい。JPEGの圧縮率を調整するか、WebP形式で軽量化する方法がある。
