カフェ、クリニック、スタジオ、マルシェの出店者などにとって、プロフィールリンクの先にあるページで特に重要なのは、来店する人を迷わず現地へ案内することです。Digily Linkページに地図を載せる方法は3つあり、利用中のプランと、地図そのものを見せたいのか、ナビを開始するボタンを置きたいのかによって選べます。
方法1. 地図アプリを開く経路案内ボタン
この方法はFreeを含むすべてのプランで利用でき、多くの訪問者が実際に求めている機能でもあります。スマートフォン上の地図を指で拡大、縮小するより、"経路案内"をタップしてすぐにナビを始めたい人がほとんどです。
- Google Mapsを開いて店舗や会場を検索し、共有をタップしてリンクをコピーします。
- ダッシュボードで、そのアドレスをリンク先に指定した短縮リンクを作成し、"モバイルでアプリを自動的に開く"を有効にします。Digily LinkはGoogle MapsとWazeのリンクを認識するため、対応アプリがインストールされたスマートフォンでは、短縮リンクからナビが直接開きます。これが重要な理由は、ディープリンクの解説で確認できます。
- ページにリンクブロックを追加し、短縮リンクを貼り付けて、ラベルを"経路案内"にします。
ボタンのリンク先が短縮リンクなので、タップ数はアクセス解析に記録されます。移転した場合も、リンク先だけを差し替えられます。
方法2. iframeブロックで地図を埋め込む
iframeブロックはStarterとProプランで利用でき、ページ内に地図そのものを表示できます。
- Google Mapsで場所を検索して共有を開き、"地図を埋め込む"タブに切り替えます。
- Googleが表示するHTMLをコピーします。必要なのはsrc="…"内にある、https://www.google.com/maps/embedで始まるアドレスだけです。アドレスを取り出しにくい場合は、コード全体をURLパーサーに貼り付けてください。
- ページにiframeブロックを追加し、そのアドレスをURLとして貼り付け、高さを約300ピクセルに設定します。
地図のすぐ下には、方法1の経路案内ボタンを置きましょう。地図で場所を確認でき、ボタンから実際の経路を案内できます。
方法3. カスタムHTMLでレスポンシブな地図を表示する
カスタムHTMLブロックはProプランで利用できます。画面サイズが変わっても比率を保つ地図など、表示を細かく調整できます。次のコードをブロックに貼り付け、YOUR_EMBED_URLを"地図を埋め込む"タブで取得したアドレスに置き換えてください。
<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:12px"><iframe src="YOUR_EMBED_URL" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0" loading="lazy" allowfullscreen referrerpolicy="no-referrer-when-downgrade"></iframe></div>
padding-bottomの値によって地図の形が決まります。56.25%なら16:9の長方形、75%なら正方形に近い4:3、100%なら正方形です。loading="lazy"属性を指定すると、訪問者が地図までスクロールする前に読み込まれないため、ページ表示への影響を抑えられます。ほかの場所からコピーしたコードを使う場合は、意図しない改行でブロックが崩れないよう、先にHTML圧縮ツールで整えてください。
目的に合う方法の選び方
| 実現したいこと | 使用する機能 | プラン |
|---|---|---|
| 1回のタップでナビを開始する | アプリ連携を設定した経路案内ボタン | Free以上 |
| ページ上に地図を表示する | iframeブロック | StarterとPro |
| 形やデザインを調整した地図を表示する | カスタムHTMLブロック | Pro |
| 複数の場所を掲載する | 場所ごとに見出しと経路案内ボタンを1つずつ置くか、方法2または3でカスタムのGoogle My Mapsを埋め込む | 使用するブロックによる |
店舗や地域ビジネスで活用するコツ
- 自分の地図アプリに住所を入力したい人のために、地図の上に段落ブロックを置き、郵便番号を記載します。
- Freeプランで利用できる営業時間ブロックを追加し、今から向かっても営業中かどうか分かるようにします。
- 地図は1ページに1つだけ置きます。地図を2つ埋め込むと、得られる利点が少ない一方で読み込み時間は2倍になります。
- ページのQRコードを作成し、店頭やチラシに印刷します。店舗向けページの構成は、小規模ビジネス向けプロフィールリンクで紹介しています。
- iPhoneとAndroidスマートフォンのInstagramアプリ内から、経路案内ボタンをテストします。パソコンから短縮リンクを開いたときの動作は、URLリダイレクトチェッカーで確認できます。
期間限定ショップ、マルシェ、イベントで使う場合
毎週末、出店場所が変わる場合でも、そのたびに新しい地図を作る必要はありません。経路案内ボタンは短縮リンクにつないだまま、金曜日にリンク先を週末の出店場所へ変更します。ページ上のURL、バナーに印刷したQRコード、SNSのプロフィールリンクは変わりません。StarterとProプランでは短縮リンクの公開先をスケジュールできるため、誰かが操作を覚えておかなくても、土曜日の場所から日曜日の場所へ午前0時に切り替えられます。事前に予定を立てたい人のために、段落ブロックで日付と郵便番号も記載してください。
Apple MapsとWaze
アプリ連携はGoogle MapsとWazeのアドレスを認識します。Apple Mapsを使いたいiPhoneユーザー向けには、住所を含むmaps.apple.comへの通常のリンクを置けます。Appleのリンク自体がそのように動作するため、設定を追加しなくても、iPhoneではApple Maps、それ以外ではウェブ版の地図が開きます。"Google Maps"と"Apple Maps"の2つのボタンを用意すれば、日本で使われているほぼすべてのスマートフォンに対応でき、クリック数から訪問者が実際にどちらを使っているかも分かります。
よくある質問
Google Maps APIキーは必要ですか？
必要ありません。"地図を埋め込む"で取得するコードと共有リンクは無料で利用でき、キーも不要です。APIキーが必要なのは、開発者が独自の地図アプリケーションを構築する場合だけです。
地図に複数のピンを表示できますか？
Google My Mapsですべての場所を登録したカスタム地図を作成し、一般公開で共有します。その埋め込み用アドレスをiframeブロックまたはカスタムHTMLブロックで使用してください。
地図を埋め込むとページの表示が遅くなりますか？
わずかに遅くなります。そのため、上のコードでは地図を遅延読み込みするようにしています。来店を促すことが目的のページでは、地図の画像よりも経路案内ボタンのほうが重要です。
Freeプランでも利用できますか？
経路案内ボタンは利用できます。iframeブロックにはStarter、カスタムHTMLブロックにはProが必要です。各プランに含まれる機能はプランページで確認できます。
店舗を移転した場合はどうすればよいですか？
経路案内ボタンにつないだ短縮リンクのリンク先を変更し、埋め込み用アドレスも差し替えます。印刷物を変更する必要はありません。
公開前の最終確認
- 経路案内ボタンが、スマートフォンでは地図アプリ、パソコンでは地図ページを開く。
- 埋め込んだ地図に正しいピンが表示され、スマートフォンではページ幅に収まっている。
- 郵便番号と営業時間がページに記載されている。
- ページ上の地図が1つだけになっている。
- ブラウザだけでなく、Instagramアプリ内からもテストしている。
