思わずクリックしたくなるバナーデザインとは？ デザイナーのカトウヒカルさんが解説 | 今日から試せるネットショップ運営ノウハウ powered by カラーミーショップ | ネットショップ担当者フォーラム

バナーデザインは、バナーの広告効果を最大限に高めてくれる重要要素の1つです。プロのデザイナーさんに依頼すればいいものができるのは当然ですが、デザインが本業ではないネットショップオーナーさんが自分でバナーを作るときは、どんなことに気をつければいいのでしょうか？

今回は、初心者さんでも実践できる「思わずクリックしたくなるバナーデザインのコツ」について、Webデザイナーのカトウヒカルさんにお話を伺いました。

福岡を拠点にするWebデザイン事務所「kanvas」のWebデザイナー。これまでに100以上のWebサイト制作に関わり、デザインからHTML/CSSコーディング、CMSの組み込みまでワンストップで対応。『思わずクリックしたくなるバナーデザインのきほん』の著者。2022年からデザイン感覚をロジカルに学ぶオンライン講座「kanvas study plaza」を主宰するなど、デザイン教育にも力を入れている。

――自己紹介をおねがいします。

福岡を拠点に、フリーランスのWebデザイナーとして活動しています。また、Web制作会社「kanvas（カンバス）」の立ち上げメンバーでもあり、こちらは数名の少数精鋭チームでクライアントワークを行っています。

地元・福岡の中小企業さまのコーポレートサイト制作やリニューアルを中心に手掛けていますが、コロナ渦を機にオンラインでの依頼も増えていて、今は東京、名古屋、大阪など遠方の制作会社さまからの案件も受託しています。

Web制作以外では、デザイン教育などにも力を注いでいて、2022年2月に、初めての著書である『思わずクリックしたくなる バナーデザインのきほん』（インプレス）を上梓しました。また、同年4月からオンラインスクール「kanvas study plaza」を主宰していて、「デザインセンスをロジカルに学ぶ」をコンセプトに、受講者にバナーデザインの基本を教えています。

2023年に入ってからは、Adobe Expressアンバサダーに選任され、つい最近ですがAdobeブログでノンデザイナーさん向けの記事執筆をスタートしました。

――早速ですが、バナーとはどういうものなのか、どういう役割を持つのか教えていただけますか？

バナーには、「広告用バナー（バナー広告）」と「サイトバナー（遷移バナー）」の2種類があり、それぞれ役割が異なります。大まかに説明すると、広告用バナーはユーザーを自社サイトに呼び込むことが目的なのに対し、サイトバナーは主にサイト内をスムーズに遷移してもらうことを目的に設置します。

一般的に「バナー＝広告」のイメージが強いので、広告用バナーの制作ノウハウを中心にお話ししていきます。

バナーは広告物のなかでも小さなデザインです。小さくても訴求力の高いバナーには、パワフルな広告効果が期待できます。とはいえ、バナーはユーザーがわざわざ見にいくものではなく、SNSやWebサイトなどを見ているときに唐突に表示されるものなので、見た人の興味を一瞬で惹きつける訴求力がなければクリックしてもらえず購入にもつながりません。

ユーザーにアクションを起こしてもらうには、限られたスペース内で伝えたいことを的確に表現する必要があります。バナーデザインは、「今だけ何％OFFでお買い得ですよ」「季節限定・数量限定なので今すぐお申し込みください」といった訴求ポイントが一目で伝わり、商品やサービスを「今」購入するメリットが感じられるように仕上げることが大切です。

――なるほど。バナーデザインはアイキャッチなど他のデザインとは異なるものなのでしょうか？

バナーはあくまでも広告なので、デザインにも広告的価値が求められます。

一方のアイキャッチは、YouTube動画やブログ記事などのハイライトを要約したサムネイルやディスクリプションに似ていて、クリックした先のコンテンツに興味を持ってもらうことを目的に設置します。

アイキャッチは広告ではないため、ユーザーに動画や記事を「見たい」「読みたい」と思わせられるものなら、写真やイラストだけでも成り立ちます。

もちろん、アイキャッチ画像をOGP（Open Graph Protcol）に設定すればSNSで共有されやすくなるため、広告のような効果を得られる側面もありますが、だからといってクリエイティブを広告っぽくする必要はありません。この点が、バナーデザインとの違いだと思っています。

――たとえば、販売商材がアパレルだったらどんなバナーデザインがよいのでしょうか。

そうですね。実はバナーデザインでもっとも大事な要素は、商品の名称や、「何割引」「今だけ」といった文字情報です。文字のデザインのコツについてはあとでお話しますね。文字の次に大切なのは写真で、商品の推しポイントにフォーカスした写真を使えば、バナーにオリジナリティが出て訴求力がグッと高まります。

