--- title: バナーとは description: バナーとはについての用語解説です。 --- [用語集 | ECサイト構築パッケージSI Web Shopping ](https://siws.dgbt.jp/glossary) # [バナーとは](https://siws.dgbt.jp/glossary/banner) 作成者: [株式会社DGビジネステクノロジー](https://siws.dgbt.jp/glossary/author/株式会社dgビジネステクノロジー)｜2024.04.18 バナーとは、Webサイトやアプリ内に表示される画像のうち、クリックを誘導する画像のことを指します。 商品の画像や何かを説明するための画像とは異なり、ページへの遷移を促すために設置されている画像をバナーといいます。 ですからバナーとは「リンク付きの画像」と言ってもいいでしょう。 バナー（banner）はもともと「旗」や「のぼり」という意味の言葉です。 見て欲しいページの画像を出して誘導する様が実店舗に来てもらうためののぼりのようなので、こうした画像をバナーと呼ぶようになりました。 ## バナーの目的 バナーの一番の目的はリンク先のサイトやページへ誘導することです。 要は画像をクリックしてもらうことが、バナーの目的です。 通常のテキストリンクではなく、目立つ画像をリンクとして用意することでユーザに気付いてもらい、クリックを誘導します。 ですので、いいバナーと悪いバナーはどれくらいクリックされる率が高いかで判断されます。もちろんバナーを設置する場所によってクリック率は異なるのですが、同じ場所に設置するバナーであっても、バナーのデザインによってクリック率は変わってきます。 同じ場所のバナー画像のどちらが効果高いかを検証する方法をA/Bテストと言います。 ですが、同じバナーでもバナー広告（ディスプレイ広告）と呼ばれるような広告では、クリックしてもらうことだけが目的ではなく、ユーザの目にたくさん触れることで認知度を上げるという目的を持っています。 ## バナーの種類 バナーには大きく、自社サイト内に設置するバナーと、他のサイトに掲載して自社サイトへ誘導するバナー広告の2種類があります。 ### 自社サイト内に設置するバナー 主に特集ページやキャンペーンページなど、今特に見て欲しいページへ誘導するために使われます。 また、こうしたサイト運営者側の都合だけでなく、ユーザ側の利便性を高めるためにもバナーは使われます。 例えば、ブランド一覧のページがあったとして、それらがすべてテキストリンクだと直感的に探しづらいものです。 テキストリンクではなくブランドの画像のバナーで一覧を用意することで、視覚的に探しやすい一覧ページにすることができます。 ### バナー広告 Webサイトのあちこちに、画像付きの広告を目にしたことがあると思います。 Web広告には検索結果に下に表示される検索連動型広告の他に、このように画像付きで表示されるバナー広告（ディスプレイ広告）があります。 これらのバナー広告はGoogleやYahoo!といったDSP、あるいはfacebookやTwitterなどSNSに広告を出稿することで掲載されます。 これらの広告はクリックしてもらい、掲載している商品を購入してもらうことを目的としているものもあれば、先述の通り見てもらうことを目的としていることもあります。 イメージとしては電車の中釣り広告のようなもので、その場で具体的なアクションを誘発するというより、記憶に留めてもらいその後のアクションの手助けになることを狙ったものとなります。 バナー広告はこちらのページでも解説しています。 [バナー広告とは](https://siws.dgbt.jp/siws/glossary/banner-ads) ## バナーのサイズ 自社サイトに設置するバナーには決まったサイズがなく、制約なく作成、設置することが可能です。 もちろん小さ過ぎては気付いてもらえないですし、大き過ぎてはサイト全体のデザインと合わないこともあるので、デザイン上適切なサイズというものは存在しますが、これでないとならないというものはなく、横長のものもあれば、正方形のものもあれば、縦長のものもあります。 一方バナー広告では、自社サイトでないところに掲載されるので、サイズの制約があります。 これらのサイズは媒体によって異なりますが、300×250のサイズがもっとも目にするいわゆるバナー画像のサイズでしょう。 他にももっと横長の728×90であったり、縦長の120×600など様々なサイズが決められています。 全種類用意した方が、掲載される箇所が増えるのですが、多いものだと10種類以上のサイズとなるので、なかなかすべてを揃えるのは大変です。 今ではレスポンシブ広告と呼ばれる、1.91:1サイズの画像だけで、いろいろな形で掲載してくれるものが登場したこともあり、以前と比べると多数のバナー画像を用意する手間は少なくなってきました。 ## バナー画像の形式 バナー画像はjpegやpngなど静止画の画像であることが一般的です。 ですが目立たせることを目的にgif形式のアニメーションを利用することもあります。 少しでも動きがあると、人間はつい目で追ってしまうので、その分気付いてもらいやすくなりクリックしてもらうことが期待できます。 gifアニメを作るには静止画を作るよりもどうしても手間がかかってしまうのですが、以前と比べるとバナー画像をかんたんに作成できるサービスも増えてきたので、それらを活用すると効率的に作成することができるでしょう。 ## バナーの作り方のコツとポイント バナーを作るサービスや方法は様々ですが、作り方のコツを押さえておくことで作成時間を短縮し、大きな効果を得ることができます。 ### 目的・役割を明確にする バナーの目的・役割は「ユーザの目を引くこと」と「目的のページに誘導すること」の大きく2つです。 ユーザの目を引けないとクリックもしてもらえないので、ページへの誘導を目指すのであれば基本的に両立させることになりますが、バナー広告の場合認知獲得を目的にまず見てもらって、こちらの伝えたいメッセージを端的に伝え、印象に残ることが目的となります。 作成する前に、このバナーに求める目的と役割を明確にすることで制作の方針が定まります。 ### USPを明確にする USPとはUnique Selling Propositionの略で、その製品（会社）が持つ独自の強みのことです。 どこにでもある、目立たないものであれば、目を引くこともできないためユーザの記憶にも残りませんし、目的のページに誘導することもできません。 ただし、ユニークであればなんでもいいというわけではありません。 チョコレート味の餃子はユニークですが、ユーザが求めるニーズとかけ離れているので印象には残るかもしれませんが、その先のアクションを期待することはできません。 USPを明確にし、それを伝わりやすくしたキャッチコピーを作りバナーに盛り込みましょう。 ### サイズに収まる範囲で伝える要素を絞り込む バナー画像はほとんどの場合、そこまで大きくありません。 そしてじっくり見られるものでもありません。 ですので、限られた目を引く情報を絞り込みデザインする必要があります。 あれもこれも入れたい、伝えたいとなってしまうと、一番ユーザの関心を引くことができる要素が小さくなり興味を引けなくなってしまいます。バナーのデザインにおいては足し算の発想より引き算の発想が求められます。 ### クリックしやすいデザインにする クリックして欲しいのであれば、クリックしやすいデザインにする必要があります。目を引くデザインであっても、クリックを誘導するようなデザインになっていない場合、「なんかきれいな画像だな」で終わってしまうかもしれません。 具体的には「ダウンロードはこちら」や「詳しくはこちら」など、画像内にクリックできるボタンのようなデザインを組み込みましょう。 ### オファーの内容を具体的にする ソフトセルという考え方とハードセルという考え方があります。 ソフトセルはユーザの情緒に訴えかけ、結果的に販売につなげるような考え方で、ハードセルはその反対で、具体的な価値を直接訴えかけて販売につながる考え方です。 バナーは直接的な行動を呼びかけることを目的としているため、ハードセルの考え方がマッチします。 「仕事の未来を考える」ではなく「年収800万円以上の転職なら」というメッセージの方が、目を引きやすく、クリックを誘導することができます。 ## バナー画像を作成するサービス 単なる画像と言えば単なる画像なので、画像が編集できて保存ができるのであればどんなサービスでもバナーは作成できるのですが、よく使われているものや便利なものをいくつかご紹介します。 ### Adobe Photoshop もとは写真の加工ソフトですが、画像を加工するための便利な機能がたくさんついているのでバナー画像の作成にもよく利用されます。 一般的なビジネスマンが利用するかというとそうではないかもしれませんが、何かしらデザインに関連する業務に携わる人であればバナー作成に限らずPhotoshopを利用しているケースが多いので、使い慣れているツールであるPhotoshopでバナーを作るケースが多いです。 [https://www.adobe.com/jp/products/photoshop.html](https://www.adobe.com/jp/products/photoshop.html) ### Canva たくさんのテンプレートや画像素材が用意されているため、かんたんにバナーを作成することができるサービスです。 Photoshopと比べると細かな調整や加工の機能はありませんが、形を選び、画像素材を選び、テキストを入れるだけでバナーが作れてしまうので、とてもお手軽です。 Photoshopはもともとバナーを作るためのサービスではないのですが、Canvaは反対にバナーを作るためのサービスなので、さっくり作りたい方にはおすすめのサービスです。 [https://www.canva.com/](https://www.canva.com/) ### Microsoft PowerPoint PowerPointもプレゼンテーション用のソフトなので、バナーを作成するためのものではありませんが、画像を加工する、テキストを配置する、画像として保存することはできますので、バナーも作ることができます。 ですがいわゆるデザイナーがPowerPointを使ってバナーを作ることはないでしょう。Photoshopはバナー用ではないものの画像を加工するための細かな機能がついているのに対して、PowerPointはそうではないからです。 ですが、AdobeやCanvaを契約するほどではなく、手持ちのアプリで手軽に作りたいということであれば、選択肢に入れてもいいでしょう。 [https://www.microsoft.com/ja-jp/microsoft-365/powerpoint](https://www.microsoft.com/ja-jp/microsoft-365/powerpoint) [完全な記事を表示](https://siws.dgbt.jp/glossary/banner) ```json { "@context" : "http://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "株式会社DGビジネステクノロジー" }, "dateModified" : "2024-04-18T07:50:34.212Z", "datePublished" : "2024-04-18T07:50:34Z", "headline" : "バナーとは", "image" : { "@type" : "ImageObject", "height" : 667, "url" : "https://44981055.fs1.hubspotusercontent-na1.net/hubfs/44981055/Stock%20images/Close%20up%20of%20a%20bookshelf%20in%20library.webp", "width" : 1000 }, "mainEntityOfPage" : "https://siws.dgbt.jp/glossary/banner", "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "height" : 60, "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png", "width" : 60 }, "name" : "用語集" } } ```