ログやA/Bテストではわからない「イラッ」を減らす「わかりやすい」アプリとは？　UX侍 × SUUMO

SUUMO(スーモ)
価格：無料

自分にぴったりの住まいが見つかる日本最大級の不動産・住宅情報サイト「スーモ」のスマートフォンアプリ。賃貸、新築・中古マンション、新築・中古一戸建て、注文住宅、リフォームなどの住宅情報が満載。

住宅の総合ポータルSUUMOは、リクルートが手がける他サービスに比べてユーザーの年齢層が幅広く、デジタルリテラシーもバラバラ。また「家探し」という限られた期間で主に使用されるアプリであるため、使いやすさ以上にわかりやすさを意識して作っているという。リーダーの柴山大氏と、アプリ担当の伊藤友也氏に話を伺った。

森田 雄

調査とテストのサイクルをきちんと回していて、データを根拠にしてデザインを判断しているのが大変よくわかりました。今後のさらなる改善がもたらすUXに期待です。

深津 貴之

KAIZEN platformなどを輩出しているリクルートさんだけに、A/Bテストバリバリかと思ったのですが、むしろ逆でした。

探し始めたら四六時中考える「家探し」を効率的にするためのマルチデバイス対応

――SUUMOのアプリの概要や役割を教えてください。

柴山 大氏
株式会社リクルート住まいカンパニー
ネットビジネス推進室　スマートデバイス戦略チーム　リーダー

柴山住宅の総合ポータルとしてSUUMOは、借りる・買う（新築/中古マンション/一戸建て）・注文住宅・リフォームなど、不動産・住宅を探している人のマッチングを行っています。SUUMOにはそれぞれに最適化された、PC版Webサイト(以下PCサイト)、スマホWebサイト（以下スマホサイト）、そしてアプリがあります。アプリは約4年半前にiPhone版とAndroid版をそれぞれリリースしました。

――SUUMOのPCサイトとスマホサイト、アプリの関係性について教えてください。

柴山たとえば、賃貸物件への住み替えをするユーザーの場合、調査によると探す期間は平均23.5日という結果で、継続的に利用し続けていくような他のサービスとは性質がかなり違います。そうしたスポット利用の方に、アプリをダウンロードしてまで使ってもらえるかは難しいため、サイトとアプリ両方を用意して、お互いを補完し合っています。

深津購入となると一生に1、2回くらいのイベントなので、日常的ではなく必要なときだけ検索しての接触ですよね。ですからユーザーの90％以上が検索で流入するイメージです。そうしたものに対してアプリを用意することが珍しいですよね。

森田そう、そう。SUUMOのスマホサイトってけっこう良くできているので、ユーザー的にはスマホサイトだけあればいいような気がするんですが……。

柴山PCサイトは住宅や暮らしに関する情報量を厚めに提供することを重視しています。また、スマホサイトもPCサイトに近い考え方ですが、スマホに適した情報を提供しています。一方、アプリは家探しに特化するUI（ユーザーインターフェース）を重視しています。たとえば、

• 「サクサク」動作する
• 写真の拡大縮小がしやすい
• ショートカット機能が充実している

などです。アプリは家探しを深いレベルで検討しているロイヤルユーザーが集まっていることが、コンバージョンレートにも表れています。

森田賃貸を探すときってけっこうスマホでも探すんですけど、家の購入でもスマホで探す人は多いのでしょうか。

柴山そうですね。購入目的での利用ですと、PCサイトとスマホではPCサイト比率のほうが圧倒的に多いです。ただし、アプリとスマホサイトではアプリのほうが少し高いようです。

深津アプリは、タッチポイントとして担保しておくというということですね。ちなみに、今ってブックマークは、PCとスマホで連動しているんでしょうか。

柴山実は、PCサイトとスマホサイトは会員機能で連動しているのですが、アプリのブックマーク連動はまだできていません。ユーザーには面倒をかけてしまっている状況なのですが、現状ではアプリで目星を付けていただいて、PCでも同一条件を入れて探していただく形になってしまっています。ブックマークの連動は要望も多いので、早急に対応していく予定です。

ユーザーにインタビューをすると、アプリは外出中に見るという方が圧倒的に多いです。ですので、アプリの操作感や画面移動のスピードを速くして、通勤時間などの空き時間を少しでも有効活用して、住まい探しをしていただきたいと思っています。

「使いやすい」よりも「わかりやすい」を重視するアプリ

――物件を検索するとき、必ず都道府県を選んでから検索する仕組みですね。