アパレルのバナーで写真を用いる場合の撮影のコツは、たとえば着心地のいい商品の場合、実際に着ている人の袖部分を素肌も含めて撮影することで、肌触りがよくて着心地がよさそうなことをイメージさせます。スタイリッシュな商品の場合は全身が写ったシーン写真がおすすめなので、ユーザーがその服を着て外出しているシーンを想起できるように撮影します。

――ひと目で特徴を伝えることができる写真が重要ということですね。

そうですね。文字以外のデザインのコツをいくつかあげると、ブランド力が高い商品なら、ブランドロゴを大きく目立つように配置するとユーザーの目を引きやすくなります。

あしらいの入れ方にもコツがあり、「桜の季節だから」と花びらを散りばめたりしがちですが、季節感を出したくても商品と関係ないものは最小限に抑えたほうがいいですね。打ち出す内容が「新生活応援キャンペーン」で桜を少し入れる程度なら構いませんが、バナーのスペースは限られています。

基本的には、商品の特長を端的に表す写真と、商品特性などを表すコピー、リピート率○％といった数字など、訴求ポイントをしっかり表示することを優先させてください。

――では、販売商材が食品だった場合はどうですか？

食品もアパレルとほぼ同じ考え方で作ります。魚沼産コシヒカリなど有名産地のお米なら、産地名を大きく配置してお米の写真も載せます。お肉で「安くて量が多くてお買い得ですよ」と伝えたいなら、ボリューム感が伝わる写真とともに「1キロ○円」と目立つように置くと、「お得だから買おうかな」と思ってもらいやすくなります。

またサプリメントなどの健康食品なら、どのくらい摂取するとどんな効果があるのか、どんな成分が何ミリグラム配合されているかなど、特長やメリットを大きくしっかりデザインすることで訴求力が出てクリックしてもらえる可能性が高まります。

――バナーに記載するテキストに最適な文字数はありますか？

メインとなるキャッチコピーの文字数は、1文＝10文字ぐらいが目安です。広告用バナーで一番大事なのはキャッチコピーなので、しっかり考えて商品の訴求ポイントを端的に表現することを意識してください。

「50％OFF」や「500ポイントプレゼント」などの数字は訴求ポイントであることが多いので、数字を入れるときはその部分を強調したデザインにするのもコツです。さらに、サブ的な情報として説明文を入れる場合は20文字程度に抑えるようにして、文字サイズも極力小さめにするといいです。

――あまり長くてもひと目では読み切れないですもんね。フォント選びのコツなどはありますか？

フォントはすごくたくさんの種類があるので、そのなかからベストなものを選び出すのはプロのデザイナーでないとなかなか難しいと思います。ノンデザイナーのネットショップオーナーさんや運営スタッフさんがバナー制作時にいざ選ぼうと思っても、フォント探しの旅が始まって、決定まで何時間もかかってしまうことが考えられます。

初心者さんにおすすめしたいのが、お気に入りのフォントを２つくらい、あらかじめ決めておくことです。使うフォントが決まっていれば、迷うことなくバナーを作れると思います。

フォントは、訴求内容に合わせて文字の太さ（ウエイト）を使い分けられるように、細いものから太いものまで5段階くらいあるものを選ぶのがコツです。高級感のある商品なら細いウエイトのほうが高級に見えますし、安さや迫力を表現したいなら太いウエイトを使うと効果的です。

そうはいっても、「そもそもどんなフォントがあるのかわからない」という場合は、無料のGoogle Fontsでもいいかもしれません。GoogleとAdobeが開発したGoogleフォントに「Noto sans」と「Noto Serif」という種類があり、それぞれ「源ノ角ゴシック」「源ノ角明朝」をベースにしたものですが、文字の太さも5ウエイトくらい用意されていて使い勝手がいいです。

――フォントをあれこれ悩んでいると、あっというまに時間が経ってしまいますし、悩みすぎて正直よくわからなくなってしまうこともありますよね。文字をデザインするときのポイントはありますか？

素材が揃って実際にバナーを作る段階になったら、まずは決めておいたフォントでデザインを組んでください。できあがったものを見て、「もっと雰囲気を出したい」「印象を強くしたい」などと感じるときは、コピペして文字の太さだけを変えてみます。このやり方で作れば、デザインで迷うことが減るはずです。

文字の太さは、基本的には太いウエイトのほうが文字の占有面積が増えるので、パッと見たときの視認性や可読性が担保されます。ただ、Appleのようなスタイリッシュなブランドでは、商品写真の横に太い文字がドンと大きく配置されているとちょっとカッコ悪いですよね。

そういうときは、細いウエイトで小さめの文字にすると、商品の見た目の美しさが引き立たって洗練された印象に変わります。文字は大事ですが、文字をただ大きく載せればいいというわけではないので、商品特性や訴求ポイントに応じて調整が必要です。

――カトウさんは普段どんなツールを使ってバナーを作っていますか？ おすすめのツールはありますか？

