こんにちは！ZEROBASEのデザイン担当の渡邉です！
「バナーデザイン、難しそう…」「センスがないから無理かも…」 そんなふうに思っているあなた！実は私も最初はそうでした。でも、コツさえつかめば伝わるバナーが作れるんです。今回は、バナー作成のコツをご紹介します！
目次
- はじめに
- 今回作成するバナー（架空不動産のバナー）
- まずはバナーの参考を探してみよう！
- 必要な情報を白黒で配置してみよう！
- 色、装飾、画像を配置してみよう！
- まとめ
はじめに
バナーは一目で情報を伝える工夫が大切です。 下記のポイントに気を付けて作成してみましょう。
Point！
❶伝えたい優先順位を考える。 すべて同じ文字の大きさでは、一目で情報が伝わりません。重要な情報ほど大きく文字を配置しましょう。 ※文字の大きさの違いをジャンプ率と呼びます。
❷視線誘導を考える。 人は無意識に特定のパターンで情報を見ていきます。縦書きはNの法則、横書きはZの法則、その他Fの法則などがあります。例えば、ホームページのロゴが左上にあるのは、視線が最初に留まりやすい位置だからです。
今回作成するバナー（架空不動産のバナー）
コンセプト
引っ越し・新居向けに新生活応援キャンペーンをすることを伝えるバナー。
キャッチコピー
わくわくを、かたちに
テキスト
新生活応援キャンペーン
まずはバナーの参考を探してみよう！
世の中には参考になるデザインがたくさんあります。様々なデザインを集めて、参考にできる要素を見つけましょう。
Point！
- 作成するバナーに合ったフォントを探してみる。
- 参考になるレイアウトを探してみる。
- 参考になる配色を探してみる。
↓
今回参考にする要素
フォント
元気でフレッシュさを出すため、ゴシック系のフォントにする。
レイアウト
横割りレイアウト
配色
メイン：ピンク
ベース：スカイブルー
アクセント：グリーン
必要な情報を白黒で配置してみよう！
まず、白黒の状態で必要なテキストを配置し、優先順位に基づいて大きさと位置を決めます。
Point！
- フォントは多用しない（英語、日本語各1種類に絞るとよい）。
- 揃える要素はきちんと揃える。
- 伝わりやすいレイアウトにする。
色、装飾、画像を配置してみよう！
白黒のレイアウトに色をつけ、装飾を加えていきます。
Point！
- 目的やブランドに合った色使いを心がける。
- 装飾は控えめにする。
- 画像は効果的にトリミングする。
まとめ
効果的なバナーデザインには、情報の優先順位付け、視線誘導の法則の活用、適切なフォント選択が重要です。まずは参考デザインを集め、白黒で基本レイアウトを作成し、最後に目的に合った色使いと控えめな装飾で仕上げることで、一目で伝わるバナーを作ることができます。ぜひ試してみてくださいね！
