バナー広告
[Wikipedia|▼Menu]
.mw-parser-output .hatnote{margin:0.5em 0;padding:3px 2em;background-color:transparent;border-bottom:1px solid #a2a9b1;font-size:90%}

この項目では、ウェブページの要素について説明しています。については「バナー (旗)」を、その他の用法については「バナー (曖昧さ回避)」をご覧ください。

燃焼装置「バーナー」とは異なります。

ウィキペディアにおけるバナーについては、「Wikipedia:バナー」をご覧ください。
468 x 60 ピクセルのバナーの一例

バナー (banner) はウェブページ上で他のウェブサイトを紹介する役割をもつ画像アイコンの一種)のこと。本来、旗印を意味し、ウェブページ上で広告が目立つように使われたことから、この通名で呼ばれ定着した。

主に広告宣伝用に作られ、ウェブサイトへのハイパーリンク用にも利用される。画像にはリンクを張り、クリックするとそのバナーが紹介するサイトを表示するようになっている。

横長帯状のものが一般的だが、近年は縦長のものや正方形に近いものも多い。

英語の banner は旗の種類で、本来は正方形の紋章旗だが、広く横断幕(のぼり)などの意味に広がり、帯状の広告画像が宣伝用の垂れ幕を連想させることからこの名がついたとされ、英語では本来のバナーと区別するためにウェブバナーと呼ばれる事もある。

日本では、基本的に「軍旗」「幟」「横断幕」をバナーとは呼ばないので、バナーだけで呼ぶことが多く、ウェブバナーとわざわざ呼ぶことは比較的少ない。また、日本ではしばしば「バーナー」と誤記されることがある。
広告としてのバナー

広告として使われる場合、画像には広告主のサイトリンクが張られており、ユーザーがクリックすればジャンプするようになっている。「ディスプレイ広告」も参照
仕組み

バナー広告が含まれるウェブページを閲覧者が開くと、ページ内にバナー画像が表示される。これをインプレッション (impression) と呼ぶ。閲覧者が広告内容に興味を持つなどしてバナーをクリックすると、広告主のサイトへとジャンプする。これをクリックスルー (click-through) と呼ぶ。さらに閲覧者が広告主のサイトで取り扱われている商品に興味を持ち購入すれば、ここで広告主にとっての利益となる。

広告掲載者が広告収入をいつ得るかに関しては大きく分けて3タイプがある。
表示報酬型(インプレッション型報酬)
インプレッションが発生した回数、すなわち広告掲載者のページが開かれた回数に応じて報酬が支払われる方式。1000インプレッション単位で計算されることも多い。掲載者にとっては、多数の人が何度も訪れてくれるようなコンテンツを作成することによって報酬を伸ばせる。広告主にとっては、自社のサイトを見る閲覧者が少なくても報酬を支払わなければならないという欠点がある。
クリック報酬型(クリックスルー型報酬)
クリックスルーの回数に応じて報酬が支払われる方式。クリック保証型という呼称もあり、この語は正しくは広告が一定のクリック数を消費するまでの間配信される広告の契約方法を指すが、クリックスルー型報酬と同義で使われることも多い。広告主は支払う報酬と引き換えに確実に自社のサイトを見てもらえるという安心感が付随するのが特徴。「
クリック報酬型広告」も参照
成果報酬型(売上型成功報酬)
バナー広告を経由して、閲覧者が商品やサービスの購入を行った回数や売上に応じて報酬が支払われる方式。広告主としては、利益が得られたときのみ報酬を支払えばいいということで無駄な広告投資の心配がない反面、掲載側に報酬が入る確率は低く、掲載してもらいにくいことがある。「成功報酬型広告」も参照
歴史

最初のクリック可能なウェブ広告(後に「バナー広告」という用語で知られるようになった)は、1993年に最初の有償ウェブサイトのひとつだったGlobal Network Navigator(GNN)が、シリコンバレーの法律事務所に販売されたとされる[1][2][3]

長年に渡り世界初のウェブバナー広告とされていたのは、1994年10月27日にウェブ雑誌HotWired上に掲載された、電話会社AT&Tのものであった[4]。別の出典でも1994年10月にHotWiredがクアーズジーマキャンペーンで最初のウェブバナー広告を使ったという記載がある[5]。ところが、1994年10月24日に開始されたタイム・ワーナーのウェブサイト「Pathfinder」は、HotWiredと同じ週の3日前にバナー広告が掲載されていたという[6]。バナー広告のコンセプトは、タイム・ワーナーとHotWiredで別々に開発されたようだ[7]。従って、バナー広告を表示した最初のウェブサイトは、HotWiredの数日前に立ち上げられたタイム・ワーナーのウェブサイトということになる。

引き続きIBMスプリントMCIボルボなどの各社が次々とHotWiredと広告契約を結び、以後バナー広告は爆発的に広まった。ほどなくしてアニメーションGIFなどにより多少の動きをもたせた広告も登場した。

