画像といって思い浮かぶものは、デジカメで撮影した写真かもしれないし、ページを飾る背景イメージかもしれない。データ的には同じでも、この両者には取り扱い上の大きな違いがある。違いを知ると、使いやすいWebサイトの実現に1歩近づける。

■情報としての画像

　商品写真、コーポレートアイデンティティ、代表取締役の近影、社屋の外観、会社までの地図、業績の推移を示す棒グラフ・・。これらの画像は雑誌などの紙媒体で言うところの「図版」であり、目で見る情報に当たる。こうした図版は主に文章で確認するよりも、見せることで内容に対する理解が深まることを期待して使う。また、内容そのものでもある図版をサイトユーザーは、デスクトップにコピーしてメールで友人と共有するかもしれない。あるいは印刷して何かの検討材料にすることもあるだろう。ということは、Webの場合、図版は個人的に再利用しやすい状態であることが望ましいと言える。この条件を満たす表示方法が、前回までも紹介してきた方法と同じ、イメージタグによる画像の配置である。

--------サンプルソース----------------------

<p> <img src=” news20.gif” alt=" ニュース2.0" width="105" height="148" /> </p> 

-----------------------------------------

　上記の形でHTMLに反映した図版は、クリック＆ドラッグでコピーもでき、ページ印刷時はデフォルトで紙面に出力される。

■装飾としての画像

　一方、背景画像、抽象的なグラフィックによる演出目的のビジュアルなど、それ自体が具体的な情報を伝えるものでないイメージは、図版と同様の扱いをしないほうが良い。イメージタグを使って埋め込まず、徹底的に背景画像として扱うのが妥当である。HTMLにはCSSで背景画像を指定できるブロックレベル要素のタグがいくつかある。これをイメージタグ代わりに使って画像を表示させるのだ。HTML上では下記のようになる。

--------サンプルソース----------------------

< p class="visual">   </p> 

-----------------------------------------

　ブロックレベル要素の段落タグに、空白を示す特殊文字コード を入れた状態だ。画像を表示させるCSSの例は以下の通りだ。

--------サンプルソース----------------------

.visual{

	height: 130px;

	width: 250px;

	background-image: url(background.jpg);

	background-repeat: no-repeat;

	background-position: left top;

}

-----------------------------------------

　こうすることで画像はHTMLに含まれなくなるので文書構造には影響を及ぼさない。印刷にも背景画像を印刷する設定にしない限り反映されない。華やかな背景を付けた見出し文字を作る際などこの方法を用いれば、文字要素はテキストデータのまま保持できるので、画像を読み込まないブラウザや検索機能など他のシステム、サービスでも利用可能な使いやすいサイトができる。

■両者の中間もある

　その他、会員登録の手順を説明するフローチャート、操作の内容を的確に伝えるアイコンなど、図になっていることに意義はあるが、視覚的に情報を取得できない人には意味をなさない、あるいは言葉で説明しても機能はするかもしれない素材は特殊な位置付けになる。今のところ代替テキストに説明を記入したイメージタグで配置するのが妥当といえるが、画像は図版なのか、あるいは装飾なのかは案件別に細かく判断していくべきだろう。

------------------------------

サンプルページ

sample.html 

（サンプルページは別ウィンドーで開いてください。
ブラウザのソースを見るコマンドでコードを確認してください。）

------------------------------
【図】　サンプルページのレンダリング結果
キャッチコピーの背景に見える写真は、

タグに設定したスタイルの背景画像。サンプルソースから少しサイズ設定を変更しているが、基本構成は同じだ。この例で情報たり得るのはキャッチコピーのテキスト要素だけ、という判断に基づいて構成した