ACC-004 公開  更新

交通手段別型 アクセス・地図

電車・車・バスなど、利用する交通手段をタブで選ぶと、その手段に必要な情報だけを表示する設計です。
駐車場の台数や高さ制限、バスの停留所など、手段ごとに違う情報を混ぜずに伝えます。

ワイヤーフレーム(PC)

交通手段別型 アクセス・地図 PC版ワイヤーフレーム

ワイヤーフレーム(SP)

交通手段別型 アクセス・地図 SP版ワイヤーフレーム

SP版の特徴

  1. 住所をタブの上に置く:どのタブを選んでも住所が見えるよう、切り替わらない情報を先に出すためです。
  2. タブの幅を等分して1行に収める:交通手段の選択肢がすべて見えるようにするためです。

採用前の判断ポイント

向いているケース

  • 電車で来る人と車で来る人の両方がいる
  • 駐車場の有無や台数、提携駐車場など、車で来る人に伝える情報が多い
  • クリニック・介護施設・公共施設など、利用する交通手段が人によって違う

向かないケース

このワイヤーの特徴

利用する交通手段に合う情報だけを読める

電車・車・バスをタブで分け、選んだ手段の情報だけを表示しています。
車で来る読み手は、電車の出口の説明を読み飛ばす必要がありません。

車で来る人に必要な情報を、まとめて示す

駐車場の台数・料金・高さ制限・満車のときの案内を、車のタブにまとめています。
車で来る読み手が気にするのは、とめられるかどうかです。

ナビに入れる住所を示す

カーナビで入口が正しく出ない場所では、ナビに入れる住所や目印を添えています。

住所は、タブの外に常に出しておく

住所はタブの切り替えに関係なく表示し、どの手段を選んでも場所の基本が分かるようにしています。

制作時のよくある失敗

駐車場について、書いていない

駐車場の案内がないと、車で来る読み手は電話で確かめることになります。
駐車場がない場合も「ありません」と書き、近くのコインパーキングを案内します。

タブの中に、住所まで入れてしまう

住所をどれか1つのタブの中だけに置くと、別のタブを選んだ読み手が住所を見つけられません。
住所はタブの外に出しておきます。

バスの本数や時刻が古いまま

バスの路線や本数は変わることがあります。
本数を書く場合は目安にとどめ、運行会社の時刻表へのリンクを添えます。

タブの名前が、分かりにくい

「アクセス1」「アクセス2」では中身が分かりません。
「電車」「車・駐車場」のように、中身が分かる名前にします。

よくある質問

駐車場がない場合も、車のタブは必要ですか?

必要です。
車で来ようとする読み手にとって、「駐車場がない」ことは大切な情報です。
近くのコインパーキングや、公共交通での来訪をすすめる案内を書きます。

交通手段のタブは、いくつまでが目安ですか?

電車・車・バスの3つ程度が扱いやすい数です。
自転車や徒歩、タクシーなどは、関係する手段のタブの中に書き添える形でまとめられます。

最初に表示するタブは、どれにすればよいですか?

来る人の多い手段を最初に表示します。
駅から近い場所なら電車、郊外なら車、というように、実際の来訪の傾向に合わせます。

同じパーツのPattern

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

関連ページ

この型をシェアする

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

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

このPatternを書いた人

岡野 優太

株式会社ENVY DESIGN

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

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

レビュー・修正の履歴

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