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

 

こんにちは!Googleストリートビュー認定フォトグラファー【コールフォース】の土屋です。

今回は、Googleインドアビューの埋め込み方法について詳しく説明していきます。

 

作成したGoogleインドアビューは、Googleマップ上はもちろんのこと、店舗のホームページやSNSにも投稿することができます。

そしてその方法は、Webサイト制作に携わる専門家でなくともできてしまう、簡単なものです。

 

この記事では、

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

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

 

 

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

 

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

 

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

 

インドアビュー

 

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

 

インドアビュー埋め込み インドアビュー埋め込み2

 

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

 

インドアビュー埋め込み3

 

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

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

 

補足

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

 

 

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

 

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

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

インドアビュー スマホでずれる

↑Googleインドアビューが右側にはみ出しています。

 

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

 

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

 

 

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

 

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

 

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

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

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

  ↓

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

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

 

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

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

↑Googleインドアビューがコンテンツの枠内に収まるようになります。

 

 

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

 

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

 

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


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

 

そして、上のHTMLタグで指定したCLASSに該当するCSSは、次の通りです。(WordPressの場合は、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を追記した後に、記事の編集画面で上のHTMLタグを使うと、Googleインドアビューのスマホの見た目は次のようになります。

インドアビューのスマホからの見た目

↑縦横比のバランスがよくなります。(ただし、若干小さめになります)

 

Googleインドアビューを埋め込むときには、ぜひレスポンシブも意識してみてください!

 

 

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

 

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

 

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

 

インドアビュー埋め込み2

 

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

 

インドアビュー 共有リンク インドアビュー 短縮リンク

 

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

 

【Facebookページでの表示】

インドアビュー貼り付け

 

【Twitterでの表示】

インドアビュー Twitter

 

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

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

 

 

まとめ

 

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

 

Googleの調査では、

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

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

 

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

 

貴店の「強み」を引き出す【集客効果追求型Googleストリートビュー(屋内版)】で、もっと選ばれるお店に!

 

コールフォーススタッフ

 

 

『新規客の来店数が増えた』
『外国人観光客が訪れるようになった』
『優秀なスタッフを採用できた』
『問い合わせの数が増えた』
『室内が見えたから安心して来れた』と言ってもらえた。

 

 

 

当社撮影のGoogleストリートビュー(屋内版)の導入で、このような声が届いています。

 

 

入り口から室内への自然な導線を考慮しながら、お店の「ウリ」となる部分を最も映える角度で撮影する!

 

 

貴店の強みを魅せることに特化した【集客効果追求型Googleストリートビュー(屋内版)】が、「ここに行きたい」と選ばれるお店に変化させます!

 

 

詳しくはこちら

 

 

 

 

2 件のコメント

  • 宇田幸輔 様
    コメント頂きありがとうございます。
    Googleストリートビュー屋内版の代理店として、Googleストリートビューの店舗内撮影や屋内撮影の許可を得ております。
    そのためGoogleマップ等に乗っている町中や屋外の撮影は対応外となっております。

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です