最初の中央管理による広告サーバは1995年7月にFocalink Communicationsによってリリースされ[8]、オンライン広告の管理、ターゲティング、追跡が可能になった。1996年1月にNetGravityからすぐにローカル管理の広告サーバがリリースされた[9]。広告サーバの技術革新は、インプレッションベースのオンライン広告の販売とともに、1994年から2000年までのウェブ業界におけるウェブ広告の急増を促進し、このビジネスの経済的基盤を盤石にしていった。21世紀初頭にGoTo.com(後のオーバーチュア、そしてYahoo!、そしてGoogle AdWordsプログラムのマスマーケティングで広げられた)によって導入された新しいオンライン広告モデルは、インプレッションではなく広告へのレスポンスの追跡に重点が入れられていた。

バナー広告の積極的な利用により利益を上げ、インターネットブームの到来に寄与したのがYahoo!やネットスケープコミュニケーションズである。Yahoo!はウェブディレクトリ検索エンジンといったサービスを無料で提供する一方でバナー広告を掲載し、バナーを中核に据えたビジネスモデルを構築した。その後Yahoo!の成功を手本にして様々なサービスが立ち上げられ、インターネットの可能性は大きく広がった。

しかしその後、ユーザーがバナー広告に対する「耐性」をつけたことや、インプレッション回数に対して0.05%ともいわれるクリックスルー回数というユーザー側の反応の低さから、ウェブでの広告の新しい形態を模索する動きもある。また注目度を高めるために従来よりも広告のサイズを大きくしたり、Adobe Flashや動画などを用いて多彩な手法と表現を取り入れている広告も増えている。
画像の大きさIABが定める標準広告サイズ。このイラストは縮小表示されている。実際のサイズを表示

バナー用画像の大きさは自由に決めても構わないが、オンライン広告の業界団体IAB (Interactive Advertising Bureau) では大きさに関するガイドライン、Interactive Marketing Units を設けており、実際2012年の時点で販売されるバナー広告の80%以上がこれに従っている[10]。IABが標準化する前は、バナー広告には250を超えるさまざまなサイズが使われていた[11]

日本ではIAB規格が制定される前に普及した、幅400 x 高さ40 ピクセル、幅200 x 高さ40 ピクセル のものも広く用いられている[要出典]。

2007年のIABガイドラインは以下の通り[12]

標準バナーサイズ。太字の項目は元々IABのUniversal Ad Package (UAB) の構成要素[13]。灰色の項目は2011年のガイドライン更新で削除された[14]。アドユニット名幅 / px高さ / pxアスペクト比
レクタングルとポップアップ[注釈 1]
ミディアムレクタングル3002506:5
スクエアポップアップ2502501:1
バーティカルレクタングル2404003:5
ラージレクタングル3362806:5
レクタングル1801506:5
3:1 レクタングル[注釈 2]3001003:1
ポップアンダー[注釈 2]72030012:5
バナーとボタン
フルバナー4686078:10
ハーフバナー2346039:10
マイクロバー883188:31
ボタン1120904:3
ボタン2120602:1
バーティカルバナー1202401:2
スクエアボタン1251251:1
リーダーボード[注釈 3]72890728:90
スカイスクレイパー[注釈 1]
ワイドスカイスクレイパー1606001:3.75
スカイスクレイパー1206001:5
ハーフページ[注釈 4]3006001:2

ノート^ a b 2000年初頭に追加されたグループ。
^ a b 2007年に追加[10]
^ 2003年に追加[15][16]
^ 2004年に追加[16][17]

上で太字で表示されているものはユニバーサル・アド・パッケージ (UAB)のサイズである[18]。背景が灰色で表示されているものは2011年の改定で削除された[19]。このガイドラインは、広告パフォーマンステストの結果得られる消費者の反応の変化、よく使われるデバイスやメディアタイプの変化などを考慮して2年毎に見直しがかかるため、常に最新の情報を参照する必要がある。

2015年、IABはHTML5を考慮したディスプレイ広告とモバイル広告のガイドラインを発表した[20]

2017年、IABは、サイズ調整可能な広告 (レスポンシブ広告) フォーマットを取り上げた新しいガイドラインと、拡張現実(AR)、仮想現実(VR)、ソーシャルメディア、モバイルビデオ、絵文字広告メッセージング、360度動画広告などの新しいデジタルコンテンツエクスペリエンスのガイドラインも発表した[21][22][23]

固定サイズのガイドラインは以下の通りである[24]

アドユニット名固定サイズ (px)
ビルボード970 x 250
スマートフォンバナー300 x 50、320 x 50
リーダーボード728 x 90
スーパーリーダーボード/プッシュダウン970 x 90
ポートレイト300 x 1050
スカイスクレイパー160 x 600
ミディアムレクタングル300 x 250
120x160120 x 160
モバイルフォン インタースティシャル640 x 1136、750 x 1334、1080 x 1920
モバイルフォン スモールバナー120 x 20
モバイルフォン ミディアムバナー168 x 28
モバイルフォン ラージバナー216 x 36

