【初級者向け】バナーのデザインを素早く上手につくるための6ステップ！

こんにちは！とっしーです！

今回は、初心者の方やデザイナー1年目の方を対象に、バナー作成のコツをお伝えしていきます。

バナーというのは簡単に見えて奥が深く、情報整理の力やWebサイトの裏側にあるマーケティング力など、あらゆる視点でデザイナーを成長させてくれます。

デザイナーになりたてのころはバナーを任されることが多いので、ちょっとした作成のコツを知っておくだけで仕事の成果を出す近道になると思います。

デザインされたバナーを素早く作成するポイントをご紹介していくので、デザイナーとしての成長へ向けてご一緒にみていきましょう！

そもそも、なんでバナー作成がデザイン力を向上させるの？

最初に、なぜ初心者のうちはバナー作成をした方が効率的に成長できるか？について少し解説しておきます。

バナーは基本的には、クリック（タップ）されることを目的に作られるものです。ではクリック（タップ）されやすいバナーにするためにはどうすればいいのかと言うと、「情報が一瞬で伝わるように整理すること」です。

バナーの中で一番伝えたいことがバナーを見た瞬間に伝われば、デザインとしては成功です。

あとはその伝えたいことがユーザーの求めていることであればアクションしてもらえるし、そうでなければスルーされてしまいますが、ここはマーケティングの領域になるのでまた記事を書こうと思います。

このバナーの目的を達成するためには、あらゆる要素を総動員して考えていく必要があります。写真なのかイラストなのか、レイアウトはどのパターンでいくか、文字の強弱やバランスは適切か、など、デザインのエッセンスが全て詰まっているんですね。

一方で、じゃあ名刺やWebやポスター・チラシはどうなのでしょうか？多くの場合は、制約が多かったりスケールが大きすぎたりするので、初心者にとっては最適でない場合もあります。

例えば名刺では、社名や電話番号など、要素とその表現がすでにある程度決まっている場合が多いので、写真を入れたり高度なグラフィック表現をすることはやりづらい。。一方Webサイトやポスターはどうかと言うと、初心者にとってはスケール（規模感）が大きすぎる場合もあり、バナーに比べると、大きいからこそ上手くまとめづらいところがあります。

バナーの場合はサイズがいい意味で制約として機能してくれ、さらにその内側では表現力の幅が広いため、初心者にとってはデザイン上達のために積極的に取り組んだ方がいいといえます。

デザイン力を向上させるバナーのつくり方は？

では、バナー作成のときに何に気をつけていけばデザイン力が上がるのか、というところを説明します。

まずひとつめは、作成の順番です。多くの人は手順を無視して感覚的に考えてしまいます。かくゆう僕もそうでした。。「なんとなくこうなったらかっこいい」といった感覚で、好きなところから着手してしまい、バランスが整えられずに時間切れとなってしまうというのはよくある失敗例です。

これを防ぐために、まずは着手する順番をしっかりと抑えましょう！

これが、失敗を極限まで減らし、デザイン力も向上させる作成の順番です。順にみていきましょう！

【STEP01】まず最初に情報確認（トーンの確認）

最優先事項！「何のためにつくるのか？」を確認しましょう

最初の目的確認は非常に大事。これからの制作の土台となる部分なので、しっかり納得するまで理解しましょう。なんとなくで進んでしまうといいアウトプットができないばかりか、何度もバナーを作り直すことになってしまうことも！

そして、「どんな人がみるのか？」も確認が大事

目的がわかったらどんな人がみるのかの確認です。これによって、同じ目的でも「どんな色を使うのか」や「写真・フォントの種類」などが自ずと決まってきます。的を射たデザインにするためにも、確認しておきましょう。これによってデザインのアウトプットが大きく変わってきます。

どんなサイトにおくのか？どんなサイトのリンクが貼られるのか？

バナーが配置されるサイトも大事です。例えばクリックが目的の場合、青っぽいサイトに、真っ青なバナーをおいても視認性が悪い（目立たない）ので、なかなか効果を発揮できない場合もあります。

