<p>2018年は3Dの表現を使ったサイトが増えると予想されています（参考：<a href="http://photoshopvip.net/106875" target="_blank" rel="noopener">PHOTOSHOPVIP</a>）。実際、パララックスやWEBGLなど使ったウェブサイトを見かける機会が少しずつ増えています。</p>
<p>しかしながら、いざ3Dの表現を取り入れてみようと思っても、これまでずっとWEBは2Dでデザインを行ってきたこともあり、3Dの表現がどのような場面に向いていて、どのような使い方をすれば効果的なのか、なかなか思いつかなかったため、自分なりにメリットとデメリットを考えてみることにしました。</p>
<h2>メリット</h2>
<h3>リアル（現実の見た目に近い）</h3>
<ul>
<li class="p1">臨場感、シズル感が求められるものに効果的</li>
<li class="p1">状態を想像しやすい</li>
</ul>
<h3 class="p1">空間が広い ⇔ 奥行きがある</h3>
<ul>
<li class="p1">多くの情報を取り扱える可能性（重なる箇所への案内がネックになる）</li>
</ul>
<h3 class="p1">現実との連続的表現がしやすい(<span class="s1">AR</span>)</h3>
<ul>
<li class="p1">現実に近い状態で、大きさなどの確認ができる</li>
<li class="p1">非常に高い臨場感を表現できる可能性</li>
</ul>
<h3 class="p1">表現の幅が広がる</h3>
<ul>
<li class="p1">立体ならではの表現が直接的にできる</li>
<li class="p1">アート的表現の選択肢として</li>
<li class="p1">立体ならではの<span class="s1"> UI </span>の可能性</li>
</ul>
<h2>デメリット</h2>
<h3 class="p1">デバイスへ要求するパフォーマンスが大きくなる</h3>
<ul>
<li class="p1">軽量化の努力が必要</li>
<li class="p1">パフォーマンスの犠牲に似合った効果があるか、十分な検証が必要</li>
</ul>
<h3 class="p1">操作が煩雑化しがち</h3>
<ul>
<li class="p1">扱う軸が増えるので、その軸をどう扱うか、明確に定義する必要がある</li>
<li class="p1">現実と同じ操作はできない。あくまでも<span class="s1"> 2D </span>への擬似的な表現なので、現実とのギャップがある</li>
<li class="p1">現実と操作が違うので、共通化された操作を用いるか、慣れるまでの練習の機会が許されるか、操作説明がなければ、ユーザーは操作できない</li>
</ul>
<h3 class="p1">設置の難易度が高い</h3>
<ul>
<li class="p2">3D <span class="s2">の知識</span></li>
<li class="p2">デバイス、ブラウザに求められる最低パフォーマンスの高さ</li>
<li class="p1">利用できる空間の制限 ⇔ ある程度面積がなければ、<span class="s1">2D </span>の場合より複雑がゆえに視認性が下がりメリットが薄くなりがち</li>
</ul>


WEB上での3D表現について、2Dと比較した強みと弱みを考えてみました

