XR × UX/UI｜アップフロンティア株式会社

ARデザインのヒント #6 ｜ 2025年のお正月ARは初日の出！

新年あけましておめでとうございます！皆さまにとって素晴らしい一年となることを心よりお祈り申し上げます。さて、毎年恒例のお正月ARコンテンツをお届けします。これまで、2024年には物探しゲームAR、2023年にはおみくじARなど、年始を盛り上げるためのAR体験を公開してきました。今年は『初日の出オルゴールAR』という、温かみのあるユニークな体験をご用意しました。『初日の出オルゴールAR』のご紹介このARは、木工おもちゃのような可愛らしいデザインのオルゴールが目の前

ARデザインのヒント #5 ｜ AdobeCCだけで展示ブースの3D&ARをつくる

展示会に出展するとき、ポスターや机、ディスプレイの大きさや配置など、ブース内のレイアウトをどうするか悩みますよね。図面からだとどうしてもサイズ感がわからなくて、実際に展示してみたら「小さすぎた！」「狭かった！」みたいなこともしばしば… 展示が始まる前に立体的に見られたらなぁと思っていたところ、どうやらAdobeCCに入っているアプリだけで展示ブースが再現できそうだったので、やってみました！完成イメージ今回は平面の図面から立体的な3Dモデルを作り、それをARで表示できるよ

ARデザインのヒント #4 ｜試行錯誤！カップ麺のフタにARを出すには画像マーカーをどこに置こう？-Adobe Aeroでカップめんタイマーを作ってみた-

UIデザイナーがARデザインについて考えていくシリーズの第4弾です。 ARをどこに出すのか、またはARの起点となるマーカーをどこに置くのかという話は、体験の良し悪しに直接繋がるため、デザインをする上で重要な点になります。今回はコンテンツ作りを通して、画像マーカーの置き場所の試行錯誤の様子を紹介します。「フタの上でキャラクターを踊らせたい」どんなARを作る？今回作るARは「カップめんタイマー」です。カップ麺ができる3分の間、フタの上でキャラクターが踊っているという

ARを作る前にデザイナーが知っておきたい用語その３

ARをデザインするときに知っておくと便利な言葉の紹介、第３弾です。初回と前回はこちら↓ ジェスチャ（Gestures）「ジェスチャ」は、デバイスが手の位置や動き、ポーズを認識し、その状態によってアプリをコントロールすることを指します。主に手を使うため「ハンドジェスチャ」と言われることもあります。ジェスチャが使えるかどうかはデバイスの性能次第です。また、使える手の動きやポーズも異なります。オリジナルのポーズを設定することもできれば、予め設定されたポーズしか使えないものもあ

ARを作る前にデザイナーが知っておきたい用語その２

ARをデザインするときに知っておくと便利な言葉の紹介、第２弾です。前回はこちら↓ パススルー（Pass-through）「パススルー」は、デバイスについているカメラで撮影された映像にCGを重ね合わせることを指します。「ビデオシースルー」とも呼ばれ、Apple Vision ProやMeta Quest、PICOといったVRも体験できるゴーグル型・ヘッドセット型のデバイスが当てはまります。 UIデザイナーとしてパススルーのメリットとして感じるところは、シースルーに比べてU

ARデザインのヒント #3 ｜ Adobe Aeroで作った「物探しARゲーム」【イマーシブと制作ソフトの話】

あけましておめでとうございます今年もよろしくお願いいたします！ 2年前から始めた「お正月に自作ARコンテンツを発表する」という企画。今年も作りましたので、紹介させてください。このお正月ARというのは、デザイナーの私が勉強を兼ねて取り組み始めたもので、企画からビジュアル作り、3DモデルやARコンテンツの実装まで、AR制作の工程を一人で完結することを目指して作っています。一昨年が3Dモデルを踊らせ、昨年はおみくじをひけるようにし、徐々にできることを増やしていっています

ARを作る前にデザイナーが知っておきたい用語その１

最近スマートフォンだけでなく、Apple Vision ProやMeta Quest、XREALなどさまざまなグラス&ゴーグル型のデバイスが出てきたことにより、ARがより身近なものになってきたと感じます。普段モバイルアプリのUIデザインをしている方も、ARの話は耳に入ってくるのではないでしょうか？実際デザインをしてみると、ARならではの横文字がたくさんでてきて面食らうところもあります。ということで、今回はARをデザインするときに知っておくと便利な言葉を紹介します。ト

