記事一覧

その地図が予約を止める。Googleマップ埋め込みの落とし穴

Googleマップをホームページに埋め込む手順を5つでまとめ、地図・ボタン・住所の文章の見せ方と、置く場所を表で比べました。地図を貼る前に住所がそろっているか確かめる方法も。

Googleマップで、近くのパーソナルジムを見つけた。
口コミを読んで、「ウェブサイト」を押す。

ホームページが開いて、指で画面を送っていく。
料金、体験の流れ、アクセスの欄の住所。

そのまま下まで送ると、ページのいちばん下に、もう1つ住所がある。
丁目から違う。

どっちに向かえばいいのか分からないまま、画面を閉じる。

あなたのホームページ、住所は何か所に書いてありますか?

この記事は、Googleマップから来たお客さんを、ホームページで迷わせたくないお店・教室の方に向けて書きました。

Googleマップをホームページに埋め込む方法を先に短くまとめて、そのあとで地図の見せ方と置く場所を表で比べます。

最後に、迷ったときに決める質問を3つ置きました。

Googleマップをホームページに埋め込む手順は5つ

Googleマップをホームページに埋め込む手順は5つ

Googleマップの埋め込みは、地図のHTMLをコピーして、ホームページに貼るだけ。
パソコンで進める手順は、次の5つ。

  1. パソコンでGoogleマップを開き、お店の名前で検索する
  2. 左に出たお店の情報で「共有」を押す(左上のメニューの「地図を共有または埋め込む」からも開ける)
  3. 「地図を埋め込む」のタブに切り替える
  4. 大きさを選んで、「HTMLをコピー」を押す
  5. ホームページの編集画面で、HTMLを貼れる場所に貼り付けて保存する

画面の名前は、Googleマップの更新で変わることがあります。
見当たらないときは、「共有」の近くを探してみてくださいね。

検索するのは、住所より店名がおすすめ。
店名で出した地図なら、お店の名前のついた場所として埋め込める。

WordPressは「カスタムHTML」のブロックに貼る

投稿や固定ページの編集画面で、ブロックの追加から「カスタムHTML」を選ぶ。
そこにコピーしたHTMLを貼り付けて、プレビューで地図が出るか見る。

スマホで地図が横にはみ出すときは、HTMLの中の `width="600"` を `width="100%"` に書き換える。
これで、画面の幅に合わせて表示されやすくなる。

Wixでgoogleマップを埋め込むときは、地図のパーツか埋め込みコード

Wixには、住所を入れるだけで使える地図のパーツがある。
コピーしたHTMLを「埋め込みコード」に貼るやり方もある。

画面の順番は、WixサイトにGoogle Mapを埋め込む方法にまとめています。

ここまでで、地図はホームページに出る。
ここからが、埋め込み方の記事ではあまり出てこない話。

地図の見せ方は3つ。表で比べる

地図の見せ方は3つ。表で比べる

ホームページで場所を伝えるやり方は、埋め込みの地図だけではない。
よく使われるのは、次の3つ。

見せ方

スマホでの見え方

道案内へのつなぎ方

向いているお店

埋め込みの地図

ページの中に地図が出る。地図の高さの分、ページが長くなる

地図の中の「拡大地図を表示」からGoogleマップへ

初めて来る人が多い・住宅地や路地の奥

「Googleマップで開く」ボタン

小さなボタン1つ

押すとGoogleマップで開く

地図を何ページにも出したい・ページを短くしたい

住所と目印の文章

文字だけ。ページ内検索でも見つかる

住所をコピーして地図アプリに貼る

ビルの2階・入口が裏側など、地図だけでは分からない

ボタンのリンクは、手順2の「共有」で「リンクを送信」のタブを開き、「リンクをコピー」で取れる。

どれか1つを選ぶより、組み合わせるほうが迷わせにくい。
ぼくがすすめるのは、埋め込みの地図のすぐ下に、住所の文章と「Googleマップで開く」ボタンを並べる形。

地図を見て場所が分かる人は、地図で済む。
入口が分かりにくい人は、目印の文章で分かる。
道案内まで使いたい人は、ボタンを押せばいい。

