身の丈に合うところから始めるデザインシステム

by Tommy

Slide 1

Slide 1 text

⾝の丈に合うところから始めるデザインシステム株式会社スタディスト 2025/07/04 TECH PLAY デザインシステム勉強会〜各社の取り組みや課題から学ぶ会〜開発本部リサーチ&デザイン室 UIUXデザイナー Tomoki ONO

Slide 2

Slide 2 text

conﬁdentia l Copyright © 2024 Studist Corporation. all rights reserved. ⾃⼰紹介 2 開発本部リサーチ＆デザイン室 UIUXデザイナー Tomoki ONO 2016年新卒で半導体製造装置メーカーに入社し、海外営業に従事。手に職をつけたい思いからデザインを学び、 2022年UIUXデザイナーに本業をチェンジ。大阪のスタートアップで 1人目の正社員デザイナーとして社内全般のデザイン業務を担当。 2023年より現職。 BtoB向けSaaSプロダクトのUIUXデザイン・新規事業開発を担う。

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

8 デザインシステムは誰のためにあるのか？

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

conﬁdentia l Copyright © 2024 Studist Corporation. all rights reserved. 12 どのタイミングで何をしていたかリリース後の追加機能開発営業⽀援ワイヤーフレーム作成ジョイン半年後リリース 2ヶ月後 1年後 4ヶ月後 💡 ジョインした時の状況一度作成したプロダクトをピボットし、新たなチーム体制で再度ゼロから立て直してプロダクトを作り直す。半年後にリリースして顧客を獲得せよ、という状況だった。

Slide 13

Slide 13 text

conﬁdentia l Copyright © 2024 Studist Corporation. all rights reserved. 13 どのタイミングで何をしていたかリリース後の追加機能開発営業⽀援ワイヤーフレーム作成ジョイン半年後リリース 2ヶ月後 1年後 miroでひたすらにデザイン案を作成。色・フォント諸々よしなに実装が進む。この時点では、デザインシステムにつながるものはなかった。 4ヶ月後

Slide 14

Slide 14 text

Slide 15

Slide 15 text

conﬁdentia l Copyright © 2024 Studist Corporation. all rights reserved. 15 どのタイミングで何をしていたかリリース後の追加機能開発営業⽀援ワイヤーフレーム作成ジョイン半年後リリース 2ヶ月後 1年後営業⽀援が⼀息ついたところでデザインデータをFigma化に着⼿ Figmaで整えていくにあたり、デザインワークが楽になるように、使用するフォント・余白を決めることにした。 ↓ 4ヶ月後

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

conﬁdentia l Copyright © 2024 Studist Corporation. all rights reserved. 18 どのタイミングで何をしていたかリリース後の追加機能開発営業⽀援ワイヤーフレーム作成ジョイン半年後リリース 2ヶ月後 1年後必要な機能開発が続く。少しでも開発スピードを上げられるように、足回りの整備として、 Figmaのデザインデータと実装内容を合わす取り組みをエンジニアと始める。 4ヶ月後

Slide 19

Slide 19 text

conﬁdentia l Copyright © 2024 Studist Corporation. all rights reserved. 19 どのタイミングで何をしていたかリリース後の追加機能開発営業⽀援ワイヤーフレーム作成ジョイン半年後リリース 2ヶ月後 1年後必要な機能開発が続く。少しでも開発スピードを上げられるように、足回りの整備として、 Figmaデザインデータと実装内容を合わせていく取り組みをエンジニアと始める。基本方針：決めて自分たちが楽になるところから ↓ 4ヶ月後

Slide 20

Slide 20 text

conﬁdentia l Copyright © 2024 Studist Corporation. all rights reserved. 20 どのタイミングで何をしていたかリリース後の追加機能開発営業⽀援ワイヤーフレーム作成ジョイン半年後リリース 2ヶ月後 1年後活動の仕方 ● 週1 30分の定期ミーティングで、共有と方針を決める ● 各自の調べ物や作業は、30分枠以外の時間で行う ● 1つずつ小さく進める 4ヶ月後

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

conﬁdentia l Copyright © 2024 Studist Corporation. all rights reserved. 26 どのタイミングで何をしていたかリリース後の追加機能開発営業⽀援ワイヤーフレーム作成ジョイン半年後リリース 2ヶ月後 1年後もちろん他のデザインシステムは参考にした。命名の仕方・定義しているサイズ、など https://smarthr.design/ https://m3.material.io/ https://www.figma.com/@digitalagencyjp 4ヶ月後

Slide 27

Slide 27 text

27 デザインシステムを作るぞ、と思って作ったわけではない

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

30 ⾃分たちが必要に感じているところから始める、それでいいじゃないか。

Slide 31

Slide 31 text

31 ⾃分たちが必要に感じているところから始める、それでいいじゃないか。＝⾝の丈に合うところから始める

Slide 32

Slide 32 text

https://studist.jp/

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Appendix 34

Slide 35

Slide 35 text

conﬁdentia l Copyright © 2024 Studist Corporation. all rights reserved. 35 Semantic Colorについて sentiment ー prominence ー usage (ー state) 命名規則意味合い強弱使用箇所状態 ● 3つ目の使用箇所までが基本。 ● hoverの時だけ、4つ目の状態まで登場する。 “容れ物” inverse-default-text 例 semantic color neutral-50 green-50 red-50 Semantic Colorのイメージ brand-strong-surface のようなイメージ danger-strong-border danger-strong-text danger-weak-surface