住むと泊まる、どちらにも使い勝手の良いUXへの挑戦 ー賃貸契約と宿泊予約のハイブリッドプラットフォーム「unito」大幅リニューアルの裏側
プレスリリースに書ききれない、unito開発の裏側をレポートする「リリースの裏側」。今回のリリースは、「賃貸と宿泊のハイブリッドお部屋探しプラットフォーム「unito」検索体験を大幅リニューアル」を特集します!(熱量のあまり文字数5,000文字越え!最後までお付き合いいただけたら嬉しいです)
▽プレスリリースはこちら
https://prtimes.jp/main/html/rd/p/000000191.000033908.html
今回は、デザイン全般を担当された住山さんのインタビューをお届けします。デザインチームとしてのミッションや、顧客の行動データから見えた課題。さらには、細部まで貫いたこだわりから今後のビジョンまで、たっぷりお話を伺いました。(聞き手:PdMチームマネージャー田村さん、コーポレートPRチーム平岡)
住山 詩織(プロダクト部 デザインチーム)
昭和女子大学生活科学部環境デザイン学科プロダクトデザインコースを卒業。新卒で株式会社ナビタイムジャパンに入社し、Webエンジニアとしてサービス開発に従事。その後デザイナーへ転身し、新規サービスの立ち上げや既存サービスの改善に携わる。その後、ビズリーチ、クラウドワークスにてWebサービスおよびアプリのUI/UXデザイン業務に従事。2021年よりフリーランスとして活動し、マネーフォワード、Unitoなどのプロダクト開発に関わる。現在は株式会社Unitoに入社し、UXデザインおよびプロダクト設計を担当。
田村 俊樹(プロダクト部 PdMチーム マネージャー)
東京工業大学大学院を修了。大学ではアメリカンフットボール部に所属し、大学院ではコーチとしてチームの指導にも従事。また在学中はSEOマーケティングやVCでのコミュニティ運営に携わる。新卒でWebビジネス支援SaaS「ペライチ」に入社し、新規事業責任者としてプロダクト開発とマーケティングをリード。2025年1月に当社に入社し、UXデザインおよびプロジェクトマネジメントを担当。
「暮らすように泊まる」グラデーションを加速させる。サイトリニューアルプロジェクトとは
ー今回のリニューアルを含めた「サイトリニューアルプロジェクト」について教えてください
田村)前提の説明となりますが、unitoは独自の家賃システム「リレント」(※)を導入した物件を展開しています。そのためunitoの物件には月単位で「住む」ユーザーと、そのユーザーが外泊する時に「その部屋を宿泊施設として利用(リレント)する」日数単位利用のゲスト双方が存在します。
一方で、2020年リリース当初のunitoは、賃貸 / ホテル暮らし対象(月単位契約)物件のみを掲載しているプラットフォームでした。
※リレント:居住者が外泊する日をオンラインで申請すると、申請した日数に応じて家賃が減額される仕組み。リレント時にunitoが居住者の部屋を宿泊施設として提供することで、居住者は家賃を「住んだ日数分」に調節可能
そこで2024年、泊まるプランとして、ホテル / 賃貸物件を「日数単位」で宿泊利用できるプランをリリースしました。しかし、もともとの住むプランに後付けした形でリリースしたため、どうしても使い勝手に不自然な部分が残っていました。
住山:それにリリース時期が2年も違うので、ユーザー数は圧倒的に「住む」の方が多くて。その分、泊まるプランとしての最適なUIを追求しきれていませんでした。
田村:そういった課題を感じる中で、泊まるプランもリリースから2年が経ち、ユーザー体験のデータも十分に集まってきました。そこでどちらのプランも最適化して使いやすくするために始動したのが、今回のプロジェクトです。
第1弾のリニューアルで、デザインから企画までを丸ごと担当していただいた住山さんに詳しくお話を聞けたらと思っています!
※物件一覧ページ:希望のエリアや条件で検索したあとに表示される、複数の候補がカード形式で並んだページ。
「住む場所」と「泊まる場所」、検索の目的を明確にするUIを模索
ー 今回主にデザインチームとして担当したことを教えてください
住山)1つ目は、サイトの入り口を「住む」と「泊まる」に分離しました。リリース当初、泊まるプランは住むプランの検索画面の中にある、絞り込み機能の選択肢のひとつに過ぎませんでした。後から付け足した機能でしたし、泊まるプランがあること自体、初めてサイトに来た方には伝わりづらかったと思います。
そこで今回のリニューアルで、検索を始める一番最初の段階を「住む」と「泊まる」で明確に分離。それぞれの目的をしっかり意識してから検索を始められるUIに改善しています。
画面上部に住む / 泊まるのボタンを分離・設置(スマホ版)
もう1つの大きなポイントは、マップと「物件一覧カード(※)」を並べたことです。これまでは、「一覧の中で物件を選んでから、マップで場所を確認し、次の物件を確認する」というページの行き来が必要でした。今回のリニューアルでは、マップ上で場所のイメージを膨らませつつ、物件の具体的な詳細を併せて確認できる配置にしています。
※物件一覧カード:物件においてユーザーが知りたい情報(写真・アクセス・設備・入居可能時期など)を一度に把握できるカード形式の表示
画面左:物件一覧カード、画面右:エリアと価格、詳細情報が同時にわかるマップ
データドリブンで誕生した、unitoならではのマップ機能
田村)unito =「暮らしの総合プラットフォーム」ということで、住む / 泊まる機能をグラデーションさせるビジョンがあると思っています。住む / 泊まるでサービスを完全に分けきらないよう、どのようにバランスをとりましたか?
住山)実は unito.life(賃貸)とunito.travel(宿泊)のように、サービス自体を分けることも考えました。一方で、実際に泊まるプランをご利用のユーザーデータを見ると、賃貸・宿泊どちらかではなく、どちらも使っていたりする。いつも住むプランを使ってくださってる方が、たまに泊まるプランを利用する、というケースもありました。
田村)他にも「ウィークリーマンション」で検索して、unitoの泊まるプランに行き着く方もいますよね。
住山)そういったデータから判明した事例を踏まえて、同じユーザーが「生活のシーン」によって機能を使い分けられるUXを開発する方向に落ち着きました。そこから行き着いたものが、検索結果ページのマップ機能です。
既存ユーザーの行動データによると、トップページや物件詳細ページの閲覧はスマホ利用が7割を占めるのに対して、検索結果ページの閲覧はPC利用が6割でした。
例えば「東京 マンスリーマンション」のワード検索でunitoに辿り着く方は、スマホよりもPC利用の方が多い。恐らく滞在が長いことから、PCで腰を据えてお部屋探しをするのではと仮説を立てています。それであれば物件一覧だけでなく、位置情報も同時に把握できるマップがあった方がいいのではと考えました。
またunitoは外国人ユーザーの方も多くいらっしゃいます。そのため海外のプラットフォームサービスのUIも研究しました。そこでも物件一覧とマップが並んでるようなUIが多かったんです。海外の方に馴染みのあるUIが良い、といった意味でもこの構成に落ち着きました。
田村)日本人は地名を見れば、ある程度アクセスや位置関係を想像できると思います。一方で海外の方は地名だけでは想像しづらいですよね。マップ機能により羽田空港や観光地などからの位置関係がわかると、滞在先を決めやすいのではという思いもありました。
情報の強弱にこだわった、物件一覧カードとマップ機能の共存
田村)物件一覧カードとマップ機能が共存したデザイン。どういったこだわりを込めましたか?
住山)unitoは泊まるプランもあるので、一般的な賃貸住宅サイトと比べて物件一覧ページに出したい情報が多くなりがちです。アクセスや価格、そして在庫情報。これらを1つのカードに収めなければいけません。
さらにunitoはPCでの使用が多いとお話ししましたが、一方でその多くはノートパソコンでの利用です。そのため小さな画面でも多くの部屋を表示できるように、情報の強弱にこだわりコンパクトさを意識しました。何度も試行錯誤したので、最終的な形になるまで10回ほど作り直しました。
具体的には、従来重視していた物件名や物件タイプ(レジデンス / カプセルタイプなど)よりも、アクセスや価格情報の方が大事だよね、といったような点です。ファーストビューで大事な情報を見てもらう。情報の強弱にこだわりましたね。
田村)なるほど。マップと物件一覧カードの情報も連動していて良い感じですよね。
住山)ありがとうございます。マップの見た目にも配慮しました。これまでは物件ごとの詳細ページにGoogle mapをそのまま埋め込みしていたところを、お部屋探しにおいて大事な情報(路線・道路・スポットのアイコン)を表示させることで利便性を意識しました。
スマホの小さな画面、どうやってマップと物件一覧を同時に収めるか
田村)スマホ表示もパソコンと違いますよね。特にこだわったポイントはどこですか?
住山) 実はスマホでマップと物件一覧を同時に表示するのは、すごく難しいんですよね。マップの操作感を邪魔せず、かつ物件一覧もぱっと見でわかりやすい必要がありました。
そこで今回の開発では、画面の上半分にマップ、下半分に一覧を表示する構成にしました。マップをメインで使いたい方は、マップをタップして下にスライドすれば画面全体にマップが広がります。
逆に一覧を重視したい方は、下半分を上にスライドすることで一覧だけを表示できる。こうした動きは、エンジニアチームにこだわっていただきました。
また今回から、PCとスマホで同一の物件一覧カードを使用しています。デバイス間で情報の一貫性を保つことと、コンポーネント運用の効率化を狙いとしています。
田村)素材を統一したことで、情報の整合性と運用コストの削減を同時に達成できましたね。開発面でも、PC版とスマホ版を個別にメンテナンスする必要がなくなり、リソースが半分になる。その分、ユーザー体験の向上など、本来時間をかけるべき場所にリソースを割けるようになりました。
住山)デバイスごとにデザインを最適化するサイトも多いですが、それでは運用コストがかかります。ユーザー視点でも、PC / スマホどちらで検索しても同じ情報が手に入る方がいいのではと考えています。
田村)とはいえ、スマホの画面は小さいという物理的な制約があります。その限られたスペースの中で、物件一覧カードに必要な情報をどう収めるか。解析結果も含めた設計を、最後までやりきることができました。
住山)SEOの観点でも、検索エンジンはスマホ表示を基準に評価するため、スマホでしっかり情報が収まる設計にできたのは良かったポイントです。
田村)物件一覧ページの絞り込み機能もこだわりましたよね。
住山)はい。単純にマップの要素を増やした分、今までの絞り込み機能が全て画面に収まらなくなりました(笑)。「検索体験をより良くする」という意味でも、何かを追加するためには何かを弱くしないといけません。
そこでGoogleアナリティクスで約4ヶ月間の利用データを分析しました。その結果、頻繁に使われる条件と、ほとんど使われていない条件の差が明確に分かれました。そこで “すべてを並べる” のではなく、“実際に使われているものだけを残す” という方針に転換。ユーザーが迷わず、直感的に使える絞り込みUIへと再設計しました。
田村)これはSEO施策の点でも、リンク構造をより良くする側面もあるので画期的で驚きました。
例えば物件タイプの絞り込み。今までサービスアパートメント(SA)やアパートメントホテル(AH)など、馴染みのない物件タイプも説明を入れずに運用していました。今回からはすでにカードに物件タイプが記載されていて。住山さんがこの施策を出してきてくれた時には「革命だ」と思いました。
画面左:カードそれぞれに「SA / AH」など物件タイプが記載されている。
基盤が整ってきた今、真にユーザーファーストなプロダクトへと進化させたい
田村: 今回のリニューアルに続き、今後はトップページや詳細ページ、申し込みページの開発も進んでいきます。今後のこだわりについて教えてください。
住山: コンセプトは一貫して「住む」と「泊まる」の最適な体験に特化した情報の出し方を追求していきます。トップページや物件詳細ページでも、住む / 泊まるの入り口をより分かりやすくして、それぞれの目的に最適化した情報を提供していく予定です。
今回「住む」と「泊まる」の入り口を分かりやすく整理しましたが、これはまだ土台作りに過ぎません。今後の目標である自社予約比率の向上に向けて、海外ユーザーがストレスなく予約できる体験になっているか、表現がネイティブに伝わるものになっているか。競合と比較して足りない部分がないか。そういった点を一緒に磨き上げていきたいと思ってくださる方ですね。
ー 「住む」と「泊まる」の両方を高いレベルで両立させるのは、非常に難易度が高いことだと思います。だからこそ開発スピードと、ユーザーへの深い理解が重要になりますね。
住山: ありがたいことに現時点で、外国人の方々にも多くご利用いただいています。今後は、よりユーザー起点で行動を深掘りしてデザインに生かしたいですね。
田村: 基盤が整ってきた今、ここからはユーザーヒアリングやUXリサーチを加速させます。単に機能を作るのではなく、真にユーザーの行動に沿ったプロダクトへと進化させていきたいです。
0から1を作るフェーズから、10を100に広げていくフェーズだと思っていて。この挑戦に興味を持ってくださるエンジニア、デザイナー、PM、UXリサーチャーなど、職種を問わず一緒に走ってくれる仲間がいたら嬉しいです!