技術と経験で、価値のあるホームページ制作を。ホームページ制作を通じて、お客様に利益をもたらすことを追求します。

技術と経験で、価値のあるホームページ制作を。ホームページ制作を通じて、お客様に利益をもたらすことを追求します。

ブログ

HOME > 花のやブログ > デザイナーの基本!バナーデザインの基礎レイアウトとアイディア
2014/04/03Webデザイン

デザイナーの基本!バナーデザインの基礎レイアウトとアイディア

デザイナーのお仕事でバナーデザインは基本ですが
レイアウトなどで悩むこともしばしばあります。
今回はバナーデザインのレイアウトの組み方を自分なりにまとめてみました。

制作に入る前に

バナー制作に必要な情報を準備・把握する
例)メイン写真+背景写真(装飾なども含む)+キャッチコピー
バナーの要素となるものは上記のものですが、
キーカラーや全体的なデザインのイメージも把握しておく必要がありますね。

実際に作ってみる

今回は弊社和田をモデルに、勝手にバナーを制作。テーマはホラー映画の広告バナー。
※ あくまで文言やイメージは私が勝手つけたものです。

06

レイアウトパターン

07

01

左側:横に分割
背景写真も程よく見えて全体的にバランスが良い。

右側:縦に分割
規則的に文字がまとまって並んでいるので可読性が良い。
ただ背景が全体的に見えないので雰囲気があまり伝わりづらいかなと。
あと文字に動きがつけづらい。

両方とも縦・横に分割することでビジュアルと文言の入れるスペースが確保できるので
バランスがが良くメリハリがつけられます。

10

08

02

背景が全体的に見えるので雰囲気は出るが文字が少し見づらい。
分割しない分、色のしまりがないので背景写真の素材によって左右されるレイアウトです。
ビュジュアルを全面的に出せるので、写真1枚で素材自体を活かしたい場合はオススメ!

12

09

03

今回は同じ画像を背景に並べましたが、ランダムに違うものをおけば面白いと思います。
いろんな写真をグリッドに並べると強めのコントラストとインパクトを与えます。
このバナーではあまり良さが伝わりませんが、よく使われるレイアウトです。

13

おまけ★

04

牛乳の素材を足しましたが、同じ素材でがらっとイメージの違うものも作れますね!

最後に

バナーにもいろんなデザインがありますが
結局は素材や入れる文字数などでレイアウトも決まってくると思います。

あと私がバナー制作で特に気をつけていることは
「文字詰め」と「文字組み」です。
これを意識するだけでも完成度はグッと上がると思います!
もちろん根本的には見る人を引き付けるキャッチとそれに紐づくデザインが大事です。

今回のレイアウトまとめも、制作につまずいた時にちょっとしたヒントになれば嬉しいです。

オススメ!バナーまとめサイト

http://retrobanner.net/
http://banner.keizine.net/
http://www.banner-design-gallery.com/
http://aka-design.sub.jp/bd/

img05

書いた人:nishio

花のやデザイナーの西尾です。
三重県出身。名古屋に来て気づけば早10年。
日々レッドブルを頼りにデザインに奮闘中です。
よろしくお願いします。

人気記事ランキング

株式会社 花のや
〒460-0011
愛知県名古屋市中区大須4-1-79 第2ハヤシビル 3F

花のやについて

お仕事のご依頼やご相談は、下記の電話番号
または、メールフォームよりお問い合わせください。
TEL.052-251-7090 / FAX.052-251-7092

お問い合わせ