普段スマートフォンやPCを活用されている方であれば、サイトの隅に表示されている「バナー広告」を見たことがあるのではないでしょうか。小さな枠に表示されている「バナー広告」には、クリエイターのアイデアや工夫が沢山つまっていることを皆さんはご存知ですか？今回は、様々な魅力や面白さが詰まっているウェブ広告のお仕事の内容と、クリックされる「バナー広告」の秘密をご紹介したいと思います。編集・執筆 ／ AYUPY GOTO

今回のデザインの先生はこちら！

神蔵 麻鈴かみくら まりん

Designer / Director / ArtDirector

株式会社セプテーニ メディアソリューション本部クリエイティブ部
2013年に武蔵野美術大学、視覚伝達デザイン学科卒業の後、株式会社セプテーニに入社。入社以降、デザイナー・イラストレーターとして業種を問わず幅広くクライアントワークに携わる。2014年には社内表彰制度において「ベストクリエイター賞」を最年少で受賞。2015年よりデザイン業に加え、ディレクター・アートディレクターとして各広告媒体を横断した、社内の制作クオリティ向上に従事。

神蔵さん本日はどうぞよろしくお願いいたします。今回は「バナー広告」について伺いたいのですが、そもそも「バナー広告」とは、どのような広告のことを指しているのでしょうか。

インターネットを見ていて、右側や下の部分に目立つ画像がありませんか？　その画像を押すと別のサイトへ飛んで行く、あの画像がバナー広告です。バナー広告とは、ウェブページ上に表示されているインターネット広告のうち、画像やアニメーションによって表現されている広告の総称です。
規定のサイズでリンク付きの画像を表示し、クリックすることで広告主のウェブサイトへ誘導されるようになっています。静止画像だけでなく、最近ではGIFアニメーション・動画広告など動きを持ったバナー広告が多いです。

確かにいろんなサイトで「バナー広告」を見かけていますね…！バナー広告を制作するうえで、デザイナーが求められることって何ですか？

ずばりクリックされるバナー広告を作ることです！バナー広告のクリック率（CTR）によって、ページへの集客率が劇的します。もちろんバナーがクリックされた後のコンバージョン率（CVR、商品購入や資料請求などの、ウェブサイト上から獲得できる最終成果）を考える必要もありますが、まずはクリックしてもらえるバナーを作らないと次に繋がりません。

クリックされるバナー広告ですか……難しそうですね。

コピーなど画像の中に入る文章の内容も重要ですが、何よりデザインが良くなければクリックはされません。デザインクオリティをどれだけ向上できるかが、バナー広告のクリック率に関わってきます。今回はバナー広告を制作する上で、意識すべきポイントをご紹介したいと思います。

バナー広告のデザインクオリティは、なぜ重要か？

まず一ついえるのが「顧客ニーズの高まり」です。広告を出稿するにあたり、提案内容・担当者の知識経験・価格・成果……など、広告主（クライアント）に重要視するポイントを伺っていますが、近年「制作物のクオリティ」を求める企業が増えています。それは、デザインによって成果が変わるということはもちろん、１つ１つのデザインが会社のイメージをつくるブランディングにも繋がっているからなんです。

生活者の頭の中にある「記号（商品パッケージや広告デザインなどの視覚的情報）」と「価値（内容や印象、ポジショニングなどサービスそのものの価値）」が
接続されて、他社との差別化情報が成立します。バナー広告は、生活者に向けての「記号」と「価値」を発信する重要な役割なのです。なので、企業ブランディングの影響も大きいといえます。

バナー広告制作で必要な「バナー広告」の制作スキル

バナー広告に携わる方であれば、デザインクオリティしっかりと理解して、意図的につくりだせるディレクター・デザイナーにならなければなりません。デザインクオリティを向上するために必要なスキルは、大きく分けると「判断力」と「発想力」です。「判断力」というのは、コミュニケーション設計やデザインルールの視点からクリエイティブを判断できる力、そして「発想力」は、設計したコミュニケーションを実現するために最適な視覚表現を計画できる力を指しています。

バナー広告デザインの構成要素

参考文献『デザインの教室』佐藤好彦・著

バナー広告を制作するためには、まずデザインに必要な「要素」を理解する必要がありますです。デザイナーは、数多くの要素から必要な要素を選定し、組み合わせることで目指すべき表現を作り上げます。各要素の特徴を理解すれば、要素の活かし方をコントロールできます。クオリティの高いデザインはエレメントひとつひとつが丁寧に作られていて、役割としても最適なものが選ばれているのです。
1952年、米国の視覚的知覚表現領域の研究者である、Johanna Drucker氏はこのように言いました。「デザインにセオリーは必要ないが、デザイナーには理論が必要だ。」デザインに既成概念は必要ないですが、デザインを施す上での理論は必須だということです。理論的にデザインの「要素」を構成できるようになれば、より良い結果を導き出すことができるはずです。