柴山はい、実は非常に悩ましいところで、「探し方」の最大公約数をとらせていただいているというのが率直な回答です。県をまたいで物件を探されるのは、首都圏の方がほとんどで、他地域の方は県をまたぐことが少ないですね。県をまたいで検索したい方への解決策として、たとえば、東京から神奈川まで伸びている沿線では、神奈川の駅も選択できるようにするなどして要望に応えていきたいと思っています。

「トップページ」→「都道府県」の選択一覧。ただし、都道府県を固定して物件探しをするユーザー向けに選択画面の最上部「次回から都道府県を固定する」にチェックすることで、本画面はスキップできる

――ページを戻ると、前にやっていた作業がリセットされてしまいますね。なにか意図があるのですか。

柴山サービス提供者としては、使いやすいものをつくりたいと思っています。しかし、UIやUXを設計するときの私たちの一番のこだわりは、「使いやすい」以上に「わかりやすい」です。

条件がリセットされてしまうことに関しては、ユーザーは「戻る」という動作を選択しているので、設定していた条件を中途半端に引き継いでしまって混乱してしまうより、ページが戻ったら戻る前にやっていた作業をリセットするというわかりやすさを選んでいます。どんな方が使っても「わかりやすい」と思ってもらえるように設計しています。

森田とりあえずホームに戻ればもう一回やり直せるよっていうことですね。

柴山はい、iPhoneの「HOMEボタン」の考え方に近いですかね。住宅探しのポータルサイトでは、利便性よりも迷いを取り除くことが重要だと思っています。ページが戻ってしまうたびに、条件を入れる手間はかかりますが、自分が求めている物件の条件を覚えていないという方は少ないと思います。とはいえ、毎回条件を入力するのは手間だと思いますので、その手間を省きたい方に、条件を保存できたり、閲覧した履歴が参照できるショートカット機能をメニューに用意しています。

先進的なことを取り込むことが必ずしも「正」ではない

――全体的に独自のUIを作り込んでいますね。右側のドロワーはけっこう珍しいですよね。

柴山そうですね。このUIの実装を検討したときに、右か左かで多くの議論をしました。結果的にロゴの位置などを加味して右側にしました。スワイプでドロワーが表示されるだけでなく、右上にメニューボタンを設置することで機能に気づいていただけるように工夫しています。

一方で、SUUMOアプリに関しては「常に先進的なことを取り込むことが正しい」とは思っていません。SUUMOは接触期間の限られたアプリなので、使い込んで慣れていただくまでに利用を終えてしまうことが多いです。ですから、UIやUXにおいて、ユーザーが普段多く利用されているような、日常に溶け込んでいるネイティブのアプリに近い動きを目指してカスタマイズしています。

スワイプだけでなく、右上のメニューをクリックすると右側のドロワーが開く

深津スワイプのみでの操作は、基本的に使っちゃいけない機能ですね。右側ドロワーは、僕のなかでは極限まで攻めたタイプのアプリというイメージです。結構リスクを負ったチャレンジをされているなと思いました。

伊藤 友也氏
株式会社リクルート住まいカンパニー
ネットビジネス推進室　スマートデバイス戦略チーム

伊藤右側のドロワーからメインの項目を使ってもらうための工夫として、物件の一覧画面でマイリストへ追加するために右上の星マークをタップすると、星が画面右上のメニューのところに飛んでいきます。本来、左にドロワーがあると思っているユーザーに対しても、こうしたアニメーションを使うことで右にドロワーが存在することを訴求しています。実際に、このアニメーションを入れたことにより、ドロワー内の機能の1つである「マイリスト」の利用率は5倍近くも跳ね上がりました。

物件検索一覧のマイリストをクリックすると、右上のメニューに星が移動する

深津表示画面が十分あるので、固定のタブを使うという選択肢もあるのではないでしょうか。

伊藤以前は、下にナビゲーションタブを設置していました。しかし、表示画面を大きくするために下ナビゲーションは削除しました。一回のアプリ利用の際、メニューの項目を行ったり来たりするようなサービスや機能設計の場合は、タブなどで切り替えを簡単にすべきです。

しかし、SUUMOの場合は、検索なら検索、マイリストならマイリストという具合に1つのメニューを集中して利用されることが多いので、下にナビゲーションを固定して表示画面を狭くするより視認性を高める右側ドロワーを採用しました。また、表示領域は十分とのご意見をいただきましたが、物件は確認しなければいけない情報が多いですからね。少しでも視認性を高めて情報を見やすくすることを大事にしています。

深津時間帯によって画面下部の絵が変化しますよね。画面サイズが小さいiPhone 4Sベースで設計して、大きい端末では余白をイラストで埋めているのですか。

時間帯によって画面下の絵が変化する

