2020年のバナーデザインはクリック率を上げよう

2020年のバナーデザインはクリック率を上げよう

バナーはクリックされることで効果を発揮しますが、どのようなデザインがクリックされるのでしょうか。

今回は、Webデザインに携わっているデザイナーの方たちにとって、バナーを作成する際に参考になるギャラリーサイトと、クリックされるバナーのポイントをご紹介します。

参考になるバナーギャラリーサイト3選

参考になるバナーギャラリーサイト3選

バナー作成をする際に参考になるサイトをご紹介します。

サイトごとに、サイズや業種別に特化しているなど、まとめ方や特色が違いますので、目的別に応じて是非活用してみてください。また、今回は3つのサイトをご紹介しますが、他にもたくさんの参考になるまとめサイトや、ギャラリーサイトがネット上に公開されていますので、お時間のある際には是非調べてみてください。

 

制作のコツについてはこちらの記事にてご紹介しております。

バナー作成の基礎とコツをご紹介!魅力的なバナー作成でCVを増加させよう

当記事と併せて活用してみてください。

Bannnner.com

bannnner.com

Bannnner.com

多くの業種別にジャンル分けされているギャラリーサイトです。商品によって様々な魅せ方があるバナーですが、その分どのようなレイアウトや色使いで作成すればいいか迷う方に役立つバナーが掲載されています。

 

また、テキストのみで作成されたものや、イラストが使用されているものの他、静止画のバナーとはまた違った、GIFアニメーションのバナーなどにもカテゴリ分けされていたりと、様々なジャンルでまとめられているため、知りたいバナーをすぐに見つけられます。

検索方法については、ホームページ左にある「Category」と書かれたメニューバーをクリックすると可能です。

retrobanner

retrobanner

retrobanner

多くのサイズ別にバナーがまとめられているサイトです。

使用するサイトの配置箇所によって、サイズを変更して作成しなければならないバナーですが、サイズごとにどのようにレイアウトを組めばいいか迷ってしまう時に参考になります。

 

また、気になるバナーをクリックすると、バナーに使用されているカラーコード一覧が表示されるため、配色を考える勉強にもなります。選択したバナーのカラーコードは、パレットファイルとしてまとめてダウンロードすることもできます。

Pinterest

Pinterest

Pinterest

バナー専用のサイトではありませんが、リンク先のホームページ上部の検索欄にて、「バナー」などと入力して検索をかけると、キーワードに基づいた検索結果が見れます。おしゃれなバナーや広告が非常に多く、見ているだけでも楽しめるので、空き時間などに閲覧するのもオススメです。

 

目的別に探したいのならば、「バナー 化粧品」「バナー 車」などと検索をかければ、キーワードに基づいた候補がヒットしますので、是非活用してみてください。

また、イラストなども掲載されているため、バナーにイラストを使用したい際に、描き方などの参考になることがたくさん見つかります。

 

もちろん、バナー以外にもたくさんの画像やチラシ、動画などが載せられており、デザインを専門としている方だけに限らず、副業としている方にもわかりやすいため、Webデザインの制作に関することを調べたいときは、まず上記のサイトで調べてみるといいかもしれません。

 

最新情報をいち早くお届け!

無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます!
その他、更新情報・イベント情報を
お届けいたします。

 

クリックされるバナーのポイントとは?

クリックされるバナーのポイントとは?

みなさんはどのようなことを考えながらバナー作成に取り組んでいるでしょうか?レイアウト・配色・商品の魅せ方などを考えている間に、どんどん時間が過ぎて行ってしまった経験はありませんか?

実は5つのポイントを押さえておくだけで、各段に作業効率がアップするんです。先ほどご紹介したバナーサイトを参考にしながら、次にご紹介するポイントを当てはめて見てください。

ポイント①重要度順に要素を強調・左上から右下に配置する

重要度順に要素を強調・左上から右下に配置する

人の視線は左上から右下へ移動すると言われています。その法則を活かして、一番伝えたい強みになる要素を強調し、左上に配置します。

クリック先の申し込みページなどで、ユーザーを獲得したいバナーなどの場合に活用できます。

このサービスに申し込むとユーザーにどのような効果が得られるのかを左上に強調し、右下に申し込みを促す要素を配置してみましょう。

ポイント②文字数を極力少なくしメリットを伝える

文字数を極力少なくしメリットを伝える

文字数が多いと情報量が多くなってしまい、結果何を伝えたいのかがわかりにくく、見にくさの原因ともなり、クリックされないバナーとなってしまいます。

要素を絞り込んでユーザーに対してのメリットとなる要素を押し出し、「読む」よりも「見る」につながるバナーを作成する意識をしましょう。

ポイント③コントラストで差をつける

コントラストで差をつける

背景色と文字色のコントラストに差をつけると、文字は見やすくなり、重要度の高い要素に自然と目が向くようになります。

 

しかし、彩度や明度が高すぎると目にやさしくなく、かえって逆効果ともなってしまうため注意が必要です。なるべく彩度と明度を低めでデザインするように心がけましょう。

ポイント④要素の画像は見やすく意味を持たせる

要素の画像は見やすく意味を持たせる

商品の画像などを使用する際は、画像に文字を被せないようにすることと、あっても意味があまりない要素は置かないようにしましょう。

 

例えば、携帯の画像が載せてあるバナーや、ビールの画像が載せてあるバナーなど、画像を置いてあるだけで、一目で何についてのバナーなのかがわかるため、強みとなる要素の画像を妨げてしまうものは省き、見やすいレイアウトを考えましょう。

ポイント⑤訴求内容や配色をランディングページと合わせる

訴求内容や配色をランディングページと合わせる

ユーザーがバナーをクリックしてくれた時に遷移するランディングページが、バナーに記載されていた内容と異なると、「求めていた内容と違う」と勘違いを起こしてしまい、クリックしてくれたのにページから離脱してしまう可能性が高いです。

そのため、訴求内容と使用されている配色を、ランディングページに合わせて作成をするようにしましょう。

実はデザインだけじゃない、クリックされやすいバナーサイズは?

 

実はデザインだけじゃない、クリックされやすいバナーサイズは?

出典:AdMarkeTech

用途によって様々な大きさのあるバナーですが、実はサイズによってクリック率が変わるのをご存知でしょうか。上記のグラフは、468×60サイズのフルバナーを100とした時に見た、サイズ毎のクリック率を表しています。

グラフを見てみると、300×600サイズや、336×280サイズのバナーのクリック率が高く、サイズが大きいほどクリックされやすいというのがわかります。

 

しかし、バナーを配置する箇所によってサイズを変更していかなくてはならないため、必ず大きなサイズで作成できるというわけではありません。目的と用途別に順応に対応できるよう、各サイズのバナーデザインを参考にしていきましょう。

多くのバナーの良さを取り入れ、効果があるバナーを!

多くのバナーの良さを取り入れ、効果があるバナーを!

多くのバナーを見ていると、目を惹かれるバナーデザインとはどんなものかが、徐々に掴めてくると思います。

2020年は5Gのスタートにより、Webデザインも進化する年です。2019年とは一味違う、クリックされるバナーを効率的に作成するために、この記事がみなさんの作業にお役に立てれば幸いです。

LINEで送る
Pocket

  • この記事を書いた人
  • 最新記事