見出し画像

バナー作成時の思考フロー

最近、弊社インターン生にデザインのフィードバックをする機会が増えたこともあり、普段自分が、どこに意識を向けながらバナーを作っているのか?よく思考するようになりました。

思考するついでに、自分で集中しやすく、再現性をもってバナーをつくるために、思考フローを整理・まとめてみようと思います。

■ ざっくりしたバナーの作成手順

1. ラフでいいので、ざっくり完成図を決める
2. 文字だけ入れて一番良さそうな配置、バランスを模索する 
3. 文字だけでメリハリが作れているか、見え方を確認する
4. 表現を足していく
5. 全体確認する
完成!

1. ラフでいいので、ざっくり完成図を決める

まず、おおまかな完成図を頭の中に作っておきます。手書きで良いので、ざくざくアイデアを形にしてみると良いと思います。完成図が想像できない場合は、インプットを増やすところから。

着地させる方向性をある程度決めておくと、その後の制作を無限に迷わずに済みます。

今回は、サービス数をフックにしたバナーを作っていくので、以下の方向に決めました。

・左右にサービスがたくさん浮遊しているようなデザイン
・文言は真ん中揃えで作っていく
( シンメトリーな構図 + 中央を円が囲うような構図にすることで、真ん中に視線誘導させることが狙い)

2. 文字だけ入れて一番良さそうな配置、バランスを模索する

完成図が決まったら、モノクロで必要な要素(ボタンや文言)などを並べて、バランスを図っていきます。

この時、カーニング設定・文字詰めなどははじめに行ってから、配置やバランスを模索するようにすると、あとで見え方が大きく変わってしまうことは少ないと思います。

今回は上の画像のような文言で、それぞれの単語が孤立せず、流れで見えるようなバランスを模索。

このとき、単語をそのままブロック的に見てしまわないように気をつけています。順番を入れ替えたり、&の文字を小さくしたり、単語全体の大きさを縮めてみたり。

画面に見えている情報だけでバランスをとろうとせず、当てはめたい型に、うまく文字が収まるよう変形させていく方が、早道のように感じています。


3. 文字だけでメリハリが作れているか、見え方を確認する

文字の配置が決まってきたら、引きで見て単語全体での見え方を確認していきます。

なんだか、「40」以外の言葉は変化がなくペッタリとして見えます。

「メールマーケティング&配信ツール」の文字列が最初に目に止まってくるようにしたいので、フォントを変えて、より目立つようにしました。

文字列だけで、メリハリが成立していると、後の工程が非常に楽になるのでおすすめです。( 昔は後からメリハリをつくるために、余計な加工に走ってばかりいました… )


4. 表現を足していく

ボタンならボタンらしく、下方に向かってグラデーションをかける・ドロップシャドウを落とすなど、それぞれの要素がそれらしく見えるように表現を加えていきます。

サービスアイコンを左右に散らして、メールアイコンも追加するなどしました。ボタン文言のカラーも白から黒系に変えています。( 白のままだと他とコントラストの強弱が似通いすぎるため )


5. 全体確認する

すべての要素を入れ込んで、形にしたら、もう一度全体でのメリハリを確認します。

下は、目立たせたいものがより目立って見えるように、あえて端にある円のオブジェクトのコントラストを下げました。

重要度によって階層付けて要素を表現すると、見る人にとってストレス無いデザインを作りやすくなります。

以上、バナー作成時の思考フローをまとめてみました。

もっと良くできるよというツッコミや、他にこんなやり方があるよ、などあればDMなんかで教えてもらえると大変うれしいです。

ありがとうございます! twitterでもマイペースに活動中です。https://twitter.com/mmaki_algiz