Webサイト制作の基本
|
画像の必要性画像は魅力的です。もし、画像を表示できるブラウザが登場しなかったら、WWWがこれほど一般に普及することはなかったかもしれません。 しかし、画像をページに入れる際には、よく考えてください。というのも、画像が重くてイライラするという不満を実によく聞くからです。各種のインターネットユーザアンケートでも、「画像の表示が遅い」というのは、Webサイトの内容に対する不満の上位に上がっています。 画像がすべて不要という訳ではありません。テキストより画像の方が内容が直感的によく分かる場合があります。たとえば各ページにサイトの小さなロゴを入れることで、サイト全体の統一感を出し、同じサイト中を移動しているということがパッと見ただけで分かるようにできます。また、商業ページなどではある程度の見栄えが欲しくなります。「テキストだけのページ＝手を抜いた、技術力のないサイト、きれいな画像に飾られたページ＝力の入った、立派なサイト」と受け取る人もいます。 しかし、実際にサイトを利用する人の身になれば、ページが速く表示される方が快適です。意味のない画像はできるだけ減らし、サイトのタイトル、会社のロゴ、製品写真など、要所で使う方が効果的でしょう。 画像には、alt属性で代替テキストを付ける代替テキストとは、画像を表示しない場合に、画像の代わりにその内容を説明するためのテキストです。 Webサイトを見る人全員が、画像を見ている訳ではありません。速く表示するために画像表示をOFFにしている場合もあります。ブロードバンドの時代で画像表示時間など問題ではないと思われる方もいるかもしれませんが、スマートフォンや携帯電話からインターネットにアクセスするユーザーが増えている今、逆に「画像表示の重さ」が問題になり、画像表示OFFにするユーザーもいます。 また、視覚障害などで音声読み上げソフトを使っているユーザーの場合、画像に代替テキストがついていないとまったく画像の内容を知ることができません。ショッピングサイトの最後の「購入」ボタンが画像で代替テキストなしだったために、商品を選択し、住所や氏名まで入力したのに購入できなかったとい声があります。 ですから画像がなくても内容が分かるように、alt属性で必ず代替テキストを付けてください。たとえば、会社のロゴに説明を付けるのならば、 <IMG src="logo.gif" alt="○○株式会社"> のようにします。 また画像表示ONで使っている場合も、画像がダウンロードされるまでは、代替テキストが表示されます。画像が全体を見ないうちに内容が分かり、次の操作に進むことができるので便利です。
サムネイルを使ういきなり大きな画像を表示するのは、待ち時間が長くなり、ストレスのもとです。製品写真などで詳細な画像が必要な場合は、最初のページには小さな画像を貼り、その画像をクリックすると拡大画像が表示されるように設定しておく方が親切です。ざっと内容を見たいだけの人は、小さな画像だけ、細部を確認したい人は大きな画像も見る、というように使い分けることができるからです。 ただし、いちいち小さな画像→大きな画像とクリックして行くのは煩雑なので、画像がメインとなるサイトなら、最初から大きな画像で良いでしょう。 本文を画像にしない挨拶文や見出しなどのテキストを、丸ごと画像にして貼り付けているページが時々あります。画面に表示される通常のテキスト（特に和文）はギザギザで、きれいとは言えません。全部画像にして、Photoshopなどでアンチエイリアスをかけたりすれば、確かに見た目はきれいになります。 しかし、これには、表示に時間がかかるだけでなく、次のような欠点があります。
背景画像背景画像を使うなら、ページの背景色を背景画像と同系色に設定してください。たとえば暗い色の画像に白い文字のページを作る場合、背景色を白にしていると、画像が読み込まれるまで空白になってしまいますし、画像表示OFFの状態では何も見えません。背景が画像と同系色の色なら、画像が読み込まれなくても文字が読めます。 また、背景にはシャープな画像でなく淡くぼかした画像を使う方が、上に重なる文字が読みやすくなります。
|