デジタル製品や使い方

360度画像(写真・動画)をWordPressに埋め込む方法

insta360やGoproなどで撮影した360度画像(写真・動画)をWordpressの記事に埋め込む方法を忘れないうちに記録。

「360度画像・写真」とか「360度パノラマ写真」とか言われる写真は、上下左右前後の全ての方向が1枚の写真に収まった写真です。

この360度画像・写真は、全天球カメラ(ぜんてんきゅうカメラ)、360度カメラ、VRカメラなどと呼ばれるカメラで撮影します。

Googleの「ストリートビュー」で見れる景色も、360度カメラで撮影した360度パノラマ写真を利用したものです。

この「360度画像・写真をWordpressの記事などに埋め込む場合、通常の写真とは違う方法で埋め込む必要があります。

insta360シリーズで撮った360度画像(写真・動画)をWordpressに埋め込む方法

insta360シリーズで撮った360度画像(写真・動画)をWordpressの記事に埋め込むには、次の2つの方法があります。

以下は「insta360 ONE R」で撮った360度写真の例です。

プラグインを使って360度画像を埋め込む方法

360度画像(写真・動画)を、プラグインを使ってWordpressに埋め込むことができます。

プラグインを使えば、Insta360シリーズで撮影した360度写真以外にも、THETAやGOPRO MAXなどで撮影した360度写真を埋め込むことができます。

  1. 360度写真・動画を.jpg・.mp4に変換
  2. 変換した360度写真・動画をWordpressのメディアに追加
  3. プラグイン「iPanorama 360」をインストール
  4. 「iPanorama 360」で360度写真・動画を登録
  5. 記事内にショートコードを貼り付け

プラグインを使った360度写真です。写真をドラッグすると好きな方向へ変えることができます。

※この360度写真は、PCのChromeブラウザでは正常に見えますが、iPhoneのChromeブラウザだと見えません(空白になります)。しかしサファリなら正常に見えます。
ブラウザとWordpressのテーマやプラグインなどの相性などに問題があるのか分かりませんが、原因は良く分かりません。

プラグインを使わず360度画像を埋め込む方法

Insta360シリーズで撮影した360度画像(写真・動画)なら、プラグインを使わずにInsta360のサービスを利用してWordpressに埋め込むことができます。

この方法だとInsta360のサーバーを利用するので、自分のサーバーの容量を使うこともありませんし、様々な360度写真を楽しむことができます。

  1. Insta360アプリの共有ボタンからinsta360のサーバーにアップロード
  2. URLをPCで開き、埋め込みコードをコピー
  3. 「Copy(コピー)」ボタンをクリックし、コードをコピー
  4. 記事内にコピーしたコードを、埋め込み

Insta360シリーズのアプリを使った写真です。写真をドラッグすると好きな方向へ変えることができます。

Fisheye、Planet、Ball、Normalの4通りの視点の写真を見ることができます。

360度写真を埋め込む方法まとめ

Insta360シリーズのサービスを利用したやり方は、次のメリットがあります。

  • WordPress以外でサイトでも360度写真を埋め込める
  • 自分のサーバの容量が不要
  • 4通りの視点を変更できる

しかし、Insta360シリーズのサービスの変更や終了などがあった場合、写真そのものが見れなくなることがあります。

Insta360シリーズのアプリを利用した360度写真の方が、視点を切り替えられたりするので、面白さや見応えはありますが、Insta360側のサービスの影響を受けることも考えておかなくてはいけないと思います。

安全な方法は、自分のサーバに360度写真を保存しておき、いつInsta360側のサービスに変更があっても影響を受けないようにしておくことがいいようですね。

-デジタル製品や使い方