ホームページを制作する際に、上手に活用したいのが「バナー」です。バナーをうまく使うことにより、商品やサービスの認知度を効率的に向上できたり、売上に繋がる可能性があります。この記事では、ホームページのバナーとは何なのか、バナーを使うメリットや制作する方法を解説します。ぜひ役立ててください。
→画像編集機能も付属のサイト作成ツール 「BiNDup」を30日間無料体験する
ホームページのバナーとは
バナー（banner）は、直訳すると旗やのぼりとなります。Webページを閲覧する際、途中にキャンペーン情報や商品・サービスなどの紹介をしている画像を見ることもあるでしょう。このように、何らかの商品や特集などを紹介するために設置する画像のことをバナーと呼びます。
バナーは文字やイラスト、写真などで作られた画像で、基本的にはリンクが設定されています。そのためバナーをクリックすることで、バナーに表示されている特集ページや商品ページなどに直接移動することが可能です。
ホームページでバナーを活用する目的やメリット
ホームページではなぜバナーを活用するのでしょうか。ここでは、バナーを活用する目的やメリットを解説します。
目的
バナーの目的は、閲覧者にクリックしてもらい、見てもらいたいWebページに移動させることです。たとえば、街中に喫茶店があったとしてものぼりがなければ、気づかずに通り過ぎてしまうケースもあるでしょう。しかし、のぼりがあれば、喫茶店があることに気づきやすくなります。
バナーも同様に設置することで、Webページや特集の存在を認知してもらいやすくなります。しかし、閲覧者にクリックしてもらうためには、バナーに興味を持ってもらわなければいけません。
メリット
バナーのメリットは、見てもらいたい情報を発見してもらいやすくなること、印象に残りやすいことです。バナーは文字や写真、イラストなどを使って作られた画像です。そのため、ホームページを流し見していても目につきやすく、閲覧者が発見しやすくなります。
また、写真やイラストなどを効果的に使用できれば、閲覧者の印象に残りやすくなるでしょう。バナーは文字だけの紹介よりも視覚に訴えかけられるため、記憶に残りやすいというメリットがあります。
→画像編集機能も付属のサイト作成ツール 「BiNDup」を30日間無料体験する
バナーのサイズには種類がある
バナーのサイズはさまざまです。ここでは、6つのバナーサイズについて解説します。
468 × 60
468×60は、バナーでは一般的なサイズとして知られています。多くのホームページで使われるサイズのため、見たことのある人も多いでしょう。
728 × 90
728×90は、横に長く大きめのバナーです。ビッグバナーとも呼ばれており、パソコンで見やすいサイズです。大きめのバナーのため、文字や画像などのレイアウトが変えやすく、インパクトを出しやすくなっています。
300 × 250
300×250は、正方形に近い形のバナーです。横長のバナーよりも、写真や画像との相性がよいとされています。写真などをレイアウトする際の自由度が高く、GIFアニメーションなどの動く広告にも向いています。
336 × 280
336×280は、パソコン・スマホ双方で見かけることの多いバナーです。Google広告では主流となりつつあるサイズです。そのためGoogleで広告を出したい場合には、こちらのサイズを基準にバナーを制作するとよいでしょう。
250 × 250
250×250は、正方形のバナーです。パソコン、スマホどちらでも見やすいサイズとなっています。また、画像サイズを変更して、300×300などのバナーを制作することも可能なため、自由度が高い点もポイントです。
120 × 600
120×600は、パソコンのサイドバーとして表示されるケースが多いバナーです。縦に長いサイズで、パソコンで見る場合には目立ちます。しかし、スマホでは使われないため、見かける機会は少ないでしょう。
バナーの画像ファイルの種類とは
バナーの画像ファイルは、主に「BMP形式」「PNG形式」「GIF形式」「JPEG形式」の4つです。以下では、それぞれの種類を解説します。
BMP形式
BMP（ビットマップ）形式とは、「Microsoft Windows Bitmap Image」を略したものです。その名のとおり、Windowsで使用される形式の画像ファイルです。BMP形式では画像を圧縮せずに使用するため、ファイルサイズが大きくなります。
圧縮されていないため編集を繰り返し行っても、画像が劣化しません。しかし、ファイル容量が大きく、基本的にはWeb上での使用には不向きです。そのため、バナーを制作する際にはBMP形式は避けたほうがよいでしょう。
PNG形式
PNG（ピング）形式とは、「Portable Network Graphics」を略したものです。Web上での使用を目的に開発された画像形式で、透過が可能という特徴があります。特定の色を透過できるため、画像の中からイラスト部分だけを切り抜いて背景を透明にするなどの工夫が可能です。
PNG形式は可逆圧縮方式を採用しているためイラストなどの圧縮に向いており、画像劣化の心配が少なくなっています。ただし、画像サイズが大きく、重い点はデメリットです。
GIF形式
GIF（ジフ）形式とは、「Graphics Interchange Format」を略したものです。GIF形式では、色数が最大256色で背景透過ができ、動きがあるバナーの制作が可能です。色数が限定されるため、アイコンやロゴなどに向いています。また、アニメーション機能があるため、動きがありインパクトのあるバナーを作れます。
ただし、色数が最大256色となっているため、グラデーションのある画像やフルカラーの写真などを扱う場合には向いていません。
JPEG形式
JPEG（ジェイペグ）形式とは、「Joint Photographic Experts Group」を略したものです。JPEG形式は、写真向きのファイル形式で、ファイルサイズの削減が可能です。JPEG形式では、1,670万色を利用できるため、フルカラー写真なども鮮やかに表現できます。
また、非可逆圧縮方式を採用しており、人が感知できない色情報を削除してファイルサイズを軽くしています。圧縮率が高いほどファイルサイズが軽くなりますが、画像が荒れやすくなるため注意が必要です。
→画像編集機能も付属のサイト作成ツール 「BiNDup」を30日間無料体験する
ホームページのバナーを制作する方法とは
ホームページのバナーはどのように制作すればよいのでしょうか。以下では、バナーの制作方法について解説します。
自分で制作する
バナーは自分で制作することも可能です。バナー作成が可能なツールを用いて作りましょう。バナーは画像のため、画像ファイルを制作できるツール、たとえば「Photoshop」や「illustrator」などを用いて制作することも可能です。
ツールは有料のものが多くなっていますが無料のものもあるため、使用感を確かめてみたい、試しにバナーを作ってみたいという場合には、無料ツールを利用してみましょう。無料ツールとしては、「バナー工房」や「Canva」などがあります。
専門業者に依頼する
自分で制作するのが難しい場合には、バナー制作を請け負うプロの業者や、バナー制作に慣れている人に依頼するという方法もあります。プロの業者の場合には、ひとつのバナーにつき1,000円～というケースが多いようです。
バナー制作に慣れている人に依頼する場合には、クラウドソーシングなどを利用するとよいでしょう。価格は応相談となるため幅があります。
→画像編集機能も付属のサイト作成ツール 「BiNDup」を30日間無料体験する
自分でホームページのバナーを作成する手順
自分でホームページのバナーを作る場合には、以下の手順で行いましょう。
手順1：コピーを決める
バナーによって伝えたい内容、訴求する内容を明確にして、文章に起こしましょう。コピーを決める際には、メインコピーとサブコピーを決めて、訴求したいコピーの優先順位を決めておくとやりやすくなります。
手順2：使用するアイコン・画像を検討する
バナーに使いたい画像や写真、ロゴやアイコン、ボタンなどの素材を探しましょう。どのような素材を使うかは、閲覧者の目を引くために重要な要素です。無料の素材サイトも多くあるため、上手に活用することもよい方法です。
手順3：配色・レイアウトを決める
コピーと使用する素材が決まったら、配色やレイアウトを決めます。訴求したい内容やブランドイメージなどによって、適した配色は異なります。また、レイアウト次第で見やすさやインパクトなどが変わってくるため、レイアウトにもこだわりましょう。
慣れないうちは、他のホームページで使用されているバナーを参考にしながら作るのもよい方法です。さまざまなバナーが見られるサイトとしては「BANNER LIBRARY」「Facebook広告ライブラリ」「マイフェバ」などがあるため、参考にしましょう。
まとめ
ホームページのバナーはのぼりのようなもので、閲覧者にクリックしてもらうことや役割です。バナーを効果的に使うことで、見てもらいたい情報を発見してもらいやすくなります。閲覧者に効果的に情報を伝えたい場合は、BiNDupでホームページを制作してバナーをつけましょう。
BiNDupは、国産CMSで専用サポート（有料コースのみ）が受けられます。カスタマイズ性も高く、自社に合ったホームページ制作が可能です。ホームページを制作し、バナーを効果的に活用したい場合はぜひお申込ください。
POINT
- バナーはWebページや特集の存在を認知してもらいやすくするメリットがある
- バナーを作成するときはサイズや画像形式の特徴を確認する
- 他のWebサイトで使われているバナーやギャラリーサイトなどがデザインの参考になる