【Ltech#14】新しい検索体験とデザインシステム

新しい検索体験と デザインシステム プロダクトエンジニアリング部 海老澤萌子

自己紹介 海老澤 萌子 ・ 新卒入社 ・入社時は デザイナー ・フロント歴 年半くらい ・現在は賃貸領域の開発部門に所属 2 © . 本 書 の無断 転載、 複製を 固く禁 じます 。

新しい検索体験 3 © . 本 書 の無断 転載、 複製を 固く禁 じます 。

4 © . 本 書 の無断 転載、 複製を 固く禁 じます 。

新しい検索体験 ひとことで言うと ゆるい検索条件でおウチを探せるサービス 5 © . 本 書 の無断 転載、 複製を 固く禁 じます 。

新しい検索体験 ここがすごいぞ 叶えたい条件を設定できる できれば 必須で設定できる 条件合致度の表示 「こんな暮らしがしたい！」を 従来のこだわり条件はすべて 従来のソートに「条件合致度」を 検索条件へ変換。 「必須」設定で、マイナーな条 追加。合致度が可視化されること はじめてのおウチ探しでも楽々 件を入れると検索にヒットしな によって、より理想のおウチに 検索。 い……ということも多々。 出会いやすくなっています。 「できれば」で設定すると、条 件が合致しない場合も検索結果 に出るようになります。 6 © . 本 書 の無断 転載、 複製を 固く禁 じます 。

フロント構成 7 © . 本 書 の無断 転載、 複製を 固く禁 じます 。

フロント構成 8 © . 本 書 の無断 転載、 複製を 固く禁 じます 。

フロント構成 9 © . 本 書 の無断 転載、 複製を 固く禁 じます 。

10 © . 本 書 の無断 転載、 複製を 固く禁 じます 。

基本形 11 © . 本 書 の無断 転載、 複製を 固く禁 じます 。

今回の構成 12 © . 本 書 の無断 転載、 複製を 固く禁 じます 。

の棲み分け ・複数箇所で利用する大きめの ・ページ単位での細かい改修があまり入らないもの → どのページでも同じものを見せたい場合 賃料の条件変更フォーム ・ページ依存の ・ビジネスロジックの制約が強く他への再利用が難しいもの → 依存関係・デグレを気にせずガシガシ改修できる 叶えたい条件の賃料変更フォーム 13 © . 本 書 の無断 転載、 複製を 固く禁 じます 。

に乗せない理由 不要説 ・完全に同じレイアウト・別ルーティング で見せるページが現状無い ・大量生産される場合はひょっとしたら使うのかも にのせると ・ 作成や依存注入がすこぶる辛い ・ただでさえ になりがちなので、 のふるまいやハンドリングは 14 がやりづらい へ委譲しておきたい © . 本 書 の無断 転載、 複製を 固く禁 じます 。

よかったところ との相性がとても良い💮 ・デザインができる前に ・コーディング を生産しまくっていた 上で動作確認まで出来るので楽 ・粒度が小さく、責務も少ないので も書きやすい 後からじわじわ効いてくる ・ 量と開発速度は比例する ・チームで成果物レビュー ・それなりに 15 改善版モック作成、が で完結 ができている状態なので、そのまま に出したりした © . 本 書 の無断 転載、 複製を 固く禁 じます 。

改善したいところ 粒度のチューニング ・ の線引きは難しい ・世間一般の より を小さく作りすぎた（体感） だけでいいのでは、という疑念に駆られる ・ 間の ”余白” の概念が加わると再利用性が薄くなる ・ を生産した後の改修に苦しむ ・ と だけでいいのではないのか…？ ・イベントハンドラ再生産つら… 生体 必要だわ… ・以下ループ 16 © . 本 書 の無断 転載、 複製を 固く禁 じます 。

17 © . 本 書 の無断 転載、 複製を 固く禁 じます 。

18 © . 本 書 の無断 転載、 複製を 固く禁 じます 。