右上に表示されているような、あるサイトへのリンクによく用いられる画像がバナーです。英語の "banner" には「旗印、宣伝用の垂れ幕、表象」などの意味があります。そのウェブサイトを象徴的に表す旗印としての画像ファイルがバナーです。

バナーの大きさについては、米国300社からなるインターネット広告協会 IAB（Internet Advertising Bureau の略。有名な Internet Architecture Board とは無関係）が、一応の指針を示しているようです。よく使用される 88×31 サイズをはじめとして、125×125、120×60、120×90、120×240、234×60、392×72、468×60 の8種類の大きさが示されています。

• http://www.iab.net/iab_banner_standards/bannersizes.html

一番多く用いられているサイズは、88×31 バナーです。中途半端な数字ですが、Netscape 社が最初に作成したバナーの大きさがたまたま 88×31 で、それを Microsoft が真似て、それをみんなが真似て・・・ということで広まっているという説が有力です。

日本では、ゲームやCG系のサイトを中心に、200×40 というサイズが広まっています。広告バナーでは、468×60や、224×33 というものが多少多いような気もしますが、いろいろな大きさのバナーが混在している・・というのが現状のようです。

今、画面に表示されているバナーの大きさは、Internet Explorer で画像を右クリック（Macの場合はしばらくクリック）の[プロパティ]で知ることができます。

バナーと言っても、中身は単なる画像ファイルです。GIFファイルで作成するのが一般的です。アニメーションGIFのバナーもよく見かけます。JPEGで作成している例も多くあります。PNGをサポートするブラウザの割合も増えてきたので、PNGという選択肢もあります。

Photoshop や PaintShop Pro などのお絵かきソフトで作成します。Windows標準のペイントでも立派にバナー画像を作成（BMPからGIFの変換は別途必要ですが）することができます。「とほほママのペイントブラシテクニック」も参照してください。

自分で作るのが苦手な人は、goo ( http://www.goo.ne.jp ) などで、「バナー 作成サービス」などを検索すると、いろいろと見つかると思います。

Windowsで、フリーソフトのみを使用して簡単にバナーを作る例を紹介します。使用するツールは下記の4点です。Biden と Teon は、s-iida氏作成のフリーソフトです。（→ http://www.kt.rim.or.jp/~s-iida/：リンク切れ）

• ペイント - Windows標準のお絵かきツール。
• Biden - 画像を綺麗に縮小するツール。
• Teon - 画像をボタン風にするツール。
• FrontPage Express - IE5.xに標準添付。BMPをGIFに変換。

では、その作成例を紹介します。

1. [スタート]-[プログラム]-[アクセサリ]-[ペイント] を用いて何か絵とタイトルを描く。このとき、[変形]-[キャンバスの色とサイズ]で、[幅]と[高さ]を440×155など、88×31の整数倍に指定しておく。

2. Bidenを用いて、88×31に縮小して保存する。縮小することにより、文字のギザギザなどが目立たなくなる。

3. Teonを用いて、ボタン風にアレンジして保存する。

4. [スタート]-[プログラム]-[アクセサリ]-[インターネットツール]-[FrontPage Express] を起動し、[挿入]-[画像]-[参照] で [ファイルの種類] を [ビットマップ(*.bmp)]にし、作成した画像を読み込む。[ファイル]-[すべて保存]-[ファイルとして保存] で保存すると、BMPファイルがGIFファイルに変換されて保存される。

縮小＋ボタン化により、いいかげんな絵でも結構バナーっぽくなる場合があるので、いろいろやってみましょう。

	→ 縮小
		↓ボタン化

バナーの示し方の例を示します。

リンクはご自由に（確認メール不要）。
必要であれば下記のバナーをコピーしてご利用ください。

この部分のHTMLソースは以下のようになっています。

リンクはご自由に（確認メール不要）。<br>
必要であれば下記のバナーをコピーしてご利用ください。<br>
<a href="http://xxx.yyy.zzz/">△<img border=0
src="xxx.gif" width=88 height=31 alt="バナー">△</a>

△ 印の個所にスペースや改行を入れてしまうと、バナー画像の前後に小さなゴミ（下線付きの空白）が表示されることがありますので注意してください。border=0 を忘れると、画像のまわりに青い枠線がついてしまいます。

バナーを使ってサイトにリンクしてもらうには、主に「コピーリンク」と「直リンク」の方法があります。どちらかというとコピーリンクの方が一般的のようですが、ＡさんのサイトへのリンクをＢさんが張って、それをＣさんが見るときのメリット・デメリットは次のようになります。

1. コピーリンク
   

   「コピーリンク」という呼び方は一般的でないかもしれませんが、要はＡさんのバナー画像をＢさんがコピー（ダウンロードして自サイトにアップロード）して、それを使用してもらう方法です。Ｂさんのページに複数のサイトへのバナーがあっても、画像はすべてＢさんサーバーから読み出されるので、Ｃさんが閲覧するときのストレスが少なくなります。（別々サーバーから読み出すと、表示完了が一番遅いサーバーの時間になってしまう。）

2. 直リンク
   

   Ａさんのサイトのバナー画像のURLを、Ｂさんのページの <IMG SRC="..."> で直接指定します。Ａさんのサーバの負荷が高くなりますが、Ａさんがバナーを入れ替えると、Ｂさんのページのバナーの画像も更新されるというメリットもあります。これを利用して、タイムリーな宣伝文句をバナーに埋め込むことも可能です。あと、Ａさんがサイトが閉鎖した時にもそれが伝わりやすいというメリットも。

ＢさんがＡさんのサイトへのバナーを張る際に、コピーリンクか直リンクかが明示してなければ、コピーリンクするのが一般的なようです。