2016.10.14 Fri

ノウハウ

Googleストリートビュー(屋内版)を自社のWebサイト上で活用する方法


img_8211

 

最近、Webサイト内にGoogleストリートビュー(屋内版)が使われているのを目にしたことはないですか? Webサイト内に直接Googleストリートビュー(屋内版)を埋め込んでいたり、リンクを付けていたりとその使い方は様々です。

 

実際に自分でもGoogleストリートビュー(屋内版)を入れてみようと思っても、やり方がよく分からなくて難しそうとの声をよく聞きます。ですがGoogleストリートビュー(屋内版)の埋め込み方はとても簡単なのです。

 

そこで、今回は【Googleストリートビュー(屋内版)のWebサイト活用方法】についてご紹介します。

 

【目次】
1. リンク式
   1-1. 「リンク式」とは
   1-2. リンク式の設置方法
 
2. 埋込式
   2-1. 「埋込式」とは
   2-2. 埋込式の設置方法
 
 
【関連記事】
 ・Googleストリートビュー(屋内版)をスマートフォンで見る方法
 ・Googleストリートビュー(屋内版)の導入メリットを解説
 ・Googleストリートビュー(屋内版)をもっと使いこなそう!ペグマンって知ってる?
 ・Googleストリートビュー(屋内版)の導入効果とは?
 
 

1.リンク式

Googleストリートビュー(屋内版)をWebサイトに直接埋め込むのではなく、クリックすればGoogleストリートビュー(屋内版)ページに飛べるようリンクを付ける方法です。

 

1-1. 「リンク式」とは

Googleストリートビュー(屋内版)へ飛ぶリンクを1.テキスト 2.バナー 3.画像に貼る方法です。Webサイトのレイアウトを崩したくない場合や、Googleストリートビュー(屋内版)を直接見せたいという場合にオススメしています。

 
 

1. テキストリンク

webサイト内にあるテキストにGoogleストリートビュー(屋内版)のページをリンクさせ、クリックすることでGoogleストリートビュー(屋内版)のページまで飛ばす方法です。

 
▼こちらのテキストをクリックするとGoogleストリートビュー(屋内版)ページに飛びます▼
LIFE STYLE株式会社

 

2. バナーリンク

作成したバナーにGoogleストリートビュー(屋内版)のページをリンクさせ、クリックすることでGoogleストリートビュー(屋内版)のページまで飛ばす方法です。

 

▼こちらのバナーをクリックするとGoogleストリートビュー(屋内版)ページに飛びます▼
好文学園リンクボタン
 

3. 画像リンク

Webサイト内にある画像にGoogleストリートビュー(屋内版)のページをリンクさせ、クリックしGoogleストリートビュー(屋内版)のページまで飛ばす方法です。いくつかリンクを作って好きな部屋から始まるようにもできます。主に施設内の様々な場所をそれぞれの写真を使ってご紹介されているWebサイトにオススメしています。

 
 
▼こちらが実際に「画像リンク」を導入されている企業様です▼
田中千代ファッションカレッジ 

 

1-2. リンク式の設置方法

 
WebサイトにGoogleストリートビュー(屋内版)を、リンク式で設置するための手順を説明します。リンクを設置するためにはGoogleストリートビュー(屋内版)のURLを取得する必要があるため、以下でその方法を説明します。

 

1. 御社ホームページに貼り付けたいGoogleストリートビュー(屋内版)ページを開きます
 
%e3%83%95%e3%82%9a%e3%83%ac%e3%82%bb%e3%82%99%e3%83%b3%e3%83%86%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b31

 

2. ユーザーに対して最初に見せたい場所に画面を合わせます

 

%e3%83%95%e3%82%9a%e3%83%ac%e3%82%bb%e3%82%99%e3%83%b3%e3%83%86%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b32

 

3. 画面左上にある3つの縦並びの点のボタンをクリック
 ※「︙」を出すには【Googleマップから】Googleストリートビュー(屋内版)へ入ってください
4. 「画像を共有または埋め込む」をクリック

 

%e3%83%95%e3%82%9a%e3%83%ac%e3%82%bb%e3%82%99%e3%83%b3%e3%83%86%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b33

 

5. URLをコピーして、御社ホームページの貼り付けたい画像・テキストにリンクを付けます

 

以上が「リンク式」でWebサイトにGoogleストリートビュー(屋内版)を貼り付ける方法です。
 
 

2. 埋込式

Webサイト内にGoogleストリートビュー(屋内版)を直接埋め込む方法です。Webサイト上でGoogleストリートビュー(屋内版)の操作が可能になっています。
 

2-1. 「埋込式」とは

Webサイト上で大きなお写真で施設紹介をする場合や、しっかりとしたインパクトでGoogleストリートビュー(屋内版)をご紹介したい場合にオススメしています。

 

▼こちらが実際に「埋込式」を導入されている企業様です▼

喫茶室ルノアール新宿区役所横店(貸会議室)

 
 
また埋込式を応用してポップアップウィンドウを使った表示をすることもできます。写真や文字を押すと拡大表示した状態のパノラマ写真が出る方法です。下にイメージ図と実際にご活用されている店舗様のURLを記載いたします。

 

▼イメージ図のマークをクリックするとGoogleストリートビュー(屋内版)が見られるようになっています▼
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-05-15-26-39
 
▼こちらが実際に「ポップアップウィンドウ」を設置されている企業様です▼
カフーリゾート フチャク コンドホテル
 
 

2-2. 埋込式の設置方法

WebサイトにGoogleストリートビュー(屋内版)を、埋込み式で設置するための手順を説明します。
 
1. リンク式の3番までは同様の手順です
 
%e3%83%95%e3%82%9a%e3%83%ac%e3%82%bb%e3%82%99%e3%83%b3%e3%83%86%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b34

 

2. 「画像の埋め込み」ボタンをクリック

 

%e3%83%95%e3%82%9a%e3%83%ac%e3%82%bb%e3%82%99%e3%83%b3%e3%83%86%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b35

 

3. 再度、画面を動かしてスタート位置を調整できます
4.「カスタムサイズ」を選択

 

%e3%83%95%e3%82%9a%e3%83%ac%e3%82%bb%e3%82%99%e3%83%b3%e3%83%86%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b36

 

5. 御社ホームページのサイズに合わせて、切り取るサイズを指定して下さい
   (当サイトのサイズは「700 × 440」です)

6. タグをコピーして、ホームページの使いたいところに貼り付けてください

 

以上が「埋込式」でWebサイトにGoogleストリートビュー(屋内版)を貼り付ける方法です。
 
 

まとめ

以上が、Googleストリートビュー(屋内版)をホームページに使う3つの方法です。Googleストリートビュー(屋内版)を導入することで、お店のユーザーに見せたい部分をリアルに伝えることができます。自社のサイトにふさわしい導入の仕方を考えてみてはいかがでしょうか。
 
 
【関連記事】
 ・Googleストリートビュー(屋内版)をスマートフォンで見る方法
 ・Googleストリートビュー(屋内版)の導入メリットを解説
 ・Googleストリートビュー(屋内版)をもっと使いこなそう!ペグマンって知ってる?
 ・Googleストリートビュー(屋内版)の導入効果とは?
 

お問い合わせはコチラ

資料請求・各種お問い合せは、お問い合せフォーム、またはお電話にて承っております。
お気軽にご連絡下さい。


Pocket

関連記事

新着記事