2時間で始める、 ARプロトタイピング実践/ Figma×Torch

おはようございます、こんにちは、あるいはこんばんはです。
MESONでARサービスのディレクションやプランニング、はたまたデザインをおこなっている本間あるいはマーと申します。

サービスを作る上で、プロトタイプ制作はユーザーにとって価値あるかを最速でテストできる点で有用です。

ARサービスもまたそうです。実際に目の前に出して体験しないと価値が尚更によくわからない。
なぜならユーザーが動き、様々な視点に立ち、さらには空間上でインタラクションがあり、より複雑で想像がしづらいためです。
だからこそプロトタイピングをして多くの人に体験してもらうことに価値があると考えています。

この記事ではノンコーディングARサービスプロトタイピングの、
「アイデアの具現化から、形にするまでの実践方法」を紹介します。

(なお画像が多数挿入されているため、読み込みに時間がかかる恐れがあります)


1. そもそもARプロトタイピングでできるものって?

具体的にプロトタイプとして再現できるのは、以下のようなものです。
PCでプロトタイピングしたものをスマホ上でミラーリングして動かしています。

1作目-AR時代のWikipedia-
(今回はこちらの制作を順に追う記事になります!)


2作目-Augmented(拡張) Spotify-


2. 使用ツールとデバイス

使用ツールは
デザインツール:Figma
ARプロトタイピングツール:TorchAR
PC
Torchを動かせるiOS端末(iPhoneX以降 or iPad Pro)(androidはTorch未対応のため)
です。

Figmaの使い方は、デザインツールのSketch、XDを触ったことがある方なら直感的の行えると思います、今回Figmaの使い方に関しては省略させてください。
興味のある方は、クックパッドのデザイナーのふじけんさんが書かれている記事を読まれると参考になるかと!

TorchARは、ARのプロトタイピングを行えるツールで、空間上に自由度高くオブジェクトを配置することができます。今回はこちらの使用法をより説明できればと思います。
(この記事ではFigma側のUIデザインをはずした、Torchのみでのプロトタイプを制作も可能です)


3. 制作期間と制作の心得

あくまでプロトタイピングです。ラピッドプロトタイピングです。
なのではじめは2時間-終日で終わるように制作をしていきます。できます。改善は自分で動かしてからブラッシュアップポイントを見つけたり、知り合いに体験してもらうことで後々に改善しましょう。MVP( Minimum Viable Product)大切です。

むしろクオリティを気にし、労力をかけたが、忙しくなってしまい制作が永遠に中断されるというのがとてももったいないです。アイデアを形にしきるぞという熱量があるうちにサクサクと作っていきましょう。


4. アイデアをイメージに落としこもう

MESONでは、アイデアシートを用いてデザインを行っています。
こちらのシートを使ってどんなアイデアがあるとよいかをブレストします。

上記シートにアイデアを書き込み具体化させます。
(MESON謹製のこちらのアイデアシート、ダウンロード可能です)

今回は
「見るだけで、ものの使い方やノウハウを動画や3Dモデルを通して学ぶことができるプラットフォームサービス」
をプロトタイプのアイデアとしました。

このように「アイデアの特徴」「どんな人が、どんな時に、もたらす価値か」「アイデアのビジュアル」を書き込みプロトタイプしたいアイデアを形にします。


5. 全体のUXとUIを考える

もし、iPhoneやiPadで行う体験のフローを考えていきます。

非AR機能時の操作
<起動>アプリを起動する
<Wikiの選択>オフィス内で自分の知りたいSpatial Wikiを閲覧し、選択

AR機能時の操作
<ARカメラ起動>平面を検知と、対象物体の検知を行う
<Wikiを体験>実際にかざしたものにまつわるノウハウが教えてもらえる

この4ステップをミニマムの体験フローとしました。


6. 非AR時のUIを考える

非AR時の端末操作は

<起動>アプリを起動する
<Wikiの選択>オフィス内で自分の知りたいSpatial Wikiを閲覧し、選択

