• 新米デザイナー必見!バナーデザインの作り方に詰まった際のお助けメモ
2016/10/26WEBデザイン

新米デザイナー必見!バナーデザインの作り方に詰まった際のお助けメモmurata

  • このエントリーをはてなブックマークに追加
新米デザイナー必見!バナーデザインに詰まった際のお助けメモ!

はじめまして。12月に入社した、H2Oの村田です。

とにかくお水をよく飲みます。

 

H2Oがオフィス移転する前はミネラルウォーターが出てくる魔法の蛇口(浄水器)があって美味しい水をタダでゴクゴク飲めていたのに、普通の水しか出てこないオフィスに移転して、毎日2リットルのペットボトルを抱えて出社しています。

地 味 に 重 い 

 

 

さて、そんなお水大好き歴も10年目を迎えた私ですが、

デザイナー歴においてはまだまだです。

 

初回は、私が作ったバナーを先輩デザイナーの村岡さんにチェック&修正してもらった時のポイントを記事にしたいと思います。

 

デザイン歴が浅く、ん〜、なんか微妙だけど、どこをどう変えたらいいのか具体的にわからない!という新人デザイナーさん必見です。

 

ポイントを押さえて、サクッとキマるバナーの作り方をマスターしちゃいましょ〜〜〜

 

デザイナー1年目の私の制作フロー

1年目の私の制作フローをざっくり言うと

 

① デザイン依頼を受けて、ひとまず一人で作成してみる

② 先輩チェック&修正

③ 完成

 

といった感じの流れになります。

まだまだ1年目と経験の浅い私には、先輩のチェックは必須です。

 

先輩によるデザインチェック

ひとまず、私が先輩に提出したものがこちら。

バナーbefore

 

サイトのメインカラーがオレンジだったので、

サイトに馴染むよう今回は同じ系統の色を使用しました。

 

言いたいことはなんとなく伝わっている気もするのですが、

自分でもなんだか退屈に感じます。

 

もっと親近感が湧くようなデザインにしたい!

 

① 要素を傾けてみる

先輩:人気の組み合わせと、料金・メニューを強調したかったのかな?

村田:はい。

先輩:ん〜でもなんか「人気」が少しデカすぎない?

村田:た、たしかにそう言われてみれば(笑)

 

「何を強調したいのか」を考えてデザインすることは

デザインの基本中の基本です。

 

しかし先輩の指摘通り、この場合「人気」が

あまりにも目立ちすぎて、全体のバランスが悪くなってしまっています。

 

アクセントをつけなきゃ!と思い、大きくしてみたものの、

さすがにこれは行きすぎたようです(苦笑)

Before → After

修正1

 

①文字を傾ける

②周りにちょっとした飾りをつける

 

たった二つの動作で、文字を大きくすることなく、

アクセントをつけることに成功しました!

 

目立たせたい=大きくするではなく、

他の方法で目立たせる方法はないか

一呼吸置いて、考えてみることが大切です。

 

② 隙間を埋める

隙間を埋める

 

料金・メニューの上のスペース・・・

そこだけ空白になっていてどこか気になります。

 

余白を生かしたデザインの場合は別ですが、

隙間があると、それだけで全体が寂しく見えてしまいます。

 

でもこれ以上入れる要素はないし、

かといって文字を大きくするのも・・・。

 

線は使える

答えは簡単。

気になる部分に線を入れてしまいましょう!

 

隙間を埋める

 

おお、これだけでいいのか・・・。

 

正直ここにたどり着くまでに、文字を拡大・縮小してみたり

上下にずらしてみたり、試行錯誤を繰り返していました。

 

線を入れることで不自然に空いていたスペースが埋められ、

全体としてもまとまりが生まれました!

 

困った時には「線」を頭の片隅に入れておくといいかもしれません。

 

③ コントラストを上げる

整骨院に来るお客様は、高齢者の方も多いはずです。

文字を読みやすくする

「上記料金は〜」という注意書きは

高齢者のお客様にとっては、少々読みにくいかもしれません。

 

背景のオレンジ色を濃くすることで、文字が見やすく

コントラストを上げる

このように要素を少し強調したいと思った時は、

周囲との配色コントラストを上げてみるといいでしょう。

 

背景と同化していた文字がクッキリ強調されました。

 

④ 背景をうまく使う

ここまできたら、あともう一歩です。

 

これだけでもバランスの良いデザインに仕上がりましたが、

全体の背景を使ってもう少しだけ賑やかさを出してみましょう。

 

after

 

淡い黄色を背景に敷き、白を円の形で残してあげることによって

タイトル部分とメニュー・料金部分が視覚的に分かれて

とてもすっきり見やすくなりました。

 

賑やかになりすぎず、整骨院にはちょうどいいバランスです。

 

まとめ

いかがだったでしょうか。

 

デザイン力を磨くにあたって

このような点を1つ1つ意識しながら作業を進めることは

とても有効な手段の一つだと思います。

 

デザインに行き詰まったら

 

①要素を傾けてみる&装飾を足してみる

②隙間を埋める

③コントラストを上げる

④背景をうまく使う

 

をまず検討してみてもいいでしょう。

 

最後までお付き合いいただきありがとうございました。

 

 

 

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

この記事の著者

murata

muratawebデザイナー

2015年12月入社