LIFULL Creators Blog

LIFULL Creators Blogとは、株式会社LIFULLの社員が記事を共有するブログです。自分の役立つ経験や知識を広めることで世界をもっとFULLにしていきます。

LIFULL HOME'S Androidアプリ 6年間の変遷

こんにちは! 株式会社LIFULLでLIFULL HOME'Sアプリ Android開発チームの衛藤です!

Android開発チームでは、不動産業界の不を解消すべく、これまでに最新テクノロジーを率先しプロダクトに反映し続けてきました。 現在のアプリバージョンはv12.12.0(ブログ執筆時点)となっており、12回ものメジャーバージョンアップを重ねてきたのかと思うと感慨深いものがあります!

私がLIFULLにジョインしたのは2014年7月。それまで存在していたアプリをフルリニューアルし、新たなv1.0.0として開発をしている最中のことでした。 中途採用のためAndroidの開発知識は少しはあったものの、内製開発自体は初めての体験だったため、チーム開発を含め非常に新鮮だったことを今でも思い出します。

さて、今回の記事はその6年間でLIFULL HOME'S Androidアプリがどのような変遷を遂げてきたかについて紹介しようと思います!
仕事の箸休めタイムにでも、リラックスして眺めて頂けると嬉しいです!

LIFULL HOME'S AndroidアプリUI・UXの変遷

画面別に紹介

トップ画面

まずは起動時のトップ画面の変遷です。v1系からv12系になるまでの間、約4回のUI変更が行われています。

f:id:LIFULL-etotake:20210108181404p:plain f:id:LIFULL-etotake:20210108181430p:plain

v1.0.0では、完全リニューアル版として新規リリースされました。ToolbarやNavigation Drawerが導入され、より使いやすくなったアプリとして生まれ変わりました。
トップ画面はしばらくこの状態が続き、v4.0.0でマテリアルデザインが導入されることで、より洗練されたUXとなりました。

v4.6.0では「特集」という、検索条件が予め設定されたテーマを検索できる機能が追加されました。

v4.8.0では、特集がタブ化され、ここで初めてBottomNavigationが導入されています。

さらにv4.10.0では、タブが廃止され、特集がトップ画面上部のエリアに大きく配置換えされました。この上部のエリアは、Firebase RemoteConfig + ReatimeDatabaseにより動的に変更可能な領域となっており、季節要因やその他状況に応じて柔軟に特集を出し分けることが可能となっています。
仕組みについては、以前iOSメンバーがイベントで登壇した資料があげられています。

www.slideshare.net

現在の最新バージョンv12系では一気にリニューアルされ、トップ画面が2つに別れています(後述のホーム画面)。

物件一覧画面

物件の一覧画面はそこまで大きく変更はされていませんが、細々とUI変更や便利機能が追加になっています。

f:id:LIFULL-etotake:20210108183245p:plain

特に、v5.5.0では掲載物件の間取り図が表示されるようになり、より視覚的にイメージしやすくなっています。
その他にも、物件一覧画面から物件をお気に入り登録する、といったことも可能になっています。
※ 実在する物件にはモザイクをかけています。ご了承ください。

物件詳細画面

続いて物件の詳細画面です。上部に画像、そこから物件の詳細情報が続く画面設計は変わっていませんが、細かい機能追加がされてきました。

f:id:LIFULL-etotake:20210108184151p:plain

v5.1.0では物件パノラマ機能が追加になり、物件の部屋内部を360度パノラマで閲覧できるようになっています。
この「物件パノラマ」は私自ら機能提案を行いリリースまで行った初めてのプロジェクトとなりました。
その他にも、ストリートビューや初期費用概算(賃貸のみ)といった機能も追加されています。

その他のUI/UX変遷

やることリスト

v4系では、「やることリスト」がリリースされました。

f:id:LIFULL-etotake:20210108184244p:plain:w200

面倒な物件探しや入居前にやること、独自のマイタスク追加などチェック形式で整理することが可能な機能です。

優等列車情報

v5.1.0では路線・駅選択画面に「優等列車・始発駅」表示機能が追加になりました。

f:id:LIFULL-etotake:20210108184531p:plain

この機能は、私が家探しをする過程で不便と感じたことがきっかけで機能を提案し、プロジェクト化が決まりました。
またこのプロジェクトについては、エンジニアリングのみではなく企画立案から経験してみたいと上司に打診し、仕様策定・効果測定・APP実装・バックエンド実装含めてすべて一人で完遂したプロジェクトとなりました。

かざして検索

v8.0.0では、新しい検索体験である「かざして検索」がリリースされました。

f:id:LIFULL-etotake:20210108185835p:plain:w500

時期としては2018年で、AI・機械学習がより実践的に各企業に取り入れられるようになったあたりでしょうか。LIFULLでもいち早く導入を行いました。かざして検索は、端末のカメラで建物をかざすと空き部屋情報が確認できるといった、これまでとは全く違う検索体験を実現しました。

初期の実装当時は独自で認識モデルを構築したのですが、その後2019年にML KitでもObject Detection and Trackingが発表され、早速アプリで対応させ、またMaterial Design for Machine Learningを導入しUXも大きく変更しています。スピード感をもって取り入れたことにより、Google I/O Extendedにて事例として紹介されました。 (42分14秒あたり)

www.youtube.com

それ以外にも各Webメディアやテレビにも取り上げられ、話題を呼んだ新機能となりました。

