「これ部屋に置いたらどんな感じ？」を秒速で可視化する「ARで見る」を作った - 河本の実験室
またARアプリを作りました：ARで見る
文字で書かれた数量（大きさ、体積など）を一瞬でARで可視化する便利アプリです。先週作ったアプリなので僕のTwitterを見てる人は今更感あるかもしれないですが、作るにあたって考えたこととかを少し整理させてください。
使い方はビデオを見てもらうのが一番早いと思います：
装置とか家電調べてる時「128x145x285(mm)ってどんぐらいだ？」ってよくなるので、ブラウザとかから2クリックでAR表示できるアプリ作った。文字列選択して「共有」＞「ARで見る」を選択するだけ。めっちゃ便利。 https://t.co/E9TJMxitpj pic.twitter.com/ZHA8E3a1Hy
— Ken Kawamoto（ガリのほう） (@kenkawakenkenke) January 13, 2019
ブラウザ（など）で寸法を選択し、「共有」から「ARで見る」を選択すれば、すぐにARで可視化されます。 例えば買う予定の装置の置き場所を考えたりするのにとても便利です。
なんでこんなの作ったの？
友人と装置の話をしていて、寸法を見ながら「こんぐらいかな？」と手を広げているのを見て「昭和だな〜」と思ったのがきっかけでした。世の中にはARを使った巻き尺アプリは死ぬほどあるのにも関わらず僕が使おうしなかったのは、既存アプリのUXが（僕の）日常と乖離しているからだと考えました。寸法を覚えて、アプリを開いて、数字を入力して、床をタップして、ようやくARで表示とか絶対やりたくないじゃないですか。
「ウェブページで寸法を見ている状態から最短でARまで持ってくる」ところを突き詰めたアプリがあれば、ちゃんと日常で使えるものになるんじゃないかと思い、「テキスト選択→共有」で開けるARアプリを開発しました。
何に使うの？
上記例の「大きさ」（高さ・幅・長さ）は家具や装置を部屋に置いた時のイメージを掴むのに使ったり：
洗濯機がドアを通るか試したり：
なにかと便利です。
表記方法はかなり広く対応しています。アプリが理解できないテキストを見つけたら是非河本にご一報を。
また、大きさに限らずあらゆる「これどれぐらいだろう？」を答えることを目指しています。例えば速度：
「ARで見る」1.1をリリースしました。速度の表示にも対応してます。「ナマケモノの秒速3cmって、どれぐらいだ？」が分かります。 pic.twitter.com/dNsbpTjEwo
— Ken Kawamoto（ガリのほう） (@kenkawakenkenke) January 13, 2019
ナマケモノの最高速度が秒速3cmと言われてもイメージしにくいですが、実際にボールが動いているのを見ると素直に「おせぇ！」と実感できます。
「4km/h」「時速5キロ」「12ノット」「マッハ2.4」などの表記に対応しています。
体積：
「ARで見る」1.4.0リリース：体積（リットル/cc等）と円（直径/半径）の入力に対応しました。これで「人間の血液4.5Lってどんぐらい？」とか「2.4mの下水道管って実際どれぐらいの圧迫感だろう？」などと思った時にすぐに可視化できます。 pic.twitter.com/j0x0Sim8Zp
— Ken Kawamoto（ガリのほう） (@kenkawakenkenke) January 20, 2019
ペットボトルでイメージしやすい少量の体積には使う必要性が薄いかもしれないですが、「四千立方メートルのプールの水を無駄にした」みたいなニュースを実感するのには非常に便利だと感じています。
「4.6L」「50cc」「2合」などの体積の表記が理解できます。
さらに、基本的な物理量以外にも拡張できます。例えば「金額」：
「ARで見る」のゴールはあらゆる「これどれぐらいだろう？」に答えることなので、バージョン1.3.2では日本円の可視化に対応しました。「2億円受け取るってどれぐらい大変なんだろう？」とか「5000万円入るボストンバッグないかな」みたいな時に使えます。https://t.co/E9TJMxitpj pic.twitter.com/zF75K4a5jK
— Ken Kawamoto（ガリのほう） (@kenkawakenkenke) January 20, 2019
日本円の表記を入力すれば、 １万円札の束で置いたらどう見えるかすぐに可視化できます。これで部屋に5000兆円を置く遊びとかもできるわけです。現金強奪事件とかの被害額を札束として見てみると「これ持って逃げるの大変だったろうな」といった新しい感想が芽生えます。
こだわったところ
このアプリの肝は
- 他のアプリで寸法を見て『これどんぐらいだろ』と考えてから最短でAR表示すること
- あらゆるアプリから汎用的に使えること
の２つです。そのために（プロダクト）デザイン的にこだわった箇所をあげていきます：
- 「テキストを選択して共有」に特化する。
ブラウザやOSの基本機能として搭載されない限りは、寸法を汎用的にARに持っていくための最短ルートは選択→共有です（多分）。そのため、アプリの機能をすべてこのエントリーポイントに特化させ、他の入力方法は敢えてサポートしないことにしました。
「選択→共有エントリーポイントをメインに持ちつつ、普通にホーム画面からアプリを開いて数字を入力させるパスも用意しときゃいいじゃん」というコメントも分かるんですが、そうすると必ず欲が出てメインのエントリーポイントがおろそかになると思ってます。チームで開発して強いPMがついていればいざしらず、僕一人では弱いのでこういう縛りを設けました。暇になったらそっちも考えるかもしれないですが。ていうかそのパスは他の巻き尺アプリで十分だよね。
- 修正要らず。
『これどんぐらいだろ』からARで開くまでの間に数字を入力させたり微調整が必要だったりしたら最悪のUXです。そのためそもそも修正手段を無くし、実装としてはなるべく沢山の寸法表記のパターンを一発で理解できるように強いテキストパーサーを作りました。このために国内外のECサイトを巡って寸法表記をかき集めて実装しました。
大きさの寸法は、
次元の記法がバラバラだったり：「高さx幅=20x40」 vs「高さ20 幅40」
単位の記法がバラバラだったり：「高さ(mm) x 幅(mm)=20x40」vs「20mmx40mm」
結構ややこしいんです。
- すぐAR
最短でAR表示できるように、シーン内のモデルの挙動にこだわりました。
一般的なARアプリはだいたい「起動してから床を認識するのを待って、床をタップしてようやくモデルが出現」みたいな流れに則りますが、これではあまりに遅すぎると考えました。そこで、アプリが開いてから環境を認識するのを待たずにすぐモデルをカメラ前に浮かばせて、床が認識できた時点で「ドサッ」と落ちてくるような挙動にしました。これにより、寸法を「共有」してから1~2秒程度でモデルが見れます。
次のステップ
- テキストを選択→共有の基本UXを崩さずにもっと色んな日常的なニーズに応えられる方法を考えています。例えば大きさのmin-maxが表記されていた場合だけはスライダーを出してサイズ調整できるようにするとか。ページの他の情報からテキスチャを貼るとか。履歴を残して複数オブジェクトを置いていけるようにするとか。
- とは言いつつ、情報の修正が必要な場合があることもわかってるので（特に高さ/幅/長さの入れ替え）、このアプリに馴染む修正方法を考えてます。
- あらゆる「これどんぐらいだろう？」に応えられるように、表現出来る量を増やしていきたいです。例えば「５万人の群衆」に囲まれるのってどんな感じだろうとか。400luxってどれぐらいの光だっけ、とか。知らない言葉を辞書で引くのと同じように、イメージできない数量を「ARで見る」のが当たり前になるように普及させてみたいです。
さいごに
お昼食べながらふと考えたアプリが思いがけなくバズって驚きました。想像ですが「家具の寸法を数字で入力したらARで表示できるよ」というアプリだったらここまで話題にならなかったと思います。このアプリの新規性と魅力はARではなく、「選択→共有するだけで部屋の中で見れる」という体験です。実際に使う状況を思い浮かべて、間のあらゆる障壁を取り除いたUXを作るの、めっちゃ大事。
付録：対応している表記の例
大きさ
- 寸法(幅W×高さH×奥行D)(mm) 95×150×235
- 幅640×奥行600×高さ1039mm
- 70mm×124mm×364mm （←軸の指定のない場合 幅x高さx奥行きとして解釈）
- 70x124x364（←単位の指定のない場合mmとして解釈）
- 高さ123m
- 半径42.5mm（←円として表示）
- 直径10cm
容積
- 1m^3
- 4000立方メートル
- 123L
- 1カップ
速度
- 時速72キロメートル
- 72km/h
- 5ノット
- マッハ3
金額
- ¥4800万
- 3000兆円
- 24 million dollars
自然現象
- 風速12m