Slide 1

Slide 1 text

Design System Guild Design System 開発組織の1年を振り返る Sep. 18 2024 - Tsuyoshi Hara © 2024 Wantedly, Inc.

Slide 2

Slide 2 text

自己紹介 名前: 原 剛士 (ハラツヨシ) / @chloe463 所属・役職: ● Quality Control Squad ● Frontend Chapter Leader ● Design System Guild © 2024 Wantedly, Inc. 最近の業務でハマっているもの : ESLint の v9 対応 最近の趣味でハマっているもの : Baba is You

Slide 3

Slide 3 text

みなさんどうやって デザインシステムの開発・運用を していますか? © 2024 Wantedly, Inc.

Slide 4

Slide 4 text

デザインシステムの 運用難しい © 2024 Wantedly, Inc.

Slide 5

Slide 5 text

© 2024 Wantedly, Inc. デザインシステム開発・運用の難しさ ● 発起人やコアメンバーにしかノウハウ・知見が溜まっていない…。 ● Figma にコンポーネントはあるのにドキュメントはないの...? ● メイン業務に時間が取られて開発が進まない...。 ● コンポーネントライブラリの開発が進まない...。 ● etc…

Slide 6

Slide 6 text

Design System Guild © 2024 Wantedly, Inc. デザインシステム開発・運用をするために

Slide 7

Slide 7 text

目次 1. Design System Guild とは 2. なぜ Guild を立ち上げたのか 3. Guild で何をしているか 4. 立ち上げから1年経っての振り返り © 2024 Wantedly, Inc.

Slide 8

Slide 8 text

Design System Guild とは デザインシステム開発のための組織 © 2024 Wantedly, Inc.

Slide 9

Slide 9 text

Design System Guild とは © 2024 Wantedly, Inc. デザインシステムに関する課題を 解決するために立ち上がった組織

Slide 10

Slide 10 text

© 2024 Wantedly, Inc. Guild とは? ウォンテッドリーの組織の一形態 https://speakerdeck.com/wantedly/wantedly-recruitment-brochure?slide=20 前提知識: ウォンテッドリーの組織構成の紹介

Slide 11

Slide 11 text

自己紹介 名前: 原 剛士 (ハラツヨシ) / @chloe463 所属・役職: ● Quality Control Squad ● Frontend Chapter Leader ● Design System Guild © 2024 Wantedly, Inc. 最近の業務でハマっているもの : ESLint の v9 対応 最近の趣味でハマっているもの : Baba is You

Slide 12

Slide 12 text

© 2024 Wantedly, Inc. あるトピックの解決のために集結した組織 Guild とは? ウォンテッドリーの組織構成の紹介

Slide 13

Slide 13 text

© 2024 Wantedly, Inc. あるトピックの解決のために集結した組織 Guild とは? ウォンテッドリーの組織構成の紹介 ● デザインシステムを日常的に使用する デザイナー、Webフロントエンドエンジニ ア、モバイルエンジニアで構成 ● 毎週ミーティングを実施

Slide 14

Slide 14 text

なぜ Guild を立ち上げたのか 少数の有志 / 個人的なもの → 組織的な運営 © 2024 Wantedly, Inc.

Slide 15

Slide 15 text

© 2024 Wantedly, Inc. Guild 立ち上げ以前のデザインシステム運営 少数の有志による活動

Slide 16

Slide 16 text

© 2024 Wantedly, Inc. Guild 立ち上げ以前のデザインシステム運営 有志による活動 ● 発起人であったデザインマネージャーと数人の Web フロントエンドエンジニアを中心 に開発が行われていた。 ○ 各種コンポーネントについての議論 ○ React ライブラリの実装など ● 定例などはなく、都度使用時に困ったことなどを解消しつつ開発を進めていた。

Slide 17

Slide 17 text

© 2024 Wantedly, Inc. Guild 立ち上げ以前のデザインシステム運営 その結果? ● 散発的に議論が行われており、議論の結果生まれた結論やドキュメントのまとまりが ない状態であった。 ● 当時デザインシステムを積極的に開発していたメンバーの大半が退職しており、いわ ゆるロストテクノロジーになってしまっていた。

Slide 18

Slide 18 text

© 2024 Wantedly, Inc. Guild 立ち上げ以前のデザインシステム運営 顕在化した課題 ● トークンやコンポーネントの使い方・定義などが議論に参加したメンバーの 頭の中にしかなく、使い方が分からない …。 ● 始めに考えられていた思想が良くわからない …。

