ACC-003 公開  更新

道順案内型 アクセス・地図

駅の出口から入口までを、曲がる場所ごとの写真と短い文で順に案内する設計です。
地図だけでは分かりにくい曲がり角や入口の目印を、歩く順番どおりに伝えます。

ワイヤーフレーム(PC)

道順案内型 アクセス・地図 PC版ワイヤーフレーム

ワイヤーフレーム(SP)

道順案内型 アクセス・地図 SP版ワイヤーフレーム

SP版の特徴

  1. 手順を縦に並べ、写真を左に小さく置く:歩きながら上から順に読めるようにし、写真より文を読みやすくするためです。
  2. 出口を選ぶボタンを幅いっぱいに並べる:歩きながらでも押しやすくするためです。

採用前の判断ポイント

向いているケース

  • 駅から入口までの道が分かりにくく、迷ったという声がある
  • 入口が表通りから見えにくい、ビルの中の分かりにくい場所にある
  • 初めて来る人が多い店舗・教室・クリニック

向かないケース

このワイヤーの特徴

曲がる場所ごとに、見る景色で案内する

曲がる場所ごとに写真を1枚置き、その場所で何を目印にするかを短い文で添えています。
地図の上の線より、実際に目に入る景色のほうが、歩きながら照らし合わせやすくなります。

出口を選ぶと、道順が切り替わる

階段の出口とエレベーターのある出口など、出発する出口を選べるようにしています。
ベビーカーや車いすで来る読み手も、自分に合う道順を選べます。

手順に番号を付け、文だけでも伝わるようにする

手順には番号を付け、写真がなくても文だけで道順が分かるように書いています。
写真は、文の内容を確かめる補助として置きます。

所要時間と距離を、最初に示す

見出しの下に「徒歩5分・約350m」のように所要時間と距離を示し、どれくらい歩くのかを先に伝えています。

制作時のよくある失敗

写真だけで、文の説明がない

写真だけでは、どこで何をすればよいかが伝わりにくく、読み上げでも内容が分かりません。
手順ごとに「〇〇の角を左へ」のような文を書きます。

写真が古く、今の景色と違う

目印にしていた店が閉店していると、かえって迷わせます。
目印は変わりにくいものを選び、定期的に写真と文を見直します。

手順が多すぎる

曲がる場所以外まで写真を並べると、どこが大切なのかが分からなくなります。
迷いやすい場所に絞り、4〜6手順程度にまとめます。

出口が1つしか案内されていない

階段しかない出口だけを案内すると、エレベーターを使いたい読み手が困ります。
段差のない出口からの道順も用意します。

よくある質問

道順の写真は、どの場所を撮ればよいですか?

曲がる場所と、最後の入口を優先します。
曲がる手前から、進む方向が分かる向きで撮り、目印になる看板や建物が写るようにします。

動画で道順を案内してもよいですか?

動画は雰囲気が伝わりやすい一方、途中の場所だけを見返しにくくなります。
動画を置く場合も、手順ごとの写真と文を残しておくと、歩きながら確かめやすくなります。

道順は、地図の経路線だけではだめですか?

経路線は全体の位置関係を伝えるのに向いていますが、曲がる場所の景色や入口の目印までは伝わりません。
迷いやすい場所がある場合は、写真と文の手順を組み合わせます。

同じパーツのPattern

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

関連ページ

この型をシェアする

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

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

このPatternを書いた人

岡野 優太

株式会社ENVY DESIGN

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

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

レビュー・修正の履歴

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