【事例付き】バナー広告のデザインがイケてないときに見直したい4つの基本

まず最初に下のバナー広告をご覧ください。

デザインがバラバラとしていてまとまりがなく、なんだかイケてない印象を受けるのではないでしょうか。

このバナー広告を簡単な基本原則に基づいて修正してみましょう。

全体に統一感が生まれ、テキストなどの情報をスッキリとまとめることができました。

このようにデザインの基礎知識を身につけるだけで、バナー広告の印象を大きく変えることができるようになります。

「作ったバナー広告がなんだかイケてない……」

「バナー広告を自分でさくっと作りたいけど、時間がかかる……」

「デザイナーから上がってきたバナー広告が微妙で修正したいけど、どこを指摘したらいいのかわからない……」

本記事ではこのような悩みをもつ、バナー広告を発注したり自ら作る機会のある方々に向けて、デザインの４つの基本原則とバナー広告作りのコツをご紹介します。

まずはこれだけ「デザインの基本原則」

先ほどの修正で使ったのは「デザインの基本原則」と言われる簡単な4つのルールだけです。まずはこれを意識するだけで、デザインは見違えるように変わります。

デザインの基本原則は以下の４つに分類されます。

• 近接 
• 整列
• 反復
• コントラスト

それぞれ画像を交えながら詳しく説明していきます。

近接 

関係性のある複数の要素をグループ化し、まとまった１つの要素として見せる役割を持つのが「近接」です。

Beforeの図を見ると要素がまんべんなく散らばっており、数字や小見出しの関係性や各ブロックの区切りがわかりづらく、情報を的確に理解することが難しくなります。

どこからどこまでが１つのまとまりなのか視覚的にわかりやすくすることで、情報をすばやく受け取れるようになり、テキストの可読性も上げることができます。テキストの行間や要素と要素の間を詰めることで、画面に余白を作るとスッキリして見えますね。

その際、必ず関係性のある要素同士を結びつけるようにしてください。無関係な要素を近づけて配置すると誤解を与える恐れがあります。

整列

各要素を意図的に揃えて配置することで、全体にまとまりや規律をもたらすのが「整列」です。

整列は「左揃え」「中央揃え」「右揃え」「両端揃え」の４種類に分かれます。透明な線を意識しながら配置することで、物理的に離れている要素にも目に見えないつながりが感じられるようになります。

縦横比の関係で縦長や正方形のバナーは中央揃え、横長のバナーは左揃えや右揃えがバランスを取りやすいです。横長のスライドは基本的に左揃えのケースが多いですが、強いメッセージを伝えたいときには中央揃えで中心に持ってくると効果的です。長文のテキストには両端揃えが適しています。

注意点として、なるべく１つのデザインに３種類以上の文字揃えを使わないようにしてください。統一感がなくなるだけでなく、視線の流れや読む順序を悩ませることになります。

反復

とある特徴や要素を繰り返し登場させることで、デザインに一貫性を持たせるのが「反復」です。

例えばフォントを揃えたり、イラストを均等に配置したり、同じ色や図形を何度も使うといったことも反復の手法の１つです。デザインに暗黙のルールを持たせることで一体感が生まれ、視覚的な面白さを生み出すことができます。

カルーセル広告の場合は、見出しのデザインや色、背景や装飾などを揃えることで全体に統一性を作り出すことができます。

様々なフォントを混在させて更に図形を何種類も使うなど、基本的に要素の種類が多ければ多いほどデザインに一貫性を持たせるのがが難しくなってくると考えてください。またインパクトの強い要素を繰り返し登場させると、強迫的でうるさい印象を与えるので注意しましょう。

コントラスト 

異なる要素に強弱をつけることで差別化し、階層構造を明らかにするのが「コントラスト」です。目立たせたい部分に焦点を当て、視線を引きつける役割を持ちます。

コントラストも「反復」と同じく視覚的な面白さを生み出すことができます。見出しのフォントを本文の2倍くらいに拡大したり、色を反転させて強調するなど、思い切って大胆に差をつけると効果的です。

バナー広告の場合はメインのキャッチコピーやCTA（コールトゥアクション）、資料やスライドの場合は見出しや伝えたいメッセージを強調するのがベターです。全体を俯瞰して見たときに目立たなくていい情報が目立っていたり、目立たせたい情報が他の要素に埋もれてしまっていないか注意してください。

基本原則を活用したバナー広告の例

４つの基本原則は以上になりますが、これだけでは実際のバナー制作にどのように活かしていけばいいのかイメージが沸きづらいかもしれません。そこでバナー広告のビフォー・アフターのサンプルを4点用意しました。実際の例を見ながらデザインの整え方について理解を深めていただけばと思います。

基本原則の4つのうち1つだけ使うことは滅多になく、組み合わせて活用することでより美しくまとまりのあるレイアウトに仕上がります。

デザインが更に良くなるヒント

バナー広告の効果を最大限に発揮するためには、可読性や視認性に気を配る必要があります。そのために知っておくと便利な配色やテキストに関するちょっとした知識をご紹介します。

配色

テキストの読みやすさを第一に、CTAボタン、金額や数量、締め切り期日などの重要な要素が目立つ配色を心がけましょう。視認性を高めるには暗い色（明度が低い）と明るい色（明度が高い）の組み合わせが適しています。

とはいえ何もないところから配色を考えるのは難しいという方もいるのではないでしょうか。そんな方に向けて感覚的に色を選べる便利なツールをご紹介します。

Adobe color CC：

配色の可読性や視認性を合格／不合格で判断してくれるサイトです。

Color Hunt：

様々な４色パターンを閲覧することができます。検索バーの「Color」や「Collections」からタグを選んで絞り込むことができます。

色の系統を決めるときは写真やイラストの色と合わせたり、コーポレートカラーやロゴから拝借するのも１つの手です。

テキスト

細すぎて読みにくいフォントや癖の強いフォントは可読性が低くなるため、特別な意図がない限りは使用を控えた方が良いでしょう。

またフォントと同じくらい大切なのがテキストの行間です。流し込みなどの長文テキストは行間が狭いと非常に読みづらくなります。読み飛ばされないためにも行間を広めに取るようにしましょう。テキストサイズを100%とすると、だいたい行間を50〜80%程空けるのが適切です。見出しなどの１、２行程度のテキストであれば行間が狭くても読みやすいため、必ずしも行間を広めに取る必要はありません。

バナー広告のトンマナについて学びたい方は、以下の記事が参考になります。

運用型広告で利用するバナー作成の依頼時に役立つトンマナについて

まとめ

改めて世の中にあふれている広告に目を向けてみると、その多くがこの基本原則を満たしていることに気づくのではないでしょうか。

筆者はバナー広告におけるデザインの役割は事柄をわかりやすく伝えたり目に留めてもらうこと、対するテキストの役割は感情を動かしたり気づきや発見を与えることだと思っています。バナー広告の効果を向上させるためには、デザインとテキストの品質を相乗的に良くしていくことが大切です。