アクセス・地図のUIデザイン

アクセス・地図の型の選び方

アクセス・地図の型は、「拠点がいくつあるか」「駅から入口まで迷わずに来られるか」「利用する交通手段や、来る前に確かめてほしいことがあるか」の3つで変わります。問い1で中心の型を選び、問い2と問い3で加える型を決めます。型を選んだら、各Patternのページでワイヤーフレームとプロンプト、動くデモを確認できます。

問い1：訪問先の拠点は、いくつありますか？

読み手に行き先を選んでもらう必要があるかで決まる問いです。

問い2：駅から入口まで、迷わずに来られますか？

住所と地図だけで道順が伝わるかを確かめる問いです。

問い3：利用する交通手段や、来る前に確かめてほしいことはありますか？

場所のほかに、来る前に伝えておくことがある場合に加える型です。

アクセス・地図の型の比較

すべての型に共通する設計の原則

アクセス・地図の型を作る中で、型が違っても繰り返し出てきた原則です。どの型を選んでも、次の点は同じように確かめます。

• 地図だけに頼らず、住所と行き方を文字でも書く。地図が読み込まれない環境や、読み上げで利用する読み手にも場所が伝わるようにする
• 最寄り駅は、出口と徒歩の時間まで書く
• 住所・電話番号の表記は、会社概要・フッター・Googleビジネスプロフィールとそろえる
• 電話番号は画像にせず文字で表示し、発信できる環境では tel: のリンクにする
• 現在地からの経路は地図アプリに任せ、新しいタブで開く場合はボタンの文言で伝える
• 切り替える型では、地図と住所・連絡先を同じ単位でまとめて切り替える。住所など切り替わらない情報は切り替えの外に出す
• SPでは地図の高さを抑え、地図の埋め込みは遅延読み込みにして表示の速さへの影響を抑える
• 写真の目印・駐車場・バスの本数など、変わりやすい情報は定期的に見直す

組み合わせの例

• クリニックや歯科医院：地図＋住所型で場所の基本を示し、来店前の確認型で予約・駐車場・段差を先に伝える。休診日は月カレンダー型 営業日カレンダーで確かめてもらう
• 郊外の介護施設や店舗：交通手段別型で電車・車・バスを分け、駐車場の台数や満車のときの案内を車のタブにまとめる
• ビルの奥にあるサロンや教室：地図＋住所型の下に道順案内型を続け、曲がる場所と入口の目印を写真と文で示す
• 本社と支店のある会社：複数拠点切り替え型で拠点を選んでもらい、迷いやすい拠点だけ道順案内型を加える
• 臨時休業のある店舗：アクセスのページに臨時休業表示型 営業日カレンダーを並べ、来てから休みだったということを防ぐ

よくある質問

アクセスの情報は、どのページに置けばよいですか?

アクセス専用のページを作るか、会社概要の中にまとめる例が多く見られます。どちらの場合も、住所と最寄り駅はフッターにも短く載せ、問い合わせや予約のページからアクセスのページへ移れるようにしておくと、来る前に確かめてもらいやすくなります。

地図は、Googleマップの埋め込みでなければいけませんか?

埋め込みに限りません。画像の地図や簡単な略図でも、住所と行き方を文字で書き、地図アプリで開くボタンを添えておけば、経路は読み手の地図アプリで調べてもらえます。埋め込みを使う場合は、表示の速さへの影響も確かめます。

住所や電話番号の表記は、どこまでそろえればよいですか?

アクセスのページ、会社概要、フッター、Googleビジネスプロフィールなど、住所や電話番号を載せているすべての場所でそろえます。ビル名や階数、番地の書き方まで同じにしておくと、読み手も検索の仕組みも同じ場所だと判断しやすくなります。

住所の構造化データは、書いたほうがよいですか?

店舗や事務所の情報の構造化データに、住所（address）や位置（geo）を書く方法があります。書く場合は、ページに表示している住所とそろえます。書いても、検索の結果に住所や地図が表示されるとは限りません。

複数の型を、1つのページで組み合わせてもよいですか?

組み合わせられます。たとえば地図＋住所型で場所の基本を示し、その下に来店前の確認型や道順案内型を続ける形です。住所や地図を型ごとに繰り返さず、1か所にまとめて示すと、情報の食い違いを防げます。