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

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モデ

Adobe AeroでARを作るときに知っておきたい4つの小技

先日デスクトップ版とモバイル版のAdobe Aeroを組み合わせながら、ARコンテンツを作ったのですが、「これをするにはどうすればいいんだっけ？」といったところがあったので、小技として紹介します。紹介する小技はこちら↓ レイヤーを含む画像で奥行き感UP ボタンにリアクション用のモーションをつける表示のタイミングをバラバラにする Aが動いた後にBを動かす作ってみたARとAeroのバージョン作ったARは「ロゴをタップすると、ステッカーがバラバラに出てくる」とい

Adobe AeroでARを共有するときに気をつけたい「６つのポイント」

今回は、Adobe Aeroで作ったARコンテンツを共有するときに見落としがちな気をつけたいポイントを6つ紹介します。＊この記事の内容はモバイル版バージョン2.10.70を元にしています Adobe Aeroとは？ARコンテンツが作れるスマートフォンアプリです。誰でも無料で使え、スマートフォンだけで制作から現実空間への投影まで可能です。デスクトップ版（今はまだベータ版のみ）や他のソフトを組み合わせれば、より自由度の高いARコンテンツのシミュレーションができます。

スマートフォン向けARコンテンツをデザインするときに気をつけたいこと

ここのところデザイナー向けのUnityの使い方を書いていましたが、最近スマートフォン用のARコンテンツを作る時に気をつけたいと感じたことがあったので、備忘を兼ねて記事にしたいと思います。 ARを見る方法は2つあるけど... ARを見るには、HoloLensやNrealLightのようなARグラスを使う方法とスマートフォンを使う方法があります。最近はスマートフォンのセンサーが高性能になったこともあり、スマートフォンでもARグラス並のARを表示させることができるようになっ

デザイナーがUnityでUIにアニメーションをつける方法

こんにちは、Unity初心者のUIデザイナーです。 ARやVRのアプリ開発に関わることがきっかけで、Unityを学んでいる最中なのですが、どうやら「UnityでUIにアニメーションをつけることができる」ようです。ということで、今回はデザイナーがプログラマーにイメージを伝えるのに有効なUnityでのアニメーションのつけ方を書いていきます。「デザイナーがアニメーションをつけるメリット」とは？実際のアプリ制作に取り入れた中で感じたメリットは「デザイナーとプログラマーの間で発生

【XDからUnityへ】UIを変換するプラグインを使ってみた【AR・VR/UIデザイナー向け】

前回、Adobe XDで作ったUIデザインをUnityで表示してみましたが、その工程を自動的にやってくれるプラグイン（XuidUnity）があったので、使ってみました！＊プラグインを使わずにやってみたいという方はこちら↓ 今回の方法もUnity初心者の私でもトラブルなくセッティングできたので、Unityに慣れていないデザイナーの方もぜひお試しください〜今回使うツールやPC環境 PC：iMac（macOS Catalina）ソフト：Adobe XD、Unity202

XR × UX/UI

記事一覧