多店舗の店舗一覧ページは地図とテキストの一覧を両方置く｜県→エリア→ピンで選ばせる地図と、HTMLに最初から書いた店舗カードの作り方、公開前に電話・営業時間・予約先を突き合わせる手順

店舗が5〜6店のうちは、店舗一覧ページはカードを縦に並べるだけで十分です。ところが20店、30店と増えてくると、「自分の家から近いのはどの店か」を、カードを上から順に読んで探すことになります。 地名に詳しくない人ほど、店名だけでは場所の見当がつきません。

かといって、一覧を地図だけに置き換えるのもおすすめしません。地図は読み込みに時間がかかり、通信環境によっては表示されないことがあります。店名が分かっていて、その店の電話番号だけ知りたい人にとっては、地図を操作するのは遠回りです。

先に結論を書きます。

• 店舗一覧ページは「地図」と「テキストの店舗カード」の2段構成にする。 上で地図から探せるようにし、下に全店のカードをエリア別に並べる
• 地図は「県 → エリア → ピン → 吹き出し」の順に絞り込ませる。 いきなり全店のピンを出さない
• 店舗カードは、HTMLに最初から書いておく。 地図の読み込みに失敗しても、カードだけで電話・予約ができる状態にする
• 背景の地図はシンプルにし、ピンは文字なしの明るい色にする。 道路や駅名まで入った地図は、ピンが目立ちにくくなる
• 公開前に、電話・営業時間・予約先を店舗ごとに複数の情報源と突き合わせる。 地図にした瞬間、間違いが目立つ場所に出るため

2県で28店舗を展開する美容サロンのチェーンで、店舗一覧ページをこの形に作り替え、店舗ごとのサイト26か所にまとめて反映しました。以下、実際の構成、作り方、公開前の確認の順に説明します。

地図とカードを両方置く理由

地図は「近くの店を探す人」のため

店舗一覧ページに来る人は、大きく2種類に分かれます。

1. 近くの店を探している人（どの店が自分にとって通いやすいか分からない）
2. 行く店が決まっていて、連絡先や営業時間を知りたい人

1の人にとっては、地図のほうが早く答えにたどり着けます。店名に入っている地名を知らなくても、自分の家の位置から近いピンを押せば済みます。

カードは「店が決まっている人」と「地図が出ないとき」のため

2の人にとっては、店名と電話番号が文字で並んでいるほうが早く見つかります。また、地図は外部の部品や地図データを読み込んで表示するため、通信が不安定な環境では表示が遅れたり失敗したりすることがあります。地図が出なかった瞬間に、ページから店の情報が消えてしまう作りは避ける必要があります。

そこで、店舗カードは地図とは別に、HTMLに最初から書いておきます。 地図がプログラムで後から描かれるのに対し、カードはページを開いた時点で文字として存在します。検索エンジンもこの文字を読めます。

全店共通の一覧ページを各店に置くなら、検索対策の扱いに注意

この実例では、同じ内容の店舗一覧ページを、各店のサイト（店舗ごとのサブドメイン）にそれぞれ置いています。まったく同じ内容のページが26か所にあると、検索エンジンから見ると重複です。そのため、この一覧ページは検索結果に出さない設定（noindex）にしつつ、ページ内のリンクはたどってもらう設定（follow）にしています。

本部サイトに1ページだけ店舗一覧を置く構成なら、このページは検索結果に出す対象にして、カードの文字をしっかり読ませる価値があります。一覧ページをどこに何か所置くかで、検索対策の扱いが変わることは先に決めておきます。

実例：28店舗の一覧ページをこう作った

画面の流れ

ページを開いてから店にたどり着くまでの流れは、次の4段です。

1. 県を選ぶ：簡単な県の形の図を表示し、店舗のある県（この例では2県）を押す
2. エリアを選ぶ：5つのエリアボタン（8店・8店・6店・3店・3店）で絞り込む
3. ピンを押す：地図上の店舗のピンを押す
4. 吹き出しで確かめる：店の写真・住所・営業時間・定休日・電話・WEB予約・LINE・ホームページ・経路案内のボタンを表示

パソコンでは地図の右側、スマホでは地図の下に、そのエリアの店の一覧も並べました。地図を操作しなくても、エリアを選んだ時点で候補が文字で見えるようにするためです。

その下に、全28店の店舗カードをエリア別に並べています。

エリアは「行政区分」より「生活圏」で切る

エリアの切り方は、県や市の区切りをそのまま使うより、お客さまが「このあたり」と感じる生活圏で切るほうが選びやすくなります。この例では、大きな市の市内、その周辺の2地域、県の東部、隣の県の5つにしました。

1つのエリアに入る店が多すぎると、エリアを選んでもピンが密集して押しにくくなります。この例では、一番多いエリアで8店です。

地図の部品

使った部品と考え方は次のとおりです。

• 地図の表示：Leaflet（リーフレット。無料で使える地図表示のライブラリ）。ページの読み込みを重くしないよう、地図の部分が必要になってから読み込む
• 背景の地図：国土数値情報（国が無料で公開している地理データ）の市区町村の境界データを、店舗のある2県の分だけ切り出し、形を簡略化して使用。111市区町村分で約177KB。国土数値情報は利用規約に沿って出典を記載する。拡大できる上限も決めておく（この例ではズームレベル14まで）
• ピン：明るい緑のしずく形の中にブランドのロゴを入れ、文字は入れない。県全体を表示しているときはピンを小さめにする。最初の県の図では、店の位置をロゴで示し、ロゴ同士が重ならないよう位置を自動でずらす
• 色分け：見ている店舗サイトの店（当店）と、オープン前の店は、別の色のピンで区別する