<p>VRのコンテンツを作る場合はUnityを利用する事が一般的になっていますが、InstaVRの登場で変わるかもしれません。</p>
<p>動画や画像をプレビューするだけであれば必要ありませんが、インタラクティブな要素を含んだコンテンツを作成する場合はUnityなどでプログラミングする必要があります。しかしInstaVRはプログラミングなしでインタラクティブなVRコンテンツの作成ができてしまいます。</p>
<p>まだ複雑な物はできませんが、操作が非常に簡単なので低コスト且つ短時間で作れるのが魅力です。</p>
<p>youtubeやfacebookにvr動画・画像をアップロードすると、自動で最適化という名の画質劣化が起きてしまいますが、InstaVRはweb上でプレビューする場合でも劣化がありません。</p>
<p><iframe loading="lazy" width="500" height="281" src="https://www.youtube.com/embed/kKin8a2nrU4?feature=oembed" frameborder="0" allowfullscreen></iframe></p>
<h2>InstaVRの無料版を使ってみる</h2>
<p>続いてシーンとなる360度の画像または動画を追加します。<br />
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-12834" src="/admin/wp-content/uploads/2017/05/4.jpg" alt="" width="720" height="355" srcset="/uploads-archive/2017/05/4.jpg 720w, /uploads-archive/2017/05/4-300x148.jpg 300w, /uploads-archive/2017/05/4-228x112.jpg 228w" sizes="(max-width: 720px) 100vw, 720px" /></p>
<p>シーンを選んで360度のどこを正面とするかという事も調整します。これはユーザーにフラストレーションを与えないために重要な要素ですが、調整は非常に簡単です。<br />
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-12835" src="/admin/wp-content/uploads/2017/05/5.jpg" alt="" width="720" height="357" srcset="/uploads-archive/2017/05/5.jpg 720w, /uploads-archive/2017/05/5-300x149.jpg 300w, /uploads-archive/2017/05/5-228x113.jpg 228w" sizes="(max-width: 720px) 100vw, 720px" /></p>
<p>他のシーンへのリンクを設定します。リンク先となるシーンを選択して、必要であればアイコンのサイズを調整したり、画像を設定できます。<br />
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-12836" src="/admin/wp-content/uploads/2017/05/6.jpg" alt="" width="720" height="350" srcset="/uploads-archive/2017/05/6.jpg 720w, /uploads-archive/2017/05/6-300x146.jpg 300w, /uploads-archive/2017/05/6-228x111.jpg 228w" sizes="(max-width: 720px) 100vw, 720px" /></p>
<p>音楽やナレーションを追加する事もできます。<br />
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-12837" src="/admin/wp-content/uploads/2017/05/7.jpg" alt="" width="720" height="780" srcset="/uploads-archive/2017/05/7.jpg 720w, /uploads-archive/2017/05/7-277x300.jpg 277w, /uploads-archive/2017/05/7-228x247.jpg 228w" sizes="(max-width: 720px) 100vw, 720px" /></p>
<p>2つ目のシーンにも1つ目のシーンへのリンクを設定します。これで2つのシーンを行き交う事ができるコンテンツが完成です。<br />
シーン内には「Hot spot」を追加する事で動画や画像を設置する事もできます。<br />
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-12838" src="/admin/wp-content/uploads/2017/05/8.jpg" alt="" width="720" height="352" srcset="/uploads-archive/2017/05/8.jpg 720w, /uploads-archive/2017/05/8-300x147.jpg 300w, /uploads-archive/2017/05/8-228x111.jpg 228w" sizes="(max-width: 720px) 100vw, 720px" /></p>
<p>続いてアプリにする場合のロゴやホーム画面を「Branding」から設定します。有料プランからInstaVRのロゴを外すことが可能です。<br />
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-12839" src="/admin/wp-content/uploads/2017/05/9.jpg" alt="" width="720" height="208" srcset="/uploads-archive/2017/05/9.jpg 720w, /uploads-archive/2017/05/9-300x87.jpg 300w, /uploads-archive/2017/05/9-228x66.jpg 228w" sizes="(max-width: 720px) 100vw, 720px" /></p>
<p>あとはpackageでビルドするだけです。<br />
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-12840" src="/admin/wp-content/uploads/2017/05/10.jpg" alt="" width="720" height="175" srcset="/uploads-archive/2017/05/10.jpg 720w, /uploads-archive/2017/05/10-300x73.jpg 300w, /uploads-archive/2017/05/10-228x55.jpg 228w" sizes="(max-width: 720px) 100vw, 720px" /></p>
<p>完成したアプリはQRコードからもダウンロードできます。<br />
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-12841" src="/admin/wp-content/uploads/2017/05/11.jpg" alt="" width="720" height="162" srcset="/uploads-archive/2017/05/11.jpg 720w, /uploads-archive/2017/05/11-300x68.jpg 300w, /uploads-archive/2017/05/11-228x51.jpg 228w" sizes="(max-width: 720px) 100vw, 720px" /></p>
<p>アプリができるまでに15分もかかりませんでした。</p>
<h2>spatial audio　360度音声も設定できる</h2>
<p>試験導入中という表記はあるものの、spatial audio（360度音声）の設定項目も存在していて、どの方角からどんな音がするかを音声ファイルを追加する事で演出可能です。<br />
無意識に音がなっている方を人は見るので、見せたい方向に効果音や音楽を設定する事でガイドとしても利用できます、没入感を損なわないガイドとして活用できると思います。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-12842" src="/admin/wp-content/uploads/2017/05/12.jpg" alt="" width="507" height="429" srcset="/uploads-archive/2017/05/12.jpg 507w, /uploads-archive/2017/05/12-300x254.jpg 300w, /uploads-archive/2017/05/12-228x193.jpg 228w" sizes="(max-width: 507px) 100vw, 507px" /></p>
<h2>VRコンテンツのWeb配信</h2>
<p>個人的にはデバイスを限定しないという意味でVRはWebブラウザ上で活用するのが一般化する早道だと考えています。<br />
無料版では利用できませんが、InstaVRは作成したコンテンツをWeb配信するのも非常に簡単みたいです。</p>
<p>pakegeからwebを選んでビルド（pablish to web）するだけで、InstaVRのストレージ上にVRにアクセスできるURLが生成されます。</p>
<p>web配信したコンテンツのデモです。</p>
<p><a href="http://www.too.com/product/software/vr/instavr/embed01.html">http://www.too.com/product/software/vr/instavr/embed01.html</a></p>
<p><a href="http://www.too.com/product/software/vr/instavr/embed02.html">http://www.too.com/product/software/vr/instavr/embed02.html</a></p>
<p><a href="http://www.too.com/product/software/vr/instavr/embed03.html">http://www.too.com/product/software/vr/instavr/embed03.html</a></p>
<p>Webページに埋め込むこともコードを書き出してくれるので簡単にできるようです。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-12822" src="/uploads-archive/2017/05/2.jpg" alt="" width="720" height="246" srcset="/uploads-archive/2017/05/2.jpg 720w, /uploads-archive/2017/05/2-300x103.jpg 300w, /uploads-archive/2017/05/2-228x78.jpg 228w" sizes="(max-width: 720px) 100vw, 720px" /></p>
<p>埋め込みの例がこちらです。</p>
<p><a href="http://jp.instavr.co/#section-f_5c2451ca-6c49-434b-81de-de930925c07f">http://jp.instavr.co/</a></p>
<p><iframe loading="lazy" width="500" height="281" src="https://www.youtube.com/embed/ajkLvFsfiTw?feature=oembed" frameborder="0" allowfullscreen></iframe></p>
<h2>まとめ</h2>
<p>VRがいわゆるキャズムに落ちてしまわないためには、豊富なコンテンツ量が必要だと考えます。InstaVRはVRコンテンツ制作のハードルを下げるという意味で、コンテンツ量の増加に一役買ってくれそうです。</p>


