10年目デザイナーが基礎から教える！バナーの基本と作り方解説（実例＆参考サイト紹介）
みなさん、満足のいくバナーを作れていますか？
バナーとは広告や宣伝などの目的で使用されるイメージ画像のことで、Web制作に関わると避けても通れないモノのひとつです。
「バナーってそんなに難しいものじゃないでしょ？」と思うかもしれませんが、限られたスペースの中でいかに情報を分かりやすく魅力的に伝えるかが勝負です。
今回は「バナーの基本」を、実例を交えながら解説します。
デザインを始めたての人やバナーを作成したいけどどうオーダーすれば良いか分からない人はぜひ参考にしてみてください。
目次
バナーとは
バナーとは直訳すると「旗」「のぼり」という意味になります。
使い道としては大きく分けると2種類あります。
1つは自社のWebサイト上に特集ページやキャンペーンページなど、注目度を高めたいページへユーザーを誘導する表示されるバナーです。
もう1つは他社のWebサイトに配置してユーザーに興味を持たせ、自社サイトに訪れるよう誘導する広告用のバナーです。
静止画バナーと動画バナー
バナーのファイル形式として「静止画」と「動画」があります。
バナーを通してユーザーに「何を伝えたいか」を考え、より伝わりやすい形式を選ぶことが重要です。
静止画バナー
画像だけで作られた最も一般的なバナーです。JPEG・PNG・GIF形式を使うことが多く、ユーザーのペースでバナーを見る・読むことができます。
シンプルなメッセージやインパクトのあるビジュアルを訴求したい場合にお勧めです。
また、特定のイメージやロゴを強調しやすいので、ブランドの統一感を出したい場合にも適しています。
動画・アニメーションバナー
視覚だけでなく聴覚からもアプローチできるため、商品やサービスの魅力をより効果的に訴求することが可能です。静止画に比べると掲載できる情報量が多いため、文字では伝わりづらい複雑な訴求も動画だと分かりやすく伝えることができますが、ユーザーが読む前に絵が切り替わってしまうと情報を伝えきれない可能性があるのでテンポには注意が必要です。
また、媒体を決めた後は必要なサイズを確認してください。下記にサイズをまとめた詳細な記事があるのでぜひ読んでみてください。
バナー広告入稿する際には拡張子の規定があるので、基本的な知識はこちらをご確認ください。
バナーを作るときの王道レイアウト
次に、バナーでよく使われているレイアウトをご紹介します。
限られたエリアの中でいかに分かりやすく魅力的に伝えられるかが肝心なバナーは、多くのデザイナーたちが頭を抱えながら生み出してきました。
そのため自然と良いデザインのバナーは下記のような4つのレイアウトのどれかに分類されることが多いです。
今回はそんなバナーの王道レイアウトを4つご紹介します。
F型
左側に寄せたテキストを上から下へ読んでいく王道中の王道レイアウトです。
空いた右側には画像を入れられるので、商品やイメージ画像を大きく使いたい場合にぴったりです。デザインの自由度は高くはありませんが、テキストが整頓されている分しっかり読むことができるので、誠実感のあるきっちりとした印象を与えたいときに最適です。
おすすめのジャンル：教育・学習、不動産、飲料・食品
Z型
中央にテキストや見せたい画像を寄せるレイアウトです。
F型よりも自由度が高いので遊び心を加えやすく、中央に目が行くのでインパクトを与えたい時に最適です。
背景全面に画像を置いて、テキストをロゴ風に真ん中に置いたりしても良いと思います。
おすすめのジャンル：イベント、飲料・食品、観光・旅行
縦割り型
画面を縦に割って2つ以上の要素を同じ程度の重要度で訴求できるレイアウトです。
シンプルかつ洗練された今っぽい印象を与えます。
訴求したいことが2つ以上ある場合に組み立てやすいレイアウトなのでおすすめです。あまり分割する数が多すぎると1つ1つの要素が弱くなり、視認性も低下するので注意してください。
おすすめのジャンル：ファッション、美容・コスメ
フッター型
バナーの下部にテキスト要素をまとめるレイアウトです。
画像とテキストのエリアがしっかり別れるので、期間や応募方法などキャッチコピー以外に重要な要素があるキャンペーン系の訴求に最適です。
おすすめのジャンル：イベント、映画・ドラマ、不動産
上記以外にもパターンに囚われないバナーももちろんありますが、前述した4つのレイアウトを参考にすると要素を組み立てやすくなるので、目的にあったレイアウトを選んでみてください。
バナーにも通じるデザイン全般の基礎知識は、下記ブログで解説しているので気になる方は読んでみてください。
実際に作ったバナーの解説
バナーの基本をお分かりいただけたでしょうか？
次は実際に私が作成した広告用バナーを解説していきます。
| バナーの目的 | 自社LPへの遷移 →LPの概要：リスティング広告を打ちたいがどんな代理店を選べばいいか分からない人へ向けた資料&会社紹介 |
| 必要な要素 | ・「99%失敗しない！？」リスティング広告代理店の選び方とは・・・？ 代理店選びに自身がないWeb担当者のための 代理店チェックシート無料配布中 まずは無料ダウンロード ・自社ロゴ |
| 掲載媒体 |
上記を踏まえて作成したバナーがこちらです。
王道レイアウトに当てはめるとF型とフッター型のMIXのような感じです。
LPのカラーリングを踏襲し、テキストのみのインパクトあるバナーを目指しました。
テキスト量が多いので優先順位を考えながら装飾と強弱を付けていきました。
こだわりポイントは下記になります。
① キャッチコピー
キャッチコピーなので太めの黒い帯を引き、視認性UPと強いインパクトを与えられるようにしました。
② 補足コピー
「代理店チェックシート」の補足をするコピーなので、やや控えめに最悪読まれなくてもいいレベル感に抑えています。ですがテキストを置くだけでは寂しい印象になるので、主張しすぎない透過した黒いマーカー線と、「ない」に点々を付けて「工夫していますよ感」を出しています。
③ 訴求
このバナーは代理店チェックシートに興味を持った人にLPを見てもらい資料ダウンロードしてもらうorお問い合わせしてもらうことが目的なので、訴求エリアは上段とはテイストとフォントを変えることで良い違和感を出し目に留めてもらえるようにしました。
④ CTA
最後の一押しです。背景色を黄色から黒に切り替えてシンプルに見やすく訴求します。
また、要素同士のマージンは下記のようなルールを決めて作成しています。
基準となる「A（今回は80px）」を最初に決めると次の要素とのマージンを考えやすく、美しく整った印象を与えるのでぜひチャレンジしてみてください。
「A」の数値を決める明確な基準はありませんが、関連がある要素同士ほど近く、関係ない要素ほど遠くに置くように意識してください。
バナーを依頼するときのポイント
次にバナーを依頼する際、スムーズに制作が進むための大切なポイントをご紹介します。
依頼する前にバナーの要件を整理することで、あらためてバナーの必要性や理想形を思い浮かべることができるのでとにかく準備が重要です。
① 制作経緯をまとめる
制作背景
バナーを作るきっかけになった背景をしっかりデザイナーに伝えてください。
デザイナーが背景を読み解くと新たなアイデアが生まれたり、制作しやすくなるメリットがあります。
目的・ターゲット
制作背景の流れで目的を明確にしてください。
例えば健康食品を訴求したい場合、「とにかく目立って人の目に留まりたい」ではなく「社会人で健康を意識している30代後半～50代女性に刺さるようなシンプルで清潔感のあるデザイン」と誰に何を伝えたいのかを考えてください。
上記のようにバナーを作るきっかけになった背景をしっかりデザイナーに伝えてください。
② 形式を固める
掲載媒体
Web広告として出すのかサイト上に載せるバナーか決めます。
Web広告の場合Google・Yahoo!・facebook・instagram・X・LINEなど各媒体の特徴を鑑みながら選択する必要があります。
各媒体の解説は下記記事を参考にしてみてください。
■Goole
【完全解説】Google広告の始め方 “最初のWeb広告”にGoogle広告が最適なワケとは？
■Yahoo!
Yahoo!広告とは？媒体の特徴と配信事例を紹介
■各SNS
【資料DL可能】SNS広告とは？X（Twitter）・Facebook・Instagram・LINE広告を基礎から解説
サイズ
掲載する媒体が決まったら必要なバナーのサイズを確認しましょう。
1つのSNSの中でも掲載するエリアによって様々なサイズがあります。
サイズに関しては下記記事で詳細に説明しています。
【DL可能】おもなWeb広告の全バナーサイズ一覧とオススメサイズを紹介
納期
バナーの完成形が必要な期日を設定します。
基本的には「初稿提出→（あれば）修正指示→二稿提出→確認→FIX」のような流れになるので、完成形が欲しい期日が決まったら逆算をして余裕のあるスケジュールを組みましょう。
上手く要件を伝えられていないと、修正と再提出の無限ループになってしまうので注意してください。
③ 参考デザインを探す
目指したいデザインの雰囲気がわかる参考イメージがあれば、デザイナーに共有してみてください。それを参考にデザイナーが商材に合ったバナーを生み出してくれるはずです。
参考が見つからない場合はキーワードをいくつかデザイナーに伝えてみてください。
すると、デザイナーから「こんな感じですか？」と質問してくれる場合があるのでYes or Noで理想を絞り込んでいきましょう。
おすすめバナーデザイン参考サイト
BANNER LIBRARY
掲載されているバナーはアーティスティック過ぎない商業用としてとても参考になるものが多いです。
テイストや季節感などバナーを細かく分類するナビゲーションもあってとにかく探しやすいです。
ログインをしなくてもお気に入り登録ができるのも嬉しいポイントです。
Bannnner.com
「160×600」「300×250」など細かなサイズ指定をして絞り込みができるので、作りたいバナーと同じサイズの参考バナーを探すことができます。
写真やイラスト頼みになりがちなバナーですが、このサイトでは「テキストのみ」のバナーを検索できるので、文字のみレイアウトや文字のみで構成されたデザインの参考を探したいときに最適です。
ピンタレスト: Pinterest
こちらはバナーに特化したサイトではありませんが、デザイナーやセンスの良いものを探したい人にはおすすめのWebサービスです。
バナーだけでなく検索したキーワードに関連したアイデアが表示されるので、新たな発見があるかもしれません。
お気に入り登録のような「ピン留め」機能があり、ピン留めしたアイデアを自分でグループ分けする「ボード機能」で整理することができるので、アイデアを見直しやすいサービスです。
まとめ
バナーの基本と制作イメージはお分かりいただけたでしょうか？
前述したほかにも色の組み合わせやキャッチコピーの入れ方など、たくさんの要素を考慮してベストなバナーを作らなければなりません。
デザインを始めたての人は、世の中に良いと言われているデザインをまずは参考にし、自分なりのアレンジを加え、アイデアの引き出しをどんどん作っていくことをおすすめします。
プライムナンバーズではバナー1点からでも作成可能ですので、Webサイトや広告用のバナーが必要な方はお気軽にご相談ください。
料金の参考詳細はこちら
