Webエンジニアが検証！Apple Vision Proで作った未来の製品マニュアル

こんにちは、サービシンクR&Dの藤原です。これまで様々なデバイスやアプリを体験しながらWebとXRの未来を考察してきましたが、単なる考察にとどまらず、新しい体験を自分たちの手で形にし、実際に試してみることを始めました。「今ある技術でどこまで実現できるのか」「理想としてはどうあってほしいのか」「実際に使ってみるとどんな課題が見えてくるのか」といった視点を持ちながら、試行錯誤を重ねています。

MRマニュアルアプリの概要

今回開発したのは、製品の近くにマニュアルPDFをMRで表示するApple Vision Proのアプリです。このアプリでは、オブジェクト認識を活用し、登録した製品が視界に入るとUIが浮かび上がる仕組みを採用しました。これにより、物理的な紙のマニュアルを保管したり探したりする不便性を排除し、常に最新の情報を簡単に参照できる環境を提供します。

また、単なるマニュアル閲覧に限らず、Webサイトや問い合わせページへのアクセスもスムーズに行えるように設計しました。例えば、製品に関する情報を調べたいときや、トラブルが発生してサポートに問い合わせる必要があるとき、製品そのものを見ながら直感的にWebへアクセスできるという体験を目指しています。

このアプリは、特別な操作を必要としないシンプルなUXを意識して設計しました。アプリを起動すると、登録された製品が視界に入ると同時に自動で認識され、黄色く光るエフェクトを発します。光ることでアプリが製品を認識していることを示しています。製品の上部には3つのボタンが表示され、そこから「製品のWebサイト」「マニュアルPDF」「問い合わせフォーム」にアクセスすることが可能になっています。

操作には他のApple Vision Proのアプリと同じようにアイトラッキングとハンドトラッキングが使えます。なので直接空間に浮かぶWebサイトを触ることもできますし、少し離れたところから視線で操作することもできます。

簡単にメーカー公式のマニュアルや問い合わせページに移動できるのとても快適で、これまでのように紙のマニュアルを探したり、QRコードを読み込んでWebサイトへアクセスする手間が不要になり、物理製品とデジタル情報の境界がよりスムーズに感じられました。 私自身、例えば洗濯機のメンテナンス方法が全然覚えられなくてマニュアルを引っ張り出すことがよくあるので、こうして簡単に確認できるようになればとても助かります。

今回は検証用としてスチームアイロンを認識対象にしましたが、このアプリの真価は家庭のさまざまな製品を登録できるようになってこそ発揮されるされると考えています。そうしてあらゆるモノが直感的にWebとつながる体験を、今後また検証できたらと思います。

開発と検証を通じて見えた課題

Webビューの配置はどうあるべきか？

今回、Webビューウィンドウは製品の上部に固定される形で設計しました。 Webビューのウィンドウをアイテムの近くに出すのではなく、ユーザーの目の前に出したり、ウィンドウ自体を動かせるようにする案もありましたが、それをすると「どのウィンドウがどのアイテムの説明なのか」を見失わないようにする表現を考えなければいけません。また今回はモノとWebが直接繋がっている体験をより強調するために、ウィンドウはアイテムの側に固定で表示されるようにしました。

しかし、実際に使ってみると「近づかないと使えない」という制約がXRの利便性を損ねていると感じる場面もありました。

実は開発中に「アイテムと、関連するウィンドウを線で繋ぐ」「見ているウィンドウに対応するアイテムを光らせる」といった、「どのウィンドウがどのアイテムの説明なのか」を明確にするためのアイデアは出ました。ただ、部屋中が線だらけになってしまわないかとか、製品が光っていると見えづらくて普通に困るとか、出た案そのままでは良くない効果が予想されたので採用されませんでした。

少し離れた場所からでもマニュアルを参照したいことはよくあると思います。また、高いところに表示されると子供には手が届かなかったりするかもしれません。 そういった場面で不便さを感じさせないように、アプリに手を加える場合この問題は最初に解決すべきだと思っています。

アイテムによって適したウィンドウの向きが違う

開発を進める中で、ウィンドウの向きについても最適なルールを考える必要があることに気づきました。 例えば、壁に固定されているエアコンやインターホンなどは、壁に沿ってウィンドウの向きが固定されている方が使いやすそうです。しかし、今回採用したアイロンのような持ち運びできるアイテムの場合、使用する角度が様々なため、ユーザーの視線に正対する方が自然な体験になります。

このように、アイテムを真正面からではなく斜めや後ろから見るケースは多いでしょう。......というかアイロンの正面って？