見た目は「柔らかいフラット」に寄せる

見た目は、一覧を開く一般のお客さまに馴染むよう、次の方針で作りました。

• 背景は道路や駅名の入らない、市区町村の境界だけのシンプルな地図に
• 色はブランドのロゴの緑を明るく柔らかくした色に。角は丸く
• 市区町村の境界線は背景より濃い緑の線に（白い線は薄い背景の上で境目が見えにくいため）

店舗一覧の地図の目的は「店の位置を見せること」です。道路や駅名まで入った地図は情報が多く、ピンが目立ちにくくなります。 一般的な地図サービスの見た目に近づけるより、背景は情報を減らし、ピンだけが目立つ状態を作るほうが探しやすくなります。

ページを重くしない工夫

地図に必要なファイルは一覧ページとは別のファイルに分け、特に重い背景の地図データ（約177KB）と地図のライブラリは、地図を表示するときに読み込む形にしました。背景の地図データの読み込みに失敗した場合は、下の店舗カードへ誘導する表示に切り替えます。

ファイル名の後ろには日付の版番号（?v=YYYYMMDD の形）を付けています。後で地図を更新したとき、閲覧者のブラウザに古いファイルが残って表示が変わらない、という事態を防ぐためです。

公開前に突き合わせる項目と手順

地図にすると、情報の間違いが目立つ場所に出る

吹き出しには、住所・営業時間・定休日・電話・WEB予約・LINE・ホームページへのリンクがまとめて出ます。押せば電話がかかり、押せば予約ページへ飛ぶボタンが、店ごとに並ぶということです。

店舗の情報は、本部の台帳・各店サイト・予約サイト・Googleビジネスプロフィールと、複数の場所に分かれて管理されるのが普通です。1か所だけ更新すると値がずれ、地図の吹き出しはそのずれを一番押されやすい場所に出してしまいます。

手順1：店舗ごとに、項目を情報源ごとに並べる

店舗ごとに、次の項目を表にします。

項目	照合する情報源
店名・住所	本部の店舗マスター／各店サイト／Googleビジネスプロフィール
電話番号	本部の店舗マスター／各店サイト
営業時間・定休日	各店サイト／予約サイト
WEB予約のリンク先	各店サイト／予約サイトの店舗ページ
LINEのリンク先	各店サイト（リンク先を開いて、表示されるアカウント名がその店か確認）

この実例でも、地図用のデータは、本部の店舗マスター・各店サイト・予約サイトの値を全28店分並べた照合表から作りました。値がそろわない項目があれば、作り手が推測で埋めずに運営側へ確認してから載せる、という決まりで進めます。

手順2：座標は住所から取り、怪しいものに印を付ける

ピンの位置は、住所から緯度・経度を求めて決めます。このとき、番地まで特定できず「字（あざ）」の代表地点しか取れない住所があります。この例でも3店がこれに当たりました。

代表地点のままだと、ピンが実際の店から少しずれた場所に立つことがあります。そこで、

• 座標が代表地点になった店には印を付け、公開前に地図上で位置を目で確かめる対象にする
• 経路案内のボタンには、座標ではなく住所を渡す（地図アプリ側で正しい位置を検索させる）

という2つの対策を入れています。

手順3：パソコンとスマホで実際に操作して確かめる

公開前の確認では、次の点を見ます。

• 画面幅1440px（パソコン）と390px（スマホ）で、プログラムのエラーが0件か
• 横スクロールが発生していないか（スマホで地図が画面からはみ出していないか）
• ピンの数が店舗数と一致しているか（この例では28本）
• 吹き出しの電話・予約・LINEボタンを押して、正しい先に飛ぶか

手順4：反映は「前の状態に戻せる」形で行う

この例では26店分のサイトにまとめて反映したため、反映前に各店の一覧ページを丸ごとバックアップし、送ったファイルが手元と同じかを照合（ファイルの指紋に当たるハッシュ値の一致確認）してから、全店のページが正常に開けることを確かめました。反映後も5店舗を選んでパソコン・スマホで開き、エラー0件・横スクロール0件を確認しています。

まとめ

• 店舗一覧ページは、地図（近くの店を探す人向け）とテキストの店舗カード（店が決まっている人・地図が出ないとき向け）を両方置く
• 地図は県 → エリア → ピン → 吹き出しの順に絞り込ませる。エリアは生活圏で切り、1エリアの店数を絞る
• 背景は市区町村の境界だけのシンプルな地図、ピンは文字なしの明るい色に
• 店舗カードはHTMLに最初から書いておく。同じ一覧ページを複数のサイトに置くなら、検索結果に出すかどうかを先に決める
• 公開前に、電話・営業時間・予約先・LINEを、店舗ごとに複数の情報源と突き合わせる。座標は代表地点になっていないか確かめ、経路案内には住所を渡す

店舗が増えるほど、一覧ページは「全店を並べる場所」から「お客さまが自分の店を見つける場所」に役割が変わります。複数店舗のホームページの店舗一覧を作り直したい、データの持ち方から整理したいという場合は、お気軽にご相談ください。