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
20190401_design_system.pdf
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
ozaki25
April 01, 2019
Technology
66
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
20190401_design_system.pdf
ozaki25
April 01, 2019
More Decks by ozaki25
See All by ozaki25
20210526_a11y.pdf
ozaki25
0
210
20210525_react_next.pdf
ozaki25
0
160
Webフロントエンドはなぜ複雑なのか
ozaki25
1
150
utility first css
ozaki25
0
120
20201225_how_to_learn_technology.pdf
ozaki25
0
190
20201124_blitz.pdf
ozaki25
0
110
20200727_liff_app.pdf
ozaki25
1
680
20200721_web_vitals.pdf
ozaki25
0
130
20200624_web_otp_api.pdf
ozaki25
1
150
Other Decks in Technology
See All in Technology
え?フロントエンドエンジニアの ワイがインフラも!?
puku0x
1
500
システム思考で問題に対処する
yussak
0
240
メルカリのグローバルアプリで挑んだ AlloyDB 運用と課題解決の実践記
hatappi
0
240
モダンフロントエンド 開発研修
recruitengineers
PRO
4
600
Bill One 開発エンジニア 紹介資料
sansan33
PRO
7
19k
[しろおび夏祭り2026] チャットするAIから、作業するAIへ - 使われ方の変化と、その裏側で起きていること
kk0n
0
1.7k
ガバメント AI 源内を地方自治体は活用できるのか可能性と課題、期待について
takeda_h
1
390
クラウドセキュリティ入門 ~安全なクラウド利用のための基礎知識~
lhazy
13
8.6k
モバイルアプリ開発概論2026
recruitengineers
PRO
5
560
TypeScript入門 2026
recruitengineers
PRO
3
550
認知負荷をGemini で溶かす — GKE 基盤「Orbit」における AI エージェントの実践
sansantech
PRO
1
290
つくって納得、つかって実感! 大規模言語モデルことはじめ ver2.0
recruitengineers
PRO
4
1.5k
Featured
See All Featured
Lessons Learnt from Crawling 1000+ Websites
charlesmeaden
PRO
1
1.5k
Learning to Love Humans: Emotional Interface Design
aarron
275
41k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
232
55k
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
helenjbeal
1
260
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
sarafernandez
0
240
YesSQL, Process and Tooling at Scale
rocio
174
15k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
tmiket
0
200
Accessibility Awareness
sabderemane
1
170
Code Review Best Practice
trishagee
74
20k
How To Speak Unicorn (iThemes Webinar)
marktimemedia
1
520
GitHub's CSS Performance
jonrohan
1033
470k
Believing is Seeing
oripsolob
1
180
Transcript
σβΠϯγεςϜ
࣍ σβΠϯγεςϜͱ σβΠϯγεςϜͷޮՌ σβΠϯγεςϜͷಋೖέʔε σβΠϯγεςϜͷՌ
σβΠϯγεςϜͱ
σβΠϯγεςϜͱ w ໌֬ͳఆ͕ٛ͋ΔͷͰͳ͍͕ҰൠతݴΘΕ͍ͯΔ͜ͱΛ·ͱ ΊΔͱҎԼͷͭΛຬͨ͢ͷͱݴ͑Δ Ұ؏ͨ͠σβΠϯͷఆ͕ٛ͞Ε͍ͯΔ σβΠϯͷ֓೦͕ڞ༗Ͱ͖Δ ৴པͰ͖Δ།ҰͷใݯͰ͋Δ
4JOHMF4PVSDFPG5SVUI
Ұ؏ͨ͠σβΠϯͷఆ͕ٛ͞Ε͍ͯΔ ελΠϧΨΠυ w ৭େ͖͞ͳͲͷ6*ͷఆٛू ίϯϙʔωϯτϥΠϒϥϦ w ελΠϧΨΠυͷఆٛʹଇͬͨ ࣮ू w ύλʔϯϥΠϒϥϦͱ͍͏
http://makotottn.hatenablog.com/entry/2017/12/02/004702
σβΠϯͷ֓೦͕ڞ༗Ͱ͖Δͷ w σβΠϯͷഎܠࠜڌ͕ఆٛ͞Ε͍ͯΔ͜ͱ w Ͳ͏͍͏࣌ʹͲͷελΠϧίϯϙʔωϯτΛ͏͔ w Ͳ͏͍͏ཧ༝͔ΒͦͷσβΠϯʹͳͬͨͷ͔ w ྫ w
CUOQSJNBSZओಋઢʹ͏Ϙλϯ w CUOEBOHFSऔΓফ͕͖͔͠ͳ͍ૢ࡞ʹ͏Ϙλϯ w ͜ΕΒΛσβΠφʔΤϯδχΞεςʔΫϗϧμʔͱڞ༗Ͱ͖Δͷ
৴པͰ͖Δ།ҰͷใݯͰ͋Δ w σβΠϯγεςϜࣗମ͕αʔϏεΛఏڙ͢ΔΛϓϩμΫτ w །ҰͷใݯͱͳΔΑ͏ʹߋ৽Λଓ͚Δ w σβΠϯγεςϜ࡞ͬͯऴΘΓͰͳ͘͠ଓ͚Δͷ
σβΠϯγεςϜͷޮՌ
σβΠϯγεςϜͷޮՌ Ϣʔβମݧͷ౷Ұ w ҟͳΔΞϓϦέʔγϣϯͰҰ؏ͨ͠-PPL'FFMΛఏڙͰ͖Δ ࠶ར༻ʹΑΔߴԽ w ڞ௨Խ͞ΕͨίϯϙʔωϯτʹΑΓ࣮͕ޮԽ͞ΕΔ ίϛϡχέʔγϣϯͷ؆қԽ w σβΠϯΛݴޠԽ͢Δ͜ͱͰೝࣝᴥᴪΛͳͤ͘Δ
σβΠϯγεςϜͷಋೖέʔε
σβΠϯγεςϜͷಋೖέʔε w σβΠφʔͱΤϯδχΞͷҙࢥૄ௨ͷͨΊ༻͍Δέʔε w σβΠϯͷഎܠΛهࡌ͢Δͷ͜ͷཧ༝͔Β w ͜ͷจ຺Ͱίϯϙʔωϯτཻͷ͕Ͱ͖ͯͯ"UPNJD%FTJHOʹͭ ͳ͕Δ w Ϛωδϝϯτͱͷೝࣝڞ༗ͷͨΊʹ༻͍ΒΕΔ
w ౷Ұతͳ6*69ΛෳͷΞϓϦͰ࣮ݱ͍ͨ͠έʔε w ୭Ͱಉ͡ϒϥϯυΠϝʔδͷ6*69Λޮతʹ࡞ΕΔΑ͏ʹ͢Δ
σβΠϯγεςϜͷՌ
Ռͷྫ w 4UPSZCPPL w ϝδϟʔͳίϯϙʔωϯτϥΠϒϥϦ w ଟ͘ͷ41"'8ʹରԠ w %PD[ w
3FBDUઐ༻ͷίϯϙʔωϯτϥΠϒϥϦ w 7VF%FTJHOFS w σβΠϯͱ࣮ΛWVFϑΝΠϧͰཧ͢ΔͨΊͷπʔϧ
Ռͷྫ w 4UPSZCPPL
·ͱΊ
·ͱΊ w σβΠϯγεςϜͱ ɹᶃσβΠϯʹؔ͢Δߟ͑ํͷڞ༗ ɹᶄ౷ҰతͳϢʔβମݧΛఏڙ ɹᶅ։ൃΛޮԽ Λ࣮ݱ͢ΔͨΊͷγεςϜ
͋Γ͕ͱ͏͍͟͝·ͨ͠