なのでFigmaを用いて2画面を実際にデザインしていきます。

デザインができたら、次に以下のように画面遷移をプロトタイプします。(こちらも前述の参考記事をお読みください)

そして、カードの中から「ジントニックを選ぶ」を押すと、Torchが起動するように整えます。(これは後ほど説明しますね!)


7. AR機能時のUIを考える

以下のステップで、AR機能時のUIをつくっていきます。

7-0 Torchとはなんぞや
7-1 AR画面遷移後のUIパーツを作成し、Torchアプリが入ってる端末にUIパーツを保存
7-2 Torch上でプロジェクトを立ち上げ、必要なARシーンを作成
7-3 Torch上でUIパーツを取り込み、シーンに配置する
7-4 Torch上でシーン遷移やオブジェクトごとのができるか試して確認

7-0 Torchとはなんぞや

Torchとは、

「シーンを作成し」

「UIパーツや3Dオブジェクトを用意し」

「それぞれのオブジェクトを現実空間に配置し」

「そのオブジェクト間のインタラクションと、シーン遷移の法則を決め」

「AR体験をノンコーディングで疑似的につくる」

なツールです。

例えばこんなことができます。

上記が初見者向けマニュアルです。実際は直感的なのでマニュアルを読まずともできると思います!!


7-1 AR画面遷移後のUIパーツを作成し、Torchアプリが入ってる端末にUIパーツを保存

AR機能時の操作
<ARカメラ起動>平面を検知と、対象物体の検知を行う
<Wikiを体験>実際にかざしたものにまつわるノウハウが教えてもらえる

という体験フローから必要なパーツを洗い出し、作成していきます。
今回必要としたのは以下の3つとなります。

①Spatial Wikiはこちらから見れますと提示するグラフィック
②Spatial Wikiとなるノウハウ動画
③Spatial のタイトルを示すグラフィック

このようにパーツを洗い出したら自前のツール(figma、sketch, photoshop, iPAdお絵かきツール等々)で作成し、Torchアプリを入れている端末に保存します。


7-2 Torch上でプロジェクトを立ち上げ、必要なARシーンを作成
Torchを端末から立ち上げてプロジェクトを作成します。

体験フローから、シーンを作っていきます

AR機能時の操作
<ARカメラ起動>平面を検知と、対象物体の検知を行う
<Wikiを体験>実際にかざしたものにまつわるノウハウが教えてもらえる

シーン1:空間には何もない
シーン2:ターゲットを検知し「Spatial Wikiはこちら」と案内表示される
シーン3:案内表示に近づくと、「Spatial Wiki」が閲覧できる

という3つのシーンにしました。

プロジェクトを立ち上げたら以下のように、「Add Scene」を選択し、シーンを作成しましょう!


7-3 Torch上でUIパーツを取り込み、シーンに配置する

まずは必要なUIパーツをカメラロールから取り込んでいきます。

(上記のようにカメラロールだけではなく、Dropboxのリンク、3Dモデル共有サービスからもUIやオブジェクトを取得することができます)

続いて設定したシーンごとに、オブジェクトを配置していきます。

シーン1:空間には何もない
シーン2:ターゲットを検知し「Spatial Wikiはこちら」と案内表示される
シーン3:案内表示に近づくと、「Spatial Wiki」が閲覧できる

シーン2には「Spatial Wikiはこちら」という案内表示UIパーツを配置する


シーン3には「Spatial Wiki」動画とそのタイトルを配置します


7-4 Torch上でシーン遷移やオブジェクトごとのができるか試して確認

最後にシーンとシーンを繋ぐインタラクションをつくります。
Torchは、オブジェクトをタップする・焦点を合わせる・近づくといった行為をインプットに、オブジェクトを変化させたり、シーンを変えることができます。また画像を認識したトリガーも設置することができます。(この詳細の機能については後述のTorch公式ブログをお読みください)

