この記事の要点
地図画像だけに情報を閉じ込めず、住所、起点、順路、入口注意をHTML本文でも示し、外部地図は現在地からの移動を補う選択肢にします。
必要な項目から読む
どこで案内が途切れるのか
大きな地図画像だけを置き、スマートフォンで文字が読めず、画像が表示されないと住所や入口情報も分からない
自分で整理する手順
- ページ上部に住所・最寄り起点・入口名を文字で置く
- 地図画像を画面幅に応じて表示し適切なaltを付ける
- 曲がり角を番号付き文章でも説明する
- 複数端末と画像非表示状態で利用できるか確認する
地図画像・文章・外部地図の役割を分ける
模式図は迷う分岐や入口を強調でき、文章道順は画像を見づらい人や検索にも情報を伝え、外部地図は現在地から近隣までの経路探索に向きます。どれか一つを万能と考えず、ページ上で順序よく組み合わせます。最初に住所と入口名、次に簡易図と番号付き手順、最後に外部地図リンクを置くと、利用者が状況に合う方法を選べます。
外部サービスが開けなくても基本情報が残る構成にします。
スマホでは入口付近を最優先する
横長の印刷地図をそのまま画面幅へ縮めると、肝心の入口が数ミリになります。スマホ用は縦長または正方形へ再構成し、起点と入口、曲がる場所を大きくします。タップ拡大に頼る場合でも、初期表示で地図だと認識できる見出しと説明を付けます。画像サイズを適切に圧縮し、高解像度端末でも文字がにじまないよう確認します。
拡大操作が難しい利用者のため、本文の道順も省きません。
外部地図が表示されなくても案内を残す
外部地図の埋め込みは便利ですが、通信、Cookie、利用条件、サービス障害の影響を受けます。必須機能にせず、静的な住所と案内図、通常リンクを用意します。リンク先の地点が建物中心ではなく実際の入口に合うか、施設名の重複がないかを実機で確認します。
Google等の画面キャプチャを自社画像として転載せず、埋め込みやリンクは各サービスの規約に従い、オリジナル地図と明確に区別します。
制作を依頼する目安
- レスポンシブ用に構図の異なる地図版が必要
- サイト全体のアクセシビリティや表示速度も改善したい
- 複数店舗の地図と更新データを統一設計したい
依頼時に渡す情報
- ページURLと想定閲覧端末
- 住所・電話・営業時間
- 推奨起点と入口
- 地図の元データ
- 文章道順
- 外部地図の正確な地点URL
- 画像の代替説明
- 更新担当と確認日
公開前の確認項目
未確認の項目を残さず、該当しないものはその理由も記録します。
- 画像がなくても住所と経路が分かる
- スマホで横スクロールを強制しない
- 重要文字を画像内だけに置いていない
- 外部地図リンク先のピンが入口と一致する
- 不要な位置情報取得や外部APIを必須にしていない
- 現地確認日を管理している