WordPressで360度写真を表示できるプラグイン「WP VR」の使い方と設定方法

最近はTHETA(シータ)やGoProなど多くの360°カメラが販売され、それに伴って「360°画像をワードプレスで使いたい」というニーズも高まっていると思います。

360°写真は全体の空間の広さや雰囲気を伝えやすい特徴があるため、例えば不動産サイトや旅行サイトなどのほか、店舗紹介ページにも使える便利のものです。

しかし、通常の写真と同じようにページ内に挿入してもきちんと表示されないため、専用のプラグインが必要となります。

360°写真をワードプレスで使えるようにするプラグインはいくつかありますが、今回は比較的簡単使えるプラグイン「WP VR」を紹介していきます。

WP VRでは何ができるの?

WP VRでは何ができるの?

それでは、まず「WP VR」のプラグインでは基本的にどのようなことができるのか紹介します。

このプラグインは360°写真をワードプレスで表示させるためのプラグインで、主に2つのことができるようになります。

360°写真をサイトに表示できる

ワードプレスには標準機能で画像を固定ページや記事内に挿入できますが、360°写真は対象外となっています。

そのため360°写真をサイト内に表示させたい場合には、専門のプラグインが必要になる訳ですが、WP VRをインストールすることで360°写真をサイトに表示できるようになります。

バーチャルツアーを作ることができる

サイトを作成していると、例えば各居室ごとに360°写真を撮影して、それぞれの居室を行き来できるようにしたい場面などもあります。

いわゆる「360°バーチャルツアー」と言われるものですが、パッとイメージできない人はGoogleストリートビューをイメージしてもらうと分かりやすいと思います。

このように、360°写真の好きな場所にアイコンを表示でき、そのアイコンをクリックすると任意の写真に移動させることができます。

WP VRのインストール手順

WP VRのインストール手順

次に、実際にWP VRをインストールしていく手順をご紹介します。

他のプラグインと同様、とても簡単にインストールできるのでご安心くださいね。

「プラグイン」⇒「新規追加」をクリック

まず管理画面を開き、左側の「プラグイン」をクリックします。

すると右側にプラグインページが表示されるので、一番上の「新規追加」をクリックしてください。

WP VRインストール手順 「プラグイン」⇒「新規追加」をクリック

検索窓に「WP VR」と入力

プラグインを追加するページに移動したら、右上にある検索窓に「WP VR」と入力してください。

WP VRプラグインを探す

検索窓にキーワードを入力したら、関連するプラグインが一覧で表示されます。

その中から「WP VR – 360 Panorama and Virtual Tour Creator For WordPress」と表示されているプラグインを探します。

プラグインが見つかったら、「今すぐインストール」をクリックしてください。

「有効化」をクリック

インストールが無事完了したら「有効化(Active)」をクリックします。

これでWP VRのインストールは完了です。

WP VRの設定

WP VRの設定

WP VRにはSETTINGページが用意されており、そこから様々な設定ができるようになっています。

ほとんどの設定を変える必要はありませんが、6番目の「スクリプト制御」は設定をしておいた方が良いのでしっかり確認しておきましょう。

設定画面の表示方法

まず「そもそも設定画面がどこか分からない…」という人に向けて、設定画面の表示方法を説明しておきます。

WP VRの有効化が完了すると、管理画面左側に「WP VR」という項目が新しく追加されているはずです。

その項目をクリックするとWP VRの画面が表示されるので、右上の「SETTINGS」をクリックすることで設定画面を表示できます。

設定画面の各項目

WP VRの設定画面には全部で8つの設定項目がありますが、全て英語表記のため何の設定をするのか分かりにくくなっています。

各項目でどのような設定ができるのか、順に見ていきましょう。

①編集者の権限設定

1番上の項目では、編集者グループの権限を設定することができます。

デフォルトでは、管理者以外はバーチャルツアーを作成、削除ができない設定になっていますが、この設定をONに変更することで編集者もバーチャルツアーを作成、削除できるようになります。

編集者にもバーチャルツアーの編集権限を与えたい場合には、この設定をONにしましょう。

