情報処理学会 インタラクション 2023
IPSJ Interaction 2023

2B-192023/3/1

既存の Web コンテンツを立体的に表現する
VR 向け Web ブラウザアプリケーションの開発
吉川遼†1†2

横山徹†3†4

八嶋有司†1

彦坂和里†1

概要：近年，VR 空間を活用した立体的な情報提示手法が多く見られるが，Web コンテンツの閲覧方法や Web コンテ
ンツのデザインは平面を想定したものがほとんどである．本研究では，既存の Web コンテンツのマークアップ言語を応用しつつ，VR 空間内に Web コンテンツを立体的に表示する Web ブラウザアプリケーションを開発し，実験を通し既存の平面的な Web ブラウザとの閲覧体験の差異について存在感の観点から比較・検討をおこなった．

1. はじめに

2. 先行事例・関連研究

21 世紀以降のスマートフォンやタブレット型端末の普VR 向けの Web コンテンツ提示手法に関する先行事例と及に伴い，これまで PC 上での閲覧を想定して設計されてしては，AR，VR 向けの API である WebXR がある．HTML

いた Web コンテンツは，様々な媒体と解像度を想定したレ内に WebXR 用の canvas 要素を記述し，その canvas 内で 3Dイアウトが要求されるようになった．レイアウトを実装すオブジェクトを描画することで，HMD で当該 Web ページるにあたって，Web ブラウザの表示領域（ビューポート）を閲覧すると，ブラウザ内で VR や AR アプリケーションの幅や高さに合わせ，段組や画像といったコンテンツの幅を動作させることを可能にするが，既存の Web コンテンツや高さを動的に調整するリキッドデザインや，スタイルシを VR 向けに拡張する本研究とは目的が異なる．

ートでメディアクエリを用い，コンテンツの幅や高さの条また，Web コンテンツを VR 内に配置する関連研究とし件を段階的に設定するレスポンシブデザインを用いることては Toyama et al. の「VRowser」[3]や Egawa et al. の「Multi-が昨今の Web デザインにおいては主流となっている．

Window Web Browser」[4]があるが，いずれも平面の Web コ

しかしながら，上記のデザイン手法や，そのデザイン手法を実装する上で必要な HTML，CSS といったマークアップ言語において，昨今普及しつつある Virtual Reality（VR）で用いられるヘッドマウントディスプレイ（以下：HMD）での閲覧を想定したレイアウトや記述は考慮されていない．

ンテンツ表示領域を VR 空間内に配置しているという点で本研究とは方向性が異なる．

3. VR 向け Web ブラウザアプリケーション
3.1 アプリケーションの試作

これまで Web コンテンツの表示を想定していた PC やスマ

本章では，PC やスマートフォン，タブレット型端末向けートフォン，タブレット型端末の表示領域は，一般的に平にレイアウト・記述された Web ページを維持しつつ，同一面かつ長方形の形状をしている一方，HMD 内の表示領域ページ内で VR 向けのレイアウトを実現する Web ブラウザ

は全天球型であり，これまで以上に柔軟な Web コンテンツアプリケーションを提案する．また，この機能を実現するのレイアウトが可能になることが期待される．また，VR 空ためのアプリケーションの試作をおこなった．

間の三要素として挙げられている自律性（Autonomy），対

3.2 アプリケーションの概要

話性（Interaction），臨場性（Presence）の AIP キューブ[1]に本稿で提案する Web ブラウザアプリケーションは，Webおいて，Web コンテンツの相互作用性は保持しつつも，特ページのマークアップ言語である HTML，CSS に記載されに臨場性の部分において，単なる平面上のレイアウトだけた VR 向けの要素やクラス名を取得し，画像やテキストなではなく，奥行き感やスケール感といった部分を強調する

ど個別の要素を，CSS で指定された座標や奥行きに関することで，より臨場感や存在感のある Web コンテンツのレイプロパティの値を基に，VR 空間内に要素を配置する Webアウトが可能になることが考えられる．

ブラウザアプリケーションである．

そこで本稿では著者らが提案している Web コンテンツ

3.3 Web ページ内の VR 空間用要素の記述に奥行き感やスケール感を付加し，表示する VR 向け Web

VR 空間用の要素は以下のように実装した．まず HTML