小さな工夫でクリック率向上！制作ポイントをご紹介

ここからはビビビット社のサンプルバナー広告のデザインを通して、クリック率を向上するための制作ポイントをご紹介いたします。

ポイント1：文字｜可読性 編

（上）のバナー広告から、（下）のバナー広告に変更したことで、クリック率が向上しました。さて、（上）のバナー広告はどのような点を編集すべきなのでしょうか。

（上）のバナー広告ですが、よく見てみると①文字間が開きすぎていて読みづらい②強調すべき部分の強弱が弱い③横幅がそろっておらず、バラバラして見える……というような問題がありました。

そこで各問題点を①文字間を全体的に詰める②水色の文字を太字に変更する③文字と要素の横幅をそろえて見やすくする
上記のように対応してみると、クリック率が向上。文字のバランスを整えることで可読性をアップさせ、生活者の方々が瞬時に情報を読み取ることができるのです。

ポイント2：文字｜印象 編

フォントの選定が重要です。明朝体かゴシックか、大きさや太さなどによって言葉の印象が大きく変わってきます。伝えたい世界観のイメージを固め、より良いフォントを選定しましょう。

ポイント3：画像｜写真編集・コントラスト 編

画像の色調の調整をすることで、伝えたいイメージをつくったり、文字を読みやすくすることができます。背景色と文字色のコントラストが強いほど、文字の可読性は上がるのでユーザーに親切です。また、メッセージのテンションに合った画像に編集することも非常に重要です。

ポイント4：画像｜選定 編

画像に登場させるモデルによってもクリック率は変化します。商品との親和性がもちろん重要ですが、男性よりも女性のほうがクリック率が向上したり、無難な写真よりもユニークでインパクトのある写真のほうがクリックされるなどの結果が出ています。

ポイント5：色｜組み合わせ 編

一見、あまり変わらないように見える（上）（下）のバナー広告ですが、（上）のバナー広告を、（下）のバナー広告のように変更したことで、クリック率が向上した事例があります。さて、何が変わったことでクリック率が向上したのでしょうか。

（上）のバナー広告に並べられた画像は、色の系統が全体的に同じに見え、弱色相の偏ったアイテムが多いです。そのため、画面の印象弱くなり、ユーザーの視線を運びにくいデザインになっています。

それに比べ（下）のバナー広告は、アイテムの色相をばらつかせています。色相をばらつかせたほうがまとまりにくくなりそうに思う方もいらっしゃるかと思いますが……

色相をばらつかせつつまとめる方法があります、それは違う色相の色を使いつつ、RGBの合計値を近くすることです。光の量が同じなため、色相の違う色を複数使っても全体がまとまって見えます。

ポイント6：図形｜選択 編

インパクトとおしゃれ感がアップしそうな、サークル型をつかった（上）のバナー広告ですが、実は少し実用性に欠けています。

最近ではSNSでも多く使われている「バナー広告」。例えば、サークル型はレクタングルの比率の矩形には合うものの、横長の広告媒体にリサイズした時にハマりにくいです。

横長矩形にあわせ、たとえばサークル型をボックス型に変更すると良いでしょう。
また、図形は商品と親和性のある適切な形を選択することで、より良いイメージを伝えることができます。

ポイント7：情報整理｜優先順位 編

小さな枠の中でしっかりメッセージを伝えられるように、必要な情報や要素をしっかり整理しましょう。（左）のデザインから、いらない装飾をとり見せたい施術シーンを足して、文字の優先順位を考え見せ方を変更することで、効果の良いクリエイティブの制作が可能になります。

ポイント8：画面構成｜配置・順番 編

人は左から物を見る傾向があります。なので、コピーを強調したい場合などは、視線の流れの最初には画像ではなく、コピーを入れたほうが頭にメッセージが入りやすくなります。

ポイント9：画面構成｜配置・グループ化 編

（上）のバナー広告から、（下）のバナー広告のように変更したことで、クリック率が向上した事例があります。さて、（上）のバナー広告はどのような点を改善すべきなのでしょうか。

まず、要素がばらばらになっているので、視線を受ける先をまとめるためにグループ化します。また、左にサークル型の大きなアイキャッチを置くことで、ユーザーの目を引くことができます。

ポイント10：画面構成｜マージン 編

上下左右、各グループのマージンをそろえることで美しく見えます。最終的には自身の眼で確認してください。

「デザイン一つ変えるだけで、こんなに効果が出るなんて！」

いろんな制作ポイントをご紹介しましたが、全てを通して言えるのは良いバナー広告は伝わりやすいということです。見やすさや分かりやすさを意識して、要素を構成してみましょう。きっと良いバナー広告が出来るはずです。

バナー広告の制作は、こんなに奥が深かったんですね。これはかなり勉強になりました。何故、神蔵さんはバナー広告のお仕事にチャレンジしたのですか？

