（※本記事はアップフロンティア株式会社のnoteを、同社から許可を得て編集・転載したものです）
AR体験をノーコードで作れることで話題となったAdobe Aero。他のAdobe製品との連携もスムーズで、UIデザイナーである筆者にとっては非常に使いやすいアプリです。その一方で「デスクトップアプリがまだベータ版」「複雑なARコンテンツを作ろうとすると少し工夫が必要」などの制約も存在します。
本記事では、Adobe Aeroを使って実際にARコンテンツを作った際のTipsや制作中に気づいたデザインのヒント、使用したツールAdobe Aeroのノウハウを紹介します。
※なお、開発に使用したツールは、AR関連はAeroのデスクトップ版(0.18.4)、2D画像素材はIllustrator2023(27.2)、3DモデルはBlender(3.3.1)、テクスチャ周りはAdobe Dimensionです。
目次
1. 「お正月おみくじAR」を作ってみた
2. ARのデザインとAeroのヒント
2-1. ARを見る「画角」を意識したレイアウトに
2-2. ボタンは押しやすい角度を意識して
2-3. 無理にオブジェクトの向きをカメラに合わせない
3. Aeroでの工夫
3-1. ランダム性
3-2. ネタバレしないための工夫①: 共有画面のサムネイル
3-3. ネタバレしないための工夫②: ARオブジェクトの設置前にも注意
3-4. ボタンタップと効果音のズレを解消する
4. おわりに
1. 「お正月おみくじAR」を作ってみた
アップフロンティアでは、昨年もAdobe Aeroを使ってお正月用のARコンテンツを作りました。こちらはただ「眺める」だけのコンテンツでしたが、今年はインタラクティブな要素を加え、「遊べる」コンテンツにしてみました。
iPhoneであれば、専用アプリを入れていなくてもARが見られます。以下の画像のQRコードを読み込むか、こちらのリンクを開けばARを体験できます。
（AR体験ができるQRコード）
2. ARのデザインとAeroのヒント
2-1. ARを見る「画角」を意識したレイアウトに
ARの絵作りでは、ARコンテンツを見る「画角」を常に意識する必要があります。これを怠ると伝えるべき情報が抜けてしまい、よく分からない体験になってしまいます。
今回の「お正月おみくじAR」では、スマートフォンを片手に持って体験することを想定していたので、フレームは縦長の長方形。この状態でARオブジェクトを横並びに配置すると、画面の中に入らず、気づいてもらえないケースが出てきてしまいます。例えば、以下の画像ではアプリのロゴや説明文が全く入っていません。
（ARオブジェクトを横並びにした例。スマホを動かさないと横に配置されたロゴや説明文が見えない状態に）
そこで、アプリのロゴを富士山の上に、説明文を富士山の手前に配置。伝えるべき情報がきちんと目に入るようになりました。
（ARオブジェクトを、奥行きや縦の空間を使って配置した例。スマホを動かさなくても必要な情報がまとまっている）
ARは現実空間と同じく“奥行き”があるので、これをうまく利用し、画面内に必要な要素が収まるように配置していきましょう。
2-2. ボタンは押しやすい角度を意識して
机のような平面に表示するタイプのAR体験では、多くのユーザーがスマートフォンを斜めに構えることになります。その姿勢を意識して、タップ操作がしやすいUIにしてみましょう。今回の例では、スタートボタンがだいぶ下の高さにあるので、やや角度をつけています。
（正面から見た様子。左の「角度なし」では、ボタンの形がつぶれるほか、テキストも読みづらくなる。右の「角度あり」はスタートボタンを約15度ほど傾けて配置。こうするとボタンが正面を向き、押しやすくなる）
さらにボタンの下にあるテキストも斜めにしましょう。これで、「角度なし」に比べてストレスなく読むことができるようになっています。特に読ませたいテキスト、アプリ内で重要なUIは、ARを見る姿勢や角度に合わせた表示にすることが大切です。
（横から見た様子。「スタート」とその下の説明文に角度をつけている）
2-3. 無理にオブジェクトの向きをカメラに合わせない
Aeroには「ARオブジェクトの正面を、常にカメラの方向に向ける」設定があります。これを大吉が当たった時のコメントに使ったのですが、スマートフォンを上下に移動させると不自然な表示になってしまいます。
（スマートフォンを上に移動させ、ほぼ真下のARオブジェクトを見た状態。設定のせいで吹き出しが上を向いてしまっています）
解決方法は「照準」の設定画面内にある「看板のみ」にチェックを入れることです。この設定にチェックを入れると、左右の向きだけをカメラに合わせてくれます。
（左右のみにしたい場合は「看板のみ」にチェックを入れる）
これでスマートフォンが上にあるときにも、コメントが上を向かなくなりました。
（上下の追従をしなくなりました。上述の通り、左右の追従は行います）
3. Aeroでの工夫
続いてはAdobe Aero上での工夫をご紹介します。
3-1. ランダム性
まず、おみくじには欠かせない「ランダム性」です。おみくじで事前に大吉が出ると分かっていたら興ざめですし、「この場所をタップしたら大吉が出る」という攻略じみたこともできないようにしたい、と考えました。
コードが使える場合は素直に乱数を設定すれば良いのですが、Aeroの場合はそれができません。というわけで、おみくじをぐるぐる回すことにしました。おみくじの入ったカプセルの個数はバレてしまいますが、位置を固定せず動かし続けることで、どこに何があるか分かりづらくなります。この方法であればAero単独でも実装できます。
今回はAeroの「動作」で物を回転させる「スピン」を利用しました。おみくじの入ったカプセルを8つ、円を描くように配置し、およそ6秒で一周するように設定します。
カプセルが動いているので、想定通り「今、何がどこに入っているのか」は分かりづらくなりました。カプセルをタップするスピードとしてもちょうど良い感じですが、今度は「カプセルの位置を目で追えてしまう」という問題が。「回転が始まるときに正面にある玉には◯◯が入っている」といった情報が分かってしまうのは問題です。
（6秒で一周させたときの動き。適度なスピードだが、このままだとカプセルの位置が目で追えてしまう）
そこで、次に取り入れたのは「最初は高速回転」＆「スタート画面の追加」です。AR体験が始まってから数秒間はカプセルを高速回転させ、位置を目で追いづらくさせます。さらにスタート画面を挟むことで、カプセルの最初の位置や高速回転している時間もわかりづらくし、ランダム性を強めています。
（高速回転を追加。これでカプセルの内容が特定しづらくなりました）
これで短期的なコンテンツとしては十分なランダム性になったかと思います。
3-2. ネタバレしないための工夫①: 共有画面のサムネイル
「お正月おみくじAR」のようなケースでは、「サプライズ性」も重要です。このAR体験ではそれぞれのおみくじに紐づいたコメントが表示されますが、Aeroだと「アプリを起動する前に中身が見えてしまう」可能性があります。
下の画像のように、AR体験を共有する際に設定するサムネイルは、デフォルトの状態だと制作中の画面をそのままスクショしたものになります。このままではコメントがすべて見えてしまう状態に。なんとかして隠しておきたいですね。
（Aeroでアプリの共有リンクやQRコードを発行した際の画面。サムネイルですべての要素が見えてしまっている）
ではどうするか。Aeroの方で、各オブジェクトの右端にある、目の形をしたボタンを「OFF」にします。これはシーン上での表示/非表示を切り替えるためのボタンですが、これを非表示に設定すると、サムネイルでも非表示になります。
（この目の形をしたボタンをオフに設定。シーンで非表示にすると……）
（無事、アプリ共有画面のサムネイルでも非表示に）
また、自分で別途サムネイル画像を設定することもできます。この場合の設定方法はこちらの記事で紹介しています。
3-3. ネタバレしないための工夫②: ARオブジェクトの設置前にも注意
現実空間をスキャンしてARオブジェクトを配置する時、ARオブジェクトの「中身」が見えた状態になってしまうことがあります。これは①の例とは違い、プレビューでは非表示になっていても起きてしまいます。
例えばおみくじで大吉が当たった時に出てくるコメント。Aero側で「動作」の非表示機能を使い、AR体験の開始直後には非表示になる設定をしています。
この設定のままプレビューを見てみると、吹き出しは表示されず、カプセルがタップされたときに表示されるようになっています。
（プレビュー画面。きちんと「カプセルをタップ」→「カプセルが開く」→「コメントが出る」順番になっているが……）
では、ARで見てみると……「スキャンして配置」のときにコメントが見えてしまっています。
（「スキャンして配置」する際に、コメントが表示されてしまっている）
見えないようにするには、ここでもシーンの非表示設定を使います。先ほどの目の形のボタンを「OFF」にすれば、「スキャンして配置」のときも隠れた状態になります。「動作」の非表示だけで安心しないで、シーンの非表示も併せて設定しましょう。
3-4. ボタンタップと効果音のズレを解消する
ARオブジェクトがタップされた時、効果音を鳴らすことで、ユーザーにフィードバックを与えることができます。これはかなりポジティブな効果があるので取り入れたいところですが、付け方を間違えると違和感が生じるので注意が必要です。
今回起きた現象はボタンの動きと効果音のズレ。左の「A」のボタンでは「効果音が鳴った後にボタンが動く」状態で、テンポが悪いです。一方、右の「B」のボタンは「タップと同時にボタンが動いて効果音が鳴る」ようにしてあり、「A」よりだいぶスムーズです。
「A」の設定は「一つの『動作』に、ボタンの動きと音の再生を同居させる」設定にしています。この状態では「効果音が再生し終わった後に、ボタンの動きが始まる」ような流れになってしまいます。
では「B」はどのような設定かというと「『動作』を2つ用意し、ボタンの動きと音の再生を分ける」ようにしてあります。こうすることで、動きと音の再生を同じタイミングで開始させ、音の長さに関わらずボタンの動きが止まらないようにしています。
できれば『動作』はひとつにまとめたいところですが、今回のケースのように、場合によっては2つ以上に分けて設定した方がよい体験になります。
4. おわりに
本記事ではAdobe Aeroを使った「お正月おみくじAR」の開発、およびそこから得られた知見をご紹介しました。このあたりは開発ツールや使うプラットフォームによって仕組みが異なるため、これさえ覚えれば他のところでも完璧！ ……というわけではありませんが、のちのち別の所でも活きてくる可能性はあります。
今後もAeroを使ったARコンテンツ開発や、UIデザイナー向けのUnityの使い方、UX設計で気づいたことなど、XR関連の記事を掲載していく予定ですので、ぜひよろしくお願いします。
【提供】アップフロンティア株式会社