ブラウザアプリケーション[2]の開発をおこなった．開発しの要素や CSS のセレクタに特定のクラス名を用意しておた Web ブラウザアプリケーションによる Web コンテンツ

き，CSS 上で当該クラス名が設定されている要素の display

鑑賞が既存の VR 向け Web ブラウザアプリケーションによプロパティ値を hidden（非表示）に設定しておく．これにる鑑賞と比較し，奥行き感やスケール感といった存在感のより，スマートフォンやコンピュータ上では，VR 空間用の知覚にどのような差異があるかを実験結果から考察する．

要素は非表示となる．また VR 空間用の要素は HTML 上で†1 名古屋文理大学情報メディア学部情報メディア学科†2 名古屋大学大学院情報学研究科社会情報学専攻†3 東京藝術大学音楽学部†4 株式会社アマナ© 2023 Information Processing Society of Japan542

情報処理学会 インタラクション 2023
IPSJ Interaction 2023

2B-19
2023/3/1

個別に id を付加し，CSS にて各要素の id をセレクタとし，位置や幅・高さ，奥行きといったプロパティを個別に指定する．このように個別に指定することで，スマートフォンや PC 向けに記述されている HTML や CSS の内容を保持しつつ，VR 空間向けの記述を追記することが可能となる．
例えばスマートフォンと VR 空間で同一の画像を提示した
い場合は，通常の img 要素と特定のクラス名が付与された
img 要素を同じ HTML 内に記述することで，各端末で同一

図 2

CSS 上での記述と空間内での座標配置の画像を表示させることができる（図 1）．
また，要素の種類に応じて次のような処理を実装した．
img 要素（画像）については矩形を作成し，その矩形に要素の src 属性に指定された画像を読み込み，貼り付けて表示させている．main, article, section, div 要素は矩形として扱い，矩形の幅や高さ，背景色を矩形の色として反映させている．h1 から h6 までの見出し要素，p, span 要素はテキス
トオブジェクトを作成し，CSS の font-size プロパティやfont-weight プロパティを反映させ，表示している（図 3）．

図 1

要素の記述例と表示例

3.4 Web ブラウザアプリケーションの構成
本研究で試作したアプリケーションは Unity で開発した．
開発において，第 1，第 3，第 4 著者がアプリケーションの仕様策定を，また第 1 著者が操作機能の実装を，第 2 著者が HTML，CSS 各要素の取得と VR 空間内に要素を配置する際の処理に関する実装を担当した．

図 3

テキスト，背景色の表示例

アプリケーションの仕様策定アプリケーションは起動時に指定された URL から HTML，CSS を読み込む．読み

3.5 操作方法

込んだ HTML ファイルから，VR 空間用のクラス名が設定

本アプリケーションでは，ユーザーは自分の視点を移動されている要素のみを HTML から取得し，読み込んだ CSSさせることで，空間内に配置されたコンテンツの閲覧をおで指定された各要素のプロパティを配列として保持する．

こなう．左のコントローラーのスティック操作で前後左右

アプリケーションは配列に格納された各プロパティとへの視点移動，右のコントローラーのスティック操作で視その値を基に要素を空間内に配置する．具体的には，CSS

点の上昇・下降，左右のコントローラーのトリガーで視点の top, left プロパティを空間内の x 座標，y 座標に変換し，の回転ができる．

空間内に配置する．また width, height プロパティを基に要素の幅と高さを空間内に反映させる．また z-index プロパ
ティに指定される値に一定の係数を乗じ，空間内の z 座標

4. 評価実験
4.1 実験の概要に変換し，空間内に配置する．これらの処理を HTML から3 で開発した Web ブラウザアプリケーションを用いた取得した各要素に適用し，3D 空間上に Web ページとしてWeb コンテンツの鑑賞が既存の VR 向け Web ブラウザアプ構築する（図 2）．この他，VR 空間用のクラス名が設定さリケーション（Meta Quest Browser：以下，既存ブラウザ）

れている body 要素に background-color プロパティが指定さを用いた際と比較し，存在感の知覚にどのような差異が生れている場合には，その値を取得し，3D 空間の背景色としじるかを明らかにするために実験を行った．実験には 18 歳て反映することで，VR 空間においても，PC やスマートフから 22 歳までの大学生 10 名が参加した．実験では各ブラォンと同様の背景が表示されるよう調整した．

