VRをブラウザで体験できるようになる「WebVR」の魅力とは?

VRをブラウザで体験できるようになる「WebVR」の魅力とは?

2016年はVR元年と呼ばれ、VRはITやWeb、ゲーム業界にとどまらず、さまざまな方面から熱い視線を浴びました。VRを身近に体験できる製品が次々と登場し、CGで作られた3D空間を体験できるVRブラウザ技術は大きな飛躍を遂げています。
2017年2月にはGoogleがWebブラウザChromeでWebVRをサポートすると発表し、大きなニュースとなりました。今回は、今注目を集めるWebVRの魅力や制作方法、実例をご紹介します。

IT業界まるわかりガイドは、日本初Web専門スクールのインターネット・アカデミーが運営する業界情報メディアです。最新の業界情報を、初心者にも分かりやすくご紹介しています。

目次

進化を続けるWebVRの魅力

進化を続けるWebVRの魅力

VR(仮想現実)では、目の前にある現実とは違う現実を体験できます。従来、VRを体験するためには専用のヘッドセットの着用を必要としましたが、現在ではJavaScript APIを使用し、Webブラウザ上でVR体験ができる技術「WebVR」が登場しました。

WebVRを利用すれば、特別なソフトウェアをインストールすることなく、Webブラウザ上でVRを体験できます。WebVRに対応したWebサイトを紹介するときは、自分のブログにサイトURLを記載するだけで、多くの人とVR体験を共有することが可能です。

WebVRは不動産物件の間取りのシミュレーターや観光スポットの紹介、衣服のフィッティングなどに応用されているほか、自社製品のプロモーションに利用される機会も増えています。WebVR技術は、私たちの暮らしにますます身近なものになるでしょう。

WebVR制作に必要なスキルは、HTMLとJavaScript

WebVR制作に必要なスキルは、HTMLとJavaScript

専用のヘッドセットを使わずにWebブラウザ上で誰でも手軽にVRを体験できるWebVRですが、制作においても特別な技術が必要なわけではありません。HTMLとJavaScriptを使えば、手軽にWebVRに対応したWebサイトを制作可能です。

具体的には、3Dグラフィックスを表現する「WebGL」という仕組みを利用した方法と、WebVR用フレームワーク「A-Frame」を利用した方法の2つが挙げられます。

WebGLを利用する場合、「three.js」というJavaScriptライブラリーを使うことによって、簡単に3Dグラフィックスを表現できます。ただし、この方法はWebGLについて理解している方でなければ扱いが難しいかもしれません。

そのため、初心者の方にはA-Frameを利用する方法をおすすめします。HTMLにA-Frameを読み込ませることで、カメラの位置指定やライト(光源)を追加したり、グラフィックスにアニメーションを設定したりすることが可能です。Webサイト制作に取り組んでいる方は、ぜひWebVRコンテンツの制作にチャレンジしてみてはいかがでしょうか。

「百聞は一見に如かず」実際のWebVRを体験

「百聞は一見に如かず」実際のWebVRを体験

WebVRの例として、インターネット・アカデミーのインド支店が制作したWebサイト「xLab」(https://makexhappen.com/)をご紹介します。

URLにアクセスし、トップ画面(宇宙の背景)の右上の「VR」とヘッドセットの形をしたアイコンをクリックすると、瞬時にVRモードに切り替わります。VRモードでは背景はそのままに、マウスを動かすと360度回転し奥行きのある立体的な画面になります。
ぐるぐる回転しながら宇宙空間が見渡せ、画面中央にある「○」をアイコンに合わせてクリックするとコンテンツが出現する仕組みです。

xLabはAWWWARDS(世界中のWebサイトの中から優れた作品を決定するコンテストサイト)にノミネートされています。WebVRを体験したことのない方は、ぜひ一度サイトに訪問してみてください。

おわりに

進化を続けるWebVRは、Web業界に限らずあらゆる業界で需要が高まることが期待されます。WebVR制作技術を身に付ければ、企業のプロモーションサイトやECサイトの商品紹介ページなどの仕事に携われるチャンスがあるかもしれません。

インターネット・アカデミーはW3C(Webの国際規格を定める団体)のメンバーで、プログラミングやWebデザイン、最先端のテクノロジーまで学べるスクールです。事例でご紹介したWebVR技術をはじめとして、専門性の高いスキルを習得できます。書籍やインターネットだけでは学べない現場のノウハウをインターネット・アカデミーで身に付けてみませんか。

出典

AWWWARDSにインド支店「xLab」のWebサイトがノミネート!

Web業界への就転職・キャリアアップを成功させたいと考えている方へ
日本初そして日本唯一のWeb専門スクールインターネット・アカデミー

自分にぴったりのコースが見つかる

インターネット・アカデミーでは、Web業界を目指すあらゆる方にお応えすべく、多彩なコースをご用意しています。

Webデザインを学びたい方

プログラミングを学びたい方

自分のペースとスタイルで学べる

毎回好きな受講形式を選んで学習することができるので、働きながらじっくり通いたい方も短期間での就職を目指す方も自分の都合に合わせて、スケジュールを組むことができます。

  • ライブ授業

    現役のプロインストラクター
    と仲間と学ぶメリット

    ライブ授業
  • マンツーマン授業

    インストラクターと
    1対1という贅沢

    マンツーマン授業
  • オンデマンド授業

    いつでも学びたいことを
    学べる

    オンデマンド授業

自分に適した学習方法を探す

インターネット・アカデミーでは、無料体験レッスンを毎日開催しています。デザインやプログラミングの体験ができるのはもちろん、実際の授業に参加したり、就職や転職のご相談、通学スケジュールのご相談なども承っております。

  • ご要望をお伺い

    ご要望をお伺い

    まずはお客様のご要望をお伺いし、お一人おひとりの目的や悩みに最適な内容にカスタマイズ。お客様専用の内容で当日ご案内いたします。

  • カウンセリング

    カウンセリング

    就職や転職、在宅で働きたいなど、お客様の希望を叶えるために専任のスタッフが最適な学習プランをご提案。現在の仕事のご相談なども承ります。

  • 体験レッスン

    体験レッスン

    「自分に向いている分野は?」「自分にできる?」そんな疑問を解決するレッスンを無料で体験。デザインもプログラミングもお試しいただけます。

無料体験レッスン・個別相談のご予約

当日ご希望の方やお急ぎの方は、フリーダイヤルにてご予約いただけます。

0120-746-555 フリーダイヤル受付時間(平日・土日) 10時-21時 オンライン予約

IT研修・人材育成のご相談を無料で承っております
法人専用社員研修、内定者・新人研修のご予約

インターネット・アカデミーでは、
あらゆるニーズに合わせた研修カリキュラムを取り揃えています。

「自社に最適な研修プランを相談したい」「研修費用の相談をしたい」「助成金を申請したい」など、お電話またはお問い合わせフォームよりお気軽にご連絡ください。

03-3341-3781 受付時間(平日・土日) 10時-21時 法人専用 お問い合わせフォーム