地図検索

v9.0.0では待望の「地図検索」が登場しました。

f:id:LIFULL-etotake:20210108184631p:plain:w200

これまでは路線・駅・地域を指定することのみ可能でしたが、このバージョンからは地図上から物件を探すことが可能になりました。
自分の住みたい地域を表示し、場所を確認しながら物件を探せるため、より直感的に操作できるようになっています。
また、地図上で範囲を指定する「お絵かき検索」や気になる場所からの徒歩・車での所要時間とともに検索できる機能もあるため、好みの条件に応じて柔軟に検索することが出来るようになりました。

AIによる賃貸物件の提案機能

アプリで2つ目の機械学習機能のリリースで「AIによる賃貸物件の提案機能」というものがリリースされました。

f:id:LIFULL-etotake:20210108184728p:plain:w200

過去に閲覧した物件をもとに、おすすめ物件をAIが提案する機能となります。
この機能はLIFULLのAI専属チームが開発した機械学習モデルを利用し、それをアプリに組み込んだプロジェクトとなります。

Instant Apps

Google I/O 2016にて、「Instant Apps」が発表されました。ユーザーがアプリをインストールせずに、一時的にアプリの一部をダウンロードし利用できる機能です。
発表後、早速社内で取り組みを開始し、アプリのモジュール構成を刷新してInstant Apps対応を行いました。

f:id:LIFULL-etotake:20210113200959p:plain

機能としては、以下の2つに絞られています。

  • 特集から物件の一覧が検索できる機能

  • 物件の詳細が閲覧できる機能

ストアの「今すぐ試す」から起動することや、URIから直接物件の詳細画面を立ち上げる(アプリをインストールしていなくても)といったことが可能になりました。
また、アプリインストール動線を設置し、インストール後にInstant Appsで使っていた検索条件やお気に入り物件等を引き継いで利用することも可能になっています。

物件問合せ機能をネイティブ実装へ

f:id:LIFULL-etotake:20210108185055p:plain

気になった物件や内見したい物件に問合せを行う機能がありますが、もともとはWebのスマートフォンページを表示していました。v9.0.0の頃のスクリーンショットは、Webのスマートフォン用ページです。

物件の問合せ自体は問題ありませんが、Webページのためどうしても読み込み速度や操作感がネイティブアプリと比べて劣ってしまいます。
そこで、バックエンドAPIから準備し、ネイティブ実装として開発がスタートしました。

v10系でリリースを行い、そこから細々とUIをチューニングし、現行版(v12系)で落ち着いています。

UIとしてはほんの数画面のみですが、住まいを探しているユーザーと物件をマッチングする重要な機能のため、かなりの期間をかけて完成まで導いたプロジェクトとなりました。

ダークテーマ

業界に先駆けてダークテーマを導入しました。

f:id:LIFULL-etotake:20210108185719p:plain

この機能についてもエンジニア提案によるもので、同じく企画立案・効果測定含めてエンジニアが作り上げたものです。
Google Play Developersにも取り上げられ、注目が集まりました。

developer.android.com

マイページからホーム画面へ

v1.0.0の頃から存在した機能に「マイページ」というものがあります。検索履歴やお気に入り物件、保存した検索条件などをまとめた機能です。このマイページについても細かくUIアップデートを重ねていました。

f:id:LIFULL-etotake:20210108185342p:plain

既述の「AIによる賃貸物件の提案機能」もかつてはマイページに存在していました。
しかし、よりパーソナライズ化した機能を目指し、v12.0.0からは「ホーム」画面に移り変わりました。
UIも大きく変わり、機能的にもよりユーザーに寄り添ったコンテンツが表示されるように生まれ変わっています。

これまでの取り組みについては、2020年末にGoogle Developers JapanのYoutubeでも取り上げられました。

www.youtube.com

まとめ

以上、過去6年間のLIFULL HOME'S Androidアプリ UI/UXの変遷を振り返ってみました。
v1.0.0の頃のUIからすると、かなりモダンに生まれ変わり、便利な機能もたくさん追加されました。
完全内製開発という強みを活かし、職種関係なく細かい機能提案や議論が盛んにされ、それが受け入れられる社風であることがここまでの変遷を可能にしてきたのではないかと感じています。

Androidは年々OSがアップデートされ、新たに利用できる技術が続々と登場してくる変化の激しい世界です。
新技術をいち早く取り入れ、より便利に利用できるプロダクトを世の中にリリースすることが重要です。
技術をキャッチアップし続ける必要はありますが、より良いプロダクトへと繋がる技術を提案し、自発的に導入できるのはエンジニアとしても楽しく働ける環境であることは間違いありません。

これからも、住まい・暮らしに寄り添い、便利にサービスを利用して頂けるよう、チームメンバー一丸となりプロダクトを発展させていきます。

最後まで読んで頂き、ありがとうございました!
時間があれば、ご自身で携わられているサービスの変遷を振り返ってみてはいかがでしょうか!

最後に

LIFULLでは、そんなプロダクトを一緒に盛り上げて頂ける仲間を募集しています!
ご興味がある方、ぜひ以下の応募フォームよりエントリーくださいませ!!

hrmos.co

「面接までは考えてないけど、社風や事業内容聞いてみたい…」という方向けに、カジュアル面談も実施しています(採用合否には関係ありません)。
カジュアル面談は以下からご応募ください!

hrmos.co