私は自由度の高いフォトショップで作ることが多いです。
ただ、ノンデザイナーさんがフォトショップを使いこなすのはハードルがやや高めなので、先ほど紹介した「Adobe Express」をおすすめします。

「Adobe Express」は、誰でも簡単にバナーなどが作れるアプリケーションで、豊富なテンプレートの中から好きなものを選んで文字や画像を差し替えられるなど、自由にリミックスできるのが魅力です。わかりやすくいうと、「Pinterest」のいじれちゃうバージョンみたいなものですね。

「Adobe Express」では、基本的にアカウント登録すれば写真素材も含めて無料で使え、商用利用も許容されています。有料会員になると、「Adobe Fonts」のフォントと「Adobe Stock」の写真が、制限なく利用できるのでさらに便利です。PCだけでなくスマホでも使えてフォントもおすすめしてくれるので手軽に使えると思います。

――バナーデザインの効果測定はどのように行ったら良いのでしょうか。

バナーデザインの効果は、ABテストで検証することができます。ただし、有料ツールは利用料金が高めで、「Googleオプティマイズ」のような無料ツールを使うにしても、初心者さんには負担が大きいかもしれません。

そういう場合は、Twitterなど使い慣れたSNSを活用するのも一案です。打ち出す内容は変えずに、写真をメインにしたものと文字をメインにしたものを用意して同タイミングで配信します。どちらのインプレッション数が伸びたかを見るなどして、判断してみてください。

余談ですが、過去にGoogleディスプレイネットワークのバナー広告を複数置いて、反応がいいのはどれか検証したことがあるんですね。結果は、クリエイティブの違いによる差はほとんどありませんでしたが、「50％OFF」や「今だけ会員登録無料」などのキャンペーン内容の違いで、成果に大きな差が出ました。

なので、クリエイティブの力だけで売り上げを上げるのはすごく難しいと思います。ただ、そうはいっても、キャンペーンの内容をしっかりデザインに落とし込めなければ訴求力が弱くなるので、クリエイティブも重視してくださいね。

――このインタビュー記事や、カトウさんの書籍を読んで、「今あるバナーを作り直してみよう！」と思った方がいらっしゃった場合、何から見直すと良いですか？

バナーでは文字がものすごく大事なので、文字から見直すことをおすすめします。デザイン経験がほとんどない人が作ったバナーは、文字サイズが小さめだったり太さは違ってもサイズは全部同じだったりすることがよくありますが、訴求力を上げるにはメリハリが必要です。

手直しする際には、訴求ポイントを3～4文字ほど抜き出し、思い切って2～3倍くらいの大きさにしてみてください。試しに幅一杯にドンと大きく置いてみると、印象が違うなとか、元のクリエイティブは文字が小さすぎたなとか、いろいろなことが見えてくると思います。

また、優先度の高い情報が大きく表示されているかどうかもチェックポイントです。バナーデザインでは基本的には文字を主体にして、画像を添えるようにレイアウトすると訴求力が高まります。文字が読みにくいとすぐに飛ばされるので、バナー制作時は、価格や日付、商品の特長、ブランド名など盛り込む内容に優先順位をつけて、伝えたいことがパッと見て理解できるデザインをめざすといいです。

――BtoCとBtoB向けでバナーの訴求要素は変わるものですか？

BtoCではバナーを見た本人が決裁者になるので、ターゲットにマッチしたものを作ればOKです。BtoBでは、担当者さんが見たあとに社内稟議を経て導入に至ると思うのでそこに違いが生じます。

たとえば「こんなお悩みありませんか？」とネガティブアプローチで作った場合、担当者さんレベルでは「自分の悩みを解決できるものだから、ぜひ導入して業務効率を上げたい」と思っても、上司の方が見たら「暗くて印象が悪いな」と感じるかもしれません。

ビジネスではとくに第一印象が大事なので、BtoBの場合は誰が見ても悪い印象を受けないように、クリーンな表現で作るといいかなと思います。

――ネットショップ内に置くバナーも、同じ考え方で作ればいいですか？

ネットショップ内のバナーは、広告的なバナーとナビゲーション的なバナーに大別されます。広告的なバナーの場合は、これまでお話してきた内容とほとんど変わらないので、同じ考え方で作ると良いです。

ナビゲーション的なバナーの場合は、統一感を持たせたほうがわかりやすいので、バナーサイズや文字の置き方、ビジュアルのテイストなど、サイト内でトンマナを合わせることをおすすめします。

――最後に、バナーデザインに取り組む初心者さんに向けて、カトウさんからのアドバイスやエールをお願いします。

「デザイン」を作ろうとすると、装飾やスタイリングについて考えてしまいがちですが、広告として大切なのは「文字情報」です。まずは文字がしっかり読めるか、サイズにメリハリがあり訴求ポイントが伝わるような工夫が重要です。

みなさんが取り扱う商品の特徴が多くの方へ届くような、魅力的なバナーデザインを作りましょう！

――カトウさんありがとうございました。