数字の単位はすべてピクセル(px)。
リンク用看板としてのバナー

日本においてはサイト間でリンクを張る際、リンク先のサイトの看板としての画像のこともバナーと呼ぶことが多い。

欧米ではこの用途で用いられる画像はボタン (button) と呼ぶことが多い。バナーとボタンの境界は曖昧だが、Full Bannerなどのサイズは看板として用いられることは少ないことからも、広告に用いられる比較的大きく細長いものをバナー、小さめのものをボタンと呼び分けるのが一般的である。なお、「ボタン」の名称は、Netscape Navigatorのバナーがエンボスで浮き出たようなデザインになっていたことに端を発するとの見方、クリックすると他のページへ飛ぶという動作から連想されて生まれたとの見方などがある。
画像の大きさ

看板という性質上大きさは制作者の自由である。しかしリンク集などに並べて使用されることが多いことから、可能ならば一般的なサイズのものを準備しておくとよい。

世界的にもっとも一般的なのは 88 x 31 ピクセルの Micro Bar 型。これに加え日本では 200 x 40 ピクセル、100 x 60 ピクセルのものが普及している。200 x 40 の大きさを考案したのはWoody-Rinnである。 80 x 15 ピクセルのものもある。
バナーの使用

使い方としては、リンク集にてサイトの紹介の横に掲載したり、サイトのトップページなどに掲載してリンク先のサイトへの応援を表明したりなど。各サイトのバナーは、そのサイトのアバウトページやリンク集のページなどで配布していることが多い。

リンク集のデザインは当然各サイトによって異なる。幅広いケースに対応できるように、バナー作成者は大きさの異なるバナーを複数準備しておくとよいだろう。その際 Micro Bar などの広く普及している大きさを含めておくのが望ましい。

他サイトのバナーを自サイトで使う場合には、画像データをどこに置くのかという問題がある。すなわち、相手のサーバにあるデータを直接参照するのか(いわゆる直リンク)、データを自分のサーバに移すのかということである。自分のサーバに置いた場合相手のサーバに負担をかけないという利点がある。また、自分のサーバ上のバナーを指定したHTMLソースを準備しておくと、リンクを張りたい人はそのソースを自分のページにコピー・アンド・ペーストするだけでバナーを設置できるという利点がある。
バナーにおける問題.mw-parser-output .ambox{border:1px solid #a2a9b1;border-left:10px solid #36c;background-color:#fbfbfb;box-sizing:border-box}.mw-parser-output .ambox+link+.ambox,.mw-parser-output .ambox+link+style+.ambox,.mw-parser-output .ambox+link+link+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+style+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+link+.ambox{margin-top:-1px}html body.mediawiki .mw-parser-output .ambox.mbox-small-left{margin:4px 1em 4px 0;overflow:hidden;width:238px;border-collapse:collapse;font-size:88%;line-height:1.25em}.mw-parser-output .ambox-speedy{border-left:10px solid #b32424;background-color:#fee7e6}.mw-parser-output .ambox-delete{border-left:10px solid #b32424}.mw-parser-output .ambox-content{border-left:10px solid #f28500}.mw-parser-output .ambox-style{border-left:10px solid #fc3}.mw-parser-output .ambox-move{border-left:10px solid #9932cc}.mw-parser-output .ambox-protection{border-left:10px solid #a2a9b1}.mw-parser-output .ambox .mbox-text{border:none;padding:0.25em 0.5em;width:100%;font-size:90%}.mw-parser-output .ambox .mbox-image{border:none;padding:2px 0 2px 0.5em;text-align:center}.mw-parser-output .ambox .mbox-imageright{border:none;padding:2px 0.5em 2px 0;text-align:center}.mw-parser-output .ambox .mbox-empty-cell{border:none;padding:0;width:1px}.mw-parser-output .ambox .mbox-image-div{width:52px}html.client-js body.skin-minerva .mw-parser-output .mbox-text-span{margin-left:23px!important}@media(min-width:720px){.mw-parser-output .ambox{margin:0 10%}}

この節には独自研究が含まれているおそれがあります。問題箇所を検証出典を追加して、記事の改善にご協力ください。議論はノートを参照してください。(2013年5月)
「en:Banner blindness」も参照
ユーザービリティ・アクセシビリティ

バナーはその多くが情報の提供を画像内で行うため、スクリーンリーダーテキストブラウザを使う場合に情報が伝わりきらないなど、アクセシビリティ面での問題がある。


次ページ
記事の検索
おまかせリスト
▼オプションを表示
ブックマーク登録
mixiチェック!
Twitterに投稿
オプション/リンク一覧
話題のニュース
列車運行情報
暇つぶしWikipedia

Size:42 KB
出典: フリー百科事典『ウィキペディア(Wikipedia)
担当:undef