ブロードバンドが普及し、画像の読み込み速度がそれほど問題とならなくなった現在、画像コンテンツはテキストコンテンツとともに、Webデザインの要素として欠かせないものになりつつあります。特にECサイトなどでは商品写真の画像がユーザーの購買意欲にも影響します。サイト全体の雰囲気作りのためにも必要でしょう。しかし、なんでも画像にすればよいというわけではなく、テキストと画像の適切な使い分けと、画像を使うポイントをおさえておく必要があります。

画像には、テキストでは表現しにくい内容を伝える、テキストを補完するといった情報伝達目的のものと、見出しにそえるイラストなど、修飾的なものがあります。修飾画像も、ユーザーが情報やサービスを探すという目的を果たすためには必要なくても、適度に使えばサイトへの好感度や親近感を上げる働きをします。

しかし、装飾として用いる画像はあくまでも脇役ですから、主役の情報伝達の画像よりも目立つような使いかたは避けてください。商品写真、建物や店内の写真、フローチャートや地図などの図版が主役の画像です。

品質の悪い画像を使うと、ユーザーの印象や信頼度にかかわります。商品写真の場合、衣服や装身具など見た目が大切なものほど、丁寧に、拡大写真や、別角度からの写真なども含めて掲載する必要があります。衣服などカラーバリエーションがあるものは、できるだけ全カラーの写真を掲載してください。レストランの室内写真や料理の写真なども見栄えが大切です。

一方、書籍、DVD、消耗品など、作者、タイトル、商品名などで内容が把握できるものは、それほど画像は重視されません。このように、サイトの内容や商品によって、画像コンテンツの重要度が変わります。サイトの目的に応じて、使用する画像の量と、制作コストのかけかたを検討してください。

テキストリンクが下線などでリンクとわかりやすいのに対し、画像がリンクであるかどうかは、クリックしてみるまでなかなかわかりません。バナー広告が氾濫している現在、大きな四角形の画像などは無意識で広告と考えて、視線をそらしてしまうユーザーもいます。

このため、画像サイズを大きくするよりも、画像リンク部分のみポイント色を使って目立たせ、「注文する」、「お申し込みへ」といった簡潔な文字を入れて太線で囲む、影付きにするなどして、クリックできるボタンだと見せるほうが、むしろ効果的です。

さらに、ボタンの周囲に余白をとる、テキストを入れてボタン以外の画像との距離を離すなどすると、同じサイズのボタンでも、そこにユーザーの視点が集まりやすくなります。

また、商品写真などをクリックすると拡大表示されるパターンも増えていますが、これも「クリックすると拡大します。」のように明記するか、マウスオーバー時にあきらかに内容が変わるようにしておかないと見過ごされてしまいます。

逆に何も知らないユーザーがあちこちクリックしていて、たまたま画像リンクをクリックして思いもよらぬページに行き着いてしまうことも考えられます。「ここはクリックできる」、「クリックすると何が起きるか」をテキストリンクの場合よりも、画像リンクではより明確に伝えるように心がけましょう。

広告キャンペーン系のサイトなどで、ほとんどの部分を画像の文字で埋め尽くし、テキストをほとんど使用しないページが増えています。文字を画像にしてしまえば、一見きれいに見えます。

通常サイトでは検索エンジンが拾いやすいテキストにしても、短期限定のページならば画像で見た目とインパクト重視し、レイアウトを固定してもよいという考えがあるのかもしれません。しかし、画像文字は、ユーザーの好みのサイズに拡大・縮小することができませんし、表示されるフォントも決まってしまいます。

制作サイドとしてはもっともよいと考える文字サイズやフォントが、ユーザーにとっては見づらい場合も多々あります。また、テキストならば、連絡先や商品名などをコピーアンドペーストして控えておくことができますが、画像文字はコピーできません。

見た目が派手でも、読まれない、利用されにくいページでは意味がありません。内容をきちんと読んでもらいたいのならば、ユーザーが自分の閲覧環境に合わせて調整しやすいテキストにしておくべきでしょう。

また、文字を画像にする場合は、画像を閲覧できないユーザーのために、alt属性で代替テキストをつけておくことも忘れないようにしてください。