ACC-002 公開  更新

複数拠点切り替え型 アクセス・地図

拠点の名前をタブに並べ、選んだ拠点の地図と住所・最寄り駅・電話番号に切り替える設計です。
拠点が増えても1つの画面の中で見比べられ、行き先を間違えにくくします。

ワイヤーフレーム(PC)

複数拠点切り替え型 アクセス・地図 PC版ワイヤーフレーム

ワイヤーフレーム(SP)

複数拠点切り替え型 アクセス・地図 SP版ワイヤーフレーム

SP版の特徴

  1. タブの幅を等分して1行に収める:拠点名が画面からはみ出すと、ほかの拠点があることに気づかれにくいためです。
  2. 地図の下に拠点名の見出しを置く:SPでは地図で画面の上が埋まるため、どの拠点の情報かを見出しで示し直すためです。

採用前の判断ポイント

向いているケース

  • 本社・支店・営業所など、訪問先の拠点が2〜5か所ある
  • 拠点ごとに住所・電話番号・最寄り駅が違い、行き先を選んでもらう必要がある
  • 拠点の情報を、1つのページにまとめて管理したい

向かないケース

  • 拠点が1か所だけ(地図+住所型 アクセス・地図)
  • 拠点が数十か所あり、地域や条件で探してもらう必要がある(店舗検索の仕組みを別に用意します)

このワイヤーの特徴

行き先の拠点を、選んでから確かめられる

拠点の名前をタブに並べ、選んだ拠点の情報だけを表示しています。
すべての拠点の住所を縦に並べるより、読み手が自分の行き先だけに集中できます。

地図と住所が、同じ拠点のものに切り替わる

タブを切り替えると、地図のピンと住所・最寄り駅・電話番号が一緒に切り替わります。
地図と住所が別々の拠点を指す、という食い違いが起きません。

拠点名を、見出しとしても示す

情報の上に拠点の名前を見出しとして置き、いま見ているのがどの拠点かを、タブの印だけに頼らず伝えています。

矢印キーでも、拠点を切り替えられる

タブは左右の矢印キーで移動でき、選んでいるタブを読み上げでも伝えます。

制作時のよくある失敗

拠点ごとの電話番号が、代表番号のまま

拠点ごとに窓口が違うのに、どの拠点を選んでも代表番号だけが出ると、読み手はかけ直すことになります。
拠点ごとの連絡先を出します。

地図だけ切り替わり、住所が切り替わらない

地図と文字の情報が別々に管理されていると、片方だけ更新されて食い違うことがあります。
拠点ごとの情報を1つにまとめて持ち、まとめて切り替えます。

拠点の並び順に、決まりがない

並び順がばらばらだと、目的の拠点を探しにくくなります。
本社から、または地域の北から、など決まった順に並べます。

SPで、タブが画面からはみ出す

拠点名が長いと、SPで横に並べたタブが収まりません。
拠点名は短い呼び名にし、収まらない数なら一覧から選ぶ形にします。

よくある質問

拠点が何か所までなら、タブで切り替える形が向いていますか?

タブが1行に収まる数が目安で、SPでは3〜4か所程度が扱いやすい範囲です。
それを超える場合は、地域ごとの一覧や、選択肢から選ぶ形を検討します。

拠点ごとに、別のページを作ったほうがよいですか?

拠点ごとに探されることが多い場合や、拠点ごとに伝える内容が多い場合は、拠点ごとのページを作り、この型を一覧の入口として使う形も考えられます。

初めに表示する拠点は、どれにすればよいですか?

本社や、問い合わせの多い拠点を最初に表示するのが一般的です。
ほかのページから特定の拠点を見に来た読み手には、その拠点を選んだ状態で開けるようにしておくと親切です。

同じパーツのPattern

アクセス・地図の型の選び方と一覧を見る

関連ページ

この型をシェアする

チームや制作先に、この型のページを送れます。

この型は役に立ちましたか?

このPatternを書いた人

岡野 優太

株式会社ENVY DESIGN

代表取締役/ディレクター/デザイナー

Web業界歴14年。これまでに500件以上のWeb制作プロジェクトに携わり、企業サイト、採用サイト、ECサイトなど幅広い領域を手がけてきました。情報設計・ディレクション・デザインを中心に、Webサイトの企画から改善まで携わっています。近年はAIO(AI Optimization)・GEO領域に注力し、ChatGPTやPerplexity、Google AI Overviewなど生成AI検索からの引用獲得を支援しています。

レビュー・修正の履歴

  1. 公開 アバター画像岡野 優太 この型を公開