作り終えたバナーを眺めて「なんとなく素人っぽい」と感じるのに、どこを直せばいいのか分からない。バナーデザインで多くの人がぶつかるのが、この「言語化できない違和感」です。
バナーデザインのコツは、センスではなく数値と原則で説明できます。文字の大きさの比率、色の面積配分、余白の取り方。これらを意識するだけで、同じ素材でも見え方は大きく変わります。
この記事では、バナーデザインのコツを「視線」「文字」「色」「余白」「あしらい」の5つの観点に分けて解説します。作ったバナーを自分で採点できるチェックリストも用意しました。
コツ1：視線の流れを設計する
人はバナーを読まない、見るだけ
バナーは、記事を読んでいる途中の視界に飛び込んでくるものです。読む姿勢に入っていない相手に対して、文章で説明しようとしても届きません。
最初の0.5秒で目に入る「かたまり」を1つ作り、そこから2番目、3番目へ視線を運ぶ。この順路を先に設計するのが、バナーデザインの出発点です。
横長は左上から、正方形は中央から
横長のバナーでは、左上から右下へ視線が流れやすい傾向があります。そのため、キャッチコピーを左に、行動を促すボタンを右下に置く構成が扱いやすくなります。
一方で正方形や縦長のバナーは、中央の要素が最初に目に入ります。中央に主役を大きく置き、その上下に補足を配置する構成が向いています。
視線の邪魔になる要素を削る
装飾のつもりで置いた飾り罫や小さなアイコンが、視線の流れを分断していることがあります。要素を1つ削って見比べ、伝わり方が落ちなければ削ったままにする。この引き算を繰り返すと、自然と整理されたバナーになります。
迷ったら、バナーを一度グレースケール（白黒）にしてみてください。色に頼らずに主役が目立っているなら、構成は成立しています。色を戻したときの完成度が段違いになります。
コツ2：文字のジャンプ率で強弱をつける
ジャンプ率とは
ジャンプ率とは、一番大きい文字と一番小さい文字のサイズ比のことです。この差が小さいと平坦で退屈な印象になり、大きいほど勢いと明快さが出ます。
初心者のバナーは、ほぼ例外なくジャンプ率が低くなりがちです。キャッチコピーは「大きすぎるかな」と感じるくらいで、ようやく適正なことが多いと覚えておきましょう。
文字の強弱や配置の原則は、定番の本で一度体系的に押さえておくと、制作中の判断がしやすくなります。
文字の役割を3段階に整理する
| 役割 | 内容 | 扱い方 |
|---|---|---|
| 主役 | 一番伝えたい一言 | 最も大きく、太く、目立つ色で |
| 脇役 | 主役を補足する説明 | 主役の半分程度のサイズに抑える |
| 注釈 | 期間・条件・免責 | 読める範囲で小さく、控えめな色で |
この3段階に収まらない要素が出てきたら、そもそもバナーに載せる必要があるのかを疑いましょう。
書体は絞り、太さで差をつける
1枚のバナーで使う書体は1〜2種類までに抑えます。ゴシック体の中でも太さ（ウエイト）が複数用意されている書体を選べば、書体を増やさずに強弱を作れます。
日本語の書体は、Google Fontsの日本語フォントから商用利用できるものを選べます。Noto Sans JPのようにウエイトが豊富な書体を1つ使いこなせるようになると、表現の幅が広がります。
文字組みの細部を整える
同じ文言でも、行間と字間を整えるだけで印象が変わります。日本語のキャッチコピーは、文字を大きくすると字間が空いて見えるため、詰め気味に調整すると引き締まります。逆に本文相当の小さい文字は、行間を広めに取った方が読みやすくなります。
コツ3：色は3色までに絞る
面積の配分がすべて
配色でよく使われる考え方が、ベースカラー・メインカラー・アクセントカラーの3分類です。面積の目安は、ベース70%・メイン25%・アクセント5%程度とされています。
アクセントカラーは、狭い面積に使うからこそ効く色です。ボタンや価格表示など、一番押してほしい部分だけに使いましょう。全体をアクセントカラーで塗ってしまうと、目立たせたいものが消えます。
色は自分で作らず、ツールで組み立てる
感覚で色を選ぶと、彩度がバラバラで濁った配色になりがちです。Adobe Colorのカラーホイールのようなツールを使えば、補色や類似色といった規則に沿った組み合わせを機械的に導き出せます。
ツールと並行して、配色の実例をまとめた本を手元に置いておくと、組み合わせの引き出しが増えます。
コントラスト比を確認する
背景と文字の明度差が足りないと、視力や色覚に関わらず読みにくくなります。WebAIMのコントラストチェッカーに2色を入力すれば、コントラスト比を数値で確認できます。
薄いグレーの背景に白文字、といった組み合わせは、画面の明るさ設定によっては完全に読めなくなります。感覚ではなく数値で確認する習慣をつけましょう。
色に意味を持たせる
赤は緊急性や値引き、青は信頼や清潔感、緑は安心や自然といったように、色には一般的に連想されるイメージがあります。扱う商材と逆の印象を与える色を選ぶと、内容と見た目がちぐはぐになります。
コツ4：余白で主役を引き立てる
枠の内側に余白を確保する
バナーの端ギリギリまで要素を置くと、窮屈で圧迫感のある見た目になります。上下左右に均等な余白を取ることで、中の要素がゆったりと見え、視認性も上がります。
関係のある要素は近づけ、関係のない要素は離す
これは近接と呼ばれる原則です。キャッチコピーとその補足説明は近づけ、無関係なロゴや注釈は離す。距離だけで「これは同じグループ」という情報を伝えられるため、線で囲う必要がなくなります。
余白を埋めたくなる衝動を抑える
空いているスペースを見ると、何か置きたくなるものです。しかし、そこに要素を足すたびに主役の存在感は薄れます。余白は「未完成」ではなく「意図的な設計」だと考えましょう。
掲載媒体によっては、バナー内の文字量に制限が設けられている場合があります。入稿前に、掲載先の規定を確認しておきましょう。Google広告のイメージ広告についても、サイズや容量の要件がGoogle広告ヘルプで公開されています。
コツ5：あしらいで完成度を底上げする
写真の上に文字を置くときの処理
写真の上に直接文字を乗せると、背景の明暗によって読めない部分が出ます。対処法は3つあります。
- 半透明のレイヤーを重ねる：写真全体に濃い色を薄く敷いて明度差を作る
- グラデーションをかける：文字が乗る側だけを暗くする
- ベタ塗りの帯を敷く：文字の背後にだけ色面を置く
どれを選ぶかは写真の情報量次第です。被写体が主役の場合は、ベタ塗りの帯で文字エリアを分けた方が写真を殺しません。
ボタンは押せそうに見せる
行動を促すボタンは、角丸の四角形にアクセントカラーを敷き、白抜き文字を置くのが定石です。矢印を1つ添えるだけでも「押せる」という認識が生まれます。影をつけすぎると古い印象になるため、薄く1段だけにとどめましょう。
装飾は「同じ形」で揃える
丸と三角と四角を混ぜて使うと、統一感が失われます。角丸を使うなら全体を角丸に、直角を使うなら全体を直角に。形のルールを1つ決めて最後まで守るだけで、まとまった印象になります。
完成したバナーを自己採点するチェックリスト
作り終えたら、次の項目を上から順に確認してみてください。
- 100%表示にしても、キャッチコピーが読めるか
- 1メートル離れて見ても、何のバナーか分かるか
- グレースケールにしても、主役が目立っているか
- 使っている色は3色以内に収まっているか
- 書体は2種類以内か
- 四辺の余白は均等に取れているか
- 関係のある要素同士が近くに置かれているか
- 文字と背景のコントラスト比は十分か
- クリック後に何が起きるか想像できるか
- スマートフォンの実機で見ても潰れていないか
この10項目のうち3つ以上に引っかかるようなら、細部を直すより構成から作り直した方が早いことが多いです。
よくある「惜しいバナー」の直し方
情報は正しいのに、なぜか読み飛ばされる
載せるべき内容は揃っているのに反応が薄い場合、原因はたいてい「入口がない」ことです。どこから読めばいいのか分からないバナーは、視線が滑って通り過ぎてしまいます。
対処法は単純で、主役の文字を1.5倍に拡大し、それ以外を少し小さくすること。要素を足すのではなく、既にある要素の差を広げるだけで、入口ははっきりします。
色は綺麗なのに、安っぽく見える
彩度の高い色を複数並べると、互いに主張し合って落ち着きがなくなります。1色だけを鮮やかに残し、他は彩度を落とす。これだけで一気に整います。
グラデーションを多用している場合も要注意です。背景・文字・ボタンのすべてにグラデーションがかかっていると、視線の止まりどころがなくなります。使うのは1箇所までにしましょう。
スマートフォンで見ると別物になる
パソコンの大画面で作り込んだバナーが、スマートフォンでは文字が潰れて読めない、というのは制作の現場でよくある事故です。確認は実機で行い、明るい屋外を想定して画面輝度を下げた状態でも見てみましょう。
細い書体や薄いグレーの文字は、環境光の影響を強く受けます。屋外で見られる可能性がある広告では、線の太い書体と高いコントラストを選ぶ方が安全です。
上達を支える環境と教材
色の見え方が違うと判断がぶれる
ノートパソコンの内蔵ディスプレイだけで作業していると、環境によって色の見え方が変わり、納品後に「思っていた色と違う」と言われることがあります。色を扱う仕事では、表示の安定したモニターが判断の土台になります。
カラーマネジメントに対応したモニターとしては、EIZOの「ColorEdge」シリーズやBenQの「SW」シリーズが定番です。まずは作業領域を広げたいという段階なら、27インチのWQHDモニターを1枚追加するだけでも効果があります。
原則を体系的に学べる書籍を1冊持つ
ネットの情報は断片的なので、原則をまとめて理解するには書籍が向いています。『ノンデザイナーズ・デザインブック』は近接・整列・反復・対比という4原則を解説した定番で、バナーにもそのまま応用できます。
配色に絞って学びたい場合は『配色アイデア手帳』、レイアウトの引き出しを増やしたい場合は『あるあるデザイン』のような事例集が手元にあると、迷ったときの拠り所になります。
手を動かす道具も揃える
写真の切り抜きや細かい選択範囲の調整は、マウスだと時間がかかり、手首にも負担がかかります。Wacomの「Intuos」のような板タブレットを導入すると、選択範囲の作業がなめらかになります。長時間の作業が続くなら、エルゴノミクス形状のトラックボールマウスも選択肢です。
よくある質問
Q. バナーデザインのコツを身につけるのにどれくらいかかりますか？
原則を知るだけなら数時間です。ただし、知っていることと使えることは別なので、実際に手を動かして20〜30枚ほど作ると、判断が安定してきます。1日1枚のペースなら1ヶ月ほどが目安です。
Q. どんなバナーを参考にすればいいですか？
自分が作ろうとしている商材と近いジャンルのバナーを見るのが有効です。同じ「安さ」を訴求する場合でも、食品と金融ではふさわしい見せ方が違います。ジャンルを絞って10枚集め、共通点を書き出してみましょう。
Q. クリック率を上げるにはどうすればいいですか？
デザインだけで決まるものではなく、掲載面と訴求内容の相性が大きく影響します。ただし、読みにくいバナーは選ばれにくくなるため、視認性を確保することが前提になります。複数パターンを配信して反応を比べ、良い方を残す進め方が現実的です。
Q. 派手な色を使えば目立ちますか？
周囲との対比で決まります。掲載先のサイトが白基調なら濃い色が目立ちますし、逆に賑やかなサイトでは白基調のバナーの方が浮き上がることもあります。バナー単体ではなく、掲載される画面全体で考えましょう。
Q. デザインの仕事にするならスクールに通うべきですか？
独学でも進められますが、自分の作品を客観的に評価してもらう機会は独学では得にくいものです。添削や課題提出の仕組みがある学習環境は、上達の速度という面で価値があります。学ぶ内容と費用のバランスを見て判断しましょう。
まとめ
バナーデザインのコツは、視線の設計、文字のジャンプ率、色の面積配分、余白の確保、あしらいのルール統一という5つに整理できます。どれも感覚の話ではなく、確認できる基準がある項目です。
作り終えたら、チェックリストで自己採点する習慣をつけましょう。「なんとなくダサい」を「ジャンプ率が足りない」「色数が多い」と言語化できるようになれば、修正の速度は一気に上がります。
環境と教材を少しずつ整えながら、1枚ずつ手を動かして積み上げていきましょう。
