SUUMOの検索画面のUI
物件を探すサイトでどのように検索させるか
2022/12/12
入口画面と結果画面で検索UIが分かれている
入口画面では、画面いっぱいに項目を表示
まず入口画面
https://gyazo.com/1bdb8e6830297f2e00016f7ebe56e69b https://suumo.jp/chintai/osaka/city/
検索条件が複雑すぎることもあり、全ての条件を一覧している
自由記入は存在しない
項目はやたら多いが、整理されているのでそこまで「うっ」とはならない
寧ろ、自分の条件を細かく指定できる!とポジティブになりそう
必須項目が少ないのも良い
https://gyazo.com/76a0c0f6d1b07fda231c4b6f41133703
実装の大変さ
どこを探せばよいのか明確なのでクエリの実装も割と単純になりそう
viewの実装が面倒そうだけど、同じUIの使いまわしなのでそこまで大変ではなさそう
検索結果のページ
https://i.gyazo.com/634ae0800cfa2c98ecbed3ce05e89ffd.mp4
サイドバーに最低限の絞り込みがある
さらに詳細に検索したい場合はモーダルを開く
モーダル内でcheckをつけると該当する物件の数字がリアルタイムで表示される
これ便利で良いのに、なぜ最初の画面にはないの?になったmrsekut.icon