今回お仕事で、表示サイズが133px×55px(スマートフォン用なので、元の画像サイズは266px×110px)のバナーを作ることになったのですが、

どのように文字や写真などを配置するのが良いのか曖昧だったので、

小さくても良いバナーがなぜ良いのか、調べてみることにしました。

 

今回調べたバナーは、バナーデザインアーカイブというサイトに載っていた、

120px×60pxのものから選びました。

 

今回は、レイアウトについて調べてみました。

こちらがそれぞれの要素の比率や配置を調べてみた結果です。

調べてみたところ、すべてバナーがそうだったわけではありませんが、1:1、1:2や2:3、

さらに、1:1.61前後の黄金比(1:1.1618…)が使われているものも多かったです。

 

また、写真やイラスト、アイコンといったイメージと、文字が、対極的に使われていることが多いようです。

イメージはイメージ、文字は文字とわけることで、見やすく、まとまった印象になるのだと思います。

 

色は写真やイラストを除く領域では2～3色をベースにしていることが多いようです。

 

今回調べたほとんどのバナーが3～4つの要素で構成されていました。

小さいバナーに限ったことではないですが、小さいバナーでは領域が小さいので、

何を伝えたいのかをはっきりとさせて、要素を絞り込んでデザインすることが、

より重要になってくるようです。

 

 

まとめ

・要素の比率や配置は、1:1、1:2、2:3や黄金比のような、決まった比率を用いるときれいにまとまりやすい。

・写真・イラストと文字は対極的に配置すると、まとまった印象になり、見やすい。

・写真・イラストを除く領域の色数は、2～3色をベースにすると、まとまりやすい。

・要素はできるだけ絞り込んで、伝えたいことをはっきりとさせる。

 

 

もちろんこれらは絶対的なものではありませんし、見落としも多くあると思いますが

これらをヒントにして、実際のバナー作りを行っていきたいと思います。