デザイナー視点で見る!イケてるバナーとトホホなバナー~イケてるバナー編~

powered by hm solution

お問い合わせ:0120-290-727
受付時間:10:00~18:00(土日祝は除く)

お問い合わせ

デザイナー視点で見る!イケてるバナーとトホホなバナー~イケてるバナー編~

アイデアの参考になるバナーたちのお話です。

前回のデザイナー視点で見る!イケてるバナーとトホホなバナー~これはトホホ編~
に引き続き今回は参考にしたいグッドデザイン編!
前回はあまり目に優しくありませんでしたが、今回はアイデアの種になりそうなバナーたちです。

縦に割る

写真を文字を分けることでスッキリとした印象になります。

300x250x41ee83c6042148fb1d30cafd

よくあるスタンダードな縦割りです

20131025-090013

2種類の違うテイストの写真をキャッチごとに分けて上手く分割してます。

20130219-100013

商材がレンズなのでカーブが効いた縦割り。

20130906-150013
20130730-100013

個人的にカラーリングが好きでピックアップ。

nihonsyu-life

和な商材を利用して縦割り+文字も縦にすることでスッキリ+インパクト

横に割る

文字と写真の整理よりも視覚的なメリハリがついてインパクトが出ます。

bn_embellish2013_300_250

スタンダード

20130507-100013

素材を使った横割りでふんわり綺麗めテイストに仕上がっています。

20111213-200013

こちらもスタンダード横割り。写真自体にインパクトがあるので他はあまり手を加えなくても綺麗に収まっています。

20130130-140013

リッチカラーと曲線の組み合わせで高級感を出しています。

20130805-140013

写真を上手く活かした横割りです。

横に並べる

複数の商品や色違いの商品がある場合、横に並べると綺麗です。

300x250x2caeb599a753379c8c243cd9

色違いを整列。

300x250x24ca75e15eac951f159a6d74

横並びのスタンダード。横割りも使ってます。

20120217-100013

横並びにすることでワッフル種類が豊富なのが一目でわかります。

236x155x9fe7f0e607bc46f1320b5c39

商材が色の種類も多く、並べるとカラフルなのでテキストは黒1色に押さえバランスをとっています。

20120427-200013

余白も多めでスッキリしています。

敷き詰める

グリッドに並べると強めのコントラストとインパクトを与えます。

300x185xaa7ff175d8c158e951638984

色の数は少なくても十分インパクトがあります

20130314-090013

フラットデザインに使われる色を使っての敷き詰め。

300x250xa5e3affafa1eb95cce1ec84c

ギャラリーがメインコンテンツの場合にもよく使用されます。

20130704-090013

グリッドの敷き詰めとはちょっと違うんですが、文字とアイコンの組み合わせでポップにまとめています。

斜めにする

躍動感が出て主にキャッチコピーが強調されます。

20130926-100013

ほぼテキストとロゴだけの構成ですが、斜めのキャッチコピーが際立っています。

400x300x0022e9f4b058736abff50a75
300x185xadaf0ad2e085c835a82b2f02

文字を放射状に配置することで写真にも動きが出ています。

329

角度がつくとコミカルにも見せられます

余白を持たせる

程よい余白を持たせることで清潔感・高級感が出ます。

300x250x0e86e7afa4ebcf18aeac6879
20130926-110013

単色構成ですが、フォントと余白で高級感を出しています。

20130612-090013

余分な情報をそぎ落として必要最低限に納めることで視覚的にイメージを伝えます

300x250xf2c6c4e363cbe9fb950b75d8
20131025-150013

余白で見やすく色で魅せる!

ビタミンカラー

ビタミンカラーをベタ塗りすることで、ポップで明るいイメージを与える事ができます。
比較的女性をターゲットにしたものに多く見られます。

design2_bnr300_250

リンク先のページと同じデザインです。
フォントもテイストに合わせてデザインされています。

20130125-140013

こちらも背景1色+顔写真切り抜きのデザイン

20131018-150013

またしても背景1色+顔写真切り抜きのデザイン・・・流行っているのでしょうか?

300x250xda31a39162e3989a6244d98b

・・・・。

派手な色

原色は目を惹く色なので目立つバナーをデザインする方法としてストレートに使いたいところですが、色の数や文字を控えめにするなどしないと目が痛くなります。デザイン難易度は決して低くありません。

500x354x004ce2a09a904d6eaa40a316

きつめの赤ですが使用色を3色にとどめ文字も小さめにすることでスッキリ見せています。

336x269x5d886e2ca1a7877d688a77e9

こちらも3色、文字小さめ。余白を持たせスッキリ見せています。

300x250x7ba271bae419b9dc2b0e3103

真っ赤に対して黒で引き締め。

20131008-150013

原色背景は3色までが多いです。

201105_4_11

こちらは指し色として原色使用。

20130913-140013

キャラの色を背景になじませることでごちゃごちゃするのを回避しています。

まとめ

◆レイアウト
・縦に割る
・横に割る
・横に並べる
・敷き詰める
・斜めにする
・余白を持たせる
◆カラー
・ビタミンカラー
・派手な色(原色など)
を紹介しました。
他にも
・モノクロ
・円を置く
・バナー枠に色をつける
などなどありますが、
だいたいのバナーはこれらの組み合わせで構成されているものがほとんどです。
これらをバランスよくレイアウト、カラーリングすると良いバナーができあがります。

みなさんもいろいろ試してみてください。

さきボー
デザイナーの寺本です。通称:さきボー/イエロー
美しいもの・かわいいものが大好きです。心が奪われます。
完璧な美しさの中に秘めた魅力的な欠点があればもっと心が奪われます。
そんな”人の心を灯せるデザイナー”を目指してます。
powered by hm solution
お問い合わせ
お問い合わせ
gmt
© hm solution, Ltd.