気持ちの良いARのUXとは？ | スマホARのUXを格段に向上させるための4つのTips
先日、GoogleがスマホARを開発する上で留意すべきポイントを実際にARで体験できるアプリ「ARCore Elements」をリリースしました。
このアプリはARCoreでの開発を想定したものではありますが、実際にプレイしてみるとARCoreでのアプリに限らず、スマホAR全般で役に立つTipsを得ることができました。
今回はそんなARCore Elementsを実際に触ってみて、これからスマホARを開発する人が特に意識すべきだと感じたUI・インタラクションのポイントをまとめました。
1: ARオブジェクトの操作に納得感を与える操作表現
ARアプリではユーザーがオブジェクトを三次元的に操作することがほとんどです。
しかしスマホARの場合、基本的にはユーザーがAR空間と接せられるのはスマホの画面、すなわち平面上となります。
スクリーン越しでの３次元的なオブジェクトの操作方法についてARCoreでは以下の動画のようにレティクルを使った表現が紹介されていました。
画面真ん中から光の線が伸びてきて、右下の青ボタンを推し続けることで光の線に当たっているARオブジェクトを操作することができます。
操作中、光の線は釣り竿のように動かす方向とは逆向きにしなるのですが、その際に操作しているオブジェクトの質量に合わせてしなり具合を変化させています。
この表現の素晴らしいところは「仮想のオブジェクトの質量」を感じることができる点にあると考えています。
動画の後半では羽と岩の操作感の違いを比較しているのですが、羽はほぼしなりが無いのに対して、
岩はしなりがかなり大きくなります。
このように視覚的に物理現象のフィードバックを与えてあげることで、手で操作できたり、ハプティクスがないスマホARのオブジェクト操作でもユーザーに操作している納得感を与えることができます。
2: ユーザーのカメラ位置に合わせた情報表示の工夫
次に紹介するTipsはARCore Elementsの中でセクションとして設けられているものではなく、ARCore Elementsのメニュー表示の方法なのですが、こちらもかなり学びがあったのでご紹介します。
プレイしていただくとわかるのですが、ARCore Elementsで用意されているコンテンツは大きく４つのカテゴリに分かれており、それぞれが浮島のような表現でメニュー表示されています。
これらの中から一つ選ぶとその島がクローズアップされて、コンテンツ一つ一つが更に小さな浮島となって表示されます。
ここで注目したいのが、この小さな浮島の上に浮かんでいるアイコンと名前の名札表示です。この名札、ある一定距離まで離れているときには上記の写真のようにフォーカスが当たっているもののみ名前まで表示され、それ以外のものはアイコンのみ表示されています。
しかしユーザーが近づくと...
上の写真のようにすべてのアイコンと名前が表示されて、すべてのコンテンツを把握することができます。
「ユーザーがあるオブジェクトに近づく = そのオブジェクトの詳細な情報を求めている」という判断からカメラの距離に基づいて情報の粒度を変化してあげるというのはユーザー側にとってとても気持ち体験だなと感じます。
逆にユーザーが引いてみているときには文字情報などの詳細な情報は隠してあげることでより3Dオブジェクトが見やすいように調整されています。
この動作を動画で記録したものが下の動画です。
3: ユーザーの視点を意図した方向に向けてもらうための工夫
ARアプリがこれまでのスマホアプリや動画コンテンツと圧倒的に違う点は「ユーザーが自由に視点を変えることができる」という点です。
アプリの面白さとしての可能性が広がる一方で、ユーザーが意図しない方向を向いてしまうなど様々な状況を考えておく必要があります。
ARCore Elementsではそんなユーザーの視点を意図した方向に向けてあげる仕組みも紹介されています。
まず一つ目がARオブジェクトが動いてしまうがゆえに画面外に出てしまったときの対処についてです。
動画で紹介されているように、画面の端にユーザーにどちらを向いてほしいのかをわかりやすく表示しているのがわかると思います。
またARオブジェクトは動かないが、ユーザー自身が意図しない場所にカメラを向けてしまうような場合もあります。
ARCore Elementsでは3Dオブジェクトの中にユーザーが入ってしまった場合の対処方法について紹介されています。
動画のようにカメラの視界を霞ませるようなエフェクトをかけることでユーザーに暗に「ここはカメラを向けてほしくないところだよ」というメッセージを伝えています。
このようにスマホARアプリではユーザーの視界をしっかりとコントロールしてあげるような仕組みも用意する必要があります。
4: リアル世界とバーチャルオブジェクトとのさりげない干渉
最後にご紹介するのはとても些細な、しかしとても大事なTipsです。
それはリアル世界の状況とバーチャルオブジェクトが干渉しあうような表現をバーチャルオブジェクトを使って表現してあげることです。
例えば、ARCore Elementsの中では下の動画のように部屋の電気をつけたり消したりすることで、その光量に合わせて街の明かりを変えています。
正確な光源の推定などはまだ難しいですが、こうした0/1の切り替えなどで周りの光量に合わせた状況の変化を演出してあげることでユーザーがARオブジェクトもまるで現実世界のオブジェクトであるかのような納得感を持つことができます。
更にもっと些細な表現としては下の動画のようにオブジェクトが床に設置された瞬間にオブジェクト自体が少しバウンドし、（動画では収録できていませんが）微かに物と物とがあたるような音が鳴ります。
このような表現を加えてあげることで、現実空間にARオブジェクトが「置かれた」という納得感をユーザーに与えてあげることができます。
終わりに
スマホARアプリはこれまでのスマホアプリでは考えなくてよかったような状況を想定しなくてはならなかったり、扱う情報の次元が２次元から３次元になったりと、これまでのスマホアプリ開発の知見だけでは太刀打ちできない部分も多くあります。
一方で、だからこそこのタイミングからユーザーが気持ちいいと感じるような体験をARで作り出してあげることはきたるARが生活の中心になる時代に大きな財産になることは間違いないと思っています。
ARに力を入れているGoogleやAppleなどが推奨しているAR体験の形を参考にしながら、自分たち自身でさらにAR体験の知見を広げることで今後他のARアプリよりも秀でたアプリにすることができると考えています。
弊社ではそのようなARの体験の研究に興味をもっており、弊社で一緒にAR開発を行ってくれる開発者やデザイナーの方を大募集しています。
またプロジェクトとしてARアプリを開発することを考えていらっしゃる企業さまもぜひお声がけください。
一緒にユーザーにとって本当に価値あるARアプリを作りましょう！！
ご連絡はTwitterのDM、もしくは会社サイトのコンタクトフォームよりお待ちしています。
この記事が気に入ったらサポートをしてみませんか？