一方で、赤など目立つ色にすればいいのかというのと、目的次第になります。ブランディングの一環として、アクションを促すよりも見せるために設置するケースもあります。その場合は、ブランドトーンをじゃましないように、サイトとバナーのテイストを合わせる必要があるでしょう。

また、リンク先のサイトの確認も重要です。リンク先のページとバナーのテイストがあまりにも違う場合、ユーザーが違和感を感じて即離脱してしまう（ページが開いた瞬間にページを閉じること）ケースが考えられるからです。せっかく誘導してもこうなってしまっては本末転倒なので、事前に確認しておき、作成の際のテイストの指針にしましょう。

どんな要素を使う必要があるのか、確認する

バナーに必要な情報が曖昧だと、次のステップでいきなりつまづくことになり、スムーズにデザインが進まなくなります。しっかりと確認が必要です！

【STEP02】いきなりデザインせずに、バナー全体の要素をおいてみる

バナーをスムーズに作るための第一ステップは、「何も考えずに要素をおく」ことです！

えっ！？何も考えずにおいていいの！？と思ってしまいますが、バナーを作ることに慣れていない初心者の方によくあるのが、イメージを頭で永遠に考え続けて、手が進まなくなる。。というケースが非常に多いんです。

そのため、最初のこの時点でイメージできなくても問題ないです。まずは、必要な情報を怖がらないで、軽い気持ちで要素を配置しましょう。

ちなみにこの時点で要素を置くもう一つのメリットは、要素の内容や、ボリュームをしっかりと確認できることです。最初に確認した必要な情報の中には、テキストだけの場合もあれば、写真やイラストなどのイメージが書かれているかもしれません。

また、打ち合わせでは気づかなくても、配置してみると意外と文字量が多く「全ての要素は盛り込めない！」となることも。もらったままのデータでは気がつかないこともあります。

そのため、一度必要な情報を単純に配置してみるということを行うと、「こんなに情報入らないよ！」「この文章長すぎて、フォント小さくしないと無理かも・・・」ということに気が付きやすいのです。

この時点でそういったことに気が付くことができると、クライアントやディレクターに前もって相談もしやすく、「作ってからやり直し」という無駄な作業も減っていきます。

【STEP03】要素の優先度を考える

次にやることは要素の優先度、つまり伝えたいことの優先度を考え、定義することです。この段階ではわかりやすく、「要素の大きさ」だけに絞って定義するといいと思います。色つけや、装飾を急ぎたくなってしまうところですが、まだ慌てないでください。

なぜ大きさから始めるのがいいのでしょうか？　それは、大きさだけに絞って定義していくことで、必然的にバナー全体のバランスが明確になっていき、装飾などもしやすくなっていくからです。幹 => 枝と着手していくイメージですね。

実際、大きさだけでなく、目立たせる方法はほかにもたくさんありますが、下線や吹き出しなど細かいことをここで考えてしまうと全体のバランスをとるのが一気に難しくなります。

どんな風に目立たせるか？ではなく、どれを目立たせるのか？あくまで優先度の順位付けにフォーカスしましょう！これが大切です！

【STEP04】白黒でレイアウト

いよいよ具体的にレイアウトしてきます。正直ここが1番詰まってしまう部分であり、時間がかかる部分かなと思います。
なぜかというと、特に初心者の場合はレイアウトの引き出しそのものがほとんどないケースが多いためです。

縦に並べる、横に並べる、写真を全面につかうなど、バナーには複数のレイアウトパターンがあるのですが、そもそもパターンのストックが少なかったり、知識があっても、その場その場でベストなレイアウトを判断するだけのベースがない。ただしこれは仕方のないことで、経験値を積むことでどんどん改善されていくので安心してください！

どんなレイアウトパターンだとしても、この白黒グレーでのレイアウトで気をつけるべきことは、情報の優先度を崩さないようにするということ。下線や吹き出しなど、要素を差別化できるようなものもこの時点で加えましょう！文字の大きさだけではなく、あらゆるデザインパターンを使ってレイアウトを考えてみてください。もちろん、写真やイラストなどの素材もこの時点で配置して大丈夫。

【STEP05】色はリンク先と合わせる。自由でいいならまずは2色＋グレー複数から

