Slide 1
Slide 1 text
後悔しない
デザインシステムの始め方
Takanori Oki
2022/12/03 - PWA Night CONFERENCE 2022
後悔しない
デザインシステムの始め方
Takanori Oki
2022/12/03 - PWA Night CONFERENCE 2022
Slide 2
Slide 2 text
自己紹介 takanorip / 大木 尊紀（Takanori Oki）
デザインエンジニア@Ubie
デザインしたりコード書いたりしてます。
趣味は個人サイト制作、料理、筋トレ、得意料理はパスタ。
デザインシステムとかデザインエンジニアとかの同人誌書いています。
https://inutetraplus.booth.pm/
Slide 3
Slide 3 text
Ubie株式会社
Ubie株式会社
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
デザインシステムの定義
デザインシステムを始めたくなるサイン
デザインシステムを始めるときに考えたい5つのこと
デザインシステムを始めないという選択肢
まとめ
目次
Slide 8
Slide 8 text
今日は技術的な話はしません
デザインシステムの技術に興味がある人は
WEB+DB PRESS Vol.129の特集記事が
おすすめです
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
デザインシステムの定義
デザインシステムの定義
Slide 11
Slide 11 text
デザインシステムの定義
プロダクトの目的を達成するための
を
効率よく するシステム
「良いデザイン」
実装
Slide 12
Slide 12 text
デザインシステムを
始めたくなるサイン
デザインシステムを
始めたくなるサイン
Slide 13
Slide 13 text
デザインシステムを始めたくなるサイン
r UIの一貫性がなくなってきてプロダクトの認知負荷が上がってH
r デザイナー間のコミュニケーションが大変になってきた0
r デザイナー以外の人とのコミュニケーションが大変0
r デザイナーごとにUIデザインが微妙に違うから開発がしにくい…
Slide 14
Slide 14 text
つまり…
Slide 15
Slide 15 text
無秩序な状態でUI開発を進めることが
プロダクト開発全体に
悪影響を及ぼし始めたとき
Slide 16
Slide 16 text
デザインシステムを
始めるときに考えたい
5つのこと
デザインシステムを
始めるときに考えたい
5つのこと
Slide 17
Slide 17 text
1. 解決したい課題は何？
2. デザインシステムを始めるとプロダクトが良くなる？
3. 誰のためのデザインシステム？
4. 運用・浸透施策は？
5. Return On Investment はどれくらい？
デザインシステムを始めるときに考えたい5つのこと
Slide 18
Slide 18 text
1. 解決したい課題は何？
2. デザインシステムを始めるとプロダクトが良くなる？
3. 誰のためのデザインシステム？
4. 運用・浸透施策は？
5. Return On Investment はどれくらい？
デザインシステムを始めるときに考えたい5つのこと
Slide 19
Slide 19 text
解決したい課題は何？
目の前の課題の解決に集中する
他社のデザインシステムを目指さない
必要なシステムはプロダクトごとに違う
大きすぎる目標しかないと開発が持続しない
Slide 20
Slide 20 text
解決したい課題は何？
小さい課題解決を積み重ねる
最初からデザインシステムという体をとらなくても良い
場合もあるかもしれない
Slide 21
Slide 21 text
Ubieの例
デザイントークン
コンポーネント
UIガイドライン
ボイスアンドトーン
デザイン原則、思想
最初はデザインシステムはなく、
いろいろな要素が独立して作られていった
Slide 22
Slide 22 text
Ubieの例
デザイントークン
コンポーネント
UIガイドライン
ボイスアンドトーン
デザイン原則、思想
Slide 23
Slide 23 text
1. 解決したい課題は何？
2. デザインシステムを始めるとプロダクトが良くなる？
3. 誰のためのデザインシステム？
4. 運用・浸透施策は？
5. Return On Investment はどれくらい？
デザインシステムを始めるときに考えたい5つのこと
Slide 24
Slide 24 text
デザインシステムを始めるとプロダクトが良くなる？
デザインシステムがどうユーザーに
還元されるのか考える
例：開発効率が向上するとリリースまでの時間がN時間早くなるので要望の多
い機能をたくさんリリースできて嬉しい
Slide 25
Slide 25 text
デザインシステムを始めるとプロダクトが良くなる？
デザインシステムはプロダクト
品質向上のための手段
他の解決策も常に並行して考える
Slide 26
Slide 26 text
1. 解決したい課題は何？
2. デザインシステムを始めるとプロダクトが良くなる？
3. 誰のためのデザインシステム？
4. 運用・浸透施策は？
5. Return On Investment はどれくらい？
デザインシステムを始めるときに考えたい5つのこと
Slide 27
Slide 27 text
誰のためのデザインシステム？
デザインシステムはプロダクト
プロダクトのターゲット、ユースケース、メリットを
きちんと考える
きちんと を作る
使われるデザインシステム
Slide 28
Slide 28 text
誰のためのデザインシステム？
使われないデザインシステムは
すぐ腐る
建物と同じ、
継続利用とメンテナンスが何より大事
Slide 29
Slide 29 text
1. 解決したい課題は何？
2. デザインシステムを始めるとプロダクトが良くなる？
3. 誰のためのデザインシステム？
4. 運用・浸透施策は？
5. Return On Investment はどれくらい？
デザインシステムを始めるときに考えたい5つのこと
Slide 30
Slide 30 text
運用・浸透施策まで考える
デザインシステムは浸透・運用されて
初めて効果を発揮する
デザインシステムを始めるときに浸透・運用について考慮
されないと作ることがゴールになってしまう
Slide 31
Slide 31 text
運用・浸透施策まで考える
最初から浸透・運用まで見据えて
計画を立てることが大事！
Slide 32
Slide 32 text
1. 解決したい課題は何？
2. デザインシステムを始めるとプロダクトが良くなる？
3. 誰のためのデザインシステム？
4. 運用・浸透施策は？
5. Return On Investment はどれくらい？
デザインシステムを始めるときに考えたい5つのこと
Slide 33
Slide 33 text
ROI（Return On Investment）？
ROI = 投資した費用に対してどれだけの効果や利益を出す
ことができたかをあらわす指標
プロダクト開発でROIを意識するのは当たり前
Slide 34
Slide 34 text
ROI（Return On Investment）？
でも、デザインシステムは直接お金を生むプロダクト
ではないのでROIを考えることを忘れがち
ROIを考慮しないと… →
Slide 35
Slide 35 text
ROI（Return On Investment）？
p デザインシステムにどれくらいリソースを投下すべきか議論できな`
B リソース投下は経営判断に関わるので自分たちだけでは決められない
p デザインシステムプロジェクトの中の優先度を考えられな`
B ROIが高い施策の優先度を上げないと、いつまでも効果が見えないまま
になりメンバーのモチベーション低下にもつながる
Slide 36
Slide 36 text
デザインシステムを
始めないという選択肢
デザインシステムを
始めないという選択肢
Slide 37
Slide 37 text
デザインシステムを始めなくてもいいケース
) 特に困っていない、この先困る予定もな1
) プロダクトが小さい、変化が激しい
Slide 38
Slide 38 text
現状デザインシステムがなくても特に困っていない
~ 明確な課題やデザインシステムを始めることで得られるReturnが明確に
なっていない場合、作っても使われないことが多い&浸透が大r
~ デザインシステムがなくてもデザインのクオリティをコントロールできて
いる場合（レビュー体制が整っている、デザイナーが実装までやってい
る、など）はデザインシステムをつくるよりプロダクト開発にリソースま
わしたほうが良I
~ 課題を解決するHowはデザインシステムだけではない
Slide 39
Slide 39 text
現状デザインシステムがなくても特に困っていない
課題を解決するHowは
デザインシステムだけではないことを
忘れない
Slide 40
Slide 40 text
プロダクトが小さい、変化が激しい
5 デザインシステムとは「〇〇らしいデザインを構築するためのシステム」
5 ということは「〇〇らしいデザイン」が確立していない状態では
デザインシステムは作れなd
v デザインシステムをつくるにはプロダクトの見た目だけでなくプロダク
トの提供価値やターゲット、雰囲気などが確立されていることも重要
v UIや提供価値の変化が多い場合は運用コストが高くなりすぎる
Slide 41
Slide 41 text
まとめ
まとめ
Slide 42
Slide 42 text
まとめ
G 小さく始め@
G 利用者を定め@
G プロダクトの品質向上しているか確認す@
G 浸透・運用のことをわすれな
G ROIを意識して運用する
Slide 43
Slide 43 text
We're hiring!
We're hiring!
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
Ubie株式会社ではエンジニアを大募集中です！
現在募集中の職種
u プロダクト開発エンジニW
u ソフトウェアエンジニア(デリバリー&サクセス4
u QA エンジニW
u SRE（Site Reliability EngineerE
u セキュリティエンジニア
https://recruit.ubie.life/engineer
Slide 46
Slide 46 text
Ubie株式会社ではエンジニアを大募集中です！
各職種の詳しい募集要項は採用サイトをご覧ください！
カジュアル面談だけでも大歓迎なので、
気軽にご連絡ください！
https://recruit.ubie.life/engineer
Slide 47
Slide 47 text
ご清聴ありがとうございました！