バナー制作って、意外と時間がかかりますよね。
私自身、1日を費やしてもバナー1点すら完成しない、という日が何度もありました。ある日ふと「自分は何に、こんなに時間を使っているんだろう？」と感じ、一度手を止めて、自分の制作工程を振り返ってみることにしました。
そこで気づいたのは、制作に入る前の「準備」が圧倒的に足りていなかったということでした。
この記事では、私がバナー制作に着手するまでに実際に行っている準備方法を紹介します。
目次
バナー制作に時間がかかる原因は「準備不足」かもしれない
どんな時に時間がかかっているのかを思い返してみると、フォントや配色をあれこれ試したり、使えそうな素材をずっと探し回っていたりと、デザイン中にレイアウト・フォント・配色・素材探しをすべて同時に考えていたことが理由でした。
振り返ってみると、Pinterestやまとめサイトでバナーを1〜2点参考にしてはいたものの、デザインのトンマナ（トーン＆マナー）を事前に決めていない状態で制作に入っていました。その結果、迷いや手戻りが増え、制作に想像以上の時間がかかっていたのです。
人は同時に複数の意思決定を迫られると、判断の質とスピードがどちらも落ちていきます。レイアウトを考えながらフォントを選び、配色を試しながら素材も探すという状態は、まさにこの「意思決定の渋滞」が起きている状態です。
そこで私は、いきなり作り始めるのではなく、制作に入る前に考える工程を意識的に増やすようにしました。その中でも特に効果が大きかったのが、バナーのトンマナを事前に策定し、ラフに落とし込むことです。
制作前にしっかり準備を行うことで、制作時間を短縮できるだけでなく、バナーの制作目的とデザインに一貫性が生まれ、デザイン意図にも説得力を持たせることができます。
制作前に行う6つの準備ステップ
重要なのは、作る前にトンマナを策定し、フォント・配色・素材を決めておくこと。制作に入る時点で「あとは形にするだけ」という状態まで固めておくと、世界観に沿ったデザインにしやすくなります。
私が実際に行っている準備ステップは以下の6つです。
- ブランド・サービスのトンマナを確認する
- 制作するバナーのトンマナを言語化しメモする
- 参考画像を探す
- 素材を探す
- ラフを作る
- 制作に入る
以下、バナーのコピーがすでに決まっている状態を前提に、各ステップの目的と具体的に行うことを紹介します。
Step1：ブランド・サービスのトンマナを確認する
最初に確認すべきは、そのブランドやサービスが持っているトンマナです。ここがズレると「自社の世界観と違う」といった理由で、後の工程がすべてやり直しになる可能性があります。
私自身、過去にこの確認を怠って痛い目に遭ったことがあります。ユーザーの悩みに寄り添う親しみやすさを意識してバナーを制作したところ、「ブランドの世界観に沿っていない」とフィードバックをいただき、一から作り直すことになりました。ブランドのサイトに掲載されている既存バナーのトンマナを改めて確認し、それに沿ったデザインに修正して、ようやくOKをいただけたのです。
あえてトンマナをズラす場合もありますが、その場合でもズラす理由を明確に説明できる状態にしておくことが重要です。
このステップで行うことは2つ。デザインガイドラインの有無をクライアントに確認すること、そして公式サイトやInstagram、Xなどを自分の目でチェックすることです。
Step2：制作するバナーのトンマナを言語化しメモする
Step1でブランドのトンマナを確認したうえで、今回制作するバナーのトンマナを改めて定義します。
制作前にトンマナを言語化してメモに残しておくと、デザインの方向性が明確になり、レイアウト・フォント・配色・素材選びでの迷いを大幅に減らせます。制作途中で「目指しているデザインとズレていないか」を振り返る指針にもなるので、短いメモでも残しておく価値は大きいです。
このステップでは、2つのことを行います。
まず、ターゲットとなるユーザーにどんな印象を持ってほしいかを起点に、デザインのキーワードを決めます。
たとえばプログラミングスクールの広告であれば、キャリアチェンジに繋がりそうな将来への「期待感」、有意義な投資だと感じられるような「信頼感」を演出したい。ここから「将来への期待感／信頼感」というキーワードを導き出します。
決めたキーワードをもとに、配色・フォント・余白・あしらいの4要素を具体化していきます。
- 配色：メインビジュアルの写真の色味をそのまま活かす。メインカラーは信頼感につながる青を選ぶ
- フォント：ゴシック体でモダンな印象にする
- 余白：広めに取り、洗練された印象にする
- あしらい：写真・メインコピーを主張したいため、特徴的な図形やアイコンは使わない
デザイン要素の言語化は、次のStep3で参考画像を探しながら並行して進めると、実際にデザインに起こした際のイメージとズレにくくなります。
なお、現状のサービスのトンマナがアクションにつなげるべきターゲット層とズレている場合は、ターゲット起点でトンマナを決めてクライアントに共有するという判断も必要です。たとえば、他社より価格が安いのが魅力の商材であっても、安さを主張するようなインパクト重視のデザインだと信頼感を損なう可能性がある。そういうケースでは、落ち着いたトーンのデザインにする、といった提案が考えられます。この際、言葉だけでなく参考画像を併せて共有すると、認識が揃いやすくコミュニケーションがスムーズになります。
以下のようなテンプレートを使うと、自分の案件でもすぐに実践できます。
■プログラミングスクールの例
| 項目 | 記入欄 | 記入例 |
|---|---|---|
| ターゲット | （誰に届けるか） | 20代社会人、キャリアチェンジを真剣に考えている |
| 与えたい印象 | （どう感じてほしいか） | ・キャリアチェンジに繋がりそうな将来への期待感 ・有意義な投資になると感じられるような信頼感を演出 |
| デザインキーワード | （印象を2〜3語で） | 期待感、信頼感 |
| 配色 | （ベースカラー、差し色） | ・メインビジュアルの人物写真の色味をそのまま活かす ・メインカラーは信頼感につながる青 |
| フォント | （書体の方向性） | ゴシック体でモダンな印象 |
| 余白 | （広め／狭め） | 広めに取り洗練された印象に |
| あしらい | （装飾の方向性） | ・写真 ・メインコピーを見せたいため、特徴的な図形、アイコンは使わない |
Step3：参考画像を探す
参考画像を使って視覚的に方向性を定めることで、自分が目指しているデザインとの乖離を防ぎやすくなります。
ここでのポイントは、参考画像をデザイン要素ごとに分けて探すこと。
レイアウト参考は、情報の配置や視線の流れ、要素ごとのバランスを見るために探します。バナーにおける視線誘導にはZ型やN型といったパターンがあり、どの型を採用するかで情報の伝わり方が変わります。視線誘導について詳しくは「視線誘導を理解してバナーのレイアウトを改善する方法」をご覧ください。
配色参考は、トンマナに合った色の組み合わせやトーンを把握するために探します。配色がデザインの印象に与える影響は非常に大きく、同じレイアウトでも配色が変わるだけで受ける印象がまったく異なるものです。配色の基本については「ノンデザイナーが押さえておきたい配色の基本」が参考になります。
余白参考は、どれくらい間隔を空けると目指す印象になるかを知るために探します。余白が狭いとインパクトや力強さを演出でき、余白が広いと洗練された落ち着いた印象に。目指すトンマナに応じて余白の取り方を意識しましょう。
フォント参考は、明朝体、ゴシック体、丸ゴシックなど、どのフォントを使うことで目指すデザインになるかを把握するために探します。フォントにはそれぞれ「繊細 ←→ 力強い」「カジュアル ←→ フォーマル」といった印象の軸があり、トンマナに合ったフォントを選ぶことでデザインの統一感が高まります。トンマナとフォントの関係性については「バナーの制作依頼時に役立つトンマナのヒント」にまとめています。
参考画像を探す際に注意したいのは、1枚だけに絞らないことです。参考画像を1枚だけにしてしまうと、デザインがハマらないときでも強引にその参考に寄せようとしてしまいます。複数枚探しておくことで、別の方向に切り替えやすくなります。
また、直感で「いいな」と感じた画像は、「どこが良いと思ったのか」「何を参考にできそうか」を言語化しておくと、デザインに落とし込む際に役立ちます。
Step4：素材を探す
あらかじめ素材の目星をつけておくことで、ラフ作成後や制作途中に「理想の素材が見つからない」といった理由で手戻りが発生するのを防げます。制作しながら素材を探す必要がなくなるため、迷いが減り制作時間の短縮にもつながります。
素材の探し方としては、まずPIXTAがおすすめです。クオリティの高い素材が揃いやすく使い勝手がよいです。Adobe Stockは規約がやや複雑ですが、おしゃれな素材や縦型動画も多く表現の幅を広げやすいのが魅力。PIXTAやAdobe Stockで見つからない場合は、Google画像検索で商用フリーの素材を探すこともあります。
検索キーワードはPIXTAのタグを参考にすると広げやすく、「公園」「屋外」「外」「自然」のように複数の言い回しで調べるのがおすすめです。商用利用可能なフリー素材サイトについては「商用利用もOK！無料イラスト素材サイト21選」にまとめていますので、あわせてご活用ください。
写真素材を探す際には、3つのポイントを意識しています。
1つ目は、引きの構図を優先すること。被写体の周囲に余白が生まれるため、レイアウトを組みやすくなります。縦長や横長などバナーのリサイズにも対応しやすいです。寄りの構図だと、上部が見切れていたり背景を引き伸ばしにくかったりと、調整の難易度が上がってしまいます。
2つ目は、コピースペースがある画像を選ぶこと。テキストを配置するための余白が確保された画像を使うことで、テキストの視認性や可読性が高いデザインにしやすくなります。PIXTAの場合は「〇〇 コピースペース」で検索すると見つけやすいです。
3つ目は、可能であれば同じシーンでもあらゆる構図の写真を探しておくことです。複数枚持っておくことで、加工の難易度を下げてバナーの完成度を簡単に上げることができます。たとえば、被写体の後ろに写り込んだ人物を消す専門的な加工が必要な写真と、トリミングだけで被写体がわかりやすくなる写真とでは、後者のほうがはるかに扱いやすい。選ぶ画像によって必要な加工の複雑さが変わるため、あらゆる構図の写真を探しておきましょう。
Step5：ラフに落とし込む
制作するバナーのコピー等の要件を踏まえて、目指すデザインが実現できるかをラフで確認しておくことで、スムーズにデザインに落とし込みやすくなります。
ラフを作る最大のメリットは、仮のゴールを設定できること。ゴールがないまま手を動かすと、方向性が合っているか分からない状態で調整を続けることになり、時間がかかります。ゴールを設定しておけば、ラフ通りに制作して「訴求したいことが伝わらなそう」「デザインが物足りない」となった場合でも、「レイアウトを変えるか」「イラストのテイストを変えるか」と一旦立ち止まって考えやすくなります。
ラフ作成の手順は3つです。まず、情報の優先順位を決めます。先に文言だけを書き出して、重要度をつけて整理します。次に、大まかなレイアウトを決めます。要素の配置や視線の流れをざっくり固めます。そして、入れる文言をラフに書き起こします。長文は省略し、載せる内容だけ把握できれば十分です。
ざっくりとイメージできればいいため、イラストの技術は必要ありません。
参考までに、私が実際に作成したラフを掲載します。青シャーペンでレイアウトを仮決めし、シャーペンでテキストや画像などの要素を書いています。お見せするのが恥ずかしいくらいの走り書きですが、ラフとはこの程度で十分です。シャーペンでもボールペンでも、iPadでデジタルで描いても構いません。大事なのは「完成形のイメージを事前に持つこと」であって、ラフの綺麗さではありません。
Step6：制作に入る
ここまでの準備を経て、ようやく制作に入ります。
決めたトンマナやラフを軸に制作を進めましょう。まずは一度、ラフの形まで作り切ることを意識します。しっくりこない場合は「どうしたらもっと良くなりそうか」を整理し、デザインを調整していきます。
作り切ったうえでどうしてもしっくりこない場合は、ラフの段階に戻って検討し直すのも有効です。ラフがあれば「レイアウトの問題なのか」「配色の問題なのか」「素材の問題なのか」と原因を切り分けやすくなるので、闇雲に調整を繰り返すよりも早く改善の糸口が見つかります。
しっくりこない理由の見つけ方やデザインの調整方法については「バナーデザインをもう一段レベルアップさせるための改善ヒント」が参考になります。
時間がないときはStep2とStep5だけでも効果がある
6つのステップをすべて丁寧に行うのが理想ですが、締切が迫っているときにフルセットの準備をする余裕がないこともあるでしょう。
そんなときは、Step2（トンマナの言語化）とStep5（ラフの作成）の2つだけでも実践することをおすすめします。
この2つを押さえるだけで、「ゴールが曖昧なまま手を動かす」という状態を避けられます。トンマナが言語化されていれば、フォントや配色で迷う時間が減ります。ラフがあれば、レイアウトの試行錯誤に時間を取られずに済みます。つまり、制作中に同時に考えなければならないことの数が大幅に減るのです。
もちろん、Step1のブランドトンマナの確認を怠ると後工程がすべてやり直しになるリスクがあるため、初めて担当するサービスの場合はStep1も必ず行ってください。一方、すでにトンマナを把握しているサービスであれば、Step2とStep5に集中するだけでも制作のスピードとクオリティは大きく変わります。
まとめ
デザインに時間がかかる要因のひとつは、完成形をイメージしないまま手を動かしてしまうことです。
事前にトンマナを策定しラフを作成しておくことで、完成イメージが明確になり、制作中の意思決定を一つずつ順番に片づけた状態でデザインに着手できます。デザインに一貫性が生まれるためクオリティの向上にもつながり、デザインの意図を説明する際にも説得力を持たせやすくなります。
私の場合、制作前に「理想とするデザインが本当に作れるだろうか」と不安になるタイプなのですが、このフローを取り入れてからはそうした不安も減りました。何を決めれば制作に入れるのかが明確になったことで、準備すべきことに集中できるようになったからだと思います。
「作る前に考える」という習慣は、バナー制作に限った話ではありません。広告クリエイティブの企画でも、LPの構成でも、ゴールを事前に定義してから手を動かすほうが、結果的に早く、質の高いアウトプットにたどり着けます。
デザインに時間がかかっている方、クオリティを上げたい方、デザインにより説得力を持たせたい方は、ぜひ試してみてください。
Hikaru Funamizu
新卒で広告代理店にデザイナーとして入社。Web広告に関わる制作とSNS広告運用を経験し、自分のデザインで購入に貢献できることにやりがいを感じる。運用スキルを生かしてデザインが出来る環境に惹かれ2022年11月よりアナグラムに入社。 目的を持ち、依頼者の期待に1ミリでも超えられる仕事をすることを意識しています。