ウザでの鑑賞前に操作方法について実験実施者が説明し，© 2023 Information Processing Society of Japan543

情報処理学会 インタラクション 2023
IPSJ Interaction 2023

2B-19
2023/3/1

説明終了後，参加者は既存ブラウザと開発したブラウザそれぞれで Web コンテンツを鑑賞した．Web コンテンツ全体を鑑賞後，各ブラウザでの見え方の違いや操作感に関するアンケートならびにインタビューを実施した．なお，順序効果を考慮し，参加者のうち 5 名は開発ブラウザ→既存ブラウザの順番で，残り 5 名は開発ブラウザ→既存ブラウザの順番で体験するよう，ランダムで振り分けをおこなった．
図 6

開発した VR 向け Web ブラウザでの表示

4.3 結果・考察
アンケートの結果を図 7 に示す．なお，先述の順序効果について，既存ブラウザ→開発ブラウザの順で体験した群と開発ブラウザ→既存ブラウザの順で体験した群の各アンケート項目の平均値で t 検定を実施したが，有意差はみられなかった（p=0.41）．

図 4

実験の様子

4.2 実験用 Web コンテンツ
実験用の Web コンテンツとして，デザイン思考に関する架空のイベントを紹介する Web ページを作成した．Web ページはいわゆる「ランディングページ」のように 1 ページで完結する縦長のレイアウトとなっている．ページ内に画像，見出し，テキストを配置し，デザイン思考やプロトタ

図 7アンケート結果

イピングに関する説明や，架空のイベントの紹介，これまでのイベント概要や写真といったコンテンツを配置した．

アンケート結果より，「Web ページの強調されている内なお，今回のページは上述の通り 1 ページで完結するよ

容が理解しやすい」「Web ページの気になった部分が見やうな内容であるため，他ページや外部の Web サイトへのハすい」といった項目で開発したブラウザの方が理解しやす

イパーリンクなどは設置していない．VR 向けの記述としいと答えた割合が他の項目に比べ多かった．この結果から，て，背景画像は z-index プロパティの値を下げ，見出しや画z-index プロパティの値を空間内の z 座標に反映させる方法

像は z-index プロパティの値を上げることで，視界の前後は，VR 向けの Web デザインとして，奥行き感を提示するで奥行き感をもたせるような設計を操作的に実施した．既上で有効である可能性が示唆された．

存の VR 向けブラウザである Meta Quest Browser での表示

また，Web ページの気になった部分が見やすいという点

例を図 5 に，開発したブラウザでの表示例を図 6 に示す．

に関しては，インタビューより「気になった部分の近くに寄ることができる」「写真に近寄って見ることができる」といった発話にあるように，今回実装した，自身の視点を上下前後左右に移動させる操作方法が効果的であった可能性がある．例えばスマートフォン上でも画像を拡大することは可能だが，画面が狭く，広範囲の詳細を同時に把握することは難しい．一方，今回開発したブラウザでは，対象に自身そのものが近づき，視野に対象の全体を収めつつ，対象の詳細を観察することができる．VR 上における Web コ
ンテンツの適切なスケール変換については今後の課題でも

図 5

既存の VR 向け Web ブラウザ（Meta Quest Browser）での表示あるが，対象そのものに近づくことができるという点は今回開発したブラウザの大きな特徴であるといえる．
しかしながら，「Web ページの全体の内容が理解しやす© 2023 Information Processing Society of Japan544

情報処理学会 インタラクション 2023
IPSJ Interaction 2023

い」
「Web ページの全体の構造が理解しやすい」といった項目に関しては，比較的既存ブラウザの方が理解しやすいと答えた割合が多かった．これは既存ブラウザが PC やスマートフォンといった普段利用している端末に近いレイアウ
トで表示されること，また図 6 で示したような開発ブラウ
ザで提示した奥行き感かつスケール感のある情報表示だと全体像が把握しづらい，といったことが原因として考えられる．また，テキスト情報量の多さや配置といった要因も考えられる．今回の実験参加者の視聴行動を更に詳細に分析しつつ，今回のようなテキストによる情報の多い Web ページ以外にも，画像や動画を中心とした Web ページなど様々な種類の Web ページで実験をおこない，VR 上でのレイアウトについて比較検討していく必要があるといえる．
奥行き感やスケール感といった Web コンテンツの存在感に関しては，インタビューから「要素が前面に出ていたり奥に配置されていたりすることで重要度がわかった」「壁画のような迫力があった」といった意見も得られた．今回の画像やテキストの幅や高さは，PC 上で表示されている解像度を基に算出した値を用い，横幅 1900px 程度の 1 カラム型のレイアウトをベースに要素の位置を設定したため，