少しずつ形が見えてきました！完成まではあと一歩！頑張りましょう！

今度は色を考えていきます。色の指定がないなら基本的にはリンク先ページと合わせましょう。

バナーをクリックして、リンク先のページに移動したユーザーが、違和感を感じてそのページで目的を達成できない（即離脱など）となってしまってはバナーを作った意味がなくなってしまうからです。ただし、完璧にカラーコード（#333や#f0f0f0など色を定義する文字列）まで合わせるのか、一部分だけ合わせるのかは状況次第なので、クライアントやディレクターに確認し、決めていくと良いと思います。

そしてもうひとつのポイントは色数の問題。できれば、初心者のうちは2色以内で選ぶのが理想です。特にバナーのような限定された領域でのデザインにおいては、色数が多いとユーザーの視線が分散しやすくなり、目的達成しづらくなるケースが多いです。

ポップなデザインなど、一部色を多用する場面ももちろんありますが、色の多用は経験者でもコントロールが難しい部分。彩度や明度をうまくコントロールしつつ、面積などにも気を配らないといけないので、複数の色を上手にバランスできる人はかなり色に精通している人だといえます。

また、色数を考える時には、グレーなどの薄い色をうまく使いましょう。いろいろと表現することに意識が向いてしまい、多数の色を使いたくなってしまうものですが、グレーの使い方を覚えると格段にデザイン、特に色の使い方が向上しますよ！

【STEP06】最後の見直し！状況に応じて、フォントやアクセントを！

色までつけることができたら、あとは最後の仕上げです！

正直、ここまでのステップを丁寧に進めてみると、もうほとんど完成といっても過言ではありません。とはいえ、「神は細部に宿る」とも言うように、この段階で大きな差がつくことがあるのも事実！気を引き締めていきましょう！

それでは、最後におさえるべきポイントをご紹介します！

要は、よりユーザーに近い目線まで、自分とバナーの距離を調整する、ということ。これが最も大事です。画面と向き合いながらバナーを作り続けていると、目が慣れてきて制作者目線になってしまいがちなので、一歩離れて、冷静な目線でバナーをみてみる。少し休憩してからだとより効果があるでしょう。

もしもここで「伝わりづらい！平坦で退屈！」と感じた部分があれば、そこにアクセントを付けていきます。例えば、「個性的なフォントにこだわることで、より伝わりやすくできないか？」だったり、「料理系のバナーで、湯気の動きなどを表現することで、より魅力的にできないか？」などを考えていく。

正直この部分は、デザインの引き出しが多くないとなかなか難しい部分ではありますが、繰り返しポイントを押さえながら考えていくことで、アイディアが生まれやすくなります！

また、最初にヒアリングした情報を再度振り返り、制作物との間に矛盾がないかもチェックしましょう！中性的なユニセックスバナーをつくるつもりが、いつの間にか女性的な雰囲気になってしまっているようなら修正が必要。ここはアクセントと言うよりは引き算に近いでしょうか。

そして、見過ごしがちなのが、実際に配置されるWebサイトへのリハーサル設置（テストページなどがあればぜひ試しましょう！）。

白っぽいシンプルなバナーにして、要件は満たせた！と思っても、実は配置するサイトも白ベースで、バナーが紛れて全然目立たない…と言うケースもなかなか多いです。バナーは気付いてもらい、クリック（タップ）されてこそのものなので、掲載されるサイトとのバランスも最後にチェックしてみてください！

まとめ

以上、バナー制作のポイントをステップごとに解説してみました！

このステップが定着してくると、バナーのクオリティが飛躍的に上がるだけでなく、制作にかかる時間がグッと短縮できるので効率よくデザインできるようになります。

僕はデザイナーになりたての頃、バナー制作に丸2日かけても、先輩が30分でつくるバナーにクオリティで及ばず、かなり悩んでいましたが、試行錯誤の中で徐々に自分なりのやり方をみつけていった感じです！

デザインは、引き出しの量もスピードに関わってくるので難しい部分もあるとは思いますが、ぜひ上記ステップでバナー制作をどんどん実践し、自分なりのやり方をみつけていただければ幸いです！