ACC-001 公開  更新

地図+住所型 アクセス・地図

地図の横に、住所・最寄り駅・電話番号・受付時間を文字で並べる設計です。
地図を見なくても、場所と行き方の要点を文字で読めるようにし、地図アプリを開くボタンと住所をコピーするボタンを添えます。

ワイヤーフレーム(PC)

地図+住所型 アクセス・地図 PC版ワイヤーフレーム

ワイヤーフレーム(SP)

地図+住所型 アクセス・地図 SP版ワイヤーフレーム

SP版の特徴

  1. 地図の高さを200px程度に抑える:地図が画面を埋めると、指で地図が動くばかりで、ページを読み進めにくくなるためです。
  2. 地図の下に住所とボタンを続けて置く:SPでは、住所を読んだ流れのまま地図アプリを開けるようにするためです。

採用前の判断ポイント

向いているケース

  • 場所が1か所で、来訪や来店の前に住所と行き方を確かめてもらいたい
  • 会社・事務所・店舗など、アクセスのページや会社概要の中に置く
  • 地図アプリで経路を調べてもらう前提で、必要な情報を1か所にまとめたい

向かないケース

このワイヤーの特徴

地図を見なくても、場所と行き方が文字で分かる

住所・最寄り駅と出口・徒歩の時間を、地図の横に文字で並べています。
地図の画像や埋め込みは、読み上げや拡大で読めないことがあり、読み込みに時間がかかることもあります。
文字の情報があれば、地図がなくても行き方の要点が伝わります。

経路は、地図アプリに任せる

「Googleマップで開く」ボタンで、地図アプリの経路案内へつなげています。
現在地からの経路は、読み手の端末の地図アプリのほうが正確に出せます。
新しいタブで開くことは、ボタンの中の文言で伝えます。

住所を、そのまま使える形で渡す

「住所をコピー」ボタンで、住所の文字をそのまま使えるようにしています。
カーナビやタクシーの配車アプリに住所を入れる場面で、書き写す手間と入力の誤りを減らせます。

電話番号は、押して発信できる文字で置く

電話番号は画像にせず、文字で表示し、発信できる環境ではそのまま電話をかけられるリンク(tel:)にしています。

制作時のよくある失敗

地図の埋め込みだけで、住所を文字で書いていない

地図が読み込まれない環境や、読み上げで利用する読み手には、場所が伝わりません。
住所と最寄り駅は、必ず文字でも書きます。

最寄り駅だけ書いて、出口と徒歩の時間がない

大きな駅では、出口を間違えると大きく遠回りになります。
「〇番出口から徒歩〇分」まで書くと、迷う読み手が減ります。

住所の表記が、ページごとに違う

会社概要・アクセス・フッター・Googleビジネスプロフィールで、ビル名や階数の書き方がばらばらだと、読み手も検索の仕組みも同じ場所だと判断しにくくなります。
表記は1つにそろえます。

SPで、地図が画面を埋めてスクロールしにくい

地図の埋め込みが画面いっぱいだと、指で地図が動くばかりでページを読み進められません。
SPでは地図の高さを抑え、住所とボタンをすぐ下に置きます。

よくある質問

地図は、埋め込みと画像のどちらがよいですか?

埋め込みは拡大や移動ができる一方、読み込みが重くなりやすい面があります。
画像は軽いものの、住所の変更に合わせて作り直す必要があります。
どちらの場合も、住所と行き方を文字で書き、地図アプリで開くボタンを添えておくと、地図に頼りすぎずに済みます。

地図の埋め込みで、ページの表示が遅くなりませんか?

地図の埋め込みは読み込むものが多く、ページの表示に影響することがあります。
画面の下のほうに置く場合は、スクロールして近づいたときに読み込む設定(遅延読み込み)にしておくと、最初の表示への影響を抑えられます。

アクセスの情報は、Googleビジネスプロフィールとそろえたほうがよいですか?

そろえておくと、検索の結果・地図アプリ・サイトで情報が食い違わずに済みます。
住所・電話番号・営業時間を変えたときは、両方を更新します。

関連ページ

この型をシェアする

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

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

このPatternを書いた人

岡野 優太

株式会社ENVY DESIGN

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

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

レビュー・修正の履歴

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