← IndexWork 24 / 36
来場者向け Web サイト｜夏のオープンキャンパス 2025 Day2
Travelers 2025
オープンキャンパスの特別企画『レスキュー・オブ・くうねるず』で、来場者がスマートフォンで使う Web サイトと、その中で動く AR / XR の仕組みを作った。
- Period
- 2025.08
- Role
- Web デザイン / 設計 / 実装 / AR / XR システムの構築
- Team
- TORCH VISION STUDIOS の特別企画に参加
- 会場
- デジタルハリウッド大学 夏のオープンキャンパス 2025 Day2（8/24）
Overview
デジタルハリウッド大学の夏のオープンキャンパス 2025 Day2 で、TORCH VISION STUDIOS が制作した特別企画のための来場者向け Web サイトです。展示や技術を楽しんでもらうための入り口として、サイトの中で AR / XR の体験ができるようにしました。
アプリを入れずにブラウザだけで動くよう、AR はすべて Web の技術で組んでいます。
What I did
- 01
企画を順にたどる画面
タイトル、映像、会場のヒントカード、AR、くうねるずの召喚、結びの映像までを一本の流れにし、途中の映像から再開できるリンクも用意しました。ヒントカードは会場の地図付きで、スワイプでめくれます。
- 02
三種類の AR
画像マーカーを読み取る AR（MindAR、複数のマーカーを同時に認識）、床を見つけて 3 体のモデルを置く AR（WebXR）、目の前にくうねるずを呼び出して一緒に写真を撮れる AR（Zappar）を使い分けています。
- 03
iPhone でも動くように
iPhone の Safari は WebXR に対応していないため、端末を見分けて、iPhone でも動く Zappar の AR に切り替えられるようにしました。
Facts
- 企画
- 『レスキュー・オブ・くうねるず』
- 開発
- 2025.08.17 – 08.24（117 コミット）
Stack
Next.js · Tailwind CSS · Three.js · MindAR · Zappar