LIFULL Creators Blog

「株式会社LIFULL(ライフル)」の社員によるブログです。

「LIFULL HOME'S App Night #AR編 UXを突き詰めた15日間」を開催しました!

こんにちは!LIFULL HOME'S iOSアプリ開発担当の高橋です。今回のiOSの勉強会はARKitにテーマを絞り、iOS版LIFULL HOME'SアプリのAR機能「ARお部屋計測」の開発当時の話を、弊社のディレクター、デザイナー、エンジニアの各目線からご紹介させていただきました。

ARお部屋計測とは?

最初に「ARお部屋計測」についてご紹介します。

この機能は「見学メモ」タブの「部屋を計測」ボタンからご利用いただけます。 ホームズくんと一緒に、お部屋の角を画面に写しながらタップしていくだけで、簡単に間取りを計測することができます。

f:id:LIFULL-takahasy:20180312164950p:plain:w250 f:id:LIFULL-takahasy:20180312170321p:plain:w250

※ 使用するにはiPhone 5s以降の機種で、iOS11がインストールされている必要があります。

まずは使って体験してみてください!

発表

事業会社のARKit UX設計かいつまみ話

島田真寿美(ディレクター)

www.slideshare.net

ARKitを導入した経緯と、仕様を考えるに当たって気をつけたポイントについてのご紹介でした。

普段の開発では、お部屋の探しやすさ・使いやすさといった「機能的価値」の向上を目的としていますが、今回の機能はアプリを使ってもらうことを目的として、「楽しい体験」の提供に重点を置きました。

ARはまだ馴染みの無いユーザが多いため、途中で挫折しないよう適切なガイドをする必要があります。今回はホームズくんとコミュニケーションしながら計測する設計にすることでユーザの利用ハードルを下げる工夫を行っています。

ARの時代がきた!そのときデザイナーは何をしたか

小林武蔵・小泉貴奈未(デザイナー)

www.slideshare.net

デザイナーは3Dモデリングについては(ほぼ)未経験の中、「ホームズくんの3D化」に挑戦しました。 ホームズくんの世界観を壊さないよう工夫しているのがポイントで、 球体のようなシンプルな形状をベースにすることで3Dデフォルメ感を出しています。 また一方で、ARに溶け込むリアリティを出すためにテクスチャ・アニメーションにこだわっています。

LT時はBlenderによるデモを行いました。詳しくは過去の記事をご参照ください。

www.lifull.blog

www.lifull.blog

www.lifull.blog

TangoのモデルをARKitに流用した話

菊地 慧(エンジニア)

www.slideshare.net

TangoとはAndroidのAR技術なのですが、残念ながら現在サポート終了のアナウンスが出ております。 この技術はiOSとは関連はありませんが、Tangoを活用したカーテンシミュレーションアプリ「LIFULL HOME’S Room Style AR」の開発経験は、ARKitで大いに活かされました。 これは私たちのチームで経験した最初のAR開発プロジェクトで、ARは何ができて何ができないかを探りながら進めました。 Blenderで作ったモデルをARKitに取り込む方法もご紹介しておりますので、iOS開発者の方もぜひ資料をご覧ください。

「AR最速対応をした間取り計測の秘話」

又来 薫(エンジニア)

www.slideshare.net

「ARお部屋計測」機能を実際に実装したエンジニアの発表です。 機能内容としては、

  • AR空間の平面上に点と線を引く
  • 点の位置にホームズくんを移動させる
  • 囲んだ線を間取り図のように表示する

とシンプルではありますが、間取り図の角度の調整や、ホームズくんを可愛く見せる方法など様々な工夫を行っています。 ARの文脈でユーザに説明するのも、Appleのガイドラインで述べられている重要ポイントです。 これらの知見が詰まった資料になっておりますので、ぜひご覧ください。

まとめ

ARはゲーム系やエンターテイメント系のアプリでよく使われておりますが、ツール系でもマッチするユースケースはたくさんあると思います。 チャレンジする障壁は高いですが、だからこそ他アプリと差別化することができます。 今まで経験がなかった方もぜひ挑戦してみてください。 今回の発表が、今後ARにチャレンジする方への参考になれば幸いです。