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

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

UIデザイナーがARデザインについて考えていくシリーズの第５弾です。 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オブジェクトを書き出し、風景写真に合成

ロゴマークをBlenderを使って3Dモデルにする2つの方法【ExtrudeとSolidifyを比べる】

今回はロゴマークのような2DのデータをUnityやAeroに使うことができる3Dデータにする方法を紹介します。＜手順＞・Illustratorを使い、ロゴマークのデータをSVGで用意する・Blenderで3Dモデルにする・Blenderで色を付ける・UnityやAero、Dimensionに入れてみる使うソフトとバージョン Adobe Illustrator : CC2022 Blender : 2.93.5 Adobe Aero Beta（デスクトップ版）

【2022年もXR！】UIデザイナーがお正月の挨拶をARにしてみた【Adobe Aero】

あけましておめでとうございます今年もnoteでARやVRに関連するUX/UIデザイン、Unity、Adobeの使い方などを中心に投稿していきたいと思いますので、よろしくお願いします！さて、年始最初の記事ですが、お正月の挨拶画像に入れたARを紹介します。今回取り入れた作業手順の例↓ ・Illustratorのパスデータ→Blenderで3DモデルにしAeroへ・Adobe Dimensionを使って文字を3DモデルにしAeroへ・Blenderで作った3Dモデ

XR × UX/UI

フォローしませんか？

記事一覧

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

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

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