Googleインドアビューの埋め込み!ホームページ・SNSでの簡単なやり方

今回は、Googleインドアビューの埋め込み方法について詳しく説明していきます。
作成したGoogleインドアビューは、Googleマップ上はもちろんのこと、店舗のホームページやSNSにも投稿することができます。
そしてその方法は、Webサイト制作に携わる専門家でなくともできてしまう、簡単なものです。

この記事では、

  • ホームページへ埋め込む方法
  • ホームページに埋め込んだGoogleインドアビューをレスポンシブ(スマホやタブレットなど、デバイス別の画面幅に合わせること)にする方法
  • SNS(FacebookページやTwitterなど)に投稿する方法

の、3つを紹介していきます!

ホームページにGoogleインドアビューを埋め込む方法

ホームページにGoogleインドアビューを埋め込むには、Googleマップから「埋め込みコード」を取得し、それをホームページ上に貼り付けていきます。

まずは、Googleマップ上で店舗施設名を検索。該当の場所を表示させます。店舗施設の情報が左側に出てきますので、そこからインドアビュー画像を見つけてクリック。(※画像の左下に丸まった矢印があればインドアビューです)

インドアビュー画像が表示されたら、左上の店名横、縦に3つ点が並んだ部分をクリックします。すると、小さな窓が表示され「画像を共有または埋め込む」というメッセージが現れますので、それをクリックします。

「画像の埋め込み」タブをクリックすると、埋め込みコードが表示されます。お好きなサイズを選択したあとに、埋め込みコードをコピーしましょう。

コピーした埋め込みコードをホームページのお好きな場所に貼り付ければ、そこにインドアビューが表示されるようになります!

※WordPressでホームページを作られている場合は「テキストエディタ」に貼り付けましょう。

補足
ちなみに、あらかじめインドアビューを好きな位置まで動かしてから埋め込みコードを取得すると、その地点からスタートするインドアビューが表示できます。

ホームページに埋め込んだGoogleインドアビューをレスポンシブにする方法

埋め込みコードを貼りつけさえすれば表示できるインドアビューですが、一つだけ難点があります。

それは、スマホで見たときにはみ出たように見えること。

現在、インターネットの閲覧は7~8割がスマホからされています。そう考えると、インドアビューのはみ出しは見過ごせません。

インドアビューのはみ出しを修正して、レスポンシブ(スマホやタブレットなどのデバイスの幅に合わせて最適なサイズで表示すること)な見た目にするには、次の2つの方法があります。

①簡単!インドアビューの埋め込みコードの一部を変更する

もっとも簡単な方法なのが、Googleマップで取得したインドアビューの埋め込みコードの一部を変更することです。

【変更前の埋め込みコード】

<iframe src=”https~・・・width=”800” height=”600″ frameborder~・・・

※数字はインドアビューのサイズによって変わります。

  ↓

【変更後の埋め込みコード】

<iframe src=”https~・・・width=”100%” height=”600″ frameborder~・・・

このように、width(横幅)の値を任意の数字から「100%」に変更し、ホームページに貼り付けてみてください。

すると、スマホからの見た目は次のようになります。

width100%のインドアビュー

②上級者向け HTMLとCSSでインドアビューをレスポンシブにする

Web言語(HTMLやCSS)が多少わかる方なら、それを使ってGoogleインドアビューをレスポンシブにすることができます。

まずは、インドアビューの埋め込みコードを囲むHTMLタグから。↓

[html]

&amp;lt;div class=&amp;quot;gmap&amp;quot;&amp;gt;インドアビューの埋め込みコード&amp;lt;/div&amp;gt;

[/html]

そして、上のHTMLタグで指定したCLASSに該当するCSSは、次の通りです。(WordPressの場合は、CSSカスタマイズの部分に追記してください)↓

[css]
.gmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.gmap iframe,
.gmap object,
.gmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
[/css]

Googleインドアビューを埋め込むときには、ぜひレスポンシブも意識してみましょう。

GoogleインドアビューをSNSに投稿する方法

Googleインドアビューは、SNSにも投稿することができます。この場合は埋め込みとは違い、Googleマップ上で取得できる「共有リンク」を貼りつけていきます。

Googleマップで店舗施設名を検索し、インドアビューを表示させたら、画面左上の3つの点をクリック。「画像を共有または埋め込む」を選択します。

「リンクを共有」タブに切り替えると、共有リンクが表示されています。多くの場合、そのままでは長いURLです。「短縮URL」にチェックを入れると、短縮されたURLを取得することができます。

取得した共有リンクを、各SNSの投稿画面に貼り付ければ、Googleインドアビューへのリンクが貼れます。

インドアビューをSNSで投稿する際は、直接インドアビューを見せるというよりは、インドアビューへリンクを貼るという感じになります。

共有リンクのみ投稿しても唐突な印象になりますから、何か投稿本文を付け加えたうえで、インドアビューへのリンクを貼るほうがいいでしょう。

まとめ

Googleインドアビューは、Googleマップ上だけでなく、ホームページやSNS経由でもユーザーに見せることができます。

Googleの調査では、

リスティング(ビジネス情報)に写真とバーチャルツアー(=ストリートビューやインドアビュー)が入っていると、ユーザーの関心が2倍になります。
引用:googleストリートビュー公式サイト

とあることから、積極的にインドアビューを見せていったほうが、集客効果が上がると考えられます。

ぜひホームページへの埋め込みやSNS投稿を使って、あなたのお店(施設)の内観を見てもらいましょう。

インドアビュー導入をご検討中の方はお気軽に弊社にご相談ください。
見積もりをお出ししており、ご相談のみでも受け付けておりますのでまずはお問い合わせください。

カテゴリー: Googleインドアビュー

MEO対策を始めたいけど何をしたらよいのかわからない。
と、お悩みではありませんか?

そんなお悩みがある方に向けて、実際にMEO対策を提供している株式会社トリニアスが「自分でできるMEO対策」について資料にまとめました。

MEO対策を自分で始めたい方や、そもそもMEO対策って何?とお考えの方に向けて、MEO対策の基礎知識やマイビジネスの登録方法を解説しています。

MEO対策について知りたい方やMEO対策の導入を検討している方はぜひご活用ください。

無料資料ダウンロードはこちら
TOPへ