伊藤おっしゃる通りです。賃貸、売買、注文住宅など異なる目的でアプリに流入してきたユーザーに、どの端末で見ても目的の住まい探しがファーストビューで納まることを重視しているので、メインコンテンツの部分の高さは、狭い画面に合わせています。ですので、iPhone 4Sなどの端末で見ていただくと下部の画像が丸々消えます。

柴山また、家探しって始めてみると意外と大変だったりするんですよね。ですので、アプリを開く時間帯によって景色が変わることで、「お、なんか変わった！」と感じてもらって、家探しを少しでも楽しんでいただければいいなと思っています。

エンジニアのモチベーションにも貢献するSUUMOの「隠しコマンド」

深津ちなみに今バグを一個見つけてしまいました……。

森田あ、僕も……。

柴山品質には自信を持っているのですが、インタビューのタイミングで偶然にも不具合に遭遇するとは。ストアのレビューを見ていただければ品質が良いのは信じてもらえるとは思いますが（汗）。

一同笑

深津いや、作り込みはすごく細かいと思いますよ。僕らは職業柄、連打とか得意なので（笑）。

柴山では、トップ画面を連打していただくと、連打のし甲斐があるかもしれません。

森田あ、ほんとだ。「借りる」を連打したら画面の色が黒に変わった！

「借りる」を16回連打するとドンスーモの黒を基調とした画面に変化する

柴山単なるイースターエッグですので、別のページに移動すると通常の表示に戻ります。16回連打という回数をお伝えすれば、わかる方には意味が伝わるかと思うんですが（笑）。

森田「買う」のほうでは画面がピンク色になりますね。

「買う」を16回連打するとスミモのピンクを基調とした画面に変化する

柴山伊藤と雑談していたとき、世界一有名な隠しコマンドを知っているかという話になって、SUUMOアプリでも入れてみようかと思いまして。もう一つ、「右のナビゲーションメニュー」→「設定」→「このアプリについて」を押していただくと白の余白部分が広いと思うんですが、余白の部分にスワイプで上上下下左右左右とやると……。

森田おっ、なるほど。

柴山大変な開発のなかでもこうした“ちょっとした遊び心”を取り入れてもらうことで、エンジニアのモチベーションにつながればと思っています。まじめな機能ばかり開発していると息苦しいですからね。エンジニアとのコミュニケーションは、品質にも影響しますので、現在は非常に密に連携しあってアプリを作り込んでいます。

右の「ナビゲーションメニュー」→「設定」→「このアプリについて」→余白部分で「上上下下左右左右」→A、Bボタンの押し方で出現するキャラクターが異なる

ログやA/Bテストだけではユーザーの「イラッ」はわからない

――SUUMOのアプリはどんな検証をしているんでしょうか。

柴山それほど特別なことをしているわけではありません。定量調査と定性調査、またA/Bテスト、ヒートマップやクリックマップなどを実施しています。A/Bテストに関しては、ちゃんとディスカッションをして、ある程度勝ち筋を決めてから行うようにしています。下手な鉄砲も数撃ちゃ当たるのA/Bテストでは、自分で考える能力、企画する力が身に付きませんからね。

深津それは大変重要なことですね。

柴山そうですね。クリックマップやヒートマップでは、どこの画面でブランクが空いてしまっているのか、逆に分散し過ぎていないか可視化して分析しています。特にクリックマップの分析は、ダイレクトに効果につながりますね。A/Bテストとクリックマップの組み合わせで、改善、改善……の日々です。

森田その結果に基づいたアプリのUIなどの改変は、どれくらいの頻度でやっているんですか。

柴山ユーザーのダウンロードの負荷を考えて、1か月のリリーススパンは空けるようにしています。その一回のリリースに10～20個の改修が入っています。ただしA/Bテストが入っているので、ダウンロードの負荷なくUI変更実施できるように工夫していますけどね。

森田すごい、かなり本気ですね。普通はテストをしても具体的にサービスに反映することが難しいことも多いですからね。

深津あるいは、ある日、突然いろいろ変え過ぎて、とんでもないことになったりしますよね（笑）。

柴山アプリをより良いものにするために、どうすればよいかを考えたり、世の中のかっこいいアプリを見たりすることは重要だとは思っています。しかし、私たちはかっこいいアプリを作りたいわけではないんです。「物件を探しやすい、使いやすい、わかりやすいアプリ」を作りたいのです。そのために、実際にSUUMOアプリを利用している方の話を聞くことも重要だと思っています。「弱点の克服」と「長所を伸ばす」という成長に必要な2つの両輪を回している形です。

――定量調査と定性調査の頻度やバランスはどんな具合でしょうか。

