ibanner_point_mv

バナーをデザインする際のヒントやアイディア

  • このエントリーをはてなブックマークに追加

バナー作るの難しいですね。どんなレイアウトにしようか、どんな雰囲気にしようかとか、伝えなければならない情報をきちんと伝えなければならならないとか、どんな風にしたらクリックしてくれるか、とか。きっと挙げ出したらきりがないですね。

ということで、今回はバナーを制作する際、ちょっと困ったときなど少しでもヒントやアイディアになればいいなーと思い少しまとめてみました。


01. バナーをデザインする際のヒントやアイディア 【レイアウト】

イメージ写真、オブジェクト、文字などの要素をどのようにレイアウトするか、などもバナー作りのポイントになってきます。レイアウトのヒントやアイディアについてです。

分割してレイアウト

Layout banner 01

写真などのイメージをバナーの半分ぐらいでレイアウトする方法です。商品や人物などをダイナミックに置くことによって、インパクトを与えたり、目に止まりやすくなってしますね。

Banner design 01

[01]では、縦に分割し右半分をイメージで使っています。[02]では、横に分割しています。素材イメージが横の場合や縦の場合などの状況によって使い方をわけることができますね。

縦や横に分割し、半分はビジュアルイメージに、半分はテキストやロゴなどを入れるスペースに使っているデザインが多いなーと感じます。配色などがくっきり別れることによってメリハリを付けることもできますね!

 

イメージを全面で使う

 Rayout banner 02

イメージ写真などをバナー全体に使うレイアウトですね。素材によって左右されるレイアウトですね。

ビジュアルを大きくすることによってインパクトがあるバナーになりますね!しかし、全面に使える素材に左右されるんじゃないかなーと思います。背景によってテキストや文言を入れるのが難しかったりします。

Banner design 02

[01]も[02]も、全体的にテキストが少なく、キャッチコピーを大きく使っていますね。キャッチコピーを大きく使うで、目が惹かれます。

 

イメージ並べて使うレイアウト

Rayout banner 03

商品なら、複数バリエーションがある場合や、品揃えが揃っている、など連想させやすいということで用いられることが多いレイアウトですね。

ものが並んでいることによって、ワイワイとした賑やかさがでたり、なんだか楽しい気分になったりもしますね。

Banner design 03

[01]ABCマートなど、ECショップのバナーに使われるところをよく見かけることが多いなーと感じます。[02]のように人物イメージをたくさん使う場合も横に並べるレイアウトに向いているなーと思います。

 

イメージを敷き詰めたレイアウト

Rayout banner 04

イメージを並べるレイアウトとは違い、イメージをたくさん使い、背景に敷き詰めるレイアウトです。

たくさん並んでいるため、ワクワクしたり、続きが気になったりして、ついクリックしたくなっちゃいます。

Banner design 04

[01]パソコンで制作している様子の色々なシーンを背景に使っていることで色々なストーリーがあるんではないか、つい続きが気になります。[02]バナー自体のサイズは小さいのですが、使っているイメージはたくさんあるのですごくインパクトがあるなーと思いました。

おすすめ記事

  1. 新米のwebデザイナーが作るバナー制作時のあれ、これ
  2. 新米のwebデザイナーが作るバナー制作時のあれ、これ(背景編)
  3. バナー制作時に参考になるバナーギャラリーのまとめ

関連記事

PAGE TOP