では実際にどんなインタラクションが必要かをシーンの要素を分解して、考えていきます。

シーン1:空間には何もない
シーン2:ターゲットを検知し「Spatial Wikiはこちら」と案内表示される
シーン3:案内表示に近づくと、「Spatial Wiki」が閲覧できる

太字部分が具体的なインタラクションとなります。

シーン1→シーン2の遷移は、特定の物体を検知したら「Spatial Wiki」が見れるよう、以下のように設定します。

(イメージを検知すると画面が遷移する)

(どんな画像を読み取るとシーンが遷移するか、トリガーとなる画像を埋め込む)


シーン2→シーン3の遷移は、「Spatial Wikiはこちら」の案内に近づくとシーンが遷移するように設定します。

(近づくと...)

(シーンが変わるように設定する)

以上でTorch側のプロトタイプ作成は終了になります!!

参考URL
Torchでのインタラクション解説


8. FigmaとTorchを連携させ、プロトタイプ化を行う

ここまできたら、あとはFigmaとTorchを連携させて実行するのみです。
以下がステップになります!

8-1 Torchで共有用リンクを取得する
8-2 Figmaのプロトタイプに上記URLを貼り、Torch遷移させる
8-3 Figma MirrorでiPhone, iPad上でプロトタイプを実行!

8-1 Torchで共有用リンクを取得する

TorchのプロジェクトはURLで共有可能なので、プロジェクト画面から「Viewer Link」を取得します。


8-2 Figmaのプロトタイプに上記URLを貼り、Torch遷移させる

「ジントニック作り方」をタップすると、Torchのプロジェクトに遷移するように、先程取得したURLを貼り付けます。


8-3 Figma MirrorでiPhone, iPad上でプロトタイプを実行!

FigmaにはFigma Mirrorというアプリがあり、こちらをインストールすることで、実機でミラーリングをすることができます。

そして実際にFigmaを実行すると以下のようなプロトタイプ(再掲)
のようになります。

※参考URL

- Figma Mirror App

- TorchとFigmaの連携方法に関する記事

お疲れ様でした!
以上でプロトタイピングのプロセスは終わりとなります、記事となるとかなり工数があるように見えますが、実際には2時間程度で終了できるのでぜひ皆さんも挑戦してみてください!!


おわりに

I guess you guys aren't ready for that yet. But your kids are gonna love it.(まだ君たちには早すぎたかな。でも、君たちの子どもは気に入るよ)
Marty McFly -Back To The Future-

好きな映画で、未来から来た主人公(マーティ・マクフライ青年)がこんなセリフを言います。
未来を担う一人として、より人がテクノロジーを通し拡張されるSpatialな体験をつくっていければと思っています。
そして、ARプロトタイピングがみなさんのアイデアを具現化する方法として、お助けできることができたら嬉しいです。

MESONは「Spatial Computing時代のユースケースとUXをつくる」をテーマに掲げており、様々なアセットを持つパートナー企業と組んでARサービスを日々考えつくっています。
そうした未来の標準を作る仕事に共感して一緒に働いてくれるメンバー、プロジェクトをご一緒できる会社を募集中なので、ぜひ会社サイトかTwitterからご連絡ください。

なお、この記事に関する不明点、質問はツイッターでご連絡お待ちしています。ご一読ありがとうございました!!

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

自分の言葉や考えを、誰かに深く伝えることができたなら、それはすごくしあわせで光栄なことです。

シェアもしてくれるなんておもってないんだからねっ
36

本間悠暉 / MESON

ARで体験を拡張する / デザイン、プランニング、ARのこと発信します / MESON / AR / UX+UI / Figma / Torch / Unity / movie / book / photo / UTeconomics / Azabu / Yuki Homma

MESON XR MAGAZINE

株式会社MESONのメンバーが交代しながら、毎週自分たちが仕事をしていく中で集まったVR/AR界隈に関する知見をブログとして公開していきます。
2つ のマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。