instaVRでコンテンツを作ってみる

<p>私個人としては映像編集やCG制作でレンダリングにかかる時間は悩みの種です。何とか短縮できないものかと日々頭を悩ませているわけですが、これを解消するための試みをまとめてみました。</p>
<h2>ネットワークレンダリングとは？</h2>
<p>そもそもネットワークレンダリングとは何ぞや？というところからお話させて頂きます。</p>
<p>CGアニメーションのように描画する枚数が多く重たい処理の場合、PC1台ではしんどい！という事で複数のパソコンを使って同時に処理をさせることをネットワークレンダリングと呼びます。今主流になっているCG制作ソフトの大半でこのネットワークレンダリングを行うことができるようです。</p>
<p>というよりネットワークレンダリングをしないとレンダリングに時間がかかり過ぎて作業が進まないという事のようです。1台のスペックをかなり上げてもレンダリング中は作業ができませんし、CPU・GPUのスペックを限界まで上げるとマシンのコストが跳ね上がってしまいます。先日、秋葉原のPCショップでクリエイター向けハイエンドと銘打ったカスタムPCは1台50万円を超えていました（笑）。</p>
<p>実際に映画やアニメのCG制作に携わっている知人のスタジオでは10台以上のPCをつないでレンダリングしているそうで、ネットワークレンダリングを使わない場合がほぼゼロとの事でした。</p>
<h2>CINEMA4DではTeam Render（チームレンダー）</h2>
<p>私はCG制作ソフトにCINEMA４Dを使っています。CINEMA4Dも他のCG制作ソフト同様ネットワークレンダリングが可能ですが、呼び名をTeam Render（チームレンダー）としています。</p>
<p>Team Renderを行うためにはサーバーとクライアント（処理をするPC）がそれぞれ必要になります。</p>
<p>サーバーとするPCにはTeam Render Serverをインストールし、クライアントとするPCにはTeam Render Clientをインストールします（そのままですね・・・）、それぞれのアプリケーションはCINEMA4Dを購入した際のUSB内に入っているのでインストールしたいものだけを選択すればOKです。</p>
<p>そういえばインストールしていたかもという方は、全て同じアイコンなのでちょっとわかりにくいですがMAXONのフォルダに入っているはずです。</p>
<p><a href="/uploads-archive/2017/02/1.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-12576" src="/uploads-archive/2017/02/1.jpg" alt="1" width="366" height="216" srcset="/uploads-archive/2017/02/1.jpg 366w, /uploads-archive/2017/02/1-300x177.jpg 300w, /uploads-archive/2017/02/1-228x135.jpg 228w" sizes="(max-width: 366px) 100vw, 366px" /></a></p>
<p>Team Render Serverについてはインストール時にシリアルが必要になりますが、Team Render Clientはシリアルが必要ありませんので月額など発生せず無料で必要な台数分インストールする事が可能です。しかし、使用しているCINEMA4DのグレードによってクライアントPCとして使用できる台数が決まっているのでご注意下さい。studioであれば台数に制限はありません。</p>
<h2>Team Renderの設定方法</h2>
<p>設定方法についてはmaxon japanのトレーニングサイトに非常に詳しい説明があるので参考にしてください。</p>
<blockquote data-secret="Eho7McNyB7" class="wp-embedded-content"><p><a href="http://c4d-training.jp/?p=1378">R16用GI基礎03: TeamRender</a></p></blockquote>
<p><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" src="http://c4d-training.jp/?p=1378&#038;embed=true#?secret=Eho7McNyB7" data-secret="Eho7McNyB7" width="500" height="282" title="&#8220;R16用GI基礎03: TeamRender&#8221; &#8212; CINEMA 4Dトレーニングサイト" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe></p>
<p>CINEMA4D講座で講師を務める冨士氏による解説が動画になっていますのでわかりやすいと思います。</p>
<p><iframe loading="lazy" width="500" height="281" src="https://www.youtube.com/embed/tqG9sXgPo14?feature=oembed" frameborder="0" allowfullscreen></iframe></p>
<h2>Team Renderでレンダリングしてみる</h2>
<p>職場の同じフロアのPC3台にTeam Render Client をインストールして実際にレンダリングをしてみることに。今回はアニメーションをつけた5秒間の動画（30fpsで150枚の画像）をレンダリングしてみました。</p>
<p>レンダリング開始直後に早速問題発生・・・、サーバーとクライアントが同じフロアにありそれぞれをwifiで繋げたのですが、レンダリングを開始すると「速度が足りない」との表示。情報量が多いのでどうやらそれぞれのPCを有線でつないでやる必要があるようです。</p>
<p>結局1台のクライアントだけでレンダリングすることになったのですが、何とか出来てきた画は想定と異なりシャドウが潰れてしまっていました。クライアント側のレンダリング設定がおかしかったようです。</p>
<h2>まとめ</h2>
<p>初めてということもありますが、一筋縄ではいかないようです。しかし、他のパソコンにレンダリングを任せてしまえるので制作用のPCはレンダリングの間も作業ができるのということで、かなり効率アップできることを実感しました。これは使わない手はないなという感じです。</p>
<p>ちなみにAEでもネットワークレンダリングが可能のようです。CINEMA４Dと同様にAEを使って作業をしているので今後詳しく調べてみようと思います。</p>
<p><a href="https://helpx.adobe.com/jp/after-effects/using/automated-rendering-network-rendering.html">https://helpx.adobe.com/jp/after-effects/using/automated-rendering-network-rendering.html</a></p>


