Web案内で地図・写真・短い動画を切り替える設計

この記事の要点

住所と文章、軽量な簡略地図を先に示し、判断が難しい地点だけ写真、動作の順序が必要な箇所だけ短い動画を選べる形で加えます。各素材には代替説明、更新日、差し替え単位を持たせます。

必要な項目から読む

大きな画像や動画を一度に読み込ませ、狭い画面では案内が切れ、低速回線や画像を見られない環境では道順そのものが分からなくなっている。

移動中の利用者は、ページを開いてすぐに住所、使う駅出口、目的の入口を確認します。大きな写真一覧や自動再生動画より先に、短い文章と全体を示す簡略地図を置きます。画像が遅れても本文の地点名と行動順が読めれば、案内の土台は失われません。

地図画像にも同じ内容を要約した代替テキストを付け、装飾ではなく案内情報として管理します。

横長の写真を固定幅で並べると、スマートフォンでは目印が小さくなったり横スクロールが生じたりします。分岐ごとに一枚ずつ区切り、写真、地点名、次の行動を一組にして縦方向にも読める構成にします。必要なら端末幅に応じた画像を用意し、大きな元画像をそのまま配信しません。

360ピクセル程度の画面とタブレット、PCで、番号の順序と説明の対応が変わらないことを確認します。

改札から階段へ向きを変えるなど、静止画では動作の連続が伝わりにくい箇所だけを短い動画にします。自動再生は避け、再生前に内容とおおよその長さが分かる見出しを付けます。通信量が気になる利用者や無音環境のために、同じ手順を静止画と字幕でも確認できるようにします。

動画が削除・停止されても基本経路が残るよう、本文や地図を動画の中だけに閉じ込めません。

外観写真が古くなったとき、ページ全体を作り直す運用では更新が遅れます。地図、分岐写真、入口写真、動画に別々の識別名を付け、撮影日、掲載箇所、代替テキスト、確認担当を記録します。差し替え時は新しいファイル名で公開してキャッシュによる旧画像残りを避け、本文の地点名や字幕との対応も確認します。

公開後は旧素材への参照が残っていないかリンクと表示を点検し、台帳の版も更新します。

未確認の項目を残さず、該当しないものはその理由も記録します。