Slide 19

Slide 19 text

© 2024 Wantedly, Inc. Guild 立ち上げの理由 有志による活動ではなく 組織として継続的に 開発・運用できる状況を作ろう

Slide 20

Slide 20 text

Guild で何をしているか Design System 1.0 を目指す © 2024 Wantedly, Inc.

Slide 21

Slide 21 text

© 2024 Wantedly, Inc. Design System Guild が目指すもの Design System 1.0 / だれでも使えるデザインシステム ● デザイントークンやコンポーネントについての定義や使い方などをまとめた ドキュメントを策定 ● 各プラットフォーム向けの実装を用意 ○ Figma コンポーネント ○ Web アプリ用のコンポーネントライブラリ ○ Mobile アプリ用のコンポーネントライブラリ

Slide 22

Slide 22 text

© 2024 Wantedly, Inc. デザインシステムの課題を解決するための組織 Design System Guild (再掲) ● デザインシステムを日常的に使用する デザイナー、Webフロントエンドエンジニ ア、モバイルエンジニアで構成 ● 毎週ミーティングを実施

Slide 23

Slide 23 text

© 2024 Wantedly, Inc. 定例を実施 Guild でやっていること ● デザインシステムに関しての課題提起を する場。 ● 疑問点についてこの場で解消できること もある。 ● 詳細は個別に issue を作って別途議論。

Slide 24

Slide 24 text

© 2024 Wantedly, Inc. 定例で話している課題の例 Guild でやっていること

Slide 25

Slide 25 text

© 2024 Wantedly, Inc. 定例で話している課題の例 Guild でやっていること ● セマンティックトークンについて → 新しい概念作成の提案 ● コンポーネントのバリエーションについての整理 ● Typography の整理 ● Elevation Null って共通概念? → 疑問解消 ● Shape について → 新トークンの追加 既存概念の整理・見直し

Slide 26

Slide 26 text

© 2024 Wantedly, Inc. ドキュメント化を推進 Guild でやっていること デザイントークンやコンポーネントについて 定義があやふやなところを詰め、 ドキュメント化を進めている

Slide 27

Slide 27 text

© 2024 Wantedly, Inc. Figma コンポーネントの整備 Guild でやっていること

Slide 28

Slide 28 text

© 2024 Wantedly, Inc. コンポーネントセットの整備 Guild でやっていること

Slide 29

Slide 29 text

立ち上げから1年経っての振り返り 良かったところ・課題 © 2024 Wantedly, Inc.

Slide 30

Slide 30 text

© 2024 Wantedly, Inc. 良かったポイント 👍 1年経過しての振り返り ● Guild メンバーから課題提起がされるようになったこと。 ○ 数人の有志だけしか改善活動を行っていなかったが、Guild という組織にし たことで関わるメンバー全員から課題が集まるようになった。 ○ よりオーナーシップをもって改善に取り組めるようになった。 ● 実際に定義が見直されるコンポーネントなどが登場した。 ● 結果としてより使いやすいシステムに近づいていると感じている。

Slide 31

Slide 31 text

© 2024 Wantedly, Inc. これからの伸びしろ 🧐 1年経過しての振り返り ● Guild のタスクのために時間を割くことは依然として難しい。 ● Squad のタスクのほうが優先度が高いため、 Guild のタスクをアサインしてもなかなか進めづらいケースがある。 → マネージャー陣と調整の上   Squad 化? / SquadとGuild のタスクバランスの調整をもっといい感じに行う   などを考えている。

Slide 32

Slide 32 text

まとめ © 2024 Wantedly, Inc.

Slide 33

Slide 33 text

© 2024 Wantedly, Inc. まとめ ● デザインシステムを継続的に開発・運用するために Design System Guild を 作った。 ● 定例ミーティングを実施したり、ドキュメント化を推進することで、 Design System 1.0 といえるようなものを目指している。 ● Guild メンバーそれぞれから課題提起されることで、以前より議論が活発になっ たり、理解が深まったりしている。 ● 一方、Guild タスクの進め方については改善の余地があり、今後の課題である。

Slide 34

Slide 34 text

© 2024 Wantedly, Inc. より詳細を知りたい方 Guild 発足に関してまとめたブログや フロントエンドに特化して、これまでの歩みをまとめた スライドがあります

Slide 35

Slide 35 text

© 2024 Wantedly, Inc. ありがとうございました!