Ubie Vitalsの取り組み紹介

by 8845musign

Slide 1

Slide 1 text

Ubie Vitalsの取り組み紹介 2024 / 4 / 29 Ubie株式会社横内宏樹半熟デザインシステム vol.1

Slide 2

Slide 2 text

2 発表者 2 腹筋ローラーの力を信じろ ● 業務システムの開発経験が多いフリーランスです ● UIデザイン・要件定義・フロントエンドなど ● 業務委託でUbieさんにお世話になっています ● Ubie Vitalsの構築が主な仕事です ● アクセシビリティ好事例応募に向けたアクセシビリティチェックなんかも担当しました X：@8845musign GitHub：@8845musign

Slide 3

Slide 3 text

3 アジェンダ Ubie Vitalsの取り組み紹介 1. Ubie Vitalsの出現と失敗 2. 再始動 3. 具体的な施策 4. 評価点 5. 反省・課題点 6. まとめ

Slide 4

Slide 4 text

4 Ubie Vitalsの出現と失敗

Slide 5

Slide 5 text

5 ● 生産基盤の構築を目的として、コストパフォーマンス優先で個別に改善を行っていた ● 結果、ツールやドキュメントが分散し、メンバーのオーバーヘッドが増加 ● 解決として、分散したツールやドキュメントをとりまとめるUbie Vitalsが誕生 ○ Notionベースでドキュメントを作った ○ 実際に動作するサンプルを確認するため、Storybookも平行管理 Ubie Vitalsの出現 Ubie Vitalsの取り組み紹介

Slide 6

Slide 6 text

6 ● 組織の統廃合にともなうNotion管理の煩雑化 ● ドキュメントの多重管理、NotionとStorybookの両方を見なくてはならない ● ところどころルールやコンポーネントが足りておらずエンジニアに受け入れられなかった失敗 6

Slide 7

Slide 7 text

7 失敗 7 そして、志半ばのドキュメントだけが残った……

Slide 8

Slide 8 text

8 再始動 🔥

Slide 9

Slide 9 text

9 再び高まる機運 Ubie Vitalsの取り組み紹介人の増加で効率化がより効果的に、構築手法の統一化ニーズも増えたプロダクトの複雑化エンジニアの増加 ✕

Slide 10

Slide 10 text

10 再び高まる機運 Ubie Vitalsの取り組み紹介人の増加で効率化がより効果的に、構築手法の統一化ニーズも増えたプロダクトの複雑化エンジニアの増加 ✕ アクセシビリティの品質担保

Slide 11

Slide 11 text

11 以前の反省を活かした方針 Ubie Vitalsの取り組み紹介活動の継続性作り込んでからのシェア ✕

Slide 12

Slide 12 text

12 具体的な施策

Slide 13

Slide 13 text

13 閲覧性を重視して独自実装したドキュメントサイト 13 実は、だいぶ前から公開状態だったトップページ Buttonコンポーネントページ

Slide 14

Slide 14 text

14 コンポーネントの整理と拡充コンポーネントの一覽矩形が羅列されたボックスコンポーネントのサンプル

Slide 15

Slide 15 text

15 コンポーネントのレイアウトをまとめたコンテンツフォームのレイアウトをまとめたページ

Slide 16

Slide 16 text

16 各種リポジトリの OSS化 16 OSS公開された各種リポジトリ

Slide 17

Slide 17 text

17 評価点

Slide 18

Slide 18 text

18 継続的な活動できる Ubie Vitalsの取り組み紹介 ● 片手間になりやすいデザインシステムの活動だが、限られた時間でも役割分担が明確なことで継続してアウトプットをだせている ● 正社員メンバーが意思決定やフィードバックのとりまとめ、社内浸透などを行う ● 業務委託メンバーが実際の構築に注力する ○ 方針が共有されていればある程度独自で動ける

Slide 19

Slide 19 text

19 シェア直後から使ってもらえた Ubie Vitalsの取り組み紹介ドキュメントを読んで質問をもらえた早速Ubie UIを使っているコードを発見

Slide 20

Slide 20 text

20 シェア直後から使ってもらえた Ubie Vitalsの取り組み紹介ドキュメントを読んで質問をもらえた早速Ubie UIを使っているコードを発見　想像以上に、CSSを書きたくなかった？

Slide 21

Slide 21 text

21 チームを超えたコントリビュート Ubie Vitalsの取り組み紹介社内外からPRをいただく

Slide 22

Slide 22 text

22 PRとして効果的であった Ubie Vitalsの取り組み紹介多くのいいねをいただいたXの公開ポスト

Slide 23

Slide 23 text

23 PRとして効果的であった Ubie Vitalsの取り組み紹介多くのいいねをいただいたXの公開ポスト公開しよう！デザインシステム

Slide 24

Slide 24 text

24 反省・課題点

Slide 25

Slide 25 text

25 他メンバーの利用スタートが遅れた Ubie Vitalsの取り組み紹介 ● 実際にエンジニア・デザイナーの作業に直接影響しない事柄に時間をさいてしまった ○ ドキュメントサイトの構築に時間をかけすぎた ■ コンポーネントの背景や意義など張り切ってコンテンツを書いた ○ 既存ページへのデザイントークンの統一 ■ 新規の開発では既存は気にしてない ■ 対応するにしても、継続して開発している機能を対応すべきだった

Slide 26

Slide 26 text

26 様々な乖離 Ubie Vitalsの取り組み紹介 ● 実プロダクトとデザインシステム ○ 実際のプロダクトを見ずにデザインシステムを育てる期間が長かった ○ プロダクト導入を開始したタイミングで不具合や不足したコンポーネントなどが多く見つかった ● Figmaとデザインシステム ○ Vitals未使用のデザインが存在し、エンジニアを逆に惑わせる箇所がある

Slide 27

Slide 27 text

27 様々な乖離 Ubie Vitalsの取り組み紹介 ● 実プロダクトとデザインシステム ○ 実際のプロダクトを見ずにデザインシステムを育てる期間が長かった ○ プロダクト導入を開始したタイミングで不具合や不足したコンポーネントなどが多く見つかった ● Figmaとデザインシステム ○ Vitals未使用のデザインが存在し、エンジニアを逆に惑わせる箇所があるどうする？ ● プロダクト・会社でのゴールから逆算してロードマップを引いて対応していく ● 浸透＆浸透＆浸透

Slide 28

Slide 28 text

28 まとめ

Slide 29

Slide 29 text

29 まとめ Ubie Vitalsの取り組み紹介エンジニア・デザイナーに向き合って価値提供を続けていくある程度作り込み公開したことで社内外からリターンはあった