CINEMA4Dでネットワークレンダリングを試みる

<p>引っ越しで家具をそろえる際にIKEAを利用する人は結構いらっしゃるのではないでしょうか？</p>
<p>既に利用されている方もかるかもしれませんが、IKEAではweb上でホームプランナーという3Dで家具の配置をシミュレーションできるサービスがあります。</p>
<p>使い方もとても簡単で、もちろんIKEAで販売している商品をそのまま配置できるので、家具を購入した後にサイズが合わなかったなどの心配もありません。</p>
<h2>IKEA ホームプランナー</h2>
<p><a href="http://www.ikea.com/ms/ja_JP/customer-service/about-our-products/rooms-ideas/splashplanners/index.html"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-11441" src="/uploads-archive/2016/07/2-1.jpg" alt="2" width="640" height="395" srcset="/uploads-archive/2016/07/2-1.jpg 640w, /uploads-archive/2016/07/2-1-300x185.jpg 300w, /uploads-archive/2016/07/2-1-228x141.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>IKEAのサイトを見るといくつかプランニングツールがあるようですが、リンクが切れていたりしています。結局は同じこちらのページに辿りつきます。</p>
<p><a href="http://kitchenplanner.ikea.com/JP/UI/Pages/VPUI.htm"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-11442" src="/uploads-archive/2016/07/3-1.jpg" alt="3" width="640" height="345" srcset="/uploads-archive/2016/07/3-1.jpg 640w, /uploads-archive/2016/07/3-1-300x162.jpg 300w, /uploads-archive/2016/07/3-1-228x123.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>&nbsp;</p>
<p>今回はログインとプロフィール入力についての説明はスキップします。ちなみにログインをしなくてもはじめられるようです。</p>
<p>まずは新しいデザインの作成から部屋の形とサイズを決めます。</p>
<p><a href="/uploads-archive/2016/07/4-1.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-11445" src="/uploads-archive/2016/07/4-1.jpg" alt="4" width="640" height="408" srcset="/uploads-archive/2016/07/4-1.jpg 640w, /uploads-archive/2016/07/4-1-300x191.jpg 300w, /uploads-archive/2016/07/4-1-228x145.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>続いて、ドアや窓を設置します。それぞれサイズを入力する事で正確なシミュレーションができます。</p>
<p><a href="/uploads-archive/2016/07/5-1.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-11446" src="/uploads-archive/2016/07/5-1.jpg" alt="5" width="640" height="465" srcset="/uploads-archive/2016/07/5-1.jpg 640w, /uploads-archive/2016/07/5-1-300x218.jpg 300w, /uploads-archive/2016/07/5-1-228x166.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>部屋の表示は２Dと３Dを切り替える事ができます。表示の切り替えやビューポイントの移動は下のアイコンをクリックします。</p>
<p><a href="/uploads-archive/2016/07/6-1.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-11451" src="/uploads-archive/2016/07/6-1.jpg" alt="6" width="640" height="446" srcset="/uploads-archive/2016/07/6-1.jpg 640w, /uploads-archive/2016/07/6-1-300x209.jpg 300w, /uploads-archive/2016/07/6-1-228x159.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>画面右の主要部材から家具のカラーや部品を変更する事もできます。</p>
<p><a href="/uploads-archive/2016/07/7.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-11453" src="/uploads-archive/2016/07/7.jpg" alt="7" width="640" height="372" srcset="/uploads-archive/2016/07/7.jpg 640w, /uploads-archive/2016/07/7-300x174.jpg 300w, /uploads-archive/2016/07/7-228x133.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>「あなたの選んだ家具」から「アイテムリスト」をクリックすれば、レイアウトした家具の一覧が出てくるので印刷しておけばとても便利です。</p>
<p><a href="/uploads-archive/2016/07/8.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-11455" src="/uploads-archive/2016/07/8.jpg" alt="8" width="640" height="401" srcset="/uploads-archive/2016/07/8.jpg 640w, /uploads-archive/2016/07/8-300x188.jpg 300w, /uploads-archive/2016/07/8-228x143.jpg 228w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<h2>ARで家具の配置を決める</h2>
<p>IKEAはカタログアプリをインストールするとカタログに載っている家具をARで自分の部屋に配置したり、カタログで紹介されている部屋を360度見渡す事ができます。</p>
<p><a href="https://itunes.apple.com/jp/app/ikeakatarogu/id386592716">ios版のインストール</a></p>
<p><a href="https://play.google.com/store/apps/details?id=com.ikea.catalogue.android">android版のインストール</a></p>
<p><iframe loading="lazy" width="500" height="281" src="https://www.youtube.com/embed/vDNzTasuYEw?feature=oembed" frameborder="0" allowfullscreen></iframe></p>
<p><iframe loading="lazy" width="500" height="281" src="https://www.youtube.com/embed/0wgZbeUaLqI?feature=oembed" frameborder="0" allowfullscreen></iframe></p>
<h2>まとめ</h2>
<p>ECに携わっている人間としては「家具という商材は３D、AR、VRととても親和性が高い」という事印象をもちました。こうした技術をECサイト上で活用する事でさらにユーザー数を増やしたり、今まで販売が難しかった商材を扱えるチャンスが出てきたりすると思います。</p>
<p>問題はどんな商材でうまく活用できるかという事ですが、家具と共通する①大きい商材、②サイズが重要になる商材、③周りにある物との関係性が重要な商材、この辺の共通した商材で同じく親和性が高い可能性があります。具体的に当てはまる商材を今後考えていきたいと思います。</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #3D

2018/04/11

2017/05/10

2017/02/07

2016/07/13