②投稿者の権限設定

2番目の項目では、投稿者グループの権限を設定します。

この設定をONにすることで、投稿者もバーチャルツアーを作成、削除できるようになります。

投稿者にもバーチャルツアーの編集権限を与えたい場合には、この設定をONにしましょう。

③Fontawesomeの設定

3番目の項目では、Fontawasomeの設定をします。

Fontawasomeとは、WEB上でよく利用されるアイコンをアイコンフォントという文字として使うことができるツールキットのことです。

WP VRでもFontawasomeを使用できるようで、この項目で使用するかどうかを設定することができます。

デフォルトでFontawasomeを使用できる状態になっているため、基本的にはOFFのままで良いと思います。

④モバイル表示の設定

4番目の項目では、スマホなどのモバイル端末でサイトを閲覧した時の表示を設定できます。

使用しているワードプレステーマによっては、モバイル端末でキレイに表示されない場合があるため、その場合にはこの項目を変更してみましょう。

⑤ラージイメージハンドラーの設定

5番目の項目では、ラージイメージハンドラーの設定ができます。

大きな画像を扱う際に実行されるプログラムのONOFFを切り替えることができますが、基本的にはデフォルトのままで良いでしょう。

⑥スクリプト制御の設定

6番目の項目では、スクリプト制御の設定が行なえます。

この設定をONにすることで、WP VRで360°写真を挿入していないページはスクリプトの読み込みがされなくなります。

余分な読み込みがなくなる分サイト全体の表示速度向上に効果が期待できるので、この設定はONに変更しておきましょう。

この設定をONにした場合は、すぐ下の入力欄にWP VRでバーチャルツアーを表示させているページのURLを忘れずに入力しましょう。

ここにURLの入力をしていないと、バーチャルツアーが表示されないので注意が必要です。

⑦モバイル閲覧時の説明表示

7番目の項目では、モバイル端末でページを閲覧した際の説明表示を設定できます。

モバイルユーザーがWP VRで360°写真を表示させているページを訪れたときに、ページ下部に任意の文言を表示できるといった機能です。

必要だと思う人は設定をONにしましょう。説明文はすぐ下の入力欄で自由に設定することができます。

⑧バージョン設定

一番下の項目では、WP VRのバージョンを変更できます。

基本的には最新バージョンを使っておけば良いと思いますが、ワードプレスのバージョンやテーマとの相性で上手く表示されない場合には変更してみても良いかもしれません。

WP VRの基本的な使い方

WP VRの使い方

WP VRの設定について解説しましたが、いかがだったでしょうか?

スクリプト制御の設定はしておいた方が良いので、ぜひ設定するようにしてくださいね。

それでは、ここからはWP VRの基本的な使い方を解説していきたいと思います。

①「WP VR」⇒「Add New Tour」⇒「SCENES」をクリック

管理画面の左側メニュー内の「WP VR」をクリックすると、メニューが開くので「Add New Tour」をクリックします。

すると、右側にWP VRのsetup画面が表示されるので、「SCENS」をクリックしてください。

②1枚目の360°写真をアップロードする

SCENESの画面が表示されたら、1枚目の360°写真をアップロードしていきましょう。

「Set as Default」をYesに変更

この設定をYesにすることで、ページ内でバーチャルツアーが表示される際のデフォルト画像に設定されます。

1枚目の360°写真をデフォルト画像に設定しておきましょう。

「Scene ID」に任意のIDを入力

バーチャルツアーを作るためには複数の360°写真をアップロードするので、後々自分が識別しやすいよう任意のIDを設定します。

全角は入力できませんが半角アルファベットや数字は入力できるので、自分が分かりやすいIDを設定してください。

360°写真をアップロードする

「UPLOAD」をクリックすると、アップロードする画像を選択するページが表示されるので、自分がアップロードしたい画像を選択してください。

プレビューで確認

アップロードが完了したら、「Preview」をクリックしてください。

右側にアップロードした画像が表示されるので、そちらを確認したら1枚目の360°写真のアップロードは完了です。

③2枚目以降の360°写真をアップロードする

