バナーを作成する方法。クリックしたくなるバナーのコツと作成手順を解説

そもそもバナー（banner）とは、英語で「旗」「横断幕」「旗じるし」という意味を持つ言葉です。ECサイトなどのWebサイトにおいては、サイトを宣伝するために貼られた画像のことを指します。実店舗の前に掲げられている、広告用の「のぼり」のイメージです。

Web上のバナーには画像にリンクが貼られていて、クリックすると別ページに飛ぶという仕組みです。動きのあるアニメーションで作られたバナーもあり、必ずしも静止画とは限りません。

また近年は、XやFacebookといったSNSのヘッダーにある画像のこともバナーと呼びます。

画像を使っている分、文字だけのリンクよりも目につきやすく、より多くの情報をユーザーに与えられるのがメリットです。

ECサイトでは、置く場所と目的によってバナーの役割が変わります。主な4種類の違いは次のとおりです。

キャンペーンバナーは、終わったあとも出しっぱなしにすると、お客様の不信につながります。メルカートの「タイマー機能」のように、指定した日時にキャンペーンページを自動で切り替えられる仕組みがあると、外し忘れを防げます。特集ページは、テンプレートでデザインをそろえられる「ページ管理」で作れます。

広告バナーとして配信する場合の種類と選び方は「ECサイトの集客に役立つ7つのWeb広告」、FacebookやInstagramへの配信は「Meta広告とは？」で解説しています。

基本的なルールを押さえたら、実際にバナー作成を行ってみましょう。バナーを作成する際の手順は、基本的には以下の通りです。

画像やキャッチコピーなどを用意する

最初に、バナーで使用する画像やキャッチコピー、ロゴなどを用意しましょう。写真や画像を使用する場合は、著作権の問題がないかどうかを確認しておく必要があります。

また、キャッチコピーや訴求したい内容にそぐわない写真だと、バナーの効果が薄れてしまいます。写真と訴求内容が合っているかどうかも注意しましょう。

構成要素を並べる

画像などを用意したら、一度すべて並べてみて、伝えたいことの優先順位を決めるようにしましょう。何を一番伝えたいかが分かっていれば、レイアウトや文字の大きさを決める際に役立ちます。

レイアウトを手書きする

伝えたいことの優先順位が決定したら、手書きでレイアウト案を考えるのがおすすめです。一度手書きしておくと、その後の作業もスムーズに進めやすくなります。

文字と画像を別々に配置するのか、画像の上にテキストを配置するのかなど、いくつかのパターンに当てはめてみて、適切なものを選ぶようにしましょう。複数パターン作って見比べてみるのもおすすめです。

フォントや文字サイズを調整する

手書きのラフ案ができあがったら、パソコンで白黒のレイアウトを作成します。カラーでバナー作成を進めると、配色とレイアウトの両方で同時に悩んで時間がかかるので、避けた方が良いでしょう。

パソコン上でレイアウトを決めたら、フォントや文字サイズ、文字同士の間隔調整（カーニング）を行い、デザイン細部を詰めます。この時、文字数が多く余白が少ないと、ごちゃごちゃして可読性の低いバナーになってしまうので、情報量を適度に絞ることが重要です。

配色を決める

文字サイズなどのデザイン細部まで決まったら、最後にカラーを決めます。カラフルにしすぎると見づらくなるので、カラフルにしすぎないのがポイントです。

サイトやブランドイメージと異なる配色だと、バナーから飛んできたユーザーが困惑し、サイトを離れてしまう恐れがあります。基本的にはサイトやブランドと合わせた配色で設定しましょう。サイト全体のデザインの考え方は「売れるECサイトのデザインとは？」で紹介しています。

セールなどの際は、赤や黄色などの注意を引ける色を活用すると効果があります。そのような色がブランドイメージにそぐわない場合は、色の彩度を低めにするなどの工夫をしてみましょう。

バナーは商品やキャンペーンの認知度を高めるために欠かせない要素です。しかし、ユーザーにクリックされやすい魅力的なバナーを作るためには、さまざまなコツを押さえておく必要があります。

今回ご紹介した方法を試してみたり、場合によっては外注を活用したりして、魅力的なバナーを作成しましょう。