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

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

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

会社紹介 3 Corporate Mission オペレーションから、働き⽅と未来を変えていくスタディスト: マニュアル作成‧共有システムのTeachme Bizを運営しています

4 グッドパッチさんがデザインシステムを公開した最近のニュース https://www.figma.com/community/file/1512755784058898270

5 さすがなのだが、最近のニュース

6 ⼀⽅でこうも思う... 最近のニュース

7 こんなすごいの作れる気がしない最近のニュース

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

9 作業するのは⾃分たち。⾃分たちのためにある。誰のためのデザインシステム？

10 作業するのは⾃分たち。⾃分たちのためにある。誰のためのデザインシステム？ ↓ ⾃分たちのために、作り始めようじゃないか

11 デザインシステムの中⾝今⽇話すことプロジェクト内のどのタイミングで何をしていたか

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

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

14 どのタイミングで何をしていたかリリース後の追加機能開発営業⽀援ワイヤーフレーム作成ジョイン半年後リリース 2ヶ月後 1年後必要な画面デザイン案の作成が一息ついた見た目への影響も大きい色だけはまず決めておくことにした。 ↓ 4ヶ月後

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

16 どのタイミングで何をしていたかリリース後の追加機能開発営業⽀援ワイヤーフレーム作成ジョイン半年後リリース 2ヶ月後 1年後 4ヶ月後

17 どのタイミングで何をしていたかリリース後の追加機能開発営業⽀援ワイヤーフレーム作成ジョイン半年後リリース 2ヶ月後 1年後 Figma上での作業をしやすいように仕込む 4ヶ月後

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

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

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

21 どのタイミングで何をしていたかリリース後の追加機能開発営業⽀援ワイヤーフレーム作成ジョイン半年後リリース 2ヶ月後 1年後やっぱりまずは、色。 4ヶ月後

22 どのタイミングで何をしていたかリリース後の追加機能開発営業⽀援ワイヤーフレーム作成ジョイン半年後リリース 2ヶ月後 1年後余白や階層表現もトークン化しやすいように定義した。 4ヶ月後

23 どのタイミングで何をしていたかリリース後の追加機能開発営業⽀援ワイヤーフレーム作成ジョイン半年後リリース 2ヶ月後 1年後 FigmaのVariablesに決めたことを登録。実装でも決めたことを登録。 4ヶ月後

24 どのタイミングで何をしていたかリリース後の追加機能開発営業⽀援ワイヤーフレーム作成ジョイン半年後リリース 2ヶ月後 1年後色・フォント・余白・階層表現を定義した後は、 UIパーツコンポーネントの整備に移る。 4ヶ月後

25 どのタイミングで何をしていたかリリース後の追加機能開発営業⽀援ワイヤーフレーム作成ジョイン半年後リリース 2ヶ月後 1年後 UIパーツは、よく使うボタンから。 4ヶ月後

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

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

28 どのタイミングで何をしていたか

29 どのタイミングで何をしていたかその時々で⾃分たちの作業が楽になるように決めていったことが、デザインシステム化している

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

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

https://studist.jp/

33 （ちょっと宣伝）note始めましたスタディストリサーチ＆デザイン室 MAGAZIN

Appendix 34

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

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

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

Other Decks in Design

Featured

Transcript