ここ数年、スマートフォンから「楽待」を訪れる方々が急増している。そんな中で、楽待を運営するファーストロジック(以下FL)社内でも「アプリをフルリニューアルしたい」と、内部で着々と準備を進めてきた。

そして2018年12月、ついに楽待の公式アプリが全面リニューアル。リリースから1カ月弱で、すでに新アプリのユーザー数は1万人を超えている(1月14日現在 当社調べ)。実は、初めてとなる「完全内製」の今アプリだが、どのような検討を経て、現在の形になったのだろうか。

FL開発部で、今回のアプリリニューアルを統括したプロジェクトマネージャー・西田(写真右)と、デザイン責任者・叶(写真左)の両氏に、開発秘話やそのこだわりを明かしてもらった。

注目してほしい「検索条件指定画面」。次に追加される機能は?

―まずは開発者として、ユーザーの皆さんに今回のアプリでぜひ注目してほしいポイントを教えてください。 

西田 Android版が出たということです。長らく対応できていなかったので、ここは注目ポイントです。

叶  ずばりこのデザインです!

赤で囲われた「インジケーター」の部分が注目ポイント。上限下限を動かすことで選択が可能

楽待のWeb版では選択式になっていますが、アプリではよりすばやく入力できるデザインにしました。実は開発部長が「これやりたくない?」と提案してくれたんです。技術的に実現できるだろうか…という懸念もあったんですが、開発メンバーが実現してくれました。これはぜひ着目してほしいです。

―プロジェクト当初、こういうアプリにしたい、という構想はありましたか?

西田 アプリを作る人は経験すると思うんですが、最初は、やはり「アプリならでは」を全面に押し出したいと考えていました。最初に部内でアイデアコンペを実施したんです。VR(バーチャル・リアリティー 仮想現実)を取り入れるっていうのも案の1つにはあったんですよ(笑)。

ですが、最終的にはWebで楽待を利用している方が戸惑わないように、Web版に準拠すると決まりました。

―デザイン面ではいかがでしょうか?

  私がプロジェクトに参加したのは方向性がかなり決まってからですが、とにかく使いやすいものにしたいという思いがありました。Webよりアプリの方がいいな、と思われたいと考えていました。

当初のアプリデザインは、Web版を丸々踏襲するという話になっていました。でも、Web版も決してベストな状態ではないと思っていますし、改善できそうなところは見直していいんじゃないかと思って「デザインを変えたい」と提案したんです。

時間もないし、エンジニア側で決まっていることもすでにあるし、「難しい」とも言われていたんですが、手書きのプロトタイプ(試作品)を出したら「これならできる」と言ってもらえて、デザインの変更が決まりました。

物件一覧画面のラフ画。こうした検討を通して、良いデザインを模索する

―デザイナーとエンジニアでは、それぞれのこだわりや決定事項もあるから大変ですよね。

  「ここはできません」「なんでこれやってくれないんですか」…と、めちゃくちゃ話し合いはしましたね。そこまでバチバチはしてないですが(笑)。

今回、時間がなくてできなかった要素として「インタラクションデザイン」があります。わかりやすく言うと、例えば「お気に入り」のハートマークを押すとアニメーションでハートがキラキラするとかですね。これはいずれやりたいと思っています。

―今回は第一弾のリニューアルということですが、現在はどのような作業を行っているんでしょうか?

  直近では、会員登録をよりスムーズに行えるようにします。これまでは、利用するサービスに応じて情報を都度入力しなくてはなりませんでしたが、一度ですべての情報を入力できるような改修を検討しています。

その後、従来のアプリにあった「利回り相場」機能や、パソコン版にある「積算価格シミュレーション」「キャッシュフローシミュレーション」機能の追加はしていきたいですね。

次に行う予定の、会員登録画面の改修案

アプリ開発できるメンバーがいない…判断の結果は?

―ここからは、開発の経緯についてお伺いします。実際にアプリのリニューアルリリースのために動き出したのはいつですか?

西田 2018年の春ですね。まずは体制づくりから始まりました。以前の(リニューアル前の)楽待アプリは、実は外注して作ったもの。これまで、FL内にアプリ開発のできるエンジニアはいませんでした。

そこで、今回のプロジェクトではまず(1)専門技術を持った外注先に依頼する、あるいは業務委託社員を採用する、(2)専門技術を持った外注先や業務委託社員によって開発するとともに、技術移転も同時に行う、(3)現在の社内メンバーにアプリ開発の学習をさせる、と3つの体制案を検討しました。

―結果(3)を選択し、アプリを完全内製することになったんですね。なぜこの判断となったのでしょうか?

西田 コア事業部分を完全内製することは、ビジネススピードに直結します。すばやく時代やユーザーのニーズに対応できるようにすることが、必須だという判断です。外注したり、業務委託社員を採用したりという方法だと、技術が内部に蓄積されないというデメリットがありました。

