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

スライド概要

2021/03/02 Ltech#14 「LIFULL HOME'S」のフロントエンドについて語り尽くします!

海老澤萌子

profile-image

株式会社LIFULL

@LIFULL

作者について:

LIFULL HOME'Sを運営する株式会社LIFULLのアカウントです。 LIFULLが主催するエンジニア向けイベント「Ltech」等で公開されたスライド等をこちらで共有しております。

スライド一覧
シェア
埋め込む»CMSなどでJSが使えない場合

公開日

2021-03-01 21:12:00

各ページのテキスト

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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