「向きを固定するのか、それともユーザーの視線に合わせるのか」という点は、先述した情報の配置問題と同じように、MRアプリ開発における共通の課題かもしれません。今後は、アイテムごとに適したウィンドウの表示方法を選べるようにするなど、より柔軟な設計が求められるでしょう。

MR環境に適したWebデザインとは？

今回のアプリでは、Webページ上に公開されたPDFをそのまま表示する方式を採用しました。しかし、MR環境でのWeb閲覧はPCやスマホとは大きく異なり、視認性や操作性の最適化が必要だと感じました。

特に、アイトラッキングやハンドトラッキングでは、細かい操作が難しい ため、リンクやボタンのサイズを適切に調整する必要があります。従来のWebデザインでは、AppleやGoogleの推奨する「指でタップしやすいサイズ」は 44px～48px以上 とされていましたが、Appleの空間ユーザーインターフェースのガイドラインでは、60px以上 のボタンサイズを推奨しています。MR環境では、視線操作の精度やハンドトラッキングの特性を考慮し、Webサイトもこれに合わせたUI設計を求められる可能性があります。

また、MR空間では情報を3D空間上に表示できますが、単純にウィンドウを大きくすればいいというものでもありません。例えば視野いっぱいに広がるサイズで表示すると、端から端まで視線を動かすのが疲れるため、適度な大きさで情報をコンパクトに整理する必要があります。逆にウィンドウが小さすぎると、細かい文字が読みにくくなり視線による操作が難しくなるため、バランスの取れた表示設計が求められます。

このように、「どのくらいの大きさのWebビューが最適なのか」「視線やジェスチャー操作に適したUIは何か」 を考えることが、今後のMR環境向けWebデザインの重要な課題になると感じました。今後さらにXRが世の中に浸透すれば、WebのUIデザインも単なるレスポンシブ対応にとどまらず、MR向けの最適化が求められるかもしれません。

モノから直接Webにつながる未来

今回の開発を通じて、将来的には 「家庭のあらゆる製品がWebと直結するのが当たり前になる」 未来が見えてきました。スマートグラスが普及すれば、マニュアルの閲覧にとどまらず、家電の設定変更やメンテナンス、さらには食品の賞味期限管理や調理レシピの提案など、Webの情報がリアルタイムで現実世界と結びつく時代がやってくるかもしれません。

そしてまた、今回作ったアプリはAIの発展とも相性が良いと考えています。 現在、目の前にあるモノについてリアルタイムで説明してくれるようなスマートグラスが登場し始めています。そういったものとこのアプリを組み合わせると、AIが製品の「公式の情報」に直接アクセスできる環境を作ることで、より正確で信頼性の高い情報提供が可能になります。

例えば、今のAIアシスタントは「この製品の使い方を教えて」と聞けば、インターネット上から情報を集めて回答します。しかし、情報源が曖昧であるため、時には誤った情報を提示するリスクがあります。このアプリのように、製品と公式情報を直接紐づけておけば、AIは確実に最新の正しい情報を参照できるようになります。

今後さらにAIが発展し、AIを通じて情報を得ることが普通になった世界では、得られる情報が正確で信頼できるものであることが不可欠です。そんなときに、Webが正しい情報源としての価値を持ち続けることは大切だと思います。

まとめ

もっと未来の体験を追求するなら「3Dオブジェクトを使って操作方法を教えてくれる」みたいなことまでやれたらいいですが、今回のMRマニュアルアプリは「モノとWebを直結させる」ことの可能性を探る試みの第一歩です。開発と検証を通じて、XR環境におけるWebの在り方や、実際に使ってみて初めて見えてきた課題を数多く発見することができました。

現時点では、Webビューの配置や操作性、情報の見せ方など、解決すべき点がまだ多くあります。中にはXRアプリ側で改善した方がいい問題もあれば、Webサイト側から歩み寄った方がいい問題もあります。こうした試行錯誤を積み重ねることで、より直感的で便利な未来のWeb体験を作り出せるのではないかと考えています。

また、このアプリの開発を通じて「WebとAIの関係」についても新たな視点を得ました。AIを通じて情報を得る機会が増えていく中で、信頼できる情報源としてのWebの価値がより重要になるでしょう。AIが製品情報を提供する際に、公式データと確実に紐づく仕組みを作ることで、正しい情報をスムーズに届けることが可能になります。

現在、私たちはWeb×XRの体験をさらに深掘りする別のプロジェクトも進めています。 XRデバイスの特性を活かした新たなUXの模索や、Webとの連携をよりスムーズにするための技術的な挑戦など、より実用的な形を目指して研究を続けています。 今後も、単なる「未来の考察」にとどまらず、実際に手を動かし検証して体験を作り上げることで、新たな可能性を見出していきたいと思います。