泥臭いデザインシステムの育て方

Transcript

1. ©️ Gaudiy Inc. 泥臭いデザインシステムの育て方
2. ©️ Gaudiy Inc. 世に言う”デザインシステム” 定義広すぎるし、 公開されてるアウトプットは綺麗すぎないです？
3. ©️ Gaudiy Inc. 専任で開発するチームがいて 原則から枝葉まで綺麗に整理・公開されていて 知見かつ憧れ！ ！
4. ©️ Gaudiy Inc. そんな余裕はスタートアップにはない けど、 美味しいところは欲しい そのために...
5. ©️ Gaudiy Inc. 泥臭く作るデザインシステムがあってもいいじゃないの
6. ©️ Gaudiy Inc. Gaudiyの組織について どう作ってきたか 現状の課題 これからの作り方 1 2 3 4 アジェンダ
7. ©️ Gaudiy Inc. Gaudiyの組織について振り返り
8. 創業〜シード期 （2018~2019） 01_COMPANY ヒストリー ©️ Gaudiy Inc. 8 @下北 2018.05 2人 2019.01 創業期 @永福町 下北沢の一軒家、 通称「Gaudiyハウス」に移転 2019.01 創業は永福町にある マンションの一室でスタート 2018.05
9. 01_COMPANY ヒストリー ©️ Gaudiy Inc. 9 コロナ禍に突入、 フルリモートワーク化 2021.04 最大80人まで収容可能な 笹塚オフィスに移転 2021.03 2020.01 8人 2021.01 20人 2022.01 @笹塚 シリーズA （2020~2022）
10. 01_COMPANY ヒストリー ©️ Gaudiy Inc. 10 Financial Labs設立 2023.09 シリーズB資金調達 2022.05 2022.06 45人 2023.01 56人 2023.06 68人 2023.10 79人 シリーズB （2022.05~）
11. 03_PRODUCT コミュニティ ©️ Gaudiy Inc. 28 SOCIAL NETWORK MEDIA STORE OFFICIAL C2C MARKET MISSION GLOBALIZATION AI MANAGEMENT 熱狂的なファンが集まる コミュニティ機能 ファンコミュニティの構築に必要な機能を提供 提供価値 ファン同士の交流を促進するSN§ メディア(公式情報、キャンペーン“ 行動促進のためのミッション,インセンティ¹ 商品販売(デジタル、リアル) 開発中機能 海外ユーザー向け機能（自動翻訳Ö IP公認のCtoCマーケッÈ AIを活用したコミュニティマネジメント機能
12. ©️ Gaudiy Inc. フェーズによって “デザインシステム”に求めるものは全然違う....
13. ©️ Gaudiy Inc. どう作ってきたか
14. 創業〜シード期 （2018~2019） 01_COMPANY ヒストリー ©️ Gaudiy Inc. 8 @下北 2018.05 2人 2019.01 創業期 @永福町 下北沢の一軒家、 通称「Gaudiyハウス」に移転 2019.01 創業は永福町にある マンションの一室でスタート 2018.05
15. ©️ Gaudiy Inc. 当時のアプリケーション
16. ©️ Gaudiy Inc. r 何度も何度も、 できるだけ早く機能を作って、 リリースして、 壊` r Mobile Firstな to Cサービスとして、 100% MUI でそのまま　 提供するのでは、 印象が悪いため多少のこだわりは持ちたf r その中で同じようなデザインやコンポーネントを何回も作りたくない シード期の課題
17. ©️ Gaudiy Inc. 9 Figma上でも、 実装上でもMUIベースにstyleを上書きした　　　 コンポーネントを所持するだけ シード期の”デザインシステム”
18. 01_COMPANY ヒストリー ©️ Gaudiy Inc. 9 コロナ禍に突入、 フルリモートワーク化 2021.04 最大80人まで収容可能な 笹塚オフィスに移転 2021.03 2020.01 8人 2021.01 20人 2022.01 @笹塚 シリーズA （2020~2022）
19. ©️ Gaudiy Inc. 当時のアプリケーション
20. ©️ Gaudiy Inc. a ある程度基礎的な機能は固定化されてき˜ a 新機能開発に関しては、 検証スピードを落としたくなF a “Gaudiyのプロダクト” としてのUIを作ることも価値になってきた ためUIだけの全体更新も行われるよう1 a 開発者・デザイナーの増加により、 暗黙知が共有されないように シリーズA期の課題
21. ©️ Gaudiy Inc. I 実装側にDesignSystem レポジトリを作H I MUIのcss移行の動きやパフォーマンス懸念と合わせて　　　 独自実装6 I storybookなどを介してデザインと連 I デザイン側にDesignSystem Master ファイルを作成 シリーズA期の”デザインシステム”
22. ©️ Gaudiy Inc. 4 存在しないユースケースのために作りすぎなB 4 デザインシステムをブロッカーにはしなB 4 実装の設計としても柔軟な記述を許Q 4 使用の可否を気づきとして、 コラボと議論に繋げる シリーズA期の”デザインシステム”での意識
23. ©️ Gaudiy Inc. 現状の課題
24. 01_COMPANY ヒストリー ©️ Gaudiy Inc. 10 Financial Labs設立 2023.09 シリーズB資金調達 2022.05 2022.06 45人 2023.01 56人 2023.06 68人 2023.10 79人 シリーズB （2022.05~）
25. ©️ Gaudiy Inc. 現在のアプリケーション
26. ©️ Gaudiy Inc. g ある程度基礎的な機能はより固定化されてきb g IPの世界観を表現するためのカスタマイズ性の要求増s g 細かいUIUX, a11y, dark modeなどの品質担保と向上が必要Y g より開発者・デザイナーが増加し、 制約のゆるさとドキュメントの　　 薄さによるキャッチアップの難しさが課題に シリーズB期の課題
27. ©️ Gaudiy Inc. Q DesignSystem レポジトリを拡` Q token, styled, unstyledなど細かく階層わけをしておくこと を活かして必要な部分に対しての変更を適切に行d Q DesignSystem Masterを拡` Q 実装と命名、 メソッドが揃うことを徹 Q コンポーネント単位でのstyleガイドを追記 シリーズB期の”デザインシステム”
28. ©️ Gaudiy Inc. w 横断開発チームの組成を活かして軸にとり、 定義の追加・更新を促H w 実際のユースケースから、 できるだけ制約を加えられるように調y w 加えてドキュメントを追加していくことでキャッチアップしやすR w 既存メンバーの慣れによるバイアスをなくすために、 新メンバー　　 からのフィードバックを大事に シリーズB期の”デザインシステム”での意識
29. ©️ Gaudiy Inc. これから
30. ©️ Gaudiy Inc. Gaudiyも Fanlinkというプロダクトも まだまだ、 検証段階PMFし切ったとは言えない
31. ©️ Gaudiy Inc. あくまでもボトムアップに課題ベースで 終わりなくブラッシュアップしつつ 文化にしていく
32. ©️ Gaudiy Inc. U DesignSystem に取り上げるIssue整理を定期開 U 全デザイナーと関心のあるエンジニアからヒアリン2 U 細かいUIブレから定義の更新まで幅広くレビュƒ U DesignSystem による変更をPM陣とリリース共 U 実装レビューからデザインレビューの視点をエンジニアが持つよう に観点を広げる 今後に向けて
33. ©️ Gaudiy Inc. プロダクトのステークホルダー全てと接点を持ち 全員の心の中に関心度を醸造していくことで UIUXへの会話の起点になることを最大のValueに