柴山定量調査に関しては定点調査で、内容は住まい探しにおけるスマートデバイスの使われ方が基本です。半年に1回ほど、住まい探しにおけるスマートデバイスの利用方法の変化を見ていきます。その定量調査によって分析した内容から、住まい探しの変化を見て、インタビュー調査のモデレート内容などを考えます。

定性調査では、実際に利用していただいている方にお越しいただいて、私自身がモデレーターになって目の前でアプリを触っていただき、家探しのアプリ利用の状況を再現してもらいます。どう触っているのか、ログでは見えない迷う様子や誤タップなども見ています。

森田そのサイクルはアプリだけですか？ PCサイトでもやっているんでしょうか。

柴山現時点では、スマホサイトとアプリで実施しています。やはり画面の狭いスマートフォンではPCよりも、UIのサービスに対する影響度は大きいですからね。ただし、デバイスをまたいでの利用も多いので、PCサイトでも実施していく予定です。

森田スマホサイトとアプリでは違いますもんね。

柴山そうですね。ユーザー行動も違いますし、流入の仕方も違います。アプリは基本的にトップからの流入ですが、スマホサイトは有料集客もありますし、ソーシャルやオーガニックもあります。流入元によるページの出し分けは、まさにA/Bテストで分析して最適化しています。

森田データとしてはわかるけれど、ユーザーの気持ちという意味では、スマホサイトのほうが難易度が高いですよね。

柴山はい、ログだけではユーザーの本当の気持ちまでわからないですよね。実はけっこうイラッとしているけれど、家を探さなきゃいけないから我慢して使っていただいているって方がいるかもしれません。そういったイラッを少しでも取り除くことができればと思っています。

森田スマホサイトを利用しているユーザーよりも、アプリを入れているユーザーのほうがモチベーションはだいぶ高いですよね。そこでもアプリとスマホサイトの違いはありますよね。アプリも作り込んでいますけど、スマホサイトも丁寧に作られていますね。

左：アプリのSUUMOトップ画面　右：スマホサイトのSUUMOトップ画面

柴山ありがとうございます。スマホサイトはリニューアルしたのが2年前で、今は1ページずつ徐々にUI改善をしている最中です。アプリは賃貸の物件一覧が最新のモジュールで、このUIを改善したことで、物件の詳細画面へのクリック率を1か月間で数％向上させることができました。デザインの力の大きさを改めて実感しています。

スポット利用のアプリだからこそ、ユーザーに新しい操作を覚えてもらうことはしない

柴山有識者の方にインタビューしていただく貴重な機会ですので、こちらからご質問してもよいでしょうか。SUUMOのアプリの改善点とかありますか。

深津そうですね、細かいことを挙げれば改善点はあります。しかし、ものすごく丁寧に作られているので、勝ち筋をあえて外してでも、丁寧につくることで総合点が高く、成り立っている感じがします。

森田僕もそう思います。分析も厚めに行っているし、ノウハウがめちゃくちゃ溜まりそうですね。

深津あえて細かい部分を挙げると、ユーザー層的には、初見の方やリテラシーの低い方を対象に設計を行っているので、今のUIで成立して、結果的に使いやすいと感じてもらえているんだと思います。ですので、最適化などを多少あきらめて純正UIにして、他のアプリケーションとの操作の違いを減らすほうが、微妙ですがUIの改善になるかなと思います。

柴山はい、ご指摘いただいた通りで、アプリに対する学習点を減らすためにも極力特殊UIは削るという方針です。チームでは、日常的に使うアプリケーションのトップ10を触り続けるようにしています。慣れ親しんでいるアプリと同じ操作だと、一番ストレスが少ないと思いますので。

深津たとえば、アプリTOPの上部ナビゲーションの視認性を少し下げてでも、機能を示すラベルを入れたほうが「わかりやすさ」につながるかもしれません。

上部ナビゲーション

柴山おっしゃる通りだと思います。上部ナビゲーションのマークがどんな機能を果たすのか文字で「新着」、「履歴」、「マイリスト」といった具合に入れようと思っています。

深津あと、本当に細かくて申し訳ないんですが……、検索ルールのANDとORの見せ方が難しいですね。

柴山正直なところユーザーテストでは、ここら辺の不満はあまり見えていないんですが、通勤・通学時間検索の3つまで駅を指定できる箇所では「ANDとORどっちなの？」という声がありました。現状は賃貸ではAND検索に絞っているので、「且つ」という言葉で補足しています。また、売買ではOR検索に固定されているので、「または」という言葉で補足しています。

