こんにちは。フリーランスWebデザイナーの おのです。
今回はデザインを勉強し始めた方が陥りやすい「白いカンバスを前に手が動かない」問題を解決していきます。
手が動かない原因
あなたはバナー制作の依頼を受けました。
原稿や写真素材はもらいました。
Photoshopを立ち上げました。
えっと、えーっと…？？
こんなふうになっていませんか？この状況は、例えるなら英語を話せない人が英単語帳だけ手に入れて、いきなり英語でスピーチをしようとするようなものです。
喋れるわけ無いですよね。
今回は下記のような要件のバナー依頼があったと仮定しましょう。
バナー制作要項
- パーソナルジムのキャンペーンバナー
- 入会金・初月無料のキャンペーン
- キャッチコピーは「春までに絶対痩せる」
- 30代後半〜40代女性向け
- 健康的に痩せられることが売り
- トレーナーは気さくでフレンドリー
- 掲載情報（意味が通れば文字は多少変えても良い）
- 春までに絶対痩せる
- 入会金・初月無料キャンペーン
- 健康的に痩せたいあなたへ
- 体験申し込みはこちら
- ロゴ（支給）
- 写真（支給）
支給素材
デザイン作成前にやること
その1：いきなりツールを立ち上げない
ツールの操作になれていないうちは、「この写真を使おう」「ここにコピーを入れよう」と頭では思いついても、頭に手が追いつきません。追いつかないどころか、「あれっ女性だからピンクのイメージだけど文字をピンクにするとなんか浮いちゃうな..というか大きさこれでいいのかな…」と、1つ1つにつまづいて、なかなか前に進めません。これがにらめっこになる第一要因です。
いきなりツール、だめ！絶対！
その2：掲載情報の優先順位を決める
掲載する情報は、写真、ロゴの他、4つのテキスト情報があります。
バナーはとても小さい上、ユーザーがじっくり見ることはまず無いので、パッと見で人の頭に残る情報はとても少ないです。このバナーの目的・１番言いたいこと・与えたい印象を考えてみましょう。
例えば
目的：体験予約への導線
１番言いたいこと：「入会金・初月無料のキャンペーン」
与えたい印象：お得感（金額・コスパ重視）、これなら頑張れそう感
目的：体験予約への導線
１番言いたいこと：「春までに絶対痩せる」
与えたい印象：今度こそ本気になれそう感、短期集中で結果を出せる
バナーでは、純粋に１番言いたいことを大きく見せるのが大切です。また、今回はどちらもテキスト情報の1つを1番言いたいことに挙げました。なので、写真も印象づけ程度に抑えることを意識します。
その3：まずは手書きでラフを描く
デジタルなものを作るのに手書き…？ダッサ…と思う方もいると思いますが、これが本当にだいじです。iPadのお絵かきアプリなんかでもOKですが、ポイントは必ず白黒で描くこと。枠外に「こうしたい」というコメントも入れると頭の中が整理されていきます。
目的・１番言いたいこと・与えたい印象を意識してみましょう。
上記のABのパターンでラフを描いてみました。
パターンA
パターンB
この時点ですでに目的が明確になっていて、受ける印象が全然違いますね。
まだ白黒なのに〜！
ラフもそんなに描けないよ！という場合は、まずPintarestやギャラリーサイトなどでいろんなデザイン・レイアウトを見て、引き出しを増やしましょう。課題制作であれば、真似するところからはじめてもいいですね。
バナーのレイアウトはいくつかの型に分類されることが多いので、［その２］で決めた優先順位をもとに型を決めてみよう。
参考サイト：バナーデザインの制作フローやレイアウト、参考になるエントリー・デザインギャラリーをまとめてみました
その4：フォントと配色を決める
ラフが描けたらフォント（書体）とカラーリングを決めます。先程のラフに色を載せるのではなく、もう一度、制作要項と［その2］に立ち返って、要件や掲載情報から連想して考えます。
※実際のバナー案件では、そのリンク先のLPで使っているフォント・配色を使うことが多い。
●ターゲットは30代後半〜40代の女性
→ビビットな配色より、少し落ち着いたトーンがいいかな
→ロゴのオレンジを有効に使いたい
●バナーなので色数は抑える、無彩色も取り入れる
●コスパ重視、ハードル低め、しっかり説明がほしい
→読みやすいようテキストはコントラストしっかり
→明るい色で、楽しそうな雰囲気
→オレンジ系（茶色とか）でまとめてみる？
→オレンジx黄色だとポップになりそう
●本気で痩せられるか、信頼感、ハート
→信頼感を出すなら明朝体？
→本気度を示すなら力強い太めゴシック？
→オレンジと、補色の青（暗め）で力強さを出す？
→あくまで女性向けなので男性っぽくならないように
ここまでできると、白いカンバスを前に固まってしまうこともありません。
フォントや色のイメージがわかない場合は、本やサイトを参考にしよう。Photoshopを立ち上げてもOK。適当に長方形や文字を配置し、いろいろなフォントと色を試してみよう。
さぁ、ツールを立ち上げよう
ここまでの段階を経て、やっとデザインソフトの登場です。ここでは細かな技術については触れません。ざっくりとした流れを掴んでください。
白黒でとりあえず配置
はじめから色を入れようとすると、頭が混乱するので、まずは色情報を入れないで配置だけに集中します。ラフをそのまま再現できればOKです。
このとき、重要度が高いオブジェクトほど濃いグレー、重要度が低いものは薄いグレーを使うとより情報整理が可視化できます。
フォントを適用させ、文字組みをつくる
１番いいたいものは印象づけるフォントを使う。それ以外は可読性の高いシンプルなフォントでOK。無理やり飾ると逆に見づらくなります。文字組みは、キーワードを大きくor助詞を小さくが基本。
写真を配置して、色を乗せる
ここで初めて色を使います。ここではロゴのオレンジを少し調整して、パターンAはオレンジ系でまとめ、パターンBは少し力強くみせるため、暗めの青を太めの線で使いました。写真の中に青い部分があるので、そこからスポイトで色を拾ってくると、馴染みやすくなります。目立たせたいテキストは単色だと弱いので、境界線などでフチ取りしたり丸で囲んだりして、目に飛び込んでくるようにします。
写真はそのまま使わず、明るさぐらいは調整しましょう。必要に応じて切りや色変えができようになるとベターです。
調整して完成
さらに調整を加えていきます。細かいところを見れば永遠に修正は続くので、時折ディスプレイから目を離して、全体のバランスを見るようにしましょう。
A・・・影や点線を追加、文字組みや全体的なバランスを調整
B・・・「絶対」のゴミ消し、情報のグループ化、写真を再配置
同じ情報、同じ写真を使いましたが、言いたいことや与えたい印象を最初に決めたことで、まったく違う印象のデザインが2つできました。作っている途中で迷走したとしてもこのバナーで1番伝えたいのはなんだっけ？と初心に立ち返ることで軌道修正ができます。レビューしてもらうときでも、その軸があればレビュアーからも的確なアドバイスがもらえます。
まとめ
- いきなりツールを立ち上げない
- 1番言いたいことは何か、優先順位を決める
- 手書きのラフをあなどるなかれ
- 手書き→白黒→色乗せ の順番を守る
- デザインが迷走しだしたら初心に帰る
デザインの大半は「情報設計」です。これを基本にして、どんどん制作していきましょう！