置く場所は、マップから来た人の用事で決める

置く場所は、マップから来た人の用事で決める

Googleマップから来たお客さんは、もう場所をだいたい知っている。
ホームページを開いた用事は、料金・体験の流れ・予約のしかたを確かめること。

それなのに、最初の画面に大きな地図があると、知りたいことが下へ押し出される。
地図は、置く場所で役目が変わるんです。

置く場所

良いところ

気をつけること

ページの下の欄(全ページ共通の欄)

どのページから来ても、最後に目に入る

下の欄の住所と、本文の住所がずれやすい

アクセスのページ

地図・住所・駐車場・目印を1か所にまとめられる

そのページへ行くリンクが切れていると、誰も着かない

予約ボタンの近く

場所を確かめてから予約に進める

地図が大きいと、予約ボタンが画面の外へ出る

迷ったら、地図の本体はアクセスのページに1つ。
ページの下の欄には、住所の文章と「Googleマップで開く」ボタンだけ。
アクセスのページの地図のすぐ下には、予約のボタンを1つ。

場所を確かめ終えた人が、そのまま予約に進める並びです。

地図を貼る前に、住所が1つにそろっているか確かめる

地図を貼る前に、住所が1つにそろっているか確かめる

ここからは、ぼくがサイトの1点診断で見てきた話。
3週間あまりで70件ほど、お店のホームページをスマホで開いて、予約の手前で止まる所を1つずつ記録してきました。

あるパーソナルジムのサイト。

トップのアクセスの欄と、ページのいちばん下に、住所が2つあったんです。
しかも、丁目から違う住所。
2つの間は、スマホで3画面ほど離れていました。

どちらが今の住所かは、外から見ているぼくには分かりません。
移転のあとで、片方だけ直したのかもしれない。

このページに地図を埋め込んでも、ピンが立つのは1か所だけ。
地図と同じ住所と、違う住所が、同じページに並ぶことになります。

もう1件。

ある整体・治療院のサイト。

スタッフ紹介のページのいちばん下に、「当院概要・アクセスはこちらへ」のリンクがある。
押すと、「500エラー」の画面が開いた。

ページの下の「当院概要」から行けば、アクセスのページは正しく開くんです。
地図はちゃんと置いてあるのに、そこへ向かう道が1本だけ切れていた。

住所とアクセスへの道を確かめる3つ

  1. スマホでトップを開き、ブラウザのメニューの「ページ内検索」で「丁目」や「〒」を探す。出てきた住所が全部同じか見る
  2. 埋め込んだ地図のピンの住所と、ページに書いた住所を見比べる。Googleマップのお店の情報の住所とも並べる
  3. 「アクセス」「地図」「当院概要」などのリンクを、ページの下の欄の分まで1つずつ開く

ページの下の欄は、全ページに同じものが出る作りが多い。
住所を直すときは、ページごとではなく、共通の欄の設定を開いてくださいね。

迷ったら、3つの質問で決める

迷ったら、3つの質問で決める

Googleマップの埋め込みで迷ったら、次の3つを順に聞いてみる。

入口は、地図のピンだけで分かるか

分かるなら、「Googleマップで開く」ボタンと住所の文章で足りる。
ビルの2階、入口が裏側、駐車場が別の場所、のどれかに当てはまるなら、埋め込みの地図に目印の文章を添える。

Googleマップから来る人が多いか

多いなら、地図はアクセスのページへ。
トップの最初の画面には、地図ではなく予約の入口を置く。

Googleマップや広告で人は来ているのに予約が来ないときは、広告を出しているのに予約が来ないとき、先に見る3か所も参考にしてみてください。

住所を書いた場所は、いくつあるか

2か所以上あるなら、地図を貼る前に、全部を同じ住所にそろえる。
地図を貼るのは、そのあと。

自分のホームページで、予約の手前で止まりやすい所をまとめた無料チェックリストを用意しています。
地図と住所を確かめるついでに、上から順に見てみてくださいね。