Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
後悔しないデザインシステムの始め方
Search
takanorip
December 03, 2022
Design
4
3.1k
後悔しないデザインシステムの始め方
takanorip
December 03, 2022
Tweet
Share
More Decks by takanorip
See All by takanorip
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
96
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
760
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
6.9k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
1.7k
早わかり W3C Community Group
takanorip
0
450
Ubieとアクセシビリティのこれからを考える
takanorip
0
420
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.8k
Astroで始める爆速個人サイト開発
takanorip
15
11k
デザインシステム運用とOKRの良い関係
takanorip
0
2k
Other Decks in Design
See All in Design
NAHO SHIMONO_Portfolio2025
nahohphp
0
140
一人ひとりのポテンシャルを活かしたナレッジマネジメントとは?
atsushihomma
0
360
(第1回) アーキテクト・テックリード育成講座
masakaya
0
160
20241204_UI/UXデザイナーLT会 - vol.10_DMM
motokoishida
0
270
太田博三(@usagisan2020)
otanet
0
220
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
570
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
570
同人音声のための、 最高の視聴体験を求めて【サブカル×デザインMeetUP!】
vivion
0
240
生成AIを受け入れ共創できるデザイナーマインドへープロセス改革を想定したデザイナーの準備ー
takumasaito
1
1.7k
界隈からの逃走–デザイン初め新年会2025
sekiguchiy
3
980
Generating Momentum | Yasuhiro Yokota
yasuhiroyokota
0
230
2024/11/25 ReDesigner Online Meetup 会社紹介
cybozuinsideout
PRO
0
380
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Statistics for Hackers
jakevdp
797
220k
Embracing the Ebb and Flow
colly
84
4.6k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Why Our Code Smells
bkeepers
PRO
336
57k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
Building Your Own Lightsaber
phodgson
104
6.2k
Transcript
後悔しない デザインシステムの始め方 Takanori Oki 2022/12/03 - PWA Night CONFERENCE 2022
後悔しない デザインシステムの始め方 Takanori Oki 2022/12/03 - PWA Night CONFERENCE 2022
自己紹介 takanorip / 大木 尊紀(Takanori Oki) デザインエンジニア@Ubie デザインしたりコード書いたりしてます。 趣味は個人サイト制作、料理、筋トレ、得意料理はパスタ。 デザインシステムとかデザインエンジニアとかの同人誌書いています。
https://inutetraplus.booth.pm/
Ubie株式会社 Ubie株式会社
None
None
None
デザインシステムの定義 デザインシステムを始めたくなるサイン デザインシステムを始めるときに考えたい5つのこと デザインシステムを始めないという選択肢 まとめ 目次
今日は技術的な話はしません デザインシステムの技術に興味がある人は WEB+DB PRESS Vol.129の特集記事が おすすめです
None
デザインシステムの定義 デザインシステムの定義
デザインシステムの定義 プロダクトの目的を達成するための を 効率よく するシステム 「良いデザイン」 実装
デザインシステムを 始めたくなるサイン デザインシステムを 始めたくなるサイン
デザインシステムを始めたくなるサイン r UIの一貫性がなくなってきてプロダクトの認知負荷が上がってH r デザイナー間のコミュニケーションが大変になってきた0 r デザイナー以外の人とのコミュニケーションが大変0 r デザイナーごとにUIデザインが微妙に違うから開発がしにくい…
つまり…
無秩序な状態でUI開発を進めることが プロダクト開発全体に 悪影響を及ぼし始めたとき
デザインシステムを 始めるときに考えたい 5つのこと デザインシステムを 始めるときに考えたい 5つのこと
1. 解決したい課題は何? 2. デザインシステムを始めるとプロダクトが良くなる? 3. 誰のためのデザインシステム? 4. 運用・浸透施策は? 5. Return
On Investment はどれくらい? デザインシステムを始めるときに考えたい5つのこと
1. 解決したい課題は何? 2. デザインシステムを始めるとプロダクトが良くなる? 3. 誰のためのデザインシステム? 4. 運用・浸透施策は? 5. Return
On Investment はどれくらい? デザインシステムを始めるときに考えたい5つのこと
解決したい課題は何? 目の前の課題の解決に集中する 他社のデザインシステムを目指さない 必要なシステムはプロダクトごとに違う 大きすぎる目標しかないと開発が持続しない
解決したい課題は何? 小さい課題解決を積み重ねる 最初からデザインシステムという体をとらなくても良い 場合もあるかもしれない
Ubieの例 デザイントークン コンポーネント UIガイドライン ボイスアンドトーン デザイン原則、思想 最初はデザインシステムはなく、 いろいろな要素が独立して作られていった
Ubieの例 デザイントークン コンポーネント UIガイドライン ボイスアンドトーン デザイン原則、思想
1. 解決したい課題は何? 2. デザインシステムを始めるとプロダクトが良くなる? 3. 誰のためのデザインシステム? 4. 運用・浸透施策は? 5. Return
On Investment はどれくらい? デザインシステムを始めるときに考えたい5つのこと
デザインシステムを始めるとプロダクトが良くなる? デザインシステムがどうユーザーに 還元されるのか考える 例:開発効率が向上するとリリースまでの時間がN時間早くなるので要望の多 い機能をたくさんリリースできて嬉しい
デザインシステムを始めるとプロダクトが良くなる? デザインシステムはプロダクト 品質向上のための手段 他の解決策も常に並行して考える
1. 解決したい課題は何? 2. デザインシステムを始めるとプロダクトが良くなる? 3. 誰のためのデザインシステム? 4. 運用・浸透施策は? 5. Return
On Investment はどれくらい? デザインシステムを始めるときに考えたい5つのこと
誰のためのデザインシステム? デザインシステムはプロダクト プロダクトのターゲット、ユースケース、メリットを きちんと考える きちんと を作る 使われるデザインシステム
誰のためのデザインシステム? 使われないデザインシステムは すぐ腐る 建物と同じ、 継続利用とメンテナンスが何より大事
1. 解決したい課題は何? 2. デザインシステムを始めるとプロダクトが良くなる? 3. 誰のためのデザインシステム? 4. 運用・浸透施策は? 5. Return
On Investment はどれくらい? デザインシステムを始めるときに考えたい5つのこと
運用・浸透施策まで考える デザインシステムは浸透・運用されて 初めて効果を発揮する デザインシステムを始めるときに浸透・運用について考慮 されないと作ることがゴールになってしまう
運用・浸透施策まで考える 最初から浸透・運用まで見据えて 計画を立てることが大事!
1. 解決したい課題は何? 2. デザインシステムを始めるとプロダクトが良くなる? 3. 誰のためのデザインシステム? 4. 運用・浸透施策は? 5. Return
On Investment はどれくらい? デザインシステムを始めるときに考えたい5つのこと
ROI(Return On Investment)? ROI = 投資した費用に対してどれだけの効果や利益を出す ことができたかをあらわす指標 プロダクト開発でROIを意識するのは当たり前
ROI(Return On Investment)? でも、デザインシステムは直接お金を生むプロダクト ではないのでROIを考えることを忘れがち ROIを考慮しないと… →
ROI(Return On Investment)? p デザインシステムにどれくらいリソースを投下すべきか議論できな` B リソース投下は経営判断に関わるので自分たちだけでは決められない p デザインシステムプロジェクトの中の優先度を考えられな` B
ROIが高い施策の優先度を上げないと、いつまでも効果が見えないまま になりメンバーのモチベーション低下にもつながる
デザインシステムを 始めないという選択肢 デザインシステムを 始めないという選択肢
デザインシステムを始めなくてもいいケース ) 特に困っていない、この先困る予定もな1 ) プロダクトが小さい、変化が激しい
現状デザインシステムがなくても特に困っていない ~ 明確な課題やデザインシステムを始めることで得られるReturnが明確に なっていない場合、作っても使われないことが多い&浸透が大r ~ デザインシステムがなくてもデザインのクオリティをコントロールできて いる場合(レビュー体制が整っている、デザイナーが実装までやってい る、など)はデザインシステムをつくるよりプロダクト開発にリソースま わしたほうが良I ~
課題を解決するHowはデザインシステムだけではない
現状デザインシステムがなくても特に困っていない 課題を解決するHowは デザインシステムだけではないことを 忘れない
プロダクトが小さい、変化が激しい 5 デザインシステムとは「〇〇らしいデザインを構築するためのシステム」 5 ということは「〇〇らしいデザイン」が確立していない状態では デザインシステムは作れなd v デザインシステムをつくるにはプロダクトの見た目だけでなくプロダク トの提供価値やターゲット、雰囲気などが確立されていることも重要 v
UIや提供価値の変化が多い場合は運用コストが高くなりすぎる
まとめ まとめ
まとめ G 小さく始め@ G 利用者を定め@ G プロダクトの品質向上しているか確認す@ G 浸透・運用のことをわすれな G
ROIを意識して運用する
We're hiring! We're hiring!
None
Ubie株式会社ではエンジニアを大募集中です! 現在募集中の職種 u プロダクト開発エンジニW u ソフトウェアエンジニア(デリバリー&サクセス4 u QA エンジニW u
SRE(Site Reliability EngineerE u セキュリティエンジニア https://recruit.ubie.life/engineer
Ubie株式会社ではエンジニアを大募集中です! 各職種の詳しい募集要項は採用サイトをご覧ください! カジュアル面談だけでも大歓迎なので、 気軽にご連絡ください! https://recruit.ubie.life/engineer
ご清聴ありがとうございました!