目を引くバナー広告のデザインパターン

インターネットを使っていると、必ず目にするバナー広告。

クリックしてもらうためのコツが、デザインパターンから読み取れます。

 

目を引くバナー広告のデザインパターン

 

 

横に割るレイアウト

横に割るレイアウトパターンは、情報の整理という側面もありますが、メリハリをつけてインパクトを出す目的が多そうです。

 

SONY×TOWER RECORDS

SONY×TOWER RECORDSの広告。

「黒」「白」「黄」の3色構成によって、メリハリが効いています。

ウィルコム

ウィルコムの広告。

青を基調とする中に、ピンク色(期日)や写真の切り抜きがメリハリを与えています。

games

gamesの広告。

大きく2つに分けて、ユーザーに問い掛けるパターンもインパクトが大きいです。

 

 

縦に割るレイアウト

インパクトよりは、きちんと情報を伝えるのに適した縦割りレイアウト。
写真と文言を分けるとスッキリとした印象になります。

 

はたらいく

はたらいくの広告。

写真とテキストを棲み分けることで、どんな広告かがパッと分かり、ターゲットを絞るのに適しています。

住友林業ホームテック

住友林業ホームテックの広告。

住宅の内観をメインにする場合、写真を横にすれば部屋の広さを、縦にすれば空間の高さを強調できる一例。

エアリゾームインテリア

エアリゾームインテリアの広告。

6:4ぐらいの割合で、縦に割ったレイアウト。大きい写真で目を引き、読んでもらうことを意識している印象です。

 

 

横に並べるレイアウト

商品がたくさんある場合、同じような大きさであれば、横に整列させると綺麗です。

 

ボートレース(競艇)

ボートレース(競艇)の広告。

あらゆる要素が横に並んでいることで、情報の整理がしっかりされています。

ピーリング

ピーリングの広告。

セット商品の集合写真が無い場合、並べるとキレイに収まる例。

人間関係計算機

人間関係計算機の広告。

同じ商品でも色違いを並べることで、商品に訴求力を持たせています。

 

 

敷き詰めるレイアウト

見せる情報が多い場合、マス目状に並べるとインパクトが大きいです。

 

DHOLIC

DHOLICの広告。

アイテムを9分割で並べた例。ひとつに絞らず、顧客の多様なニーズに合致するよう工夫されています。

Manfrotto

Manfrottoの広告。

写真コンテストという特性を活かした、写真を並べるパターンもインパクトが大きいです。

Creema

Creemaの広告。

等間隔に並べず、メリハリをもたせることで、堅苦しさのないスッキリとした印象です。

 

 

斜めにするレイアウト

斜めにすると全体に動き(躍動感)が出るので、印象に残りやすいです。

 

EFO CUBE

EFO CUBEの広告。

情報は少なめですが、コンテンツ量が多いサイトの中では特に存在感があります。

エクスペディア

エクスペディアの広告。

フッター以外の写真と文字を斜めに傾けることで、目に留まりやすい印象です。

SURPASS

SURPASSの広告。

情報多数の謳い文句を、斜めによる動きで表現。気になる人は見てしまうかもしれないですね。

 

 

円を使ったレイアウト

円自体が完全な図形と言われることもあり、強力なインパクトを与えます。

 

ケイ・ウノ

ケイ・ウノの広告。

真ん中に円を用いることで、フェア開催の情報をしっかりと伝えています。

OIC(大阪情報コンピュータ専門学校)

OIC(大阪情報コンピュータ専門学校)の広告。

螺旋状に描かれた階段の円が、目を引きつけます。

資生堂

資生堂の広告。

円状に配置された商品が印象的。遊び心も感じられます。

 

 

写真を大きく使ったレイアウト

写真のインパクトをそのまま利用したパターン。サービス系には不向きですが、商品系には絶大な効果があります。

 

GROUPON

GROUPONの広告。

テキストは最低限ですが、何を伝えようとしているか一目で分かります。

PIXTA

PIXTAの広告。

写真素材専門サイトなだけに、質のよい写真を活かしたレイアウトです。

007速配コンタクト

007速配コンタクトの広告。

着用した女性の写真を大きく使うことで、使用した時のイメージを容易にしています。

 

 

余白を利用したレイアウト

できるだけ情報を削り、余白を大きくとることで高級感や清潔感が出てきます。

 

Green

Greenの広告。

あえてテキストのみ、しかも余白を十分にとることで、逆にインパクトを出しています。

三陽商会

三陽商会の広告。

商品まわりの余白を大きくすることで、ブランドとしての高級感が生み出されています。

REGZA

REGZAの広告。

余白はそこまで大きくないですが、白と青を基調とした配色により、独特の高級感が感じられます。

 

 

モノクロ

あえてモノクロにすることによって目立たせるパターン。
一部にカラーを入れると、アクセントになります。

 

TABROOM

TABROOMの広告。

白背景色のサイトは比較的多いと思いますが、その中にグレーのこの広告があると目立ちそうです。

BOSE

BOSEの広告。

モノクロによる力強さが表れています。

EXILE

EXILEの広告。

あえての白黒写真は、逆に閲覧者の気を引くのかもしれません。

 

 

ビタミンカラー

背景をマットなビタミンカラーにすることにより、ポップで元気なイメージを与えます。

 

WiMAX

WiMAXの広告。

ビビッドなブルーにピンクと黄色の差し色。ポップな印象で、気軽にクリックできそうな印象。

ウィラートラベル

ウィラートラベルの広告。

ピンクを基調とした色使いで、女性への訴求力がとても高いです。

レイク

レイクの広告。

キャッシングや借り入れをポップな印象にしてくれるビタミンカラーが効いています。

 

 

目立つ色

とにかく目を惹く色合いで勝負。目立たせるためのストレートな方法。

 

A8.net

A8.netの広告。

赤を基調とした、とにかく目を引くパターン。

クーリエ・ジャポン

クーリエ・ジャポンの広告。

青を基調とした色使いで、こちらも目を引かれます。

eo光

eo光の広告。

ゴールド系の色味が、とにかく目立ちます。

 

 

漫画、新聞、雑誌表現

普段よく目にするデザインに似せることで、強烈なインパクトを与えます。

 

漫画風

漫画風の広告。

アメコミ風の画風は、カジュアルでくだけた印象がありますが、インパクト大です。

雑誌風

雑誌風の広告。

電車内の中吊り広告でみる週刊誌風の見た目は、なぜか目を引かれてしまいます。

新聞風

新聞風の広告。

スポーツ紙の一面を飾るかのような大見出し。何事かと思わず目を釘付けにされそうです。