Warning: Use of undefined constant WPLANG - assumed 'WPLANG' (this will throw an Error in a future version of PHP) in /home/afa/ntv-english.com/public_html/bmp/blog/wp-content/plugins/similar-posts/similar-posts.php on line 557
シンプルなベタ塗りバナー画像の基本的な作り方 | バナーの作り方簡単習得


小さいサイズのバナー、縦長や横長など写真やイラストの入れ込みにくいサイズのバナーは、テキストが主役となり、シンプルなベタ塗り背景のバナーとなる事が多いのではないでしょうか。そこで今回は、テキストを3種類配置させたシンプルなベタ塗りバナー画像を作成してみました。

シンプルなベタ塗りバナーのポイント【動画の解説】

文字の位置やバランスをうまく配置すること

一つの文字の塊を一つのブロックと見立てて、バランスよく配置するように考えましょう。
今回の場合は、左右を約半分づつに見立て、左側には名いっぱいに一番伝えたいメッセージを配置し、右側は上下二つのブロックに見立ててパンチのある色のメッセージとそれに沿えるような細めの文字という配置にしてみました。
どれを一番伝えたいかを考えて、文字(ブロック)の大きさを比例させるようにすると伝えたいイメージに沿ったデザインとなります。

太いフォントを使うと、目立つバナーにできる

太いフォントは迫力を出す事が出来、強い印象になります。メリハリをつけたい部分などに効果的に使うと、文字だけのバナーでもインパクトのある画像となります。
さらに、文字にふちどりをつけると、背景色と文字の境界線がはっきりとしますので、より強い印象をもたせることができます。太いフォントの定番はゴシック系フォントです。今回も一番目立たせたい文字は、白に黒いふちどりのゴシック系フォントを使用しました。

文字の色と、背景の色の組み合わせも大事

あまりたくさんの色を使いすぎるとごちゃごちゃした印象になってしまいますので、きれいに作られているバナーの色数を参考にするとよいです。色の選び方は自分の感覚だけで選ぶと、何が良くて何が悪いのかという判断基準が分からなくなってしまう事もあるので、慣れないうちは配色ツールなどを使って色を選ぶのが近道です。

シンプルなバナーとは?

人はどの様なバナー画像を見ると「シンプル」だと感じるのでしょうか?
ざっとあげるとこんなところかと思います。

・どこかで見たことがあるような馴染を感じる。
・色数が少ない。派手ではない落ち着いた色を使っている
・ごちゃごちゃとした飾りがない


ファッションやインテリアなどでもシンプルテイストは一つのカテゴリーとなっていますが、バナーにおいても同じように考えてよいでしょう。そして、シンプルなバナーを作るためには、これらから外れないようにすればいい訳です。簡単ですね。
まず、バナー作り初心者が最初に陥りがちなポイントがこの「どこかで見たことがあるようなバナーでよい」という点です。完全にそっくりそのままというのは、『パクる』ことになってしまうので、見たことがあるような・・・とぼんやりとしているところが大事なところです。バナー作り初心者の場合、頑張りすぎてしまうせいか、オリジナリティ全開にしてしまう場合があります。すると、シンプルなバナーづくりの生命線でもある守るべき基本事項まで変形してしまう為、「素人っぽいバナー」となってしまうのです。色数を抑えたり、装飾を少なくするという事は実行しやすいと思うので、シンプルでカッコイイと思うバナーと似たようなバナーを作ろうという目的にするとうまくいきやすいでしょう。

シンプルだからこそのプロのこだわり

プロのデザイナー達の間でも、シンプルなデザインは難しいというのが定説です。シンプルであれ複雑や派手なテイストであれ基本を押さえる事は当然ですが、なぜシンプルが難しいといわれるかと言うと、要点が少ない事が理由です。
例えば、装飾がたくさんあるデザインの場合、装飾物の色味や形やテイストなど様々な要点があるので、それぞれをそこそこに仕上げていくとそれなりにまとまったりもします。しかし、シンプルデザインの場合、色選びと配置ぐらいしか要点がないのです。そのため、それ添えの中で、高得点が必要とされるのです。シンプルなバナーを作る場合、

・ボタンのベースとなる背景色を何にするか?
・フォントの種類を何にするか?
・フォントの大きさをどうするか?
・配置のバランスをどのようにとるか?

プロのデザイナーも初心者も考える要点の数は同じです。しかし、違うのは考える深さなのです。
例えば、文字と文字の間隔や、背景に言われないと分からない位うっすらと模様が入っているかどうか、シャドウの具合が微妙についているかどうかなどです。
とは言っても、シンプルなバナーはスピーディに作れることも大事ですし、そこまでの細かいプロの技を入れなくてもかなりきれいなシンプルバナーを作る事は出来ます。そのために注意するとよいのが、細かい点をよく観察するという事です。

シンプルなバナーで大事な伝える事

どこかで見たことがあるようなシンプルなバナーを作る場合、きれいには出来ているけれど、味気ない感じやチープな感じが出てしまう事があります。それはただのものまねか自分なりに考えて作ったものかという違いからくるように思います。
ホームページのサイドなどに掲載するバナーをシンプルなバナーで作る場合、ただのものまでバナーだと、それぞれのバナーがシンプルだけでそれぞれ別の人が作ったようなバラバラな印象になったりします。サイト全体のテイストに合うようについいつのルールを守ったり、色の傾向を合わせたりと自分なりに考えると思いが形になって表れてくるのではないでしょうか。
また、バナーを見た人に伝えたい事がメッセージとしてきちんと書かれているかという視点も大事です。「注意」等のシンプルなバナーでも、注意の度合いや見た人にどのような行動をとってもらいたいかが分かりやすく示されているかなど伝えたい内容があるはずです。
シンプルなバナーといえども少し考えてみると奥深さがあるものです。特にシンプルなバナーはちょっと気を付けるだけでぐんとよくなったりもしますので、ぜひ参考にしてみてください。

共有するTweet about this on Twitter0Share on Facebook0Share on Google+0

関連記事