地図＋住所型 アクセス・地図

通称：アクセスマップLocation section with map and address

見本の中のメニューやボタンは押して動きを試せます（リンク先へは移動しません）。

地図を片側に置き、もう片側に所在地、最寄りの駅、電話、営業時間をテキストで書き出します。拠点が1つのお店や会社なら、まずこの形で足ります。

自分のサイトの中身で、この形を作らせる指示文です。最初の「サイトの情報」を書き換えてから渡します。今あるページを直させるときは、その HTML を貼ります。

この形で作る 
# サイトの情報（ここを書き換える）
- どんなサイトか：〈例：工務店のサイト、税理士事務所のサイト、ネットショップ〉
- 入れたい文言・項目：〈見出し・ボタンの文言・項目の数など。決まっていなければ空けてよい〉
- 今あるページ：〈今のページを直すなら、その HTML を貼る。新しく作るなら空ける〉

# 部品の呼び名
一般に「アクセスマップ」（Location section with map and address）と呼ばれる部品です。

# 作ってほしいもの
地図＋住所型のアクセス案内（Location section with map and address）。地図と、住所・最寄り駅・電話番号・営業時間を並べて見せる。

# 並べるもの
- 見出し：h2
- 左：地図。幅の6割ほど、縦横比 4:3。ここでは灰色の面に「地図」と書いた代わりのものでよい
- 右：dl で項目と内容を並べる
  - 住所と、その下に「住所をコピー」ボタン
  - 最寄り駅
  - 電話
  - 営業時間
- 右の一番下：「地図アプリで経路を見る」ボタン。Google マップの検索 URL（https://www.google.com/maps/search/?api=1&query=住所）を新しいタブで開く

# 守ってほしいこと
- 住所は画像にせず文字で書く（地図が読み込めなくても、検索や翻訳で使える）
- コピーボタンは navigator.clipboard を使い、使えない環境では textarea を使う方法に切り替える。結果は role="status" の要素に「コピーしました」と出す
- 経路の案内は自分で作らず、地図アプリに任せる
- ボタンは高さ 44px 以上。地図アプリのボタンは塗り、コピーは薄い灰色の面にして役割を分ける
- 項目の行は罫線で区切る。全体を枠と角丸のカードで囲まない

# SP（画面幅 767px 以下）
- 地図を上、住所などを下にして縦に並べる
- 地図アプリのボタンは横幅いっぱいにする

# 出力
- HTML・CSS・JavaScript を分けて出す。ライブラリは使わない
- 色は CSS 変数（--accent など）にまとめ、あとから変えやすくする
- 文言は「サイトの情報」に合わせて考える。決まっていないところは〈 〉で囲んだ仮の文言にする
- 「並べるもの」に書いた項目の名前（エリア・間取りなど）は一例。サイトに合うものに置き換える
- 今あるページを渡したときは、そのページの色・文字・余白に合わせ、変えた場所を最後に箇条書きで知らせる

アクセス・地図の案内を7つの型に分け、AIへの指示文・動く見本・コードを載せています。

アクセス・地図はどの型を選ぶか

アクセスの段を読む人は、「どこにあるか」のほかに「どう行くか」「着いてから困らないか」を知りたがっています。型を選ぶときは、拠点の数、来る人の交通手段、入口の分かりにくさの3つを先に確かめます。拠点が1つで入口も分かりやすいなら、地図＋住所型で足ります。足りないところが見えたら、ほかの型を下に足していきます。

こんなとき 向いている型
拠点が1か所で、入口も分かりやすい地図＋住所型
フッターやサイドバーに、地図なしで小さく載せたい地図なしの簡易型
店舗や営業所が3〜5か所ある複数拠点切り替え型
ビルの上の階や路地の奥にあり、迷う人がいる道順案内型
車で来る人と電車で来る人がどちらも多い交通手段別型
車で来る人が多く、駐車場の入口や満車のときの問い合わせが多い駐車場案内型
予約・駐車場・段差について、電話の問い合わせが多い来店前の確認型

道順案内型と来店前の確認型は、地図＋住所型の下に足して使うこともできます。

どの型でも守ること

  1. 住所は文字で書く。地図の埋め込みや画像だけにすると、読み上げソフトでも検索でも場所が伝わりません。地図が読み込めないときの手がかりにもなります。
  2. 経路は地図アプリに任せる。出発地は人によって違います。「地図アプリで開く」のリンクを置けば、その人に合った道順が出ます。
  3. 電話番号は押せるようにする。tel: で始まるリンクにしておけば、SP ではタップ1回で発信できます。
  4. 地図の埋め込みは、アクセスの段に入ってから読み込む。iframe に loading="lazy" を付ければ、地図が見える位置まで来るまで読み込みを後回しにでき、ページの最初の表示が軽くなります。
  5. 最寄り駅は出口と徒歩の分数まで書く。「駅から近い」だけでは、出口を間違えた人が遠回りします。

よくある質問 (FAQ)

拡大や移動をしてほしいなら埋め込み、周りの目印だけ伝えたいなら画像の地図が向いています。どちらを選んでも、住所は地図とは別にテキストで書き、「地図アプリで開く」のリンクを添えます。埋め込みは読み込みが重いので、loading="lazy" を付けます。

タブに並べるのは5か所くらいまでにして、それより多いときは地域ごとの一覧にします。一覧から各拠点のページへリンクし、拠点ごとのページに地図・住所・電話番号を載せます。拠点名で検索した人が、その拠点のページに直接たどり着けます。

曲がる場所ごとに1枚、全体で4〜6枚が目安です。まっすぐ歩く区間は1枚にまとめます。写真は実際に歩く向きで撮り、目印の看板やお店が写るようにします。

台数・料金・高さの制限・入口の場所・満車のときの案内の5つを書きます。車で来る人が知りたいのは、着いてから停められるかどうかです。提携の駐車場があるなら、料金の扱いも添えます。