バナー

「バナーデザインの参考に!」レイアウト別に秀逸なバナー事例を紹介します!

「バナーデザインの参考に!」レイアウト別に秀逸なバナー事例を紹介します!
Pocket

バナーを作る際はどんな商品やサービスを、どんなユーザーに見せるか。

またどういった内容を見せるかを考えることが大切です。

ディレクションをする際、どういったバナーを作ってもらうのかを意図のズレがなく伝えることはとても難しいです。

意識のズレが無くなれば、やりとりの工数も修正の工数も無くなります。

その為には参考にできるバナーやデザインを共有するとことをオススメします。

今回は参考にできるバナーを考える際の方法の1つとして、レイアウトの話をしたいと思います。

レイアウトとは何か?を理解する

レイアウトとは何か?を理解する

レイアウトとは、物の「配置・配列」という意味です。

バナーも含め、デザインにはレイアウトの考え方がとても重要になります。

レイアウトを意識することで適切な情報量を見やすく、端的に伝えることがよりしやすくなります。

バナーのレイアウトは大きく分けると3種類ある

バナーに使われているレイアウトの種類はそこまで多くありません。

バナーに使われているレイアウトは大きく分けて3つ。

3つのレイアウト

商品やモデルを大きく見せる【縦型レイアウト】。

インパクト重視の【中央型レイアウト】。

見せる情報や商品が複数ある場合に使われることが多い【横型レイアウト】の3種類です。

レイアウトを見るときはバナーに載せる情報量を考える

バナーを作る際、参考にできるものがあると制作側もディレクション側も非常にスムーズです。

サービスや商材に合わせたものを参考にするのも良いですが、それだと作りたいバナーの情報量と参考バナーの情報量が違い、合わせることが難しくなるケースがあります。

情報量

参考バナーを探す際は情報量が近しいバナーを探すと認識のズレがなくなりスムーズに作成が進みます。

参考バナーはギャラリーサイトで簡単に探すことが可能です。

商材やサービス、サイズやテイスト以外にも、情報量を元にしたものを探してみて下さい。

以前の記事:工数削減に!「依頼や作成時に役立つ」バナー参考サイト4選

レイアウト別のバナー事例紹介

レイアウト別のバナー事例紹介

それでは本題のバナー事例の紹介をさせていただきます。

今回はベースになる、縦型、中央型、横型の3つに分けて紹介させていただきます。
少しでも作成用バナーの参考にしていただければ幸いです。

縦型レイアウトのバナー事例

商品やサービスを目立たせる時によく使われているのが縦型バナーです。

単品商品や、マンションなどでよく見られます。

縦型:BRAUN電動髭剃り機のバナー 情報量:少

BRAUN電動髭剃り機のバナー

ユニークなCMなどでも知られるBRAUNのバナーから紹介させていただきます。

商品を目立たせるだけでなく、全体のトーンや氷の中に電動髭剃りを入れることでキャッチコピーである「肌のヒリつき、瞬時にクールダウン」を見せています。

また強い訴求である「全額返金」の下にボタンを配置することで行動をうまく促しています。

縦型:東急不動産 マンションのバナー 情報量:少

東急不動産 マンションのバナー

マンションの広告は大きさや美しさなどを目立たせた広告が多いです。

こちらのバナーも例外ではなく縦型の配置にすることでマンションを大きく見せています。

背景に雲や太陽を入れることで、さらにマンションが大きく美しく見えるように工夫されています。

縦型:Dr シーラボ 保湿パックのバナー 情報量:多

Dr シーラボ 保湿パックのバナ

Dr シーラボのバナーはユニークですがとても考えられたデザインです。

左側で背景、ボタンのデザインを水々しくすることで、「保湿力」を伝えています。

また右側ではクレンジングから、洗顔、クリームを見せることで商品が4つあることを伝えています。

バナーの少ない範囲で商品を細かく伝えられているとてもよくできたバナーです。

中央型レイアウトのバナー事例

こちらは商品よりもキャンペーンやモデル、ロゴなどを目立たせる時に多く使われるレイアウトです。

ロゴを中心に商品やモデルを複数見せる場合にもよく使われています。

中央型:MIDORI ONLINE STORE 絵本のバナー 情報量:少

MIDORI ONLINE STORE 絵本のバナ

こちらのバナーはシンプルなレイアウトで作られています。

商品がメインでなく、キャッチコピーやその周りをテーマである鳥で囲むことによって商品の世界観を伝えています。

中央型:FOEVER 21のバナー 情報量:多

FOEVER 21のバナー

認知度も人気も高いブランドなのでロゴを全面的に見せています。

また豊富な商品をロゴの周りに配置することで、集中線的な目線誘導もできています。

中央型:at home 住まい探し特設サイトのバナー 情報量:少

at home 住まい探し特設サイトのバナー

両サイドにモデルを配置することでキャッチコピーへの目線誘導が綺麗にできています。

CMや特設ページに合わせたデザインで構成されていて、キャッチの下に行動喚起につながる文言が入っているので、サイトへのスムーズな誘導ができています。

横型レイアウトのバナー事例

こちらはモデルや商品を複数見せるような情報量が多いバナーに使われていることが多いです。

横型:マイフェイバリット関西 マガジンのバナー 情報量:多

マイフェイバリット関西 マガジンのバナー

背景で様々な写真を見せることで「おでかけWEBマガジン」の広告であることを伝えています。

またモデルがスマホを持っている写真を見せることで、ナビ代わりになるといった訴求も自然に見せています。

横型:ORBIS 化粧品のバナー 情報量:多

ORBIS 化粧品のバナー

背景は商品のカラーに合わせたもので、キャッチに合わせてどういった商品なのかを真ん中の部分で紹介しています。

下部はテーマカラーの補色であるピンク色で、商品が無くなる可能性がある訴求をうまく見せています。

横型:DAIHATSU TANTOのバナー 情報量:多

DAIHATSU TANTOのバナー

上部の写真では左右のモデルの向きと、中央のモデルの向きを変えることで中央に視線が行くように作られています。

またロゴの下に行動喚起に繋がる文言が入っており誘導もスムーズにできています。

複数パターンのモデルの使い方がとても上手いレイアウトです。

最後に

今回はレイアウトについて書かせていただきました。

大きなカテゴリーでの紹介になったので、次回は用途別に使えるレイアウト例を紹介させていただきたいと考えています。

バナーラボでは他にもバナーについての記事を書かせていただいています。

良かったらお読みください。

過去記事:【保存版 高品質!商用利用可能!】バナーに使える無料素材・無料写真・無料フォント・装飾など参考サイトまとめ

過去記事:バナーデザインを簡単に!「Canva」を使った無料バナーの作り方!