―アプリ開発のノウハウがメンバーにない中で、まず、何から着手したのでしょうか?

西田 ちょっと専門的な話になりますが、これまでiPhoneとAndroidのそれぞれのアプリは別々の技術を使って開発するしかありませんでした。しかしここ数年、両方に対応できる開発ツールが登場しています。この技術を我々のアプリにも採用すべく、最初の1カ月はこれらの検証に充てました。

そうした中で、時期的に一番完成度が高く、既存エンジニアもある程度なじみのあるプログラミング言語「JavaScript」がベースとなった、Facebook社開発の「React Native」という技術を採用することに決定しました。その後、技術検証のためのプロトタイピング(試作)をしたり、社内勉強会を開いたり…とどんどん進めていきました。2018年内に第一弾のリリースを行うことが大前提だったので、期限は厳しかったですね。

―デザイナーの作業は、夏くらいから始まったと聞きました。

  7~8月に、まずは現状のユーザーが不満に思うことを知るところから始めました。マーケティング部が実施していたユーザーアンケートの結果を見たり、自分で(リニューアル前の)アプリを触ってみたりして、改善点を洗い出していきました。

開発者のこだわり

―今回のアプリで、こだわった点はありますか?

西田 1つ目は「メッセージ機能」です。2018年の夏にWeb版をリリースして以降、評判もいいので、これはアプリにも絶対に入れたいという強い思いがありました。2つ目はAndroid版のアプリもiPhone版と一緒に出すということ。それが実現できたので良かったです。

3つ目はデザイン面ですが…こちらは叶さんに詳細を譲ります。

  本当に裏側の話ですが、2つあります。1つ目は、「コンポーネント化」を意識したことです。ざっくり説明すると、ページにある線やボタンなどの細かい「部品」を組み合わせて1つの「まとまり」にしてしまうことです。最近アプリやWebへの導入事例が増えてきた「Atomic Design」と呼ばれる手法を採りました。

新たなページを作るたびに部品を1つずつ組み立てるより、あらかじめまとまったものを組み合わせていったほうが効率的だし、全体のデザインの整合性が取りやすくなります。

楽待のアプリで言うと、物件一覧ページに、物件1つ1つの四角がありますよね。これは「物件写真」や「利回り」といった部品から成り立ったまとまりです。この四角を、物件一覧ページだけではなくて、その他のページにも使いまわせるようにデザインしました。

そうすることで、「ページが変わると整合性が取れていない」ということがなくなります。ページごとにばらつきがあると、ユーザーとしてもちぐはぐな画面になってしまって使いづらいということになってしまうので、それを軽減できるように意識しています。

物件の検索結果の画面(デモ画面です)

2つ目は、「画面遷移(画面の移り変わり)の仕方のルールを明確に定めた」ことです。ユーザーが物件を探している時には、画面が左に流れるという動きをします。

一方、物件を探している時に問い合わせたいな、と思いますよね。そうすると、「物件を探す」という行為とは別に「問い合わせる」という行為を行うことになるので、今までのように画面が左に流れるのではなくて、下から画面がせりあがってくる。このように、ユーザーの行動によって、画面遷移の方法が異なっているんです。

気になる物件をタップすると、画面が左へ動く

資料請求ボタンをタップすると、下から新しい画面が出てくる

Apple社のデザインガイドラインに示されていた方法を用いています。このように密かにユーザーの「やること」に合わせて画面遷移の仕方を変えることで、画面を進めて行っても迷子になりづらいようにしています。

―苦労した裏話を教えてください。

西田 日本ではまだ、React Nativeを活用した詳細な事例が少なかったので、開発のために英語の情報を大量に読み解く必要がありました。開発部に英語の得意なメンバーが多かったので、助かりました(笑)。

あとは、やはり初めての部分が多いので、ちょっとしたことでつまずくことは正直ありました。でも、想定よりは少なかったです。少数精鋭での内部開発の効率の良さ、管理コストの低さを実感しました。

  アプリのデザインはWebとは勝手が違うため、そこで苦労が多かったですね。例えば、スマホの「時計表記」「充電マーク」を考慮にいれてデザインをしなくてはならなかったり、画像を用意する時は、画像自体ではなくスマホ画面の解像度で考えなくてはならなかったり…。

1人でこのあたりの作業を進めていたので大変だったんですが、最終的には開発メンバーとたくさんコミュニケーションをとって、解決していきました。

―最後に、ユーザーの皆さんへメッセージをお願いします。

  改善要望をどんどんください! ということでしょうか(笑)。新機能も追加しますし、使いやすいようにどんどん変えていこうと思っていますので、引き続き、どうぞよろしくお願いします。

西田 叶さんと一緒ですね。改善要望をください(笑)。特にAndroidユーザーの皆さん、ストアからインストールしていただき、ご意見をいただければと思います。

 開発者の思いが十二分に込められた「楽待」公式アプリのDLはこちらから!

    

(楽待広報部)