2B-19
2023/3/1

5. おわりに
本稿では Web コンテンツに奥行き感やスケール感を付加し，表示する VR 向け Web ブラウザアプリケーションを提案し，試作したアプリケーションを用いることで，既存の VR 向けブラウザと比較し，奥行きのあるコンテンツ配置や自身の視点を要素の目の前まで移動可能にする操作方法を実装することで，要素の強調されている内容や気になる部分への理解が容易になる可能性が示唆された．
一方，既存ブラウザと比較し，Web ページ全体の内容理解や構造の理解のしやすさで劣る部分があったほか，コンテンツを閲覧する際の操作性に課題もみられた．
また，今回試作したアプリケーションでは，VR 向けのレイアウトを実現するために，画像やテキストの座標（top,left プロパティ）や要素の大きさ（width, height プロパティ），奥行き（z-index プロパティ）を CSS 上で手動で設定する必要がある．今後は，より柔軟なレイアウトを実現するために，メディアクエリを用いたレイアウトの実現や，現在のResponsive Web Design で実装されているような可変レイア
ウトの VR 空間内への適用，空間内への要素の自動配置などの機能実装を進めていく予定である．

実際に VR 空間内で鑑賞すると横幅や高さのあるコンテンツ配置となったが，スケール感を体験するにあたって，PC上での要素の幅や高さの値が利用できる可能性が示唆された．また「360 度にコンテンツが配置されていると面白そ謝辞

本研究は JSPS 科研費 21K12573 の助成を受けたものです．また，実験にご協力いただきました名古屋文理大学の学生に感謝申し上げます．

う」「自分が振り向いた方向にコンテンツがあるとよい」といった意見も得られた．今回実験用に作成した Web ページ

参考文献

は奥行きこそあるものの，コンテンツが一方向に集中して[1]いたことから，全天球型の VR 空間を十分に活用できていたとは言い難い．そのため，PC やスマートフォン向けのレイアウトを考慮しつつも，既存の Web サイトを VR 空間内においてどのようにレイアウトすることが Web デザインとして適切なのか，VR 向けの Web デザイン原則についても今後検討していく必要があるといえる．
最後に，アプリケーションの操作性に関しては「気になるコンテンツを選択すると自身の視点がその地点まで移動するとよい」「目線の移動でスクロールできるとよい」といった改善点がインタビューの意見から得られた．今回のア

Zeltzer, D. Autonomy, interaction, and presence. Presence:
Teleoperators & Virtual Environments. 1992, vol. 1, no. 1, p. 127132.
[2] 吉川 遼, 八嶋 有司, 彦坂 和里: 既存の Web デザインを VR空間に転用するアプリケーションデザインの提案，第 12 回
社会情報学会中部支部研究会・第 7 回芸術科学会中部支部研究会・第 10 回情報文化学会中部支部研究会合同研究会論文集. 2021, p. 13-16.
[3] Toyama, S. et al.. VRowser: a virtual reality parallel web browser.
In International Conference on Virtual, Augmented and Mixed
Reality, Springer, Cham. 2018, p. 230-244.
[4] Egawa, R., and Ijiri, T. Multi-Window Web Browser with History
Tree Visualization for Virtual Reality Environment. In The AdjunctPublication of the 34th Annual ACM Symposium on User Interface
Software and Technology. 2021, p. 32-34.

プリケーションでは自身の視点を移動させる操作方法を実装していたが，コンテンツが大きくなった分，移動に時間がかかり，見たいコンテンツにすぐたどり着けないといった事象もあった．今回の実験参加者は 10 名中 3 名が VR 未経験者，5 名が VR を過去数回程度体験したことがあると回答していたため，コントローラーを使った VR 空間内での操作自体に不慣れであった可能性は十分に考えられる．
今後，VR 経験者にも実験対象を広げつつ，よりスムーズにコンテンツのスクロールや視点の移動を可能にする操作方法の実装を検討していきたい．

© 2023 Information Processing Society of Japan545