※この記事は、2025年7月に開催されたイベントでの発表内容をレポートしたものです。
- デザインシステムは誰のためにあるのか？
- 今日話すこと
- どのタイミングで何をしていたか？（ジョインした時の状況）
- 2ヶ月後
- 営業支援後
- リリース後の追加機能開発
- 活動の仕方
- UIコンポーネントの整備
- デザインシステムを作るぞ、と思って作ったわけではない
登壇者はこの方
Tomoki
株式会社スタディスト
UIUXデザイナー
2016年新卒で半導体製造装置メーカーに入社し、海外営業に従事。手に職をつけたい思いからデザインを学び、2022年UIUXデザイナーに本業をチェンジ。大阪のスタートアップで1人目の正社員デザイナーとして社内全般のデザイン業務を担当。2023年より現職。BtoB向けSaaSプロダクトのUIUXデザイン・新規事業開発を担う。
Tomoki：私からは「身の丈に合うところから始めるデザインシステム」というタイトルで発表させていただきます。
まず、個人的な注目ニュースを紹介すると、某有名デザイン会社さんが、デザインシステムを公開しました。中身のデザインシステムを見ると、カラーやタイポグラフィ、ボタンコンポーネントなど、とても幅広く整理されていると感じました。
さすがだな、と思う一方で、「ここまですごいのは作れる気がしない…」とも感じました。
そして、このことがきっかけとなり、「そもそもデザインシステムは誰のために作るのか？」を自分自身が考えるようになりました。
デザインシステムは誰のためにあるのか？
改めてデザインシステムは誰のためにあるのか、ということを自分なりに考えました。
それは「作業するのは自分たちなので、使うのも自分たちなので、自分達のためにある」と思いました。
そのため、デザインシステムを自分たちのために作り始めようと思いました。
今日話すこと
「デザインシステムの中身」ではなく「プロジェクト内のどのタイミングで何をしていたか」について話したいと思います。
どのタイミングで何をしていたか？（ジョインした時の状況）
一度作成したプロダクトをピボットし、新たなチーム体制で再度ゼロから立て直してプロダクトを作り直すタイミングでした。
そして、半年後にリリースして顧客を獲得せよ、という状況でした。
入社してから最初の2ヶ月間はワイヤーフレームを作成しており、miroでひたすらデザイン案を作成しました。色・フォント諸々については、よしなに実装が進んでいたので、この時点では、デザインシステムにつながるものはありませんでした。
2ヶ月後
2ヶ月経ち、必要な画面デザイン案の作成が一息つきました。そして、見た目への影響も大きい色について決めることにしました。
営業支援後
営業支援が一息ついたところでデザインデータのFigma化に着手しました。
Figmaで整えていくにあたり、デザインワークが楽になるように、使用するフォント・余白を決めることにした。
下図のように使用するフォント・余白を決めました。
リリース後の追加機能開発
リリースして1年後くらい経ち、少しでも開発スピードを上げられるように、足回りの整備として、Figmaのデザインデータと実装内容を合わす取り組みを合わす取り組みが始まりました。
活動の仕方
・週に1回30分の定期ミーティングエンジニアと設けて、共有と方針を決めました。
・各自の調べ物や作業は、30分枠以外の時間で行いました。
・ 1つずつ小さく進めました。
まずは色について決めました。先ほど、私がラフに作成したカラーパレットをより整理しました。
色を決めた後に、次に余白について取り決めました。
色や余白など、決めたことはFigmaのVariablesや実装に登録しました。
色・フォント・余白・階層表現を定義した後は、UIコンポーネントの整備に移りました。
UIコンポーネントの整備
下図のように、ボタンのサイズや形状などを定義しました。
UIコンポーネントの整備をする上で、命名の仕方・定義しているサイズ、など他のデザインシステムは参考にしました。
デザインシステムを作るぞ、と思って作ったわけではない
ここまで紹介してきて、デザインシステムを作るぞ、と思って作ったわけではないことが、理解いただけたかと思います。
改めて、どのタイミングで何をしていたのかを整理します。
- 見た目への影響も大きい色だけはまず決めておくことにした。
- Figmaで整えていくにあたり、デザインワークが楽になるように、使用するフォント・余白を決めることにした。
- 少しでも開発スピードを上げられるように、足回りの整備として、Figmaのデザインデータと実装内容を合わす取り組みをエンジニアと始める。
このように、その時々で自分たちの作業が楽になるように決めていったことが、デザインシステム化しています。
自分たちが必要に感じているところから始める、それが今回タイトルにもある「身の丈に合うところから始めるデザインシステム」で話したかった内容になります。
私からの発表は以上となります。
▼▼ ぜひ他登壇者の発表レポートもご覧ください
