実店舗や会社のコーポレートサイトを作る際、アクセスマップの設置は欠かせません。以前はGoogleマップのサイトから埋め込み用のHTMLコードを取得して貼り付ける手間がありましたが、ElementorのGoogleマップウィジェットを使えば、直感的な操作だけで誰でも簡単に地図をページに配置できます。
今回は、ユーザーが迷わず目的地にたどり着けるための基本設定と、親切なレイアウトのコツを解説します。
住所を入力するだけの超簡単設定
Elementorのウィジェットパネルから「Googleマップ」を探し、配置したいセクションにドラッグ＆ドロップします。
左パネルの「コンテンツ」タブに「場所（Location）」という入力欄があるので、ここに店舗の住所や施設名（例：東京都渋谷区〇〇、またはランドマーク名）を直接入力してください。
たったこれだけで、指定した場所にピンが立った地図が自動的に表示されます。基本的な表示であれば、面倒なAPIキーの取得なども必要ありません。
左パネルの「コンテンツ」タブに「場所（Location）」という入力欄があるので、ここに店舗の住所や施設名（例：東京都渋谷区〇〇、またはランドマーク名）を直接入力してください。
たったこれだけで、指定した場所にピンが立った地図が自動的に表示されます。基本的な表示であれば、面倒なAPIキーの取得なども必要ありません。
見やすさを決める「ズーム倍率」と「高さ」
地図が表示されたら、ユーザーが現在地や周辺情報を把握しやすいように見え方を調整します。
-
ズーム（Zoom）：地図の拡大率を設定します。
初期設定だと広域すぎる場合があるため、最寄り駅からの道順を見せたい実店舗の場合は、14〜17前後に設定すると、周辺の目印となる建物や交差点が分かりやすくなります。 -
高さ（Height）：ページ全体のレイアウトに合わせて地図の高さを調整します。
PC表示では400pxなど少し大きめに設定して視認性を高め、レスポンシブモードでスマホ表示に切り替えた際は300px程度のコンパクトなサイズに整えると、画面への収まりが良くなります。
迷わせない！「マップアプリで開く」ボタンの併用
ウィジェットで地図を埋め込むだけでなく、そのすぐ下に「Googleマップで開く」などのボタンウィジェットを配置するのが、実務でよく使われる親切な導線設計です。
スマホでサイトを見ているユーザーは、埋め込まれた地図を見るだけでなく、自分のマップアプリを起動して現在地からの経路案内を使いたいケースが多々あります。ボタンのリンク先に目的地のGoogleマップURLを設定しておくことで、ユーザーの来店をスムーズに後押しできます。
スマホでサイトを見ているユーザーは、埋め込まれた地図を見るだけでなく、自分のマップアプリを起動して現在地からの経路案内を使いたいケースが多々あります。ボタンのリンク先に目的地のGoogleマップURLを設定しておくことで、ユーザーの来店をスムーズに後押しできます。
まとめ
- 「場所」の欄に住所や施設名を入力するだけで簡単にマップを埋め込める。
- 駅からの道順を分かりやすくするため、ズーム倍率を調整。
- PCとスマホで、それぞれ画面のバランスに合った高さにレスポンシブ調整する。
- 地図の近くに「マップを開くボタン」を置くと、モバイルユーザーの利便性が格段にアップする。
店舗ビジネスのサイトにおいて、アクセスマップの見やすさはユーザーの満足度に直結します。
設定自体はウィジェットを置いて住所を入れるだけと非常に簡単なので、ぜひサイトの会社概要やアクセス案内のページで活用してみてください。
設定自体はウィジェットを置いて住所を入れるだけと非常に簡単なので、ぜひサイトの会社概要やアクセス案内のページで活用してみてください。