Apple Vision Proのアプリ開発時に考えること【デザイン的視点からの考察】

2024年2月2日に、Apple Vision Proが発売されます！アップフロンティアでは事前にApple主催の開発者向けラボに参加し、7名が6-7時間ほど体験しました。いよいよ世の中に出るということで、新しい扉が開く期待感でワクワクしています！ということで、今回はVision Proの基本的な話やアプリを作る時に開発者が意識しておきたいところを、デザイナー視点からお伝えしたいと思います。＊この記事は社内向け勉強会のために制作した資料を元に書いています。ただ、アプ

ARデザインのヒント #2 ｜街で見かける文字の大きさを調べてみた

リアルな空間にARデザインのヒントがたくさん！今回は街でよく目にする文字を測って、 ARで使える”目的や距離に適した文字の大きさ”を探っていきます。なぜ”適した文字の大きさ”を知る必要がある？ARはモバイルアプリやWebとは違い、UIを表示する位置や見る人の位置が固定されていません。ARでは、目の前数十センチのところで見せることもあれば、数メートル離れたところから見せることもあるので、それぞれの距離に相応しい文字の大きさがどのくらいなのか、デザイナーは知っておく必要があ

ARデザインのヒント #1 ｜ Illustratorで空間に浮かぶUIのイメージを作る

UIデザイナーとしてARアプリのUIを作るときは、UIがどのように見えるか確かめながら作りたいので、実際にARを使う場所にUIを当てはめたイメージを作るようにしています。また、作ったイメージを見ると、どんなARになるか想像がしやすくなり、クライアントやプログラマなど開発に関わる人の助けにもなります。このようなイメージはIllustratorやPhotoshop、XDなどいろいろなデザインソフトで作ることができます。今回はIllustratorの中でイメージを作るときに

【ランダム・効果音】おみくじARを作ったときに工夫したこと【ARデザインとAeroのヒント② 】

こんにちは。 1月も最後の日になってしまいましたね。早いものです。今回は、前回の記事で紹介したお正月おみくじARを作った時のAdobe Aeroの技術的なノウハウをまとめていきます。おみくじARは、Adobeが出しているARを作るアプリ「Aero」を使って作りました。Aeroはノーコードで作れるのと、他のAdobe製品との連携がスムーズなので、UIデザイナーの私にも使いやすいアプリになっています。ただ、まだデスクトップアプリがベータ版だったり、機能が十分ではない発展

【お正月企画】おみくじARを作ってみた【ARデザインとAeroのヒント①】

あけましておめでとうございます！今年もARアプリ作りをたくさんやっていき、開発時のノウハウやヒントなどを発信できればと思っています。今年もどうぞよろしくお願いいたします！お正月恒例！今年のARアプリは「お正月ガチャ」さて、昨年からAdobe Aeroを使ってお正月用のARコンテンツを作りはじめました。（去年の記事です↓）前回はただ眺めるだけのものだったのですが、今年はおみくじ要素を加え、遊べるコンテンツにしてみました。それがこちらです！！↓ iPhoneであ

【AeroでARのUIデザイン】背景が透明なGIFの作り方とAdobe Aeroへの組み込み方

Adobe Aeroを使ってUIデザインのモックアップを作るとき、動画を載せて見せたくなることありますよね。ただ、Aeroには動画ファイルを入れることができないため（2022年9月時点）、代わりにGIFを使って表現してみました。今回はGIFの作り方、Aeroへの入れ方、GIFで確認できるデザインケースを紹介します。使用したソフトとバージョン今回は以下のソフトとバージョンを使用しています。 Adobe Aero（モバイル版）：2.16.10 Adobe Aero（デスク

Unityで高解像度の画像を書き出そう

最近XR系の展示会に参加する機会が増え、作ってきたARアプリを大きなポスターにして展示することが増えました。そんなときに出てきたのが「スマートフォンのスクリーンショットだと解像度が印刷に耐えられない！」という問題。 A4サイズ（210mm×297mm）のフライヤー用の画像であればまだ使えるのですが、さすがにA1サイズ（594mm×841mm）のような大きなポスターになると解像度が足りません。そんな中、試してみたのが「UnityでARオブジェクトを書き出し、風景写真に合成

XR × UX/UI

フォローしませんか？

記事一覧