カテゴリー:画像加工ECサイトでも見かける360°画像ECサイト等でも、商品をマウスで動かせる画像を見かける機会が増えてきました。画像をマウスでドラッグすると画面のなかで向きを変えたりできるやつです。他サイト参照になりますが、物だとこんな感じ。(トヨタさまサイト)風景だとこんな感じ。(アマナイメージさまサイト)スマホの角度まで検知して(ジャイロセンサー)、スマホを上に向けたり右を見て、左をみて、とすると画面内もそちらを向いているように角度が変わるようなやつもありますよね。風景や不動産物件などを見るのに適しています。VRゴーグルがあるとより楽しめる感じのやつです。(わたしはあれでフィギュアスケートを見れたらいいのにと願ってやみません。TVだと選手を追って撮るのでスピード感を実感できないし、会場まで見に行くと審査員くらいの特等席でない限り選手が遠すぎて、やはりスピード感やジャンプの高さを実感できないので。)マウスで自分で動かすのと、スマホを傾けたらあちら側の世界の見え方の角度も変わるのは、ジャイロセンサーの有無で違うだけで根本的には同じ技術のようです。個人の方のサイトですが、こちらとか大変に参考になります。iframeだと角度の検知まではできないのでリンク先(↑この記事の「完成ページ」)ぜひご覧ください。「Three.jsを使い360度画像をドラッグとジャイロセンサーで視点操作する。」へのリンク本サイトにて提供している「切り抜き職人」サービスではECサイトのお客様が多く、お客様の視野にあるのは商品をマウスで動かしてお客さんが好きな角度で見れるものだと思いますので、カメラが中心にあって周囲を見る感じの=360°画像は別ものなのかなと思いつつ、まずは概要を調べていきたいと思います。種類、キーワード「360°画像」と表現してますが、まだまだ枯れてないせいかいろいろな言い方を見かけます。PC・スマホが新しいものでないと最新のブラウザを入れられず、見れない人がそこそこいるような状況だと、作る側が試したくても試せなかったり、それが情報の少なさにつながったりします。今はまだ「VR」と入っていたり「パノラマ」と入っていたり。これからもいろんな言い方が出てきて、そのうち決まった表現に落ちついていくのだと思います。いろんな言い方があって、調べていて「これは私が思ってる360°画像のことだろうか、、、」と不安になりながら調べていますが、今のところ分類としてはざっくり以下かなと思います。360°画像(風景・画像)360°動画(風景・動画)WebGLによる3D表現(物・画像、マウスで動かして視点を制御できる)360°動画はこちらの↓リンク先の海の中のような感じです。動画を再生をスタートさせたうえで、マウスで動かしたりしてみてください。360°VR素材のページの360°動画の箇所カメラを中心としてその周囲を撮るのか、物の周りを撮るのか、画像か動画か、ジャイロセンサーの有/無、等で制作過程はだいぶ違ってきそうです。360°画像の作り方ざっくり言うのって、本当はある程度知識がある分野に対してでないとできないのに、360°画像について調べだしたばかりの浅い知識でざっくり言います。(だれかレクチャーしてほしいです。レクチャーできるくらいの方たちはすでにこれをビジネスにしているみたいで機材やソフトの宣伝込みのサイトや、肝心の箇所は「だからうちにお任せください」的なサービスの宣伝ページばかり出てきてしまいます。撮影は普通のカメラで充分重なるように何枚も撮影してあとで加工する方法もあるし、最初から360°(全天球)で撮影できる機材を使う方法と、あるようです。上記のPhotoshopマニュアルに記載されているとおりPhotoshopの機能で作成することもできるし、専用のソフトも検索するとたくさん出てきます。360°画像について検索するとソフトを出している企業のサイトも多く、特別なソフトがないとできないのかなと不安になりますが、Photoshopでもできるはず。View(js)というのが一番有名なようです。webthree.jsというのもちょいちょい見かけます。本記事最初の章で紹介した個人の方は風景で使っているし、こちら↓の記事を見ると、WebGLで物を視点操作するものとしても紹介しています。マリンロード社によるWebGLについての記事やってみたっていう記事を書きたかったんですが、やってみるところまでたどり着かなかったです(涙)今回の記事の趣旨として、ECサイトのお客様の視野ということで調べているので、自分の周囲を撮るのではなく物を中心に撮ったもの(WebGLによる3D表現、という言い方で良いのだろうか)について調べたかったのですが、まだキーワードにたどり着けていないみたいで、カメラを中心にその周りの風景を撮るような情報しか探せませんでした。three.jsのチュートリアルを書いてくれてる方がいらっしゃるので、こちらの入門編で「カメラの制御方法」までいけたらできるのかもしれません。挑戦できてないのでリベンジしたいと思います。他サイトに頼りまくりな本記事ですが、そのぶん、手作りしてたら1記事でここまでできなかったというくらい、いろんな事例をリンクできたと思うので、ぜひこの記事をPCでみたり、スマホで見たりして、それぞれの事例の操作感の違いを試して、楽しんでください!楽しいから、私もできるようになりたい。これを書いているのが2019/10/11金で、明日首都圏も超大型台風が直撃してくるようなので、リベンジは、無事だったら、です。台風怖いですね・・・!!この記事を書いた人JPstaff「ミャンマー切り抜き職人」サービスを運営するノシクミ株式会社の日本オフィスに勤務する、新人Webデザイナーです。ミャンマーに学校をつくる活動をしている友人(ミャンマー人)に誘われてミャンマーに遊びにいき、ミャンマーの仏教的な価値観に興味をひかれるようになりました。表示プライバシーポリシ。