店舗検索システム は何をしますか？
目的
店舗検索システムは、物理的な拠点発見インターフェース（支店案内、小売店検索、ディーラーネットワーク、医療クリニック案内など）を設計するための方法論を提供します。このシステムは、空間構成、レスポンシブ適応、インタラクション同期、アクセシビリティガードレールを定義し、デジタル検索と物理的な目的地を橋渡しします。これにより、ユーザーは認知負荷、レイアウトの不安定性、アクセシビリティのブロックなしに、近くの拠点を見つけ、店舗詳細を評価し、そこへ移動できるようになります。
ユースケース
- 小売・ディーラーネットワーク: 顧客を実店舗、パートナー小売店、正規サービスセンターへ案内します。
- ヘルスケア・診療所: 患者が近くの緊急医療施設、病院、専門医療機関を見つけるのを支援します。
- 金融機関: ATMネットワークや支店の場所を、特定のサービス（例：ドライブスルー、公証人）とともに表示します。
- レストラン・飲食チェーン: 顧客が近くの店舗を見つけ、リアルタイムの営業状況を確認し、テイクアウト/配送注文を開始するのを支援します。
使用すべきでない場合
- 単一拠点ビジネス: 企業が1〜2つのオフィスしか持たない場合、完全な検索インターフェースは過剰です。静的マップを埋め込んだシンプルな連絡先ページで十分です（
site-navigation-systemまたは連絡先ページガイドラインを参照）。 - 完全デジタル/Eコマースブランド: 物理的な拠点や受取ポイントを持たないビジネス。
- 動的物流・ルーティング: 高度なライドシェアやリアルタイム配送追跡アプリケーションには、継続的なGPS追跡と動的ルーティングが必要であり、これらは専門的なGIS/リアルタイム交通システムの対象です。
入力
- 拠点メタデータ一覧: 座標セット（緯度/経度）、物理住所、連絡先詳細（電話、メール）、営業時間、および特定の拠点機能やサービス（ファセット）。
- ユーザー位置情報シグナル: 位置情報APIの利用可否、ユーザーが入力した郵便番号、または市区町村テキスト入力。
- 地図プラットフォームの機能: 基盤となる地図プロバイダー（例：Google Maps API、Mapbox GL JS、Leaflet）の制約とカスタムスタイリングパラメータ。
- 主要ユーザー目標: ユーザーは主にすぐに訪問したいのか（道順と営業時間が必要）、拠点に連絡したいのか（電話番号が必要）、在庫を確認したいのか（在庫システムへの接続が必要）。
出力
- 空間レイアウト設計図: レスポンシブな空間レイアウト仕様（デスクトップのスプリットペイン比率、モバイルの積み重ねタブパネル）。
- アトミックデザイン仕様: 拠点カード、検索/フィルタヘッダー、地図マーカーの詳細設計。
- インタラクション・状態マップ: マーカークリック同期の定義済み動作、ホバー状態、リスト読み込みインジケーター、カード/マーカーの関連付け。
- アクセシビリティランドマーク・キーボードマップ: 詳細ビューのフォーカストラップメカニズム、スクリーンリーダー用aria-liveアナウンス、非視覚的地図ナビゲーションパスの定義。
ワークフロー
1. 空間構成の確立
地図と拠点リストの間の空間的関係を設計します。
- デスクトップレイアウト（スプリットペイン）: 分割画面デザインを使用します。
- サイドバーペイン（幅35%〜40%）: 左側（LTR言語の場合）に配置し、読み取り階層の開始点として確立します。メインページから独立してスクロールし、検索入力と拠点リストにアクセス可能な状態を維持します。
- 地図ペイン（幅60%〜65%）: 右側に固定された永続的な要素として設定します。
- モバイルレイアウト（切り替え可能タブ）: 狭いビューポートでは地図とリストを並べて表示できないため、画面の上部または下部に切り替えバーを実装します。
- 「リストビュー」タブ: 検索入力と縦方向のカードリストを表示します。デフォルトのタブとして推奨します。
- 「地図ビュー」タブ: 全画面表示の地図を表示します。
- アクション層: フローティングコントロール（例：「このエリアを検索」ボタンや位置情報ピン）が地図の上に重なり、ナビゲーションを妨げないようにします。
2. 拠点カードのアトミックデザイン定義
拠点カードは主要な情報単位です。要素を認知スキャン優先度順に配置します。
+-------------------------------------------------------------+
| [カテゴリタグ] [距離: 0.8 mi] |
| **拠点タイトル / 支店名** |
| [星評価 / レビュー（オプション）] |
| |
| 123 物理住所, 市区町村, 都道府県 ZIP |
| ステータス表示: [営業中 / 閉店]（20:00に閉店） |
| |
| [ボタン: 道順] [ボタン: 電話] [リンク: 詳細] |
+-------------------------------------------------------------+
- 第一階層: 拠点名と検索中心からの距離。距離はリアルタイムで計算され、非常に視認性が高い必要があります（右上）。
- 第二階層: 住所とリアルタイムの営業/閉店ステータス（色分けとテキストを組み合わせて使用。例：営業中は緑、閉店は赤）。
- 第三階層: 主要アクションとして、タッチしやすいCTAボタン（例：「道順」、「電話」、「詳細を見る」）。
3. 検索とファセットフィルタリングの設計
サイドバーのヘッダー部分に、直感的なクエリとフィルタリングツールを提供します。
- 検索入力: 郵便番号、市区町村名、住所をサポートし、オートコンプリートメニューを備えた統合入力。
- 現在地トリガー: 標準的な「クロスヘア」アイコンで表され、スクリーンリーダー用に適切にラベル付けされた（
aria-label="現在地の近くの拠点を検索"）、目立つアクセシブルな位置情報ボタン。 - 半径フィルター: 検索半径を絞り込めるドロップダウン（例：5、10、25、50マイル）。
- ファセットドロップダウン: 店舗固有の機能（例：「ドライブスルー」、「車椅子対応」、「24時間」）のクイックフィルター。フィルターボタンにバッジを表示して選択数を示します。
4. 双方向インタラクション同期の実装
地図マーカーとリストカードは統一システムとして動作する必要があります。明確なインタラクティブ関係を確立します。
- リストカードホバー/フォーカス -> 地図マーカー: リストカードのホバーまたはフォーカスにより、対応する地図マーカーの視覚的状態が変化します（例：拡大、色変更、z-index調整による前面表示）。
- 地図マーカークリック -> リストカード: 地図マーカーのクリックにより、以下の動作が発生します。
- サイドバーリストを自動スクロールし、対応するカードを表示します。
- カードを短いトランジションアニメーション（例：微妙な背景パルス）でハイライトします。
- マーカー上に店舗名、距離、「道順」リンクを含む地図「情報ウィンドウ」（ポップアップ）を開きます。
- このエリアを検索（地図ドラッグ）: ユーザーが地図を初期検索中心からパンまたはズームした場合にのみ、地図ペインの上部中央に表示される「このエリアを検索」フローティングボタンを提供します。
5. モバイルタッチと地図適応の確立
モバイルデバイスでのインタラクションを管理し、フラストレーションを防ぎます。
- スクロールハイジャック回避: デフォルトでモバイル地図のジェスチャーベースのズームを無効にします（パンまたはズームには2本指ドラッグが必要）。これにより、ユーザーがページをスクロールしようとした際に地図に「はまって」しまうのを防ぎます。
- フローティングコントロール: フローティングのズーム（+ / -）コントロールと位置情報ボタンを地図の右下に配置し、高コントラストの影と最小タッチターゲット44x44pxでスタイリングします。
- カードカルーセルオーバーレイ: モバイル地図ビューでは、ビューポート下部にスワイプ可能な水平カードカルーセルを表示し、単一のアクティブまたは最も近い拠点を表示して、地図探索と詳細を統合します。
決定ルール
- 「デフォルト検索」ルール: 検索クエリや位置情報許可なしで検索ページが読み込まれた場合：
- 空の地図を表示しない。
- IPジオロケーションに基づいて最も近い拠点をデフォルト表示するか、すべての拠点をアルファベット順/優先順に表示します。
- 「結果なし」回復ルール: ユーザーが拠点のないエリアを検索した場合：
- 地図をズームアウトして、利用可能な最も近い拠点を表示します。
- サイドバーリストに役立つメッセージを表示します（例：「[クエリ]の25マイル以内に拠点が見つかりませんでした。最も近い拠点を表示します：」）。
- 「すべての拠点を表示」リンクを提供します。
- ポップアップ vs. 詳細パネルルール:
- 拠点のメタデータが最小限（住所と営業時間のみ）の場合、すべての情報を地図マーカーの情報ウィンドウポップアップ内に表示します。
- 拠点のメタデータが豊富（在庫、チーム一覧、写真）の場合、「詳細を見る」をクリックすると、サイドバー内に全深度の詳細パネルがスライドアウトし、そこにキーボードフォーカスをトラップし、明確な「リストに戻る」ボタンを提供します。
制約
- アクセシビリティ（キーボードナビゲーション）:
- キーボードユーザーは、地図を直接使用せずに検索フロー全体と拠点リストをナビゲートできる必要があります。
- 地図マーカーはキーボードフォーカス可能（
tabindex="0"）であるか、アクセシブルなリスト代替手段で表現される必要があります。 - 検索結果が更新された場合、
aria-live="polite"要素を使用してスクリーンリーダーに変更を通知します（例：「ワシントン州シアトル近郊で3件の拠点が見つかりました」）。
- タッチターゲットサイズ: すべてのボタン、地図マーカー、フィルターコントロールはWCAG 2.2 SC 2.5.8（最小24x24px、周囲にスペースあり）を満たし、カード上の主要アクショントリガーとフローティングコントロールは親指の快適さのために44x44pxにサイズ設定する必要があります。
- 視覚的コントラスト: 高コントラストの地図が推奨されます。標準マーカーとアクティブマーカーラベルは、地図背景に対して少なくとも3:1のコントラスト比を持つ必要があります。カードとポップアップ内のテキストはWCAG AA（4.5:1）を満たす必要があります。
- レイアウトシフト防止: アクティブ検索中にサイドバーにスケルトンカードを使用して読み込み状態のための垂直/水平スペースを予約し、累積レイアウトシフト（CLS）を防ぎます。
よくある失敗パターン
- モバイルスクロールトラップ: モバイル画面でのスクロールが地図のパン/ズームのみを引き起こし、ユーザーが地図コンポーネントをスクロールして通り過ぎることができず、ページに閉じ込められる。
- 双方向同期の破綻: 地図マーカーをクリックするとポップアップは開くが、サイドバーの対応するカードまでスクロールしたりハイライトしたりせず、ユーザーが手動で名前を照合せざるを得なくなる。
- 「盲目の地図」（キーボード排除）: 地図マーカーをフォーカス不可能なSVG形状やキャンバス要素として実装し、物理的な拠点がスクリーンリーダーやキーボード専用ユーザーにとって完全に到達不可能になる。
- クエリなしの行き止まり: 初期ページ読み込み時に完全な空白画面と静かな地図を表示し、ユーザーが先に検索しなければならないと推測せざるを得なくなる。
- 地図ドラッグの遅延: 小さな地図ドラッグごとに数百のマーカーをリアルタイムで取得・レンダリングしようとし、インターフェースがフリーズする。地図範囲変更にデバウンス（250〜400ms）を実装し、近くのマーカーをクラスタリングする。
検証基準
- デスクトップ（分割画面サイドバー）とモバイル（切り替え可能なリスト/地図タブ）の両方に対して空間レイアウトが定義されている。
- 双方向同期が指定されている（マーカークリックでカードをハイライト/スクロール、カードホバー/フォーカスでマーカーをハイライト）。
- モバイルのジェスチャーズームはデフォルトで無効になっている（2本指スクロールが必要）ことで、モバイルスクロールハイジャックを防止している。
- 検索クエリ更新時のレイアウトシフト（CLS）を避けるために、読み込み状態（スケルトン）が設計されている。
- アクセシブルな代替手段が定義されている：キーボードユーザーは、マウスで地図キャンバス上のアイテムをホバーすることなく、すべての拠点を閲覧し、詳細を読み、道順を取得できる。
- 検索結果が更新されたとき、スクリーンリーダーが説明的で丁寧な
aria-liveアナウンスを受信する。 - すべてのインタラクティブなカード要素、マーカー、ズームボタンのタッチターゲットが、少なくともWCAG 2.2の24x24pxの最小サイズを満たしている（主要CTAは44x44pxを推奨）。
- 拠点カードと地図ポップアップ内のテキストコントラストがWCAG AA（4.5:1）を満たしている。
- 結果ゼロの検索と位置情報許可拒否に対して、明確なフォールバックフローが設計されている。