Web3Dとは？メリットや活用シーン、Web3Dの制作会社6選
インターネットブラウザ上で、ぐりぐりモチーフを動かしたり、3Dの立体感の中で気になる箇所をクリックするとズームして解説が表示される……などの動きができるWeb3Dですが、実際にどのような技術で、どんなことができ、どんなサービスに繋がるのか活用方法などわかりづらいですよね。
そこで今回は、Web3Dとは何かメリットを含めて解説します。
Web3Dを利用した活用シーン、実際に制作することはできるのか？自作方法やWeb3Dのサービスを取り扱っている制作会社までまとめていますので、ぜひ参考にしてください。
目次
Web3Dとは？どんなサービス？特長は？
Web3D（ウェブスリーディー）とは、Webブラウザ上で動く3次元の表現・映像技術です。
3次元のグラフィックを、実際に閲覧しているユーザーがスマホで指でピンチアウトまたはピンチイン、パソコンならクリックなどをすることで拡大縮小・回転などの自由な動きができます。
更に、Web3Dで商品のシミュレーターを作りバリエーションを視覚的に説明することや、ウェブ上で3Dのギャラリー展開も可能です。
Web3Dには、直感的に使える特長がありますので、言葉や文字で伝えるよりもまず見てもらいたい時にとても役に立ちます。
アトラクションのようなサイトデザインもできるため、近代的なインパクトを与えたい時にも使いたい手法です。
Web3Dのメリット
Web3Dのメリットを以下にまとめましたのでご覧ください。
- 体験型のコンテンツを作りやすい
- ユーザーがどのように操作したかデータを取得し今後の戦略にも活かせられる
- プラグインなしで実現可能
- ほとんどのブラウザに対応！開発コストが抑えられやすい
どのようなメリットなのか、分けて解説します。
体験型のコンテンツを作りやすい
Web3Dを利用すると、現物がなくてもアイテムをリアルに捉えられる・商品イメージを確認しやすく、更にまるで展示会に赴いたかのようなリアルな体験が場所を動かなくてもできるといった体験型コンテンツを作成できるようになります。
更に3Dのリアルな動きをブラウザ上で再現できるため、リアルでは見られないような商品の中身の解説もしやすくなり、現実では見えないような商品の特長を伝えたい時にもってこいですね。
例えば車の外装を取り外しシステムの特徴を見てもらいたい、小さな商品の目では見づらいような箇所の技術的な動きなど、「見てもらえたらすごさをアピールできるのに」と悩んでいる時に取り入れると希望する効果が得られる可能性があります。
情報をただ伝えるだけではなく、体験してもらうことで深い理解を与えられるツールとして重宝するでしょう。
ユーザーがどのように操作したかデータを取得し今後の戦略にも活かせられる
Web3Dをユーザーがどのように見て、どのコンテンツをどのように操作して、どこに注目していたかなどのデータを取得できるので、今後の戦略に活かせます。
例えばユーザーが商品の一部に注目していたら、注目部分をよりアピールするといった戦略を立てられるようになるのです。
記事上でも、どのような動きをしているか解析するツールはありますが、Web3Dはより詳細な解析をしやすくニーズをもっと詰めてデータ化したい人にもおすすめです。
プラグインなしで実現可能
Web3Dが初めて出てきたのは1994年ですが、このころのWeb3Dを実現するためのブラウザにはプラグインが必要不可欠でした。
そういった背景もあり、歴史が古いながら中々普及してこなかったWeb3Dの普及率がぐっと増えたのは、プラグインなしで実現可能になったことも要因として考えられます。
プラグインなしで実現可能ということは、特に使用ユーザーに「このプラグインをダウンロードしてインストールして設定してください」といったお願いもしなくて良いですし、ユーザーもわざわざプラグインを入れたりアプリを入れたりする必要もないため、双方にとって簡単に実装しやすい技術と言えます。
手間なく実装できるメリットがWeb3Dにはあります。
ほとんどのブラウザに対応！開発コストが抑えられやすい
Web3Dはほとんどのブラウザに対応したツールです。
ほとんどのブラウザに対応しているという事は、開発コストをぐっと抑えられるという事でもあります。
例えばGoogleChromeは対応しているけどFirefoxは対応していない言語があった場合、GoogleChromeだけではなくFirefoxでの見え方にも配慮しながら開発していかなくてはならなくなります。
このようにブラウザに合わせて開発するということは、1つのデザインでもブラウザに合わせて再度デザイン・コーディングが必要になりますから、手間がその分発生しますよね。
しかしほとんどのブラウザに対応している場合、1つのデザインを作り上げるだけでほとんどのブラウザ上で動いてくれるため、開発コスト自体が抑えられるメリットがあります。
Web3Dを利用した活用シーン
Web3Dの概要やメリットなども見えてきたところで、では実際にどのような使い方をされているのか、実際のサイトを紹介しながら活用シーンを見て行きましょう。
車の色・アクセサリーシミュレーション｜スズキ ハスラー
スズキのハスラー公式サイトでは、車の色・アクセサリーを視覚的に選べます。
カーソルでグリグリと車を触ると回転するので、前・後ろ・横どの方向からもチェックできます。
バーチャルギャラリー｜GALLERY A8T
Web上で行ける美術館です。
自分で操作しながら、空間を自由に行き来できます。
近づいたり遠のいたり振り返ったり、好きに操作できるので没入感がたまらないでしょう。
マウスの動きに合わせ動く｜RINGO
マウスの動きに合わせて動くポップなアイスのオブジェクトは、ワクワクする動きで飽きさせない効果があります。
3Dの建築カタログ｜3Dカタログ.com
3Dで体験できるショールームは、家の外観・内観どちらも自由にコーディネートして、よりイメージを固めやすい作りになっています。
例えば壁・屋根の色、土間の素材など用意されている素材を自由に組み合わせられるので、理想の家とはどういうデザインなのかを突き詰めることも可能です。
家購入は人生の中でもビッグイベント、できるだけ後悔したくない選択をしたいものです。
熟考できるWeb3Dでのコーディネートはそんなユーザーに寄り添うようなサービスで、購入の後押し・未来の顧客にも繋がることが期待できますね。
スクロールで3Dの動き｜AtomsWorld
スクロールして3Dの映像体験ができるサイトが増えてきていますが、AtomsWorldのサイトもそのひとつです。
迫力と臨場感のあるサイトに出来上がるので、海外のサイトデザイントレンドでも良く使われている手法ですね。
3Dの表現はバリエーション豊かで、他と被りづらくオリジナリティが出しやすいのも良い点です。
Web3Dの制作・編集にビューワーは必要？自作は可能？
Web3Dを使うと、魅力的なWebサイトを作成できますが、そんなWeb3Dはどのような手順で作られるのでしょうか？
また自作は可能なのか、特別なソフトなどが必要なのかを解説します。
Web3Dは自作できる
結論から言うと、Web3Dは自作できます。
ですが誰でも自作できるというわけではなく、Web3Dの自作に必要な知識が必要となります。
Web3Dに必要最低限な知識は以下になります。
- WebGL
- Canvas要素内で動く
- WebGL対応ブラウザ
- Three.js
特別なソフトやビューワーなどは必要ありませんが、コードを書くことが必須の作業になるため、コードを書きやすいエディターを用意しましょう。
Web3D制作に必要なWebGLとは？
まず、Web3Dを制作するためにはWebGLを知る必要があります。
WebGLとは、Webブラウザ上で3Dの動きを描写する技術のひとつです。
つまり、Web3DはこのWebGLを用いて実現しているデザインなのです。
WebGLを利用すると、サイトデザイン以外にも、ゲームやアニメーションなども作れるので覚えておくとできる幅が広がります。
また、WebGLは3Dを描くために用いられる技術ですが、2Dも描けるのでこの点も覚えておくと良いでしょう。
WebGLはCanvas要素内で動く
WebGLはcanvas要素内で動きます。
Canvasとは、HTMLとJavaScriptを利用して図を描くための仕様です。
動的に図を表示させられるので、かつてのFlashのような動きができます。
どのように使うかというと、表示させたい図をJavaScriptで描きCanvasタグを表示したい場所に置いて表示させるという流れです。
WebGLが標準装備されているブラウザ
Web3Dを表示や編集の確認作業をするためには、WebGLが標準装備されているブラウザを利用する必要があります。
WebGLが標準されているブラウザは以下になります。
パソコン
- Microsoft Edge
- Google Chrome 8以降 (8は要設定で9から標準で有効)
- Internet Explorer 11
- Mozilla Firefox 4以降
- Opera 12以降(12は要設定で15から標準で有効)
- Safari 5.1以降 (5.1は要設定、8から標準で有効)
スマートフォン
- Android 5.0 以降
- BlackBerry 10
- Edge
- Firefox for Mobile (Maemoは1.0からでAndroidは4から)
- Google Chrome for Android 25以降 (25は要設定で30から標準で有効)
- Internet Explorer Mobile 11
- Opera Mobile 12 (Android のみ)
- Safari 8 – iOS 8 以降（5〜7 は iAd の広告）
- Tizen 1.0
このように、WebGLはほとんどのブラウザで対応しています。
未対応ブラウザも、Web3Dの普及具合からみて対応されていくと考えられますが、Web3Dを制作するのであれば編集確認作業のためにもまず、この中の対応ブラウザをインストールしておくことをおすすめします。
WebGLを簡単にするThree.js
WebGLをこれから行うのであれば、WebGLをより直感的に作成できるThree.jsを知っておくと便利でしょう。
Three.jsは3Dをより手軽に制作できる商用でも利用できるJavaScriptのライブラリです。
多くのサイトで使用されていて、更に126KBととても軽いのが特徴です。
Three.jsは、カメラを作成してカメラから見えるものをCanvas要素へ描画します。
更にカメラだけでは暗いので、ライトも用意してオブジェクトを照らすといったことも必要です。
Three.jsを利用したWeb3Dの作成の流れは以下になります。
- 表示させたい場所を用意
- シーンの作成
- カメラの作成
- レンダラーの作成
- オブジェクトを作成
- ライトを作成
- カメラ位置の設定
- HTMLにレンダラーを追加する
- 出力
簡単にまとめると、オブジェクトの現場を作りカメラを配置、オブジェクトを置いてライトを当てて画面に表示させるといった流れです。
オブジェクトは四角や丸といった簡単なものから、建物や街並みなども表現できます。
Three.jsは奥が深く、専門書も販売されているので本格的に始めたい人はチェックすると良いでしょう。
オブジェクトはBlenderなどでも作れる
Blender（ブレンダー）は無料で使える3DCGアニメーションを作るソフトです。
無料であるにもかかわらず、有料に劣らない機能を備えていて世界中にユーザーがいるソフトでもあります。
あの『シン・エヴァンゲリオン劇場版』でも使用されたことは有名な話ですね。
3DCGの基本的な機能が一通り入っており、ポリゴンでのモデリングもでき建物・人・景色問わず作成可能なので、複雑なオブジェクトをぐりぐり動かせる表示にしたい人は試してみる価値があるでしょう。
Blenderを扱えるまで学習が必要ですが、広く人気なソフトであるぶん解説記事も沢山出ていますので、学習資料には困らないソフトとしてもおすすめです。
Web3Dの制作会社6選
Web3Dの表現方法は多岐に渡りますので、どのようなWeb3Dを目指すかによって制作会社を選ぶ必要があります。
Web3Dの大まかな表現は以下になります。
- スクロールで動きのあるサイト制作
- 没入感たっぷりのWebギャラリー
- 動きのあるリアルな製品などのオブジェクトを3D表示
スクロールで動きのあるサイトは、インパクトもさることながら見ていて飽きません。
スクロールしながらの映像体験で、他と差をつけられるサイト制作が出来るのは間違いないです。
没入感たっぷりのWebギャラリーはまるでギャラリーに足を運んだかのようなリアルな体験は驚きと感動を与えるでしょう。
動きのあるリアルな製品などのオブジェクトは、どのような商品なのかをユーザーに知ってもらう際にぴったりなWeb3Dです。
このように表現によって目的が違うため、どのような表現にしたいか予め決めたうえでWeb3Dの制作会社を選ぶと良いでしょう。
ここではWeb3Dの制作会社を表現タイプと共に紹介します。
株式会社ファーストネットジャパン
表現タイプ：スクロールで動きのあるサイト
株式会社ファーストネットジャパンは1998年創業のホームページ制作やWebマーケティングにも強いWeb制作会社です。
感動を与えるデザインと、ユーザー視点の使いやすいデザインを得意としているので、サイトデザインだけではなくユーザー目線でもトータルで良いサイト制作を、と考えている人はチェックしてみると良いでしょう。
まじめなものから遊び心あるものまで、幅の広いジャンルの制作実績も見ていて楽しいですね。
株式会社ホムンクルス
表現タイプ：スクロールで動きのあるサイト
サイトが既にインパクト大でエモいという言葉がぴったりな株式会社ホムンクルスは、人気アニメ呪術回線のプロモーションコンテンツ制作におけるテクニカルディレクションを担当する程の実力のある制作会社です。
企画立案・インタラクションの実装・バックエンドの開発などのデジタルコンテンツ制作全般を得意としています。
ハッとするようなサイトデザインを、と考えている人におすすめですね。
株式会社アドラマ
表現タイプ：スクロールで動きのあるサイト
シンプルだけど頭に残るような、品のあるWebGLの使い方をする株式会社アドラマは、40年以上のグラフィックデザイン制作会社のノウハウ・多角的な視点が強みです。
WebGLはインパクトがありどのブラウザでも比較的利用できるとはいえ、情報量が多くなれば多くなるほどサイトも重くなりますから、シンプルな仕掛けを、と考えている人はチェックしてみてください。
ギャラリスト3D
表現タイプ：没入感たっぷりのWebギャラリー
ギャラリスト3Dは気軽にバージャルギャラリーが作れるサービスです。
作品画像を取り込むだけ、月額3,300円から使えるのでできるだけ費用を抑えつつWeb展示会をしたい人におすすめです。
MIKAN3D
表現タイプ：リアルな製品などのオブジェクトを3D表示
株式会社モノスタジオが運営するMIKAN3Dでは、イラストや写真から3Dを作成します。
Web3Dのシステム開発の依頼も可能ですし、3Dデータだけの依頼もできます。
つまりWebGLを自分で頑張るけれど、3Dデータは用意してほしい時なども頼りになりますね。
約1分でできる簡単料金シミュレーションもあります。
MogaDigi
表現タイプ：リアルな製品などのオブジェクトを3D表示・没入感たっぷりのWebギャラリー
MogaDigiはリアルな製品などの3Dオブジェクトや、バーチャルショップ・会社・工場見学・展示会などのバーチャル空間の製作を手掛けるA-LINK SERVIES（エーリンクサービス）が運営するサービスです。
次世代のWebプレゼンテーションをコンセプトに、様々な3Dデータ作成しています。
サイトにはサービス相関図もありますので、3Dデータにお困りの際はチェックしてみると良いでしょう。
Web3Dとは？メリットや活用シーン、Web3Dの制作会社6選：まとめ
Web3Dとは何か、概要やメリット・活用シーンや自作方法・制作会社をまとめました。
Web3Dは、今やWebデザインシーンに欠かせない存在です。
2Dの情報型サイトとは違い没入感たっぷりの、臨場感ある体験型サイト制作ができます。
Web3Dは自作も可能ですが、Web3Dの自作は学習することも多く時間がかかりますので、今すぐWeb3Dのサイト制作をしたいと考えている場合は、制作会社への依頼をおすすめします。
自作に挑戦する場合は、Three.jsやBlenderの利用も検討し、理想のサイトを作り上げてくださいね。