次に、2枚目以降の360°写真のアップロード方法を解説していきます。

といっても、1枚目をアップロードする方法とほとんど変わりません。

説明が重複しても意味がないので、ここでは1枚目のアップロード方法との違いだけを説明します。

「+」をクリックしてSceneを追加する

2枚目以降の写真を追加するためには、Sceneを追加しなければいけません。

上部にある+マークをクリックすることでSceneを追加することができます。

Set as Defaultは「No」のままにしておく

デフォルト画像は1枚しか設定することができないため、2枚目の写真をデフォルトに設定すると自動的に1枚目のデフォルト設定が解除されてしまいます。

1枚目にアップロードした写真をデフォルトにしておきたい場合は、2枚目以降の設定はNoにしておきましょう。

④バーチャルツアーを作成する

全ての写真をアップロードしたら、次はバーチャルツアーを作成していきましょう。

少しコツがいりますが、慣れれば簡単に行なえる作業です。

初めて使用する人でもできるように、なるべく分かりやすく解説していきます。

編集したいSceneを選択する

バーチャルツアーを作成するために、これから編集したいSceneを選択します。

Scene Setting画面の上部にあるアイコンをクリックすることで選択できます。

「HOTSPOT」を選択し、各項目を入力する

次に、WP VR管理画面左側の「HOTSPOT」を選択肢、HotSpot Setting画面に切り替えます。

下の画像を参考に、各項目を入力していきましょう。

ターゲットSceneは、Hotspot Typeを「Scene」に変更することで選択できるようになります。

リンクを設置したいポイント(HOTSPOT)を決める

次に、HOTSPOTを設置したいポイントを選択します。

プレビュー画面に表示されている画像内をクリックすることで座標が自動出力され、ダウンロードマークをリンクすることで入力欄に自動で入力されます。

いくつもHOTSPOTを作成する場合は、「+」マークでHOTSPOTを新規作成し、同じ手順を繰り返すことでHOTSPOTを増やしていくことができます。

HOTSPOTの作成が完了したら、ツアータイトルを入力し、更新ボタンをクリックしてバーチャルツアーの作成は完了となります。

⑤ショートコードを記事内に貼り付ける

バーチャルツアーの作成が完了したら、WP VR管理画面左側の全般タブを選択します。

左下の部分にショートコードが表示されているはずなので、そのショートコードをコピーして記事内に貼り付けてください。

WP VRの使い方の解説は以上となります。

WP VR PROと無料版の違いは?

WP VRには、WP VE PROという有料プランが用意されていますが、無料版との違いは何なのでしょうか?

無料版と有料版の大まかな違いは、以下の3つが挙げられます。

SCENEとHOTSPOTの上限数がなくなる

有料版にアップグレードする最大のメリットは、SCENEとHOTSPOTの上限数がなくなることです。

無料版のWP VRでは、一つのツアーあたり5つのSCENE、一つのSCENEあたり5つのHOTSPOTしか登録できないようになっています。

それ以上のSCENEやHOTSPOTを利用する場合には、有料版にアップグレートする必要があります。

オプション機能が利用できる

有料版にアップグレードすると、デザインをカスタムしたり、操作パネルを増やしたりといったオプション機能を利用できるようになります。

無料版では単純な矢印アイコンしか利用できないため、もっとデザイン性を高めたい場合には有料版を検討しても良いかもしれません。

Googleストリートビューを管理できる

WP VRを有料版にすることで、GoogleストリートビューをWP VRのプラグイン内で管理できるようになります。

同一サイト内に複数のGoogleストリートビューを貼り付ける場合や、Googleストリートビュー向けのプラグインを別途導入したくない場合には検討の余地はあるかもしれませんね。

まとめ

360°画像は通常の画像や動画と比べて、全体の空間を伝えやすいというメリットがあります。

不動産サイトや住宅サイト、飲食店などのホームページに導入することで、ユーザビリティを向上させることができるはずです。

表現の幅を広げるために360°写真やバーチャルツアーを積極的に導入し、他サイトとの差別化を図っていきましょう。