まず、お客様が何を見ているかを把握する
「画像リンク」を技術的な問題と捉える人が多いですが、お客様はリンクのコードなど見ていません。ページ上で見えるのは、画像そのもの、画像の横にあるテキスト、そして画像が読み込めなかったときに表示される代替テキストの3つです。理解コストを減らすとは、この3つが同じ内容を指し、お客様が「この画像をクリックすると何が表示されるか」を推測しなくて済むようにすることです。
よくある悪い例は、画像が製品パッケージなのにファイル名が IMG_2043.jpg、altが「banner」、横のテキストが「詳しくはこちら」となっているケースです。お客様はクリックする前に何が出るか全く分からず、感覚で試すしかありません。これが理解コストが高い典型例です。
ファイル名：まずチーム内で検索できるように
ファイル名はページに直接表示されませんが、2つのことに影響します。1つは検索エンジンが画像をクロールする際の判断材料の1つになること、もう1つは運用チームが後で管理画面の素材ライブラリからその画像を見つけられるかどうかです。書き方としては「内容テーマ + 用途や位置」を組み合わせ、間にハイフンでつなぐことをお勧めします。例：valve-product-cover.jpg、factory-workshop-01.jpg。カメラのデフォルト番号、日本語とスペースの混在、アンダースコアの多用は避けましょう。
判断基準は簡単です。ファイル名だけを同僚に送って、どんな画像か大体分かるかどうか。分からなければ、命名が機能していないということです。同じ批次の画像はスタイルを統一することをお勧めします。一部英語、一部ローマ字、一部番号と混在させると、後々の整理が非常に面倒になります。
altテキスト：画像が見えない人への説明
altは画像の代替テキストで、画像の読み込みに失敗したときに表示され、スクリーンリーダーも読み上げます。その役割は、この画像が何を表現しているかを説明することであり、キーワードを詰め込むことではありません。書き方としては、画像の内容を一文で明確にし、必要に応じてリンク先ページのテーマを含めることをお勧めします。例えば「車間品質検査プロセスの示意图」のように。「車間 品質 検査 メーカー 価格」のようなキーワードの羅列は避けましょう。
この画像自体がリンクの入り口である場合、altはお客様がクリックしたときに表示される内容を書くことができます。例えば「品質検査プロセスの説明を見る」などです。ここで注意すべき境界線があります。altの書き方はコンテンツ構成レベルの経験則であり、具体的な検索エンジンがaltをどう利用するか、ランキングに影響するかは検証が必要なメカニズムの問題で、本記事では結論を出しません。運用上はまずお客様と支援ツールが理解できることを保証する、この方向性は堅実です。
周辺テキスト：画像とテキストを一致させる
お客様が画像を理解するのは、画像自体ではなく、横にあるテキストによることが多いです。画像が製品画像で、横のテキストが「クリックして詳細スペックを見る」なら、お客様はスペックページに飛ぶと理解します。横のテキストが「お気軽にお問い合わせください」なら、お客様は問い合わせ窓口に飛ぶと思うでしょう。この2つの期待は全く異なります。
周辺テキストを書くときは、まずこの画像をクリックするとどのページに飛ぶかを決め、そのページが何を提供できるかを一文で明確に説明しましょう。画像、alt、周辺テキストの3つが同じ内容を指せば、理解コストは自然に下がります。逆に3つが一致していないと、お客様は正しくクリックしても違和感を覚えます。
クリック領域と位置：クリックできることを伝える
画像リンクの中には、お客様がクリックできると全く気づかないものがあります。普通の挿絵と見分けがつかないからです。できる調整としては、クリック可能な画像に明確な視覚状態を与える（ホバー時に少し変化させるなど）、クリック可能な画像をお客様がクリックすると予想する場所（製品リスト内など）に配置する、テキストの途中にクリック可能な画像を挿入して、画像をクリックするのかテキストをクリックするのか分からなくさせない、などがあります。
また、同じ画像に2つの異なる遷移先を同時に設定しないでください。あるページでは画像の左をクリックすると製品ページ、右をクリックすると問い合わせページに飛ぶと、お客様は判断しにくく、間違えやすくなります。本当に2つの入り口が必要なら、2枚の画像か2つのテキストボタンで分けましょう。
公開前にこの順序でチェック
- ページ上のすべての画像リンクをリストアップし、1枚ずつクリック後の遷移先を確認する。
- ファイル名が検索可能か、同じ批次の画像の命名スタイルが統一されているか確認する。
- altが画像の内容を明確に説明しているか、キーワードを詰め込んでいないか確認する。
- 画像の横のテキストが、クリック後のページ内容と一致しているか確認する。
- スマートフォンでページを開き、クリック可能な画像が目立つか、タップしやすいか確認する。
- 画像を一時的に非表示にするかオフラインで読み込み、代替テキストでお客様がここに何があるか理解できるか確認する。
このチェックは専門ツールは不要で、運用担当者自身で完了できます。完了後、画像リンクは「お客様が感覚でクリックする」から「お客様がクリックすると何が見えるか分かる」に変わり、これが理解コスト削減の実際の効果です。