なぜ、賃貸と売買で分けたのかについては、住まいの属性の違いですね。賃貸は主に1 人暮らしを中心とした少人数で暮らすことが多いので、「目的地は1つ」にターゲットを絞ってAND検索にしています。一方、売買はある程度「暮らしたいエリアが決まっている」かつ、世帯が中心となってきているので、「目的地が複数」というターゲットに絞ってOR検索にしています。

通勤・通学時間検索の画面　※賃貸では「且つ」、売買では「または」の検索条件となっている

深津たとえば、カードのようなUIを採用して、その隙間に言葉を差し込むのはどうですか。そのほうが「且つ（AND）」や「または（OR）」の関係性がわかりやすいかなと思います。

柴山確かにそうですね。そこはすごい悩みどころで、先にもお話したとおり、ANDとORのニーズが人によって違うんです。たとえば、東京駅に勤務の人が、「京橋または、有楽町または、東京」とOR検索をしたくて入力することもあります。一方で、夫婦で通勤地が違う場合では、遠い駅を2つ「東京且つ、横浜」とAND検索することもあります。今は「賃貸」「売買」で想定ターゲットを設けて、それぞれ設計しているのですが、すべてのニーズは満たせていないのはご指摘の通りです。

深津UI的には、東京と有楽町というカードがあって、カードとカードの間に「且つ」っていう緑色などのボタンがあって、その「且つ」ボタンをタップすると「または」に切り替わるとかですかね。ただ、このUIだと検索条件が3つ以上あったときに複雑になっちゃいますけど……。

あとは、UI的に解決するのであれば、検索条件の選択画面の後で地図が表示されてサークルを描いてサークルが重なったところの色を変えるとかでしょうか。

森田「且つ」、「または」を選択できるっていうのがそもそも難しいのかもしれませんね。

柴山本当に難しいです。引き続き考えていかなければいけない課題ですね。

「家を探しきった」という満足感を提供すること

――今後の課題やチャレンジしてみたいことを教えてください。

柴山路線図検索に関しては、電車のサイネージで使われている乗車分数表示のようなUIを取り入れてみたりしたいですね。路線図検索のUIは、改善の余地がかなりあると思っています。現状では、そもそもピンチイン、ピンチアウトによる拡大縮小すらできないので。

森田駅を1つ選んだら、両隣の駅も自動的に選ばれたことにしてしまうとかでも良いのではないでしょうか。物件を検索しているときって、実は1駅くらいまでだったら許容範囲内だったりするので。

柴山そうですね、その考え方に近いことはちょうどスマホサイトの賃貸で実装しました。たとえば、賃料を5～6万円で検索して5件しか出てこなかった場合に、プラス5千円すると対象物件が10件増えますといったことです。

森田こだわり条件の緩和ですね。

柴山家探しってなかなかコレ！ という物件が見つからなくて、理想と現実のギャップが発生することがたびたびあります。たとえば、築1年や新築で調べている場合でも、検索条件を築5年にするだけで対象物件が倍になったりすることもあります。理想と現実の着地点を見つけやすくするために、私たちからさまざまな軸による条件を提示させていただくのも大事なことだと思っています。

森田純然たるレコメンドよりも、自分が付けた条件を緩くするという言い回しのほうがすんなり入ってきますよね。

柴山通常のレコメンドと大きく異なる点は、基本的に家は最終的に1軒しか契約しないということです。だからこそ、「探しきった！」という満足感をいかに感じてもらうかが、重要だと思っています。

森田そうですね、リクルートさんの他のメディアで扱っているものとかをレコメンドしたらどうですか。家を選んだら、車もどうですか？ みたいな（笑）。

一同笑

森田探しきった満足感という意味では物件探しの時点で、そこに住んだ後に、どんな日常が待っているかが想像できるといいですよね。メシ屋が近いからいいとか。

深津僕が待ち続けている未来型イノベーションが、間取り図とギャラリーですね。これはリクルートさんがどうとかじゃなく、賃貸サイトが持つ根源的な課題だと思うんですけど。

柴山おっしゃる通りです。私たちはあくまで広告媒体で、間取り図などは不動産会社さんが持たれている情報です。すごくいい間取り図と、ユーザーの求めている物と少し違う間取り図が共存している状態です。ここは高いクオリティで統一された間取り図を提供できるようにテクノロジーで解決していきたいです。また、飲食店の近さや多さはリクルート内の他媒体とうまく連携させて、ぜひ実現したいです。

深津不動産会社にパノラマカメラを配って、それを部屋の真ん中に置いて部屋全体を見られるような世界がきてほしいですよね。

柴山そうですね。もしかすると、それはそんなに遠い未来じゃないかもしれませんよ。