【超簡単】Matterport 3Dモデルをウェブサイトに埋め込む方法

こんにちは!株式会社Advalay編集部です。

MatterportデータはURLが発行され、メディアやSNSに掲載することができます。

しかし、
「MatterportデータのURLのメディアへの埋め込み方がわからない」
「どのように掲載すればデータの閲覧数が上がるのだろうか…」

「Matterportデータを作成したけれどイマイチうまく活用できている感じがしない…」

など、Matterportデータの活用方法、埋め込み方法についてのお悩みをいただくことがあります。

そこで今回は、Matterportデータの掲載方法を詳しくご紹介。

私たちは、さまざまな業界での撮影事例があるため、多様な活用・掲載方法を解説することができます。

ぜひこの記事を読み進めていただき、目をひく魅力的なコンテンツを作成していきましょう。

この記事でわかること
Advalay_banner

スタンダードな埋め込み方

Matterport映像をそのままサイト上に表示させる方法をご紹介いたします。

埋め込み方・表示方法

STEP
WordPress にプラグインをインストールする

メニューから 「プラグイン」>「新規追加」を開く

「Matterport」と検索し、「WP Matterport Shortcode」をインストールする

インストール後は「有効」ボタンを忘れずに押しておきましょう。

STEP
コードを埋め込む

プラグインを有効化すると、Matterport映像を表示させるための専用コードが使えるようになります。
記事作成画面に戻り、表示したい映像の数に合わせて下のコードを埋め込みます。

まずは、埋め込みたいMatterport映像が1つの場合のコードです。

①【Single Tour】コード

まずは、下のようなMatterport映像から発行されるURLを準備してください。

Matterport映像から発行されるURL
https://my.matterport.com/show/?m=eEp9BoAAwfh


表示させたいMatterport映像のURL最後の部分(「m=」以降の黄色下線部)をコピーします。

コピーした部分を、下の「埋め込みコード」の黄色下線部分に入れてください。

埋め込みコード
[matterport src="   " width="900"]

完了したら、こちらの「埋め込みコード」を全てコピーしていただき、そのまま記事に貼り付けてください。

正常に埋め込むことができると、下の映像のように施設名と映像が表示されます。

②【Tour Gallery】コード

続いて、Matterport映像を複数並べて表示させたい場合のコードです。

埋め込みコード
[matterport cols="3" src="eEp9BoAAwfh,Jj1R1acSczg"]

先ほどと同様にこちらのコードを編集し、WordPressに埋め込みます。

上のコードの黄色の下線部に1つ目に表示させたい映像のコード、青色の下線部に2つ目の映像のコードを埋め込みます。

正常に反映されると、下のように横並びに映像が表示されます。

その他、少し特殊な埋め込み方をしたいという方はMatterport社のホームページを参考にしてみてください。

STEP
完了

WEBサイトに2つの映像が反映されれば完了です。

事例① Ginza Sony Park

Ginza Sony Parkの事例です。

Webサイトを開くとそのままMatterport映像が表示されています。

引用:https://www.ginzasonypark.jp/lp/sonyparkten/01.html

事例② GO FOR KOGEI

また、こちらは北陸工芸の祭典「GO FOR KOGEI」の公式サイトです。
4つのMatterport映像が綺麗に分割され掲載されています。

https://goforkogei.com/special-online-content2021/

バナーで表示させる

事例① 国立科学博物館

WEBサイトに直接表示させるのではなく、一旦バナーを挟む表示方法もあります。

こちらは、国立科学博物館の事例で「日本館」「地球館」のMatterport映像をバナーで表示しています。
バナーをクリックすると、Matterport映像が表示される仕組みになっています。

引用元:https://www.kahaku.go.jp/VR/

実際の映像を見てみたいという方は下の公式ホームページを参考にしてみてください。

事例② 名古屋城本丸御殿

引用元:https://www.nagoyajo.city.nagoya.jp/guide/honmarugoten/

埋め込み方・表示方法

こちらのバナーでの表示方法についてご紹介いたします。

STEP
バナーを制作する

表示させたいバナーを作成します。目につきやすいようにカラーやデザインを工夫します。

STEP
バナーをメディアに埋め込む

STEP1で制作したバナーをWEBサイトに埋め込みます。

STEP
Matterportリンクをバナーに紐付ける

STEP2で表示させたバナーにMatterport映像から発行されたURLを埋め込んでいきます。

Mapを活用

事例①(創価大学バーチャルキャンパス)

こちらは創価大学の事例です。

大学キャンパスのマップを表示し、その中にVR TOUR、360°写真、静止画を埋め込んでいます。
ここでVR TOURをクリックすると、Matterport映像が見れるような仕組みになっています。

引用元:https://www.soka.ac.jp/vr-tour/index.html

また、マップだけでなく施設ごとにMatterport映像を見ることもできます。

引用元:https://www.soka.ac.jp/vr-tour/index.html

事例② (Swedenhouse)

事例の2つ目はハウスメーカーSwedenhouseです。

ホームページに訪れると、日本地図が表示されており、見たいエリアを選択することができます。

引用元:https://vr.swedenhouse.co.jp/

この中から見たい地域(赤ピン)を押すと、そのエリアのモデルハウスのMatterport映像を見ることができます。

Matterport映像 スタート画面
引用元:https://vr.swedenhouse.co.jp/

表示方法

地図の表示には専門技術が必要になりますので、試してみたい方はお気軽にお問い合わせください。

まとめ

いかがでしたでしょうか。

Matterport映像の表示方法についてまとめると、

Matterport映像 埋め込み方法 まとめ
  • Matterport映像は誰でも簡単に表示できる
  • 3つの表示方法がある
    • WordPressのプラグイン機能を使った埋め込み
    • バナーで表示
    • マップを活用
  • アイデアと技術次第でオリジナルのコンテンツ制作が可能

ウィズコロナ時代の新常識としてリアルとオンラインが融合した新たな集客・PR方法がどんどん浸透しており、Matterportも幅広い分野で導入が進んでいます。

弊社では1000件以上の撮影実績をもとに、撮影だけではなく3D モデルを活かしたプロモーション提案が強みです。
Matterportに関することや活用方法などぜひお気軽にお問い合わせください。

Advalay
Advalay編集部
このメディアは、Matterportを中心としたコンテンツを発信しています。Matterport事業を行っているAdvalayだからこそ専門的で網羅的な情報をお届けできます。どなたでもわかりやすく、楽しめるコンテンツを作っていますのでぜひご覧ください。
  • URLをコピーしました!

\ 広報担当者向け /
Matterport完全攻略ガイド

Matterportの機能や活用事例など概要を詳しく紹介しています。
社内稟議やクライアント様への提案資料としてもご活用いただけます。

この記事を書いた人

この記事でわかること