「バナー制作のレイアウトや配色のコツは学んだけど、実際どういう手順で作っているの？」
そんな疑問にお答えします！
この記事では、制作現場で使っている具体的なバナー制作の手順を、５つのステップで解説します。
「バナー制作の基本を学びたい」「自分でバナーを作れるようになりたい」「バナーをもっと早く作れるようになりたい」そんなあなたは、ぜひこの記事を参考に、バナー制作に挑戦してみてください
【Step1】要件定義：使用するテキストを決める
バナー制作で最初に行い、最も重要なステップの一つが、「要件定義」です。
要件定義では、バナーの目的、ターゲット、伝えたいメッセージを明確にしてバナーに使用するテキストを決定します。
1. バナーの目的を明確にする
バナーをどのような目的で作成するのかを明確にします。例えば、「商品の購入を促す」「イベントへの参加を促す」「資料請求を促す」など、バナーの目的によって、デザインやテキストの内容が変わってきます。
2. ターゲットを明確にする
バナーは、誰に向けて作成するのかを明確にします。ペルソナと言って、年齢層、性別、興味関心などをターゲットを具体的に設定することで、より効果的なバナーを作成することができます。
3. 伝えたいメッセージを明確にする
バナーで、最も伝えたいメッセージを明確にすることが重要です。キャッチーなコピー、具体的な商品名、イベント名など、ユーザーに伝えたい情報を整理し、テキストとして書き出しましょう。
実際の制作会社では、要件定義に関してはプロデューサー及びディレクターが行うことが多いですが、フリーランスを目指しているデザイナーさんはここがかなり重要になりますので要チェックです。クライアントから明確に出ない場合はこちらから提案することも多いです。
今回は要件定義により、以下のようなテキストでバナーを制作していきます。
- 会社：サブスクリプションでビデオ配信を行なっている会社（仮）
- サービス：ビデオサブスクリプションサービス
- コンバージョンポイント（目的）：新規会員登録者を増やしたい
- セールスポイント：初月無料（30日間お試しキャンペーン）
要件を定義したら、テキストとして書き出します。
【Step2】優先順位を決めてバナーサイズに合わせてレイアウトを組み立てる
バナーに配置する要素の優先順位を決め、バナーサイズに合わせてレイアウトを組み立てます。
４×３のバナーサイズでどうやってレイアウトするかイメージしました。
今回は、写真が右側で、左に文字組みをするようなレイアウトで進めます。
1. バナーサイズに合わせてレイアウトを組み立てる
バナーサイズ（例えば、300×250px、728×90pxなど）に合わせて、レイアウトを組み立てます。バナーサイズによって、配置できる要素の量や、デザインの自由度が異なるため、バナーサイズを考慮してレイアウトを設計しましょう。
2. 要素の優先順位を決めて配置する
バナーに配置する要素（テキスト、画像、ボタンなど）の優先順位を決めます。優先順位が高い要素は、大きく、目立つように配置し、優先順位の低い要素は、小さく、控えめに配置します。
また、配置する要素の余白は意識しましょう。
バナーのレイアウトの種類と考え方は、別記事で解説していますのでそちらをご覧ください。
▼バナーの基本レイアウトはこちらの記事で解説しています▼
▼写真を使ったレイアウトのテクニックはこちらの記事で解説しています▼
【Step3】使用素材とトンマナを決める
次に、メインでバナーに使用する写真やイラスト素材を準備し、バナー全体の「トンマナ」を決定します。トンマナとは、バナー全体の雰囲気や印象を決定する要素のことです。
今回は使用写真としてサブスクビデオサービスのTOP写真を使います。
よって背景はネイビー色、文字色はそれに合った色を想定します。
1. 使用する写真素材を準備する
バナーに使用する写真などの素材を準備します。素材の品質は、バナーの印象を大きく左右するため、高品質かつ高画質な素材を選ぶようにしましょう。クライアントから支給された素材やストックフォトサービスなどを活用します。
今回は、練習用にディズニー＋の背景写真を使用することにいたします。
2.トンマナを決定する
バナーの目的、ターゲット、伝えたいメッセージに合ったトンマナを決定します。例えば、クライアントのサービスカラーを用いたり、訴求したい内容に合わせてざっくり決めます。
今回は使用素材と相性がいい濃いネイビーを背景に定義します。また文字は濃いネイビーと相性がいい文字色に後程変えていきます。
【Step4】文字だけで組み立てる
バナーに配置するテキスト要素だけで、バナーを組み立ててみましょう。
文字組はとても大切な工程で、この文字組だけである程度デザインを完成させるのがポイントです。
逆にここでしっかり配置しないと、次の工程で色つけや装飾しても微妙なデザインになてしまいます。
文字はまず色をつけたり装飾を行わず、黒一色で作成するのがいいです。この文字組みだけで訴求したい内容が伝わるようにするのがポイントです。
1. フォントを選ぶ
バナーのトンマナや、テキストの内容に合わせて、最適なフォントを選びます。ゴシック体、明朝体、手書き風フォントなど、様々なフォントがあるので、バナーに合ったフォントを選びましょう。
今回は、視聴ターゲットが幅広い層なので、文字はゴシック体、数字はDNPというフォントを使用しました。数字は欧文フォントを使うほうが良く見えます。文字が日本語の場合は数字を必ず欧文フォントに変えるようにしましょう！
2. フォントサイズを決める
テキストの内容や、重要度に応じて、フォントサイズを調整します。伝えたいメッセージを強調するために、フォントサイズを大きくしたり、補足説明を小さくしたりと、メリハリをつけることが重要です。
特に数字を大きくする、強調する文字の大きさを変えてメリハリをつけて訴求内容がしっかりと伝わるように工夫します。
数字の見せ方は法則がありますので、それに従っていくとキレイに見えます。
▼文字サイズの解説はこちらの記事で解説しています▼
3. テキストの配置を調整する
バナーサイズに合わせて、テキストの配置を調整します。テキストを均等に配置したり、左右に寄せて配置したり、中央に配置したりと、レイアウトを調整しながら、最適な配置を見つけてください。
【Step5】各要素に配色と装飾を行う
最後に、バナーを構成する各要素を色をつけて装飾を行ないます。
背景を写真素材に合う、ネイビーに変えて、それを基調に文字色を調整して装飾を加えていきます。
今回はネイビーに合う、金色の文字で高級感を出していきます。
1. 色をつける
バナーのトンマナに合わせて、色をつけます。使用する写真や画像に合わせた写真からカラーをピックアップすると全体的なバランスがとりやすくなります。
背景色、テキストの色、ボタンの色など、バナー全体のバランスを考えながら、配色を決定しましょう。
▼配色についてはこちらの記事で解説しています▼
2. 装飾を施す
バナーの要素に、影をつけたり、ボーダーをつけたり、グラデーションをつけたりと、装飾を施します。装飾を施すことで、バナーの見栄えが良くなり、訴求力が高まります。
3. 細部を調整する
各要素の位置、サイズ、色、装飾などを調整し、バナー全体をブラッシュアップします。細部まで丁寧に調整することで、クオリティの高いバナーを作成することができます。
完成！！
後は装飾を調整して写真素材を配置して完成です。
個人的にはSTEP4で紹介した【文字組】の工程が重要かと思っています。
バナーには伝える目的があり、それのウェイトの多くを占めるのが文字です。この文字のレイアウトを疎かにすると、伝わらないバナーだったりデザインが微妙になってしまいます。
デザインが微妙だなと感じたら文字組みからやってみるのがお勧めです。
▼文字装飾のヒントはこちらの記事で解説しています▼
次のセクションでは、レイアウト、文字組み、配色の参考にしているサイトを紹介します。
バナー制作の参考にできるサイト
バナー制作のインスピレーションを得るために、参考にしているサイトを紹介します。
正直このサイトは優秀です。スマホで空き時間や移動中に見てデザインの引き出しを広げているデザイナーさんも多いと思います。バナーというよりデザイン全般や素材のヒントなど幅広く活用できます。
バナーストック BANNER STOCK
バナーがカテゴリー順にまとめられているまとめサイトです。構成・レイアウト・文字組・配色など全て参考になりますのでまだ引き出しが少ないうちは、同業種のバナーを参考にして作ったり、練習の模写用に使うのもお勧めです。
まとめ
この記事では、初心者でも簡単にできるバナー制作の５つのステップについて解説しました。バナー制作は、コツさえ掴めば誰でも簡単にできるものです。
この記事を参考に、ぜひバナー制作に挑戦してみてください。そして、あなただけのオリジナルバナーを制作し、Webの世界を彩ってください！
