バナー制作してみたは良いものの、成果にはつながらなかった…。というような苦い経験がある人もいるのではないでしょうか。
バナーデザインは決められた空間でどれだけユーザーに興味を持ってもらえるかが重要です。そしてクリックさせることが目的のバナーは、クリエイティブの質によって効果がかなり変わってきます。
とりあえず作ってみたけど、「どこか物足りない！」「もっと目立たせたい！」と思うことも多いはずです。そこで今回は、伝わりやすくて映えるバナーの作り方を解説します。テイスト別のサンプルも紹介しているので、ぜひ参考にしてみてください。
クリックしたくなるバナー｜5つの特徴
バナーの目的は、サービスや商品に興味を持ってクリックしてもらうことです。とはいっても、実際にどのようなバナーが効果的なのかお悩みの方も多いのではないでしょうか。成果にしっかりとつながる、クリックしたくなるバナーの5つの特徴をご紹介します。
要素は左上から右下に向かって配置
「Zの法則」をご存知でしょうか？
ユーザーの視点が「左上、右上、左下、右下」という順番に流れることを意味しています。スーパーの商品陳列などで、この法則を取り入れているところも少なくありません。重要度の高いものは左上に、低いものを右下に配置することが、伝わりやすいバナーの作り方の基本です。
メリットを端的に伝える
目に留まりやすいバナーの特徴は、メリットを瞬間的に見せられるものです。
内容が詰まり過ぎて、何を伝えたいのかが分かりにくいバナーを見てもユーザーは興味を持ちません。あれもこれも要素として入れていては、デザインがごちゃごちゃしてしまいます。できるだけシンプルにメリットを端的に伝えましょう。
文字の視認性を高める
どれだけ魅力的なコピーが書かれていても、可読性が低くてはメリットを伝えることができません。
そのために欠かせないのが、文字の視認性です。背景色と文字色のコントラストが強いほど文字は見やすくなります。デザインは重要ですが、文字色と背景色にはしっかりとメリハリをつけることを意識しましょう。
画像に意味があり見やすい
画像の配置はサービスや商品の魅力を伝えるために効果的な要素です。色彩が多い・インパクトのある素材を切り抜いて使いましょう。また文字や他の画像と被せずに、見やすい配置を心掛けることも大切です。
バナーという狭い範囲を効率的に活用するためにも、イメージと異なる画像は避けるようにしてください。
サイトとトーンを合わせる
バナーはサイトにアクセスさせるための広告です。商品を購入するとき、広告とイメージが違って「騙された」と感じた経験がある人もいるのではないでしょうか。
バナーの訴求内容やトーンをアクセス先のサイトに合わせることで、ユーザーが感じるギャップを最小限に抑えることができます。
テイスト別サンプル紹介
こういうテイストのバナーを作りたいと思って調べてみても、どこがデザインのポイントなのか掴めないという経験もあるのではないでしょうか。実際に使われているバナーを参考にしながら、代表的なテイスト別の作り方をご紹介します。
フレームを使用したパターン
シンプルなバナーでも、フレームをつけることで存在感が生まれます。画像は目立たせず、テキストは最小限にすることがポイントです。お洒落感を出す方法として、英語のコピーを目立つ箇所に配置するだけで、かっこいいデザインになります。
余白を多くとったパターン
商品やサービスを目立たせるための作り方として、余白を多くとるという方法があります。ここで重要なのは、テキストを最低限に抑えることです。非常にシンプルなバナーですが、デザインによっては大きなインパクトを与えます。
画像以外で使用する色数を絞ったパターン
画像以外で使用する色を少なくし、文字は視認性を意識することで文字に集中させることができます。色の数が増えるとごちゃごちゃしやすくなってしまうため、同系色でまとめて、文字で反対色を使用し、文字にインパクトを与えましょう。
目立つ写真を大きく使用したパターン
色味が多い・インパクトのある素材を切り抜いて使用すれば、それだけで印象に残るバナーになります。文言の配色をモノクロまたは1色のみにすることがポイントです。優先順位の高い文言はフォントやサイズを変化させましょう。
バナーづくりのコツ
バナーを作成しても、デザインの「物足りなさ」を感じている人もいるのではないでしょうか。どれだけ時間をかけて作っても、クリックされなければ意味がありません。魅力的なバナーを効率的に作成するためのコツを、9つのステップに分けてご紹介します。
ステップ1｜訴求内容をまとめる
届けたい人に「もっと見たい！」と思わせることがバナーの目的です。そのために、バナーではそのサービスで得られるメリットを端的に伝える必要があります。どのようなコピーが魅力的なのか、ユーザー視点で訴求内容をまとめましょう。クリックされるバナーを作成するためにも、メリットを明確にすることが大切です。
ステップ2｜必要な構成要素をちりばめる
初心者にとってバナー制作は、まるでジグソーパズルのように感じるかもしれません。完成のイメージがなければ、何をどこに置くのが最適なのか、頭を悩ませるものです。配色やレイアウトなど余計なことは考えず、最初はバナーに必要な構成要素をちりばめることをおすすめします。
ステップ3｜構成要素に優先順位をつける
バナーのサイズには制限があり、その中でユーザーに訴求することが求められます。クリックされやすいバナーの作り方の基本は、何を伝えたいかを明確にすることです。
そのバナーによって商品やサービスの何を伝えたいのか、優先順位をつけてみましょう。
ステップ4｜手書きでレイアウトする
ユーザーに伝えたい構成要素が決まったら、いよいよレイアウトです。
ただし、いきなりPCで配置を考えるのではなく、まずは「手書き」でレイアウトしてみてください。PCでのレイアウトは簡単で便利な反面、あれこれ考えすぎてしまいます。手書きでレイアウトを決めることにより、時間の短縮につながります。
ステップ5｜単色でレイアウトする
レイアウトがある程度決まったら、PCでデザインしていきます。このとき、配色は後回しにして、レイアウトのみを組んでいきましょう。
いきなりフルカラーで進めて配色とレイアウトの両方で躓くと時間がかかってしまいます。ブランドロゴなど必要最低限の配色以外は、単色でのレイアウトがおすすめです。
ステップ6｜文字の可読性を高める
ただ文字が並んでいるだけだと目に留まりにくく、情報の訴求力としては物足りません。そんなときは文字に背景をつけたり、囲ってみたりと調整をしてみましょう。
シンプルにフォントを変えてみるだけでも、文字の可読性を高めることができます。ぼんやりとした印象も引き締まるため、情報が入ってきやすくなります。
ステップ7｜カーニングを行う
カーニングとは、隣り合う文字のスペースを調整することです。特定の文字の組み合わせによっては、視覚的に違和感を覚えることも少なくありません。これを改善するために、文字の感覚を手動で調整する必要があります。
このような細かなポイントにこだわるだけでも、バナーの質をより高めることができます。
ステップ8｜サイトのイメージに合わせて配色する
バナーの配色はサイトのイメージと合わせることが基本です。ユーザーはバナーの内容に興味を持ってクリックするため、アクセスしたサイトと異なる配色にしてしまうと、興味が半減する可能性があります。また実際にサイトの配色に合わせることで、配色に悩む時間を減らすことにつながります。
ステップ9｜最後にモノクロでの視認性をチェック
バナーをひとつずつ丁寧に確認するユーザーはほとんどいないでしょう。そのため、パッと見て分かりやすいデザインを心掛けてください。ここで重要なのが文字の「視認性」です。完成したバナーをモノクロにすることで、明度のみを確認できます。モノクロで読みにくい場合は、視認性が低い可能性が高いです。
伝わりやすくて映えるバナーの作り方｜テイスト別のサンプルを紹介
伝わりやすいバナーの作り方には押さえるべきポイントがあり、これらを守るだけで従来の広告よりも高い効果を期待できます。どれも当たり前のことのように感じるかもしれませんが、基本的な部分ができていないバナーも少なくありません。自社の商品やサービスのメリットは何なのか、ユーザー視点で高い成果を出せるバナーを作りましょう。
