Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Wantedly の Dropdown UI カイゼンの道(調査・設計編)

shintaro
November 24, 2023
140

Wantedly の Dropdown UI カイゼンの道(調査・設計編)

https://wantedly.connpass.com/event/300025/
にて発表した内容です。

shintaro

November 24, 2023
Tweet

Transcript

  1. © 2023 Wantedly, Inc.
    Wantedly の Dropdown UI
    カイゼンの道(調査・設計編)
    Wantedly x Qiita Meetup #1
    Nov. 24 2023 - Shintaro Kawabe

    View full-size slide

  2. © 2023 Wantedly, Inc.
    自己紹介
    shintaro
    sh1ntaro_dev
    s-kawabe
    所属
    ウォンテッドリー株式会社
    ・Visit Growth Squad
    ・Frontend Chapter
    ・Design System Guild
    React / TypeScript / Figma /
    DesignSystem
    好きな技

    ダーツ / カラオケ / お酒 / 派手髪 /
    ずっと真夜中でいいのに。
    趣味
    s_kawabe

    View full-size slide

  3. 技術書店で書きました
    © 2023 Wantedly, Inc.
    https://techbookfest.org/product/h7dbA2JgvZJZteH84rfk4P?
    productVariantID=kepLaewLt8EqAmrRFA1UyT
    > 第5章 Design System を見据えた Select UI
    設計ガイド
    ・ウォンテッドリーのデザインシステム
    ・フロントエンドのコンポーネント課題感
    ・課題解決のための新しい設計
    もう少し具体的に話します󰳕

    View full-size slide

  4. 1. Select,Dropdown UI の課題感
    a. ユースケースを分析する
    b. 実装方法を分析する
    2. 解くべき課題を整理
    3. 新たな設計を考える
    4. PoCをつくる
    5. TODO - この先やること
    © 2023 Wantedly, Inc.
    目次

    View full-size slide

  5. 1. Select,Dropdown UI の課題感
    a. ユースケースを分析する
    b. 実装方法を分析する
    2. 解くべき課題を整理
    3. 新たな設計を考える
    4. PoCをつくる
    5. TODO - この先やること
    © 2023 Wantedly, Inc.
    目次

    View full-size slide

  6. Select, Dropdown UIの課題感
    © 2023 Wantedly, Inc.
    考える前にまず、そもそも
    Select, Dropdown系 UIとは何か?

    View full-size slide

  7. Select, Dropdown UIの課題感
    © 2023 Wantedly, Inc.


    View full-size slide

  8. Select, Dropdown系UIの実装
    1. UI要件がバラバラ (複雑なUIも)
    2. メンテナンス & 標準化不足
    a. 実装方法が統一されていない
    b. 実装の難易度が高い
    Select, Dropdown UIの課題感
    © 2023 Wantedly, Inc.
    具体的に何が起きている?
    なぜそうなっている?
    解決すべき課題なの?

    View full-size slide

  9. 1. UI要件がバラバラ
    - WantedlyのUIにおけるSelect, Dropdownは各所でデザインが異なる
    - 1箇所のみに特化した UIがちらほら存在する
    2. 実装方法が統一されていない
    - Select, Dropdownを実現するためのライブラリが複数導入されていて、それぞれの実
    装方法が存在する
    3. 実装の難易度が高い
    - 新しく実装する際、どのライブラリを使って実装すればいいかわからない
    - 毎回低レイヤを触って実装を組み立てないといけない
    Select, Dropdown UIの課題感
    © 2023 Wantedly, Inc.
    具体的に何が起きているか?

    View full-size slide

  10. Select, Dropdown UIの課題感
    © 2023 Wantedly, Inc.
    なぜそうなっているのか?
    1. UI要件がバラバラ
    - デザインシステムの UIコンポーネントセットに実装がなく、標準化が進まない状態で次々
    に新しいUIデザインが生まれていった影響
    2. 実装方法が統一されていない
    - デザインシステムの UIコンポーネントセットに実装がなく、都度対応するエンジニアが技
    術選定を行った
    - 既存のライブラリ実装では実現できない要件が現れた
    - より良い開発体験のため、新しいライブラリを導入した
    3. 実装の難易度が高い
    - 低レイヤの処理を扱いやすく抽象化したモジュールがない
    - 一定のユーザー体験とアクセシビリティ品質を担保するのが難しい

    View full-size slide

  11. 1. Select,Dropdown UI の課題感
    a. ユースケースを分析する
    b. 実装方法を分析する
    2. 解くべき課題を整理
    3. 新たな設計を考える
    4. PoCをつくる
    5. TODO - この先やること
    © 2023 Wantedly, Inc.
    目次

    View full-size slide

  12. > 1.UI要件がバラバラ
    ユースケースを分析する
    © 2023 Wantedly, Inc.

    View full-size slide

  13. ユースケースを分析する
    © 2023 Wantedly, Inc.

    View full-size slide

  14. ユースケースを分析する
    © 2023 Wantedly, Inc.
    気づいたこと
    ・確かに見た目の時点で相当ばらつきがあった
    ・世に見ない特徴的なUIのものもあった
    ・振る舞いとしてはPopoverだが、Dropdownという名前になって いるものも
    あった
    ・デザインシステムがない環境で次々とデザインが作成されていった影響による
    ものという雰囲気はやはり感じた
    …etc

    View full-size slide

  15. 1. Select,Dropdown UI の課題感
    a. ユースケースを分析する
    b. 実装方法を分析する
    2. 解くべき課題を整理
    3. 新たな設計を考える
    4. PoCをつくる
    5. TODO - この先やること
    © 2023 Wantedly, Inc.
    目次

    View full-size slide

  16. > 2.実装方法が統一されていない
    > 3.実装の難易度が高い
    実装方法を分析する
    © 2023 Wantedly, Inc.

    View full-size slide

  17. 実装方法を分析する
    © 2023 Wantedly, Inc.
    現状の実装パターン
    ・react-spectrum (react-aria, react-stately)
    ・downshift
    ・floating-ui (@floating-ui/react)
    ・popper.js (react-popper)
    ・ライブラリを使わず実装

    View full-size slide

  18. 1. Select,Dropdown UI の課題感
    a. ユースケースを分析する
    b. 実装方法を分析する
    2. 解くべき課題を整理
    3. 新たな設計を考える
    4. PoCをつくる
    5. TODO - この先やること
    © 2023 Wantedly, Inc.
    目次

    View full-size slide

  19. 解くべき課題を整理
    © 2023 Wantedly, Inc.
    1. UI要件がバラバラ
    - NO
    それが必要なデザインであるならば複数の UI要件があること自体は許容すべきこと 🤔
    その代わり、ある程度のパターン化やグルーピングは必要。
    2. 実装方法が統一されていない
    3. 実装の難易度が高い
    - YES
    メンテナンス性や開発スピードの観点で開発者に明らかに負担を与えている問題
    である。迷わずに開発ができてメンテナンスも容易に行える仕組みづくりが必要。

    View full-size slide

  20. 1. Select,Dropdown UI の課題感
    a. ユースケースを分析する
    b. 実装方法を分析する
    2. 解くべき課題を整理
    3. 新たな設計を考える
    4. PoCをつくる
    5. TODO - この先やること
    © 2023 Wantedly, Inc.
    目次

    View full-size slide

  21. 新たな設計を考える
    © 2023 Wantedly, Inc.

    View full-size slide

  22. 新たな設計を考える
    © 2023 Wantedly, Inc.
    は、すでに一部実装されていた👀

    View full-size slide

  23. 新たな設計を考える
    © 2023 Wantedly, Inc.

    View full-size slide

  24. 新たな実装を考える
    © 2023 Wantedly, Inc.
    技術選定
    ・react-spectrum (react-aria, react-stately)
    ・downshift
    ・floating-ui (@floating-ui/react)
    ・popper.js (react-popper)
    ・ライブラリを使わず実装
    ・zag.js
    ・Headless UI
    ・Radix UI
    ・Mantine

    View full-size slide

  25. 新たな実装を考える
    © 2023 Wantedly, Inc.
    技術選定
    ・react-spectrum (react-aria, react-stately)
    ・downshift
    ・floating-ui (@floating-ui/react)
    ・popper.js (react-popper)
    ・ライブラリを使わず実装
    ・zag.js
    ・Headless UI
    ・Radix UI
    ・Mantine
    ・a11yの品質担保が難しい
    ・時間がかかる
    ・PoC実装と修正
    ・メンテナンス

    View full-size slide

  26. 新たな実装を考える
    © 2023 Wantedly, Inc.
    技術選定
    ・react-spectrum (react-aria, react-stately)
    ・downshift
    ・floating-ui (@floating-ui/react)
    ・popper.js (react-popper)
    ・ライブラリを使わず実装
    ・zag.js
    ・Headless UI
    ・Radix UI
    ・Mantine
    ・HeadlessなUIライブラリの中でも高レイヤを担保
    するもののため
    ・先にあげたUI要件を全て達成するのが難しい

    View full-size slide

  27. 新たな実装を考える
    © 2023 Wantedly, Inc.
    技術選定
    ・react-spectrum (react-aria, react-stately)
    ・downshift
    ・floating-ui (@floating-ui/react)
    ・popper.js (react-popper)
    ・ライブラリを使わず実装
    ・zag.js
    ・Headless UI
    ・Radix UI
    ・Mantine ・popper.jsはまだ保守が続けられているものの
    floating-uiに力を入れている。
    あえてこっちを採用するメリットは薄そう

    View full-size slide

  28. a11y Star
    カスタマイズ

    APIの
    わかりやすさ
    latest
    version
    spectrum ○ 9.9k 中 ▲ 3.19.0
    floating-ui ○ 27.2k 高 ○ 0.26.2
    downshift ○ 11.6k 中 ▲ 8.2.3
    zag.js ○ 3.3k 中 ▲ 0.30.0
    新たな実装を考える
    © 2023 Wantedly, Inc.
    技術選定

    View full-size slide

  29. 新たな実装を考える
    © 2023 Wantedly, Inc.
    技術選定

    View full-size slide

  30. 新たな実装を考える
    © 2023 Wantedly, Inc.
    技術選定
    ・react-spectrum (react-aria, react-stately)
    ・downshift
    ・floating-ui (@floating-ui/react) 🏆
    ・popper.js (react-popper)
    ・ライブラリを使わず実装
    ・zag.js
    ・Headless UI
    ・Radix UI
    ・Mantine

    View full-size slide

  31. 1. Select,Dropdown UI の課題感
    a. ユースケースを分析する
    b. 実装方法を分析する
    2. 解くべき課題を整理
    3. 新たな設計を考える
    4. PoCをつくる
    5. TODO - この先やること
    © 2023 Wantedly, Inc.
    目次

    View full-size slide

  32. PoCをつくる
    © 2023 Wantedly, Inc.
    まにあわず!!
    (尺的にも)
    実装編としてブログか別の
    登壇の際に発表します ...

    View full-size slide

  33. 1. Select,Dropdown UI の課題感
    a. ユースケースを分析する
    b. 実装方法を分析する
    2. 解くべき課題を整理
    3. 新たな設計を考える
    4. PoCをつくる
    5. TODO - この先やること
    © 2023 Wantedly, Inc.
    目次

    View full-size slide

  34. 1. ベース実装のPoCを作る
    a. サンプルでこれを使ったSelectやComboboxなどの
    具体コンポーネントをつくる
    2. ユースケースをもとにUIを正しくパターン化する
    a. Figmaで絵にする
    b. デザイナーと相談する
    3. パターンごとにデザインシステムに具体コンポーネントを追加していく
    4. アプリケーションに少しずつ反映する
    TODO - この先やること
    © 2023 Wantedly, Inc.

    View full-size slide

  35. - JavaScript無しでも機能を実現できるように
    -
    -
    - 🚨
    - 🚨
    - 🚨
    TODO - この先やること
    © 2023 Wantedly, Inc.

    View full-size slide

  36. 細部までUIと向き合っていきましょう
    Thank you
    © 2023 Wantedly, Inc.

    View full-size slide

  37. ありがとうございました。
    Thank you
    © 2023 Wantedly, Inc.

    View full-size slide

  38. Welcome!!
    © 2023 Wantedly, Inc.
    https://www.wantedly.com/projects/761812
    カジュアルに話しましょう🤝

    View full-size slide