店内パノラマ画像をご覧いただけます

密かな念願だった、店舗のVRパノラマ画像をようやく掲載できました。

パソコンなら画面上をドラッグして、スマートフォンなら画面をスワイプしたり体の向きを変えることで画像が動き、店内の様子を360°見ることができます。

なかなかご来店いただけないお客様にも店内の雰囲気を感じ取っていただけるものと思います。

みのう豚足 山歩:店舗のご案内

技術的な点を紹介すると

1) DJI OSMO+でパノラマ用素材写真を撮影
2) Microsoft Image Composite Editor 2でスティッチングした画像をPhotoShop形式で出力
3) PhotoShopで6000×3000ピクセルの空白画像を作成
4) 作成した空白画像に保存しておいたパノラマ画像を読み込む
5) 空白画像の上下中央に、パノラマ画像の水平線を揃える
6) 上下に空白部分がある場合、塗りつぶして埋める
7) できあがった画像を保存する

ここまでがパノラマ画像の編集です。
以前なら撮影には精密なパノラマ専用雲台が必要でしたが、今ではスマートフォンでも撮影できるので、1)と2)は省略できます。
インターネット用のパノラマ画像は基本的に横2×縦1の比率なのでそれに合わせて若干加工します。より大きいサイズであれば7000×3500ピクセルなどでもOKです。加工はPhotoShopでなくても構いません。VRパノラマ画像で真上と真下になる部分はあらかじめぼかしたりしておくとつなぎ目がよりきれいになります。

いちばん大事なのは5)の部分で、必ず空白画像のほうの上下中央と、合成するパノラマ写真の水平線
を揃えます。ここをきちんとやっておかないと、実際に表示したときに歪んでしまいます。

ここから先の利用法には大きく3つのパターンがあります。

a. Facebookに投稿する
b. Googleマップに写真を投稿する
c. 既存のWebページに埋め込んで表示する

a.は簡単で、画像のメタ情報を書き換えて既存の360カメラのメーカーと機種名にしてしまえばFacebookは勝手に360°VR画像として扱ってくれます。

b.はちょっと難しく、GPanoというメタ情報を修正する必要があります。理屈がわかってしまえば操作は簡単ですが、専用のメタ情報編集ツールまたはPhotoShopが必要です。

c.はふつうのWebページでVRパノラマを表示するので、一般ユーザーの目にとまる可能性はいちばん大きく、ビジネス用としてはa.b.よりも魅力的です。
ただし、技術的にはいちばんめんどうでHTML編集の知識とソフトが必要です。実は作業そのものはそれほど面倒でもないのですが、試してうまくいかなかったときの対処に経験が必要となります。

今回、ようやくc.にこぎ着けたので、たまたまページを見に来たヒトでも(わざわざFacebookへ移動したり、Googleマップで検索することなく)そのまま店内のパノラマを見ていただけるようになりました。

投稿者: 店長 @耳納豚足.com

耳納豚足.comのショップマネージャです。 ネットショップのWebデザインやSEO、リスティング広告など運用全般を担当しています。