4/20(Sat)
Webサイトの改善施策の一環としてバナー画像を制作したり、バナー広告を出稿する場面で「効果的なバナーの作り方を知りたい」と考える方も少なくありません。またWebサイト運用に携わる担当者として、バナーの役割について知っておきたいと考えている方もいるでしょう。
ここではSchooオリジナル授業『人を動かすバナーデザインの原理原則』の内容を参考に、バナーの役割や制作方法について、初心者でもわかりやすいよう、まとめて解説します。
バナー（Banner）とは「旗」や「のぼり」を意味する言葉です。転じてWeb業界では、特集やキャンペーン情報を告知するためにWebページ上に掲載される画像や、検索結果画面やSNS上に表示される広告画像を意味します。
Webサイト上のバナーは基本的に関連ページのURLにリンクされているため、ユーザーが興味関心を引かれたバナーをクリックすれば、バナー画像に掲載されている情報に関連したWebページに遷移する構造になっています。
つまりWebサイトや特定のプラットフォーム・サービスをを活用するユーザーに対して、店前に掲げられているのぼりのように、情報をわかりやすく伝える役割を担うのが「バナー」なのです。
スマートフォンやPC、タブレット端末などのデジタルデバイスを用いていつでもインターネット環境に接続できる現代では、企業・組織や個人からユーザーに向けて、多くの情報が発信されています。このような情報過多の時代に、バナーは特定の情報をユーザーに注目させたい時に重要な役割を果たすのです。
またユーザーがさまざまな情報を見なくてはならない状況にある時代背景から、特定の情報にユーザーが注目しやすくなるよう、情報を伝える目的（バナーを制作する目的）を明確にした上で、必要な情報を厳選し、ユーザーが違和感なく画像を視認できるようにバナーをデザインすることが求められています。
バナーは情報が氾濫する現代において、プラットフォームやサービスを利用するユーザーに有益な情報をわかりやすく伝える、Web上の「のぼり」であると解説してきました。次ではバナーが使われる代表的な場所を3つご紹介します。
複数のページで構成されているホームページでも、特定のテーマの情報をまとめたページや、関連ページへ移動しやすくするためにバナー（サイト用バナー）が使われます。
サイト用バナーを制作する際のポイントは、サイトのイメージを踏襲した色味やフォントを使うことです。また関連ページへの導線を目的としたバナーの場合は、バナーをクリックした先のページ概要をわかりやすく伝えられる文章（コピー）が重要です。
このように制作されたサイト用バナーは、ホームページを訪問したユーザーが次の行動（ホームページの運営会社について知る、季節や分野など特定のテーマに絞った特集ページを閲覧する等）を起こすための道しるべになり、商品の売上・商談数アップに繋がるでしょう。
TwitterやInstagram、FacebookなどのSNSでもバナーが使われています。SNSで使われているバナーの目的はECサイトや企業、商品やサービスの宣伝広告です。
バナー広告を配信するプラットフォームによって、利用しているユーザーの年齢層や興味関心が異なるため、発信する情報を求めているユーザーに合った配信先の選択や、プラットフォームの規定に合ったサイズのバナーを制作することがポイントになるでしょう。
Webサイトの広告枠（ディスプレイ広告）でもバナーが使われます。ディスプレイ広告で使われるバナーの目的は、広告枠を見たユーザーを自社サイトに誘導し、商品やサービスの購入・問い合わせに繋げることです。
ディスプレイ広告のバナーはターゲットにしたユーザーのニーズに合った情報が掲載されているか、商品やサービスのイメージに合ったデザインやフォントが起用されているかなど、バナーのクオリティによって効果が大きく変動する傾向があります。
そのため、広告を配信する媒体のユーザーと自社がターゲットにしているユーザー層が合っているか、訴求したい情報をわかりやすく掲載することがポイントになるでしょう。
ここまでバナーのイメージがつかめるよう、Webサイトにおけるバナーの概要や、バナーが使われる場所について解説してきました。ここでは、バナーに関する知識を更に深めるため、バナーの役割・目的を発信者と受け手の視点から解説します。
バナーは画像とテキストを用いて、企業や商品・サービスに関する情報をわかりやすく視覚的に伝えられる効果があります。また、バナーはここまで見てきた通り、ホームページやディスプレイ広告、SNSなど様々な場面で活用ができます。
そのため発信者にとってバナーは、発信したい情報の内容やターゲットに合ったプラットフォームを選び、効果的なデザインを制作することで、伝えたい情報を強調して届けるための手法になるのです。
バナーに掲載された情報やデザインはメリハリがついている傾向にあり、多くの情報を取捨選択しなくてはならない受け手に負担がかからない状態で情報を伝える役割を担っています。
受け手の負担軽減の背景には、自社の情報や商品・サービスを効果的に訴求したい発信者によって、伝えたい情報が厳選されて掲載されている点が挙げられます。
バナーのサイズには全体的なルールはありませんが、広告を出稿する媒体によって推奨サイズが異なります。
そのため、Webサイト上の広告枠に出稿する際、デザイナーや広告運用担当者は出稿先の規定に合ったサイズのバナーを用意する必要があるのです。
ここではバナーサイズの国際基準を作っているIAB（Interactive Advertising Bureau：米インターネット広告協会）が定める規格（※）に沿って、代表的なバナーサイズやルールを解説します。
※参照：IAB Technology Laboratory「 Fixed Size Ad Specifications（2017）
レクタングル（Rectangle：矩形）はディスプレイ広告によって収益化をしているWebサイトでよく使用されるバナーサイズで、代表的なサイズは300×250pxです。
Webサイトのサイドカラム（サイドバー）や記事の下に横に2つ並べて表示される（ダブルレクタングルと呼ばれる）場合が多いでしょう。
表示デバイスではパソコン・スマートフォン両方に対応しており、ディスプレイ広告ではGoogle広告のGDYやYahoo!のYDNにも対応しているため、汎用性の高いバナーサイズだと言えます。
スカイクレーパー（skyscraper：摩天楼）はWebページ内の縦型スペースに出稿される広告や特集ページ誘導用のバナーサイズを指します。代表的なサイズは以下の2通りです。
スカイクレーパーは視覚的に認知されやすいため、ブランド認知を目的に制作されるバナーサイズに多いと言えるでしょう。
ビルボード（billboard：広告板）はWebページ内に出稿されている横長の広告用バナーサイズで、代表的なサイズは728×90pxです。
多くの場合はWebページのヘッダー付近に掲載されており、Googleのディスプレイ広告においてはビッグバナーやスーパーバナーと呼ばれることもあります。
ここまでの内容でバナーの役割や代表的なサイズなど、Webサイトにおけるバナーの概要を解説してきました。次ではバナー制作の現場で役立つ知識を解説します。
バナーは自社や自社が扱う商品・サービスの情報を適切な顧客に届け、利用や購入のきっかけになるタッチポイントです。
また「バナーの重要性」でも解説したように、日々大量の情報を目にしているユーザーに対して、バナーに注目してもらうためにはわかりやすい文章と目に留まりやすいデザインが必要不可欠だと言えるでしょう。
そのため、バナーを制作する工程の中で最初にバナー制作の目的（バナーをクリックしたユーザーにどのような行動を取ってほしいか）とターゲットを設定します。
＜ バナー制作目的の例 ＞
この工程を行うことで、バナーに載せる必要最低限（ユーザーが認知しやすい量）の情報と、情報を届けたい顧客の嗜好に合ったデザインが決まります。
バナー制作の目的とターゲットを設計したら、伝えたい訴求内容を絞り込みましょう。
バナー制作では限られたスペースの中で伝えたい情報を的確に表現する必要があります。そのため、効果的なバナーを制作するためには、伝えたい情報の中にも優先度を付け、取捨選択の上で強弱をつけたデザインが必要になります。
後段でも解説しますが、訴求内容を整理することで、フォントサイズのメリハリや、掲載する情報の優先順位をつけやすくなります。
最後に実際にバナーのデザインを制作します。デザイン制作は自社内で行う場合とバナーデザインを請け負っているクリエイターや企業に外注するパターンが考えられるでしょう。
自社で制作する場合は、社内のデザイナーに依頼するか、ノンデザイナー向けツールで制作します。
また外注する場合は、複数の外注先にコンタクトを取り、制作したいバナーのテイストを得意としているか、依頼目的に合ったバナー制作を得意としているかなど比較検討すると良いでしょう。
ここでは自社内または個人でバナーを制作する場合にバナーデザインを成功させるためのポイントを「配色」「フォント」「キャチコピー」の3つの視点から解説します。
色はバナーの受け手に対して、直感的に雰囲気を伝える役割を担います。そのため、効果的なバナーを制作するためには次で解説する配色のポイントを守ることが重要でしょう。配色のポイントについて、以下で詳しく解説します。
受け手がバナーに抱く印象に統一感を感じられず、違和感を覚えることになるため、色を増やしすぎないようにしましょう。
バナーデザインで配色に迷った時は、同じカラー（色相）を統一しつつ、トーンで変化が付けられる「ドミナントカラー配色」を意識すると異なる印象の色が混在しにくくなります。
またバナーの制作目的が商品やサービスの認知拡大やブランディングである場合は、演出したい雰囲気に合ったカラー選びも重要です。
例えば、訴求したい商品の色が青や紫などの寒色であるのに対し、背景色を赤やオレンジなどの暖色で制作してしまうと、バナーデザイン全体に統一感が生まれず、受け手は違和感を感じやすくなってしまうでしょう。
加えて商品やサービスに抱いて欲しいイメージと齟齬が生まれてしまう可能性もあります。
効果的なバナーデザインにおいて、重要なのは色の選び方だけではありません。
限られたスペースに美しい割合で色を配置する「配色」にも注意しましょう。一般的に美しい配色の割合は「7:2:1」と言われており、それぞれ以下のとおり割り当てられています。
バナーデザインにおいて、受け手が文字情報を目にする際の印象を決める役割を担うのがフォントです。フォントのポイントについて次で詳しく解説します。
使用するフォントを増やしすぎると、前述の配色と同じようにバナーデザイン全体に統一感が生まれにくくなり、受け手が違和感を覚えるきっかけになってしまいます。
そのため、バナーデザインに使用するフォントは1種類か、合成フォント（違和感がないフォントの組み合わせ）を利用しましょう。
またさまざまなフォントの中から、訴求したい商品やサービスのイメージやテーマに合ったフォントを選ぶことで、洗練されたデザインに仕上がります。
限られたサイズの中で受け手に対して効果的に情報を伝えるために、フォントサイズのメリハリは重要なポイントです。
デザイン制作に取り掛かる前に決めた「バナー制作の目的」に立ち返って、バナーデザインで伝えたいテキスト情報が目立つように、強調しましょう。
フォントサイズにメリハリをつける方法は以下のとおりです。
上記の手順で掲載するテキスト情報を整理・デザインすれば、必然的に一行に収める情報量が少なくなるので、受け手がテキスト情報に集中しやすいようなデザインに仕上がります。
キャッチコピーとは、バナー内で受け手に訴求したい内容を端的に表現した文言のことです。効果的なキャッチコピーはバナーのクリック率に繋がります。キャッチコピーのポイントについて、次で詳しく解説します。
伝えたい内容の優先順位を決めておくことで、バナーの目的に合った「目立たせるべき情報」が判断しやすくなります。訴求したい商品やサービスに関する情報の中から、バナーの目的を達成するのに必要な情報を絞り込みましょう。
また優先順位を決めにくい場合は以下の方法がおすすめです。
バナーデザインのポイントを把握できたところで、バナーデザインの際に使えるデザインツールを3つご紹介します。1〜2はノンデザイナーも使いやすいデザインツールになっているので、ぜひチェックしてみてくださいね。
Canvaは25万点以上のテンプレートからInstagramをはじめとしたSNS投稿用画像やチラシ用画像などが感覚的に作れるデザインアプリです。
SchooではCanvaの使い方に関するまとめ記事や授業を公開しています。
「ノンデザイナーだけどバナー制作にチャレンジしたい」と考えている方はぜひ、以下の記事をチェックしてみてくださいね。
Adobe Expressは、Adobe社が提供するAdobe Creative Cloud（PhotoShopやIllustratorなどの定番クリエイティブツールを利用できるサブスクリプションサービス）の必要最低限の機能を搭載したデザインアプリです。Photoshopやillustratorと比較するとシンプルな操作画面が特徴です。
「ノンデザイナーだけど、後々はAdobeツールも使ってみたい」と考えている方はぜひ、以下の記事をチェックしてみてくださいね。
Adobe Photoshopとillustratorはイラストやデザインの制作に使われる、Adobe社が提供するデザインアプリです。
前述のCanvaやAdobe Expressとは異なり、デザイナー向けのツールなので、色相のグラデーションやデザインの自主制作など、細かい部分までバナーのデザインにこだわりたい方や、ノンデザイナー向けツールを使いこなせている方に向いているでしょう。
最後に、Webサイトに掲載するバナーや広告枠に掲載するバナーを制作したいと考えている方におすすめのSchooオリジナル授業を4つまとめてご紹介します。
＜ コース概要 ＞
このコースでは、ノンデザイナーの方を対象に、本業だけでなく副業にも役立つ「バナーデザインの基本原則」を中心にご紹介し、皆さんとデザインのロジックを探求します。noteやYouTube、ブログ、ECサイトなどで活用できるバナーデザインの基礎を学びたい方におすすめのコース授業です。
先生プロフィール
カトウヒカル
Webデザイン事務所kanvasのWebデザイナー。 これまで100サイト以上の制作に関わり、半数はデザインからHTML/CSSコーディング、CMSの組込までワンストップで対応。 デザインセンスをロジカルに学ぶオンライン講座「kanvas study plaza」を主催。「思わずクリックしたくなるバナーデザインのきほん」の著者。
＜ コース概要 ＞
このコース授業では全2回の授業をとおして「Canva」の機能を活かしたSNSアイコンやバナーの作り方をご紹介します。ノンデザイナーだけど、マーケティング業務の一環でアイコンやバナーをはじめとした画像の制作をする必要がある方におすすめのコース授業です。
先生プロフィール
扇田 美紀（mikimiki）
株式会社Ririan&Co. 代表/Canva公式アンバサダー 2013年、フリーランスWebデザイナーとして独立。 2020年SNSマーケティングコンサル、 Web制作、グラフィックデザイン作成を 行う株式会社Ririan＆Co．を創業。 チャンネル登録者9万人のYouTube 「mikimiki Web School」やオンライン クリエイティブスクールRirian School.WebデザインやWordPressの情報を配信中。 日本初のCanva公式アンバサダーとしても活動中。
＜ コース概要 ＞
このコース授業では全３回の授業を通して「Adobe Express」のテンプレートを使った画像の作成方法と手順を学びます。イラスト、ポスターSNSアイコンやバナーをはじめとしたデザインを制作したいノンデザイナーの方におすすめのコース授業です。
先生プロフィール
北沢直樹（きたざわ・なおき）
イラストレーター・キャラクターデザイナー。アイドルや声優、アーティストのキャラクター、グッズデザイン。「ONE PIECE」「攻殻機動隊S.A.C」や女子プロレス「スターダム」のデフォルメキャラクターデザイン。 TBS「グッとラック！」キャラクター&コーナータイトルデザインなど。AdobeMAX2021'AdobeCoCreate'イラストレーターに選出。
＜ コース概要 ＞
このコース授業ではAdobe Photoshopの基本操作から応用操作まで、実践しながら学びます。今まで、Photoshopは難しいのでは？と思っていた方、また実際に触ってみたけど挫折してしまった方におすすめです。
先生プロフィール
境 祐司（さかい・ゆうじ）
Instructional Designerとして企業や学校を対象に教育設計や教育マネジメント、クリエイティブ活動におけるAI活用の実証実験に携わる。2017年よりAdobe Community Evangelistとしてイベントなどに登壇。 また、Adobe Education Leader（AEL）としてクリエイティビティを高めるための教育活動に従事。 著書に『実習で身につく! 新しいPythonの教科書 ~Pythonの基本スキルから機械学習の初歩まで』 『新しいJavaScriptの教科書』 『Adobe XD プロトタイピング実践ガイド ～ユーザーの要求に応えるUI/UXデザイン』など多数。
バナーはさまざまな情報が溢れるインターネット上で、発信者が伝えたい情報をターゲットに効果的に伝えられるツールの1つです。
企画の段階ではターゲットやバナーの目的を明確に設定し、制作では企画に沿ったデザインを制作するようにしましょう。Schooはかんたんな会員登録で1授業無料で見れます。登録をお待ちしていますね。
