クリック率を上げたい方必見！バナーデザインのコツ３選！

クリック率を上げたい方必見！バナーデザインのコツ３選！

せっかくバナーを制作したのになかなかクリック率が上がらなくて困った…なんてことありませんか？実はちょっとしたコツを意識するだけで誰でもクリック率が高いバナーを制作できます。

この記事ではプロも活用しているクリック率を上げるための効果的なバナーデザインのコツを解説します！

クリック率とは

そもそも、クリック率とは何に対しての利率かご存じですか？クリック率とはCTRとも呼び、そのウェブサイトや広告が表示された回数のうち、クリックされた回数の割合のことを指します。計算式にすると、「（クリックされた回数÷表示回数）×100＝クリック率（％）」となります。表示回数が100回、クリックされた回数が3回だとすると、クリック率は3％ということです。
クリック率についてはこちらでも詳しく解説しています。

クリック率を上げるバナーデザインのコツ3選

ユーザーがバナーを目にする時間は画面をスクロールするほんの一瞬で、1秒以下だと言われています。クリック率が高いバナーは、その一瞬で内容・魅力を伝えることができています。クリック率を上げるバナーを制作するためのコツは以下の通りです。

クリック率を上げるバナーデザインのコツその1 | ターゲット・ペルソナを考える

クリック率を上げるバナーデザインのコツ１つ目はターゲット・ペルソナについて考えることです。

ターゲットとは？

ターゲットとは、その商品やサービスを求めている層のことを指します。例えば原宿に新規開店するマシュマロ店は小学生～高校生の女の子をターゲットとしているでしょう。

ペルソナとは？

ペルソナとは、ターゲットをより具体的な顧客の人物像のことを指します。先ほども挙げた原宿に新規開店するマシュマロ店のターゲット層から具体的な人物像を設定してみると、

• 10歳の女の子
• 東京都練馬区在住
• 趣味はASMR動画を視聴すること
• 将来の夢はインフルエンサー
• 学校の友達から親に原宿に連れて行ってもらった話を聞き、自分も行きたいと思っている

こういった人物像が浮かび上がってきます。

「ターゲット・ペルソナ」についてはこちらのページでも詳しく解説しています。

実際にターゲット・ペルソナについて考えてみる

あなたが先ほど作成したペルソナだとして、どのようなバナーだったらクリックしたくなりますか？マシュマロ店の広告バナーが「真っ黒」「ゴツゴツしたフォント」「戦国武将と馬のイラスト」だとクリックされるでしょうか？おそらく答えはNOです。原宿が好きな小学生～高校生の女の子をターゲットとしているならば「パステルカラー」「丸いフォント」「ユニコーンのイラスト」をバナー内に入れると興味を持ってクリックするのではないでしょうか。

年齢や性別、好みによってクリックしたくなるバナーは変わってくるはずです。誰に届けたいかによって制作するバナーの方向性は大きく変わってきます。

若い学生の層には流行りの色やデザイン、もう少し上の社会人の層には落ち着いたデザインが効果的です。女性にはやわらかいデザイン、男性には力強いデザインが好まれる傾向があります。

つまり、バナーをクリックしてもらうにはユーザーに「自分ごと」として興味を持ってもらう必要があるということです。

では実際に、英会話教室の広告バナーを題材にして具体的なペルソナを作成してみましょう。

具体的なペルソナが作成できると、どのようなデザインの方向性にするかが決まってきます。
前者は20代後半の女性ということから明るくポップかつやわらかいデザインが好まれるでしょう。また、子供を英会話に通わせたいという悩みがあるので「楽しい英会話」といったキーワードが良いでしょう。
後者は50代後半の男性ということで落ち着いたデザイン、「50代からの英会話」「ビジネス英会話」「オンライン受講」「まだ間に合う」といったキーワードが効果的です。

ターゲット・ペルソナのまとめ

ターゲット・ペルソナを考えたうえで

• 好まれる色やデザイン
• 効果的なキーワード

を設定するとユーザーが自分ごととして興味を持ち、クリックしてもらいやすいバナーを制作することができます。

クリック率を上げるバナーデザインのコツその2 | 視認性を上げる

クリック率を上げるバナーデザインのコツ2つ目は視認性を上げることです。

先ほど作成したペルソナに効果的なデザインで、2つのバナーを制作してみました。使用カラー、フォント、キーワードはどちらも同じですが、クリックしたくなるのはどちらでしょう？そしてそれはなぜでしょう？

①は背景と文字が重なり、「3歳」「通える」「グングン」の文字が読み取りにくくなっています。また、「無料体験レッスンはこちら」の文字色も背後のボタンの色と近く、埋もれてしまっています。

②はまず背景を薄い色に変えました。これだけでもだいぶ情報が伝わりやすくなります。さらに「3歳から通える英会話教室」に白いふちをつけてより背景に重ならない工夫をしています。①で埋もれてしまっていた「無料体験レッスンはこちら」の文字も白へ変更することで、すっきりとした印象になりました。

バナーはじっくり見られません。だからこそパッと目に情報が入る工夫が必要になってきます。

• 背景と文字の色が重なっていないか
• 伝えたいキーワードが目につくか

この2つを意識し、ユーザー目線に立ってもう一度制作したバナーを見直してみましょう。情報が伝わるバナーデザインへ変更すると自然にクリック率が上がります。

クリック率を上げるバナーデザインのコツその3 | 視線誘導を意識する

クリック率を上げるバナーデザインのコツ3つ目は視線誘導を意識することです。

ユーザーが自分ごととしてバナーに興味を持ち画面をスクロールする手を止めたら、次にすることは内容を読むことです。その内容が読みやすいと、より興味を持ちクリックにつながります。

視線誘導の「Z型」「N型」「F型」

視線誘導には「Z型」「N型」「F型」が存在します。

視線誘導の「型」を意識してバナーを制作してみる

コツ1で作成した男性のペルソナをもとに2つバナーを制作してみました。

Aは一見「Z型」ですが、右左に視線が動き疲れてしまいます。箇条書きの「✓マーク」も項目と離れていて関連性が薄くなっています。
BはZの形に沿うように流れるような動きになっています。すっきりして読みやすさが上がっているのではないでしょうか。

視線誘導のまとめ

ただ情報を書き連ねるだけでなく、ユーザーにとって読みやすい配置にすることが大切です。
ユーザーにとって情報を読みやすい場所に配置することで、効果的にバナーのクリック率を上げることができます。

まとめ

いかがでしたでしょうか？クリック率を上げるバナーを制作するには、ユーザーが一瞬で「興味がある」と自分ごとのように思い、目にする時間を長くすることが欠かせません。ユーザー目線に立ったデザインをすることが非常に大切です。

クリック率が上がるバナーデザインについてもっと詳しく知りたい方は、ソフトキャンパス広告制作実践講座をチェック！実務経験のある専門の講師がマンツーマンであなたの悩みに応えてくれます。