私も学生のときは「バナー広告って何？」って思っていました（笑）　広告業界の仕事に携わりたいと思っている学生がまずイメージする仕事は、テレビCMや駅のポスター広告など華やかなお仕事だと思います。それに比べたら、「バナー広告」の仕事は地味ですし面白くなさそうに見えちゃうと思うのですが、
でも最近は、生活者に「バナー広告」が歩み寄ってきていると思っていて、FacebookやTwitter、ニュースアプリなど様々なところにバナー広告が存在します。イメージもだいぶ変わり、ナチュラルにいろんなシーンで「バナー広告」が見られる時代になってきたと思っています。従来の「バナー広告」は、邪魔だと思われたり、ユーザーにとってネガティブなイメージもあったと思うのですが、様々な表現や工夫次第で、ユーザーの心にささるようなものをつくれると信じているので、今後さらに面白みが増す仕事だと思っています。

確かに、媒体によって表示するバナーの規定が違ったり、ターゲットの好みや思考にあった広告を表示する必要があり、「バナー広告」は柔軟な考え方が必要不可欠ですね。
「ウェブ広告」のお仕事に携わる魅力って何ですか。

媒体、ユーザー、クライアントといろんな人のことを考えながら、効果を追求していくことが楽しいです。また、テレビCM、ポスター広告、雑誌広告の仕事は、自身のつくったものが良かったのか悪かったのか効果が測りにくいのに対し（2016年１月現在）、ウェブ広告はデザインを少し変更するだけで、つくったものに対するユーザーの反応が数字でダイレクトにわかり、フィードバックのスピードが早いんです。だからこそお客様にも分析結果を説明しやすく、自身でも改善点が見えやすくて確実に成長できます。自分の小さな動きひとつで、大きな成果につなげることができる点が面白いです。

なるほど、同じ広告のお仕事でもそのような違いがあったんですね。最近では多くのクライアントが、効果がしっかり計れるウェブ広告に力を入れていると伺っています。

ウェブ広告は、情報を求めている人に対して、しっかりターゲティングしてデータに基づいた内容の広告が配信できるので、ユーザーに幸せを提供できる可能性が沢山つまっています。
例えば「沖縄旅行」と検索をかけたとしたら、その後どのサイトに行っても沖縄旅行のバナーが掲載されてくるような経験をしたことがある方はいませんか？それはターゲティングされているからなのですが、人によっては不愉快に感じる人もいるかもしれません。でも、本当に情報が必要な人からしたら、求めている情報を広告が提示してくれて思い出せるのでありがたいことですよね。表現と技術をつきつめたら、結果的には人を幸せにできる広告表現だと思っています。

ウェブクリエイターのお仕事の魅力を沢山知れました！神蔵さんお話ありがとうございました！

バナー広告制作で参考になるサイト一覧

バナー広告に少しでも興味を持った方は、ぜひ下記の「バナー広告のまとめサイト」をチェックしてみてください。いろんなバナーデザインをまとめて見れるので、制作の際の参考にももなりますよ。

1.バナーデザインアーカイブ

URL: http://banner.keizine.net

業種・カラー・サイズでバナーデザインを絞って検索することができます。スクロールすればするだけ、沢山のバナーを表示してくれるので、様々なバナーデザインをまとめて見たい時におすすめです。

2.BANNER LINKS

URL: http://nonamedesign.info/banner

バナーリンク集です。比較的におしゃれでスタイリッシュなバナー画像がまとまっています。サイズ・カテゴリ・カラーで絞ってデザインを確認することもできます。

3.Retrobanner

URL: http://retrobanner.net

サイズ・色・業種・テイストからバナーを絞り込む事ができます。他のバナーサイトと比べて、1番数が多いです。

4.WEB-BANNER-GALLERY

URL: http://web-banner-gallery.com

海外のバナーデザインを見る事ができるまとめサイトです。サイズ・カラーで検索できます。

5.Pinterest

URL: https://www.pinterest.com

「banner」や「バナー」と検索すると、比較的おしゃれで女性的なバナーデザインが沢山表示されます。バナーと一緒にランディングページのデザインも表示されます。

最後に

ウェブページやアプリに表示されているバナー広告は、あなたがアイデアをひとつ加えるだけで、商品を大ヒットに導くことができる可能性を秘めたお仕事です。自身の作った物がどれだけ世の中の役に立っているのか、成果を計りたい方はバナー広告制作のお仕事をおすすめします。バナー広告のスキルをつければ、IT・Web企業で求められる人材へと成長できますよ。ぜひチャレンジしてみてください。

著者

後藤あゆみ

はたらくビビビット編集長。 フリーランスで“『ツクル』を仕事にしたい未来の子供たちのために。”を、コンセプトとして活動。クリエイター支援、スタートアップ支援を行っています。おばあちゃんになるまでに美術館をつくるのが夢です 。

記事一覧へ