クリックされるバナーのデザインを作成するコツを解説します！

デザイン初心者の方は、「バナーをつくることになったけど、どうしたら良いかわからない…」「どうすれば効果的なバナーになるんだろう」とお悩みの場合も多いかと思います。

今回は、そんな方に向けてクリックされるバナーデザインのコツをご説明していきます！

コツさえ掴めば、サクサク効果的なバナーを作ることができるようになるので、一緒にみていきましょう。

バナーとは

まずは、バナーとは一体何か、その定義を確認しておきましょう。

バナー(banner)とは、直訳すると、「旗」「横断幕」「のぼり」といった意味になります。

お店の前にある宣伝のぼりが思い浮かぶのではないでしょうか。

Webにおいても、このバナーは宣伝の役割を担う画像のことになります。

この画像をクリックすることで、他サイトに飛んだり、申し込みフォームなどにリンクしたりします。

弊社のサイトで言えば、赤枠で囲った部分がバナーです。

バナーの必須要素と基本ルール5つ

どんなにデザイン性に優れていても、下記の2点が明確でなければバナー本来の役割、つまりユーザーにクリックを促すことはできません。

▼バナーの必須要素

• 「何を」最も伝いたいのか？
• 「誰に」対して訴求したいのか？

バナーには5つの基本ルールがあり、これを守ることで「一番伝えたいことが特定のペルソナに伝わる高品質バナー」が完成するのです。

▼バナーの基本ルール

• 構成要素を重要度順に強調し、左上→右下へと配置する
• メリットが端的に伝わるよう、文字数を最小限にする
• 可読性（読みやすさ）がアップするよう、背景と文字色のコントラストを強めにする
• 画像として見やすく、一目で意味が伝わる写真を使う
• バナーのイメージがコンテンツの内容とマッチしている

バナーデザインのコツ

バナーがクリックされるかどうかは、そのデザインが非常に重要なポイントとなります。

では、クリックされるバナーデザインのコツを見ていきましょう。

余白をしっかりとる

まず、余白をしっかりととることを意識しましょう。

余白のない文字が詰め込まれたデザインは、見る側がどこに注目したら良いかわからなくなってしまいます。

コントラストをつける

背景と文字にコントラストをしっかりとつけましょう。

同系色でコントラストのないデザインだと、文字が目立たずユーザーの目にとまりにくくなってしまいます。

写真を全面に出す

商品を販売する目的でのバナーでは、写真を全面に出すのが効果的です。

サイトの一部にバナーを設置していても、目を引きやすいため、このように、インパクトのあるバナーは、クリック率が上がる傾向にあります。

誘導するデザインを入れる

「バナーをクリックしたら、詳細が見れる」ということがわかるようなデザインも効果的です。

そのためには、クリックを誘導するボタンや文言を入れると良いでしょう。

下の画像の例でいうと、右下に「詳しくはこちら」などの文言と、矢印が入っていますね。

文字組に気を付ける

バナーにおいて、文字組は非常に重要です。

伝えたいことが多いと、詰め込んでしまいがちですが、それではユーザーはどこを見たら良いかわからなくなってしまいます。

情報に優先順位をつけて、文字の大きさ、カラーを選択するようにしましょう。

バナーを効率的に作成するプロセス6つ

では実際に、バナーを制作する際の工程を6つのプロセスに分けて見ていましょう。

ステップ1. 必要な構成要素を全て並べてみる

この段階で重要なのは、「デザインはほぼ完成したのに必要な要素が漏れていた！」というミスを予防すること。

見た目のデザインにこだわる必要は全くなく、同じフォントサイズでバナーに入れたいテキストを並べるだけでOKです。

ステップ2. 構成要素に優先順位をつける

続いて、ピックアップした構成要素に優先順位を付けます。

サイズに限りがあるバナーだからこそ、最も伝えたいメッセージが一番目立つようにデザインしなければなりません。

▼構成要素の優先順位

1. タイトルやイベントの名称
2. サブタイトル
3. 期間などの注意事項

ステップ3. バナーに使う写真を選ぶ

ステップ3で写真を選ぶ目的は、配置する際のサイズを見定めるため。

つまり、この段階でバナーに入れる写真を決定する必要はなく、ある程度のサイズ感や横長・縦長などの基本フォルムさえ決まっていればOKです。

ステップ4. レイアウトのベースを決める

バナー向けのレイアウトを大きく分類すると、「分割レイアウト」と「全面レイアウト」の2種類に分けられます。

どの要素をメインにするかによって選ぶと良いでしょう。

▼レイアウトの選び方

• テキストをしっかり伝えつつ、写真でイメージをアピールしたい→分割レイアウト向き
• 写真のビジュアルを優先したい→全面レイアウト向き

分割レイアウトのサンプル

「テキストエリア」と「画像エリア」がくっきりと分かれているのが、分割レイアウトの特徴です。

▼横分割レイアウト

▼縦分割レイアウト

エリアを独立させることで、テキストと画像の両方がスッキリと見やすくなります。

▼縦分割レイアウトで作ったサンプルバナー

全面レイアウトのサンプル

「自社商品をメインにしたい」「写真の美しさを活かしたい」といった場合におすすめなのが全面レイアウト。

ただし、下記のサンプルバナーのように背景写真とテキストのコントラストを強くすることで、テキストを際立たせる使い方も可能です。

▼全面レイアウトで作ったサンプルバナー

ステップ5. とりあえずデザインを組んでみる

ベースとなるレイアウトが決まったら、とりあえず盛り込みたいテキストメッセージと写真を使ってデザインを組んでみましょう。

この段階では、まだモノクロのままでも構いません。

ステップ6. 問題点をピックアップして修正しながら配色する

何をどこに配置するかが決まったら、下記の手順でデザインを仕上げていきます。

• 問題点をピックアップする
• 修正しながら配色する

修正と配色を同時進行で行うことで、「どうしたら最も重要なメッセージが伝わるのか」が具体的に見えてくるのです。

テキストと写真が被って読みにくい

上記レイアウト例のように文字テキストと写真がきっちり分かれているデザインも、バナーとして悪くはありません。

しかし、下記の問題点は「クリスマスケーキコレクション」用のバナーとして致命的です。

▼問題点

• テキストの一部が写真と被って読みにくい
• もっとケーキの写真を大きくして、イベント感をアピールしたい

そこで下記の解決策を講じることで、ケーキの写真を大きくしてもメッセージがしっかり伝わるようになりました。

▼解決方法

• 縦幅ギリギリまで写真を大きくする
• テキストが被っている部分は、写真にグラデーションのマスクをかける

デザインのバランスと配色を整える

文字色やテキストエリアの背景色は、デザインのバランスを整えながら行うのがコツです。

▼問題点と解決方法

• 問題点：クリスマスの象徴であるケーキ部分は薄くしたくない
• 解決策：切り取ってマスクなしの状態でテキストを上に重ねる
• 配色：テキストエリアの背景をクリスマスらしい赤で統一する

バナーデザインに遊び心を加える

バナーのデザインに遊び心をプラスするのは、Webデザイナーの腕の見せ所。

今回は、下記の工夫を加えて仕上げてみました。

▼解決方法

• サブタイトルをリボン状にするなど、テキスト部分を装飾する
• テキストの背景に、さり気ないイラストを追加する

良くないバナーデザインの特徴

では、デザイン初心者の方がやってしまいがちな良くないバナーデザインの特徴を見ていきましょう。

写真が合っていない

写真がサービスや商品の内容と合っていないものは、クリック率及びCV率が下がってしまいます。

なんとなくで写真を選ぶのはやめましょう。

キャッチコピーが目立たない

せっかく考えたキャッチコピーもデザインが目立っていなければ、ユーザーの目にはとまりません。

余白をしっかりとり、情報を詰め込みすぎないように工夫しましょう。

コントラストが弱い

背景と文字のコントラストが弱いと、パッと見た時に何が書いてあるかわからず、クリックにつながりません。

バナーはインパクトのあるビジュアルであることが重要です。

見づらさ、わかりにくさは徹底的に無くすということが必要です。

バナー作成におすすめのツール

では、バナーを作るにあたっておすすめのツールをご紹介していきたいと思います。

Photoshop

出典：https://www.adobe.com/jp/products/photoshop.html

Adobe社のPhotoshopは、写真データの細かい加工ができるため、商品画像を全面に出すバナーなどには最適のツールです。

文字が目立つように、しかし写真の質も落とさないよう細かい調節をすることができます。

Canva

出典：https://www.canva.com/ja_jp/

こちらはオンラインで編集することができる「Canva」というツールです。

登録すれば無料でも使用することができ、テンプレートも非常に豊富です。

初心者の方は、Canvaのテンプレートをオリジナルに編集する作業から始めてみても良いと思います。

バナーデザインの参考になるギャラリーサイト

参考になるバナーデザインを見ることができる、サイトをいくつかご紹介します。

良いと思ったデザインはストックして、自分が作る際の参考にしましょう。

BANNER LIBRARY

出典：http://design-library.jp/

良質なバナーデザインが集まっています。

カテゴリーごとの検索もでき、参考にしたいデザインを見つけることができます。

Banner Matome

出典：http://bannermatome.com/

合計21,300のバナーが掲載されており、カラー別・業種別に検索することができます。

Pinterest

出典：https://www.pinterest.jp/

すでに利用している、という方も多いかもしれませんが、「banner ads」などと検索すると、多くのバナーが集まったボードを見ることができます。

普段からストックしておくことができ、便利ですね。

まとめ

今回は、クリックされるためのバナーデザインについて解説してきました。

バナーはユーザーが一目見てクリックしたいと思うかどうかがポイント。

つまり、最初のインパクトが重要になってきます。

そのため、デザインの基本はしっかりと守りつつ、キャッチコピーは目立つよう構成を組むように工夫しましょう。