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
Design System Discussion
Search
Yosuke Furukawa
PRO
September 19, 2019
Programming
2
600
Design System Discussion
Yosuke Furukawa
PRO
September 19, 2019
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
140
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
10
4.2k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.2k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
260
Removing Corepack
yosuke_furukawa
PRO
9
1.7k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.8k
Strip Types と Storage
yosuke_furukawa
PRO
4
420
Module Harmony について
yosuke_furukawa
PRO
3
1.7k
LTのやり方
yosuke_furukawa
PRO
16
2.7k
Other Decks in Programming
See All in Programming
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
640
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
310
Navigating Dependency Injection with Metro
zacsweers
3
3.3k
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
470
AWS発のAIエディタKiroを使ってみた
iriikeita
1
190
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
230
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
290
私の後悔をAWS DMSで解決した話
hiramax
4
210
Design Foundational Data Engineering Observability
sucitw
3
200
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
130
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
2.6k
RDoc meets YARD
okuramasafumi
4
170
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Into the Great Unknown - MozCon
thekraken
40
2k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
The Invisible Side of Design
smashingmag
301
51k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Six Lessons from altMBA
skipperchong
28
4k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
How STYLIGHT went responsive
nonsquared
100
5.8k
Transcript
Design System Discussion 2019/09/19 @ SmartHR ΦϑΟε
Panelist
ݹͷελϯε • σβΠϯγεςϜջٙ • σβΠϯγεςϜࣗମྑ͍ • අ༻ରޮՌ͕ٙ
͜ͷٞͷΰʔϧ • σβΠϯγεςϜͷٙʹ͍ͭͯҙݟΛͿͭ ͚ɺճΛಘΔ • σβΠϯγεςϜͷམͱ͠ॴΛ͠Δ
ͦͦ • ͏·͍ͬͯ͘Δʁ • य़͞Μ: ͻͱ·ͣೖΕͯΈ͚ͨͲɺࠓͷॴճͤͯΔɻ͜Ε͔Βɺ͏·͍ͬͯ͘Δ͔Ͳ͏͔ʑɺ࡞͍͖͍ͬͯͨͱ ͍͏৺ҙؾ͕͋Δɻ • ݱঢ়ࣾͷޮԽͷͨΊͷπʔϧͱ͔ͯ͠͠ݕ౼͍ͯ͠ͳ͍ •
ࣾͷޮԽ͕ϝΠϯͷ͜ͱ͕ଟ͍ => Ϗδωε·Ͱམͱ͢ॴ·Ͱ͍͚ͯͳ͍ • ੴڮ͞Μ: ಉ͘͡ɺࠓͷॴͬͯΔ͕ɺ͏·͘ݴͬͯΔ͔Ͳ͏͔ͷධՁ·ͩԼͤͳ͍ɻ • উखʹ࡞ۭͬͯதʹු͘ͷΊ͔ͨͬͨɻ • খ͘͞࡞ͬͯɺϓϩμΫγϣϯͰಈ͍ͯΔΑ͏ʹ͔ͨͬͨ͠ɻ • => ͜͜ୡɺελʔτ͔ͯ͠Β • ٶݪ͞Μ: ͓ۚʹͶͯͳ͍ɺ͏·͘ݴͬͯͳ͍ͱࢥͬͯΔɻ • ·ͩΓग़͠Ͱࢿظؒɺ։ൃੜ࢈ੑʹͪΌΜͱϑΟʔυόοΫ͍ͯ͘͠ͱΑ͍
ͦͦ • ಋೖ͔ͨ͠Γ? • ಋೖͯ͠ӡ༻ͯ͠Δ? • ӡ༻ख़ظ? • य़͞Μ: 1
• ੴڮ͞Μ • ٶݪ͞Μ 3ϲ݄ • य़͞Μ1ؒӡ༻ͯ͠Δ͕ɺ͕ͦͦσβΠϯ౷Ұ͞Εͯͳ͍ɺ։ൃͷUI͕ό ϥόϥͳͲͷঢ়گ͔Β࢝·ͬͨɻ
ͦͦ • σβΠϯγεςϜͷॳखͰΔ͜ͱ: • ٶݪ: ͓ߦّΑͬͯ͘ͳ͍ɺύλʔϯΛચ͍ग़͠ͱ͔ͬͯͳ͍ɺ࠷ॳʹτοϓμϯͷ͋Δ͖࢟ͷશମ ૾࡞ͬͯΔɺػೳతʹཧͯ͠ϘτϜΞοϓ࡞ΔɺτοϓμϯͱϘτϜΞοϓͷ྆ํ͔Β߈ΊΔ • લ৬ΞτϛοΫσβΠϯ͕ࣦഊ =>
ޙͰฉ͘ • ੴڮ͞Μ σβΠϯγεςϜͷγεςϚνοΫͳͱ͜ΖΛ͍Ε͍ͨɺͲ͏ͬͯΓ͚ͯೖΕ͍͔ͯ͘Λ૬ ஊ • Ұ୴ϖʔδΛεΫγϣͯ͠ɺϋαϛͰͬͯ·ͱΊ͍ͯͬͨ • ࠷ॳ͔Βᘳࢦ͞ͳ͔ͬͨ • ΧϥʔύϨοτ࠷ॳ͔ΒܾΊͯྑ͍ͷͰ => ૾ͱҧͬͯͨ͘͞Μ͋ͬͨɻ • य़͞Μ ελΠϧΨΠυΛ࡞͍ͬͯͬͯɺ͢Ͱʹ͋Δϖʔδ͔ΒίϯϙʔωϯτΛચ͍ग़͢ͷҰॹɺύʔ πύʔπͰ࡞͍ͬͯ͘ɻ
ͦͦ • σβΠϯγεςϜͬͯݴͬͨ࣌ʹͲ͜·ͰͬͯΔ? • UIKitͱ͔࡞ͬͯΔʁ • Styleguideͱ͔ʁ • ͦΕͱσβΠϯͷυΩϡϝϯτԽ =
ϧʔϧͱݪଇͷ໌จԽͷΈʁ • य़͞Μ: UIKit, StyleGuide, React Component ͷఏڙ • ੴڮ͞Μ: ΄΅ࣅ͍ͯΔɺUIιʔείʔυɺ։ൃऀ͚υΩϡϝϯτɺσβΠϯͷυΩϡϝϯτ Խ͕Ͱ͖ͯͳ͍ • ٶݪ͞Μ: sketch library, React Component, UIKit આ໌͢ΔΨΠυϥΠϯ • σβΠφʔ͕ࣗίʔσΟϯά͍ͯ͠Δ
৫ • σβΠφʔͱΤϯδχΞ͕Ͳ͏ͬͯڠۀͯ͠ Δͷ͔ •
৫ • σβΠφʔɺΤϯδχΞ͚ͩͰͳ͘ɺϓϥϯφʔ·Ͱ͍ࠞͥͯ͘ඞཁ͕͋ΔͷͰɺ ͦͷลΓͷԹײΛͲ͏ͬͯௐͯ͠Δͷ͔ • ੴڮ͞Μ: σβΠφʔ͕ϫΠϠʔΛߟ͑Δ͖ͩͱࢥͬͯΔɺσβΠϯγεςϜΛε ΫϥϜͷதͰಋೖ͢Δ͖ͩͱࢥͬͯΔ͕Ͱ͖͍ͯͳ͍ • य़͞Μ:
σβΠφʔ͚ͩͰͬͯΔɺΤϯδχΞͱڠۀ͜Ε͔ΒɻσβΠφʔ͕ ओମͰͬͯΔ͚ͩͰ͜Ε͔Βͷͱ͜Ζ͕ଟ͍ • ٶݪ͞Μ: SmartHRͰظશһἧͬͯΔ => લ৬ɺσβΠϯΛΩϨΠʹͯ͠ Ϗδωεʹܨ͕Βͳ͍ͷͰʁͱ͋ͬͨͷͰɺࣾϚʔέςΟϯάΩϟϥΫλʔ Λ͍ͯͬͨ͠ɻ • σβΠϯγεςϜνʔϜ ͷ໊લΛ vibes ʹ͍ͯͬͨ͠ɺόΠϒε͋͛͋͛ͬͯ͜ͱʁ
։ൃ • Storybook͕Γ͍͢Ͳ͏ͯ͠Δ? • ٶݪ͞Μ: ઈࢍͬͯΔʂͨͩSmartHRࢿʹ͍ͭͯΈΜͳagreeͳͷͰݴ͏͜ ͱແ͍ɻલ৬ΤϯδχΞͷOKRͷதʹೖΕ͍ͯͬͨɻ • ੴڮ͞Μ: ࡞ͬͨUIϥΠϒϥϦඞͣόʔδϣχϯάͯ͠ΔɺͦͷࠩΘ͔ΔΑ͏
ʹͯ͠Δɺࡉ͔͍ͷඞ͍͔ͣͯ͠ͳ͍ͱ͍͚ͳ͍ɻࣾͷͲΜͳਓͰίϛοτ ͯ͠ྑ͍͜ͱʹͨ͠ɻશʹࣾͰOSSʹ͢ΔͷແͩͬͨͷͰɺϝΠϯϝϯς φΛೖΕΔͳͲΛݕ౼ͨ͠ • य़͞Μ: ࢲ͕Storybookܯͩɻදࣔ֬ೝͱͯ͠࠷ॳ͍͕ͬͯͨɺ͍ͭ࠷ۙ Storybook v5.2͕ग़ͯɺΞϧϑΝ൛͔ΒͬͯΔaddon docs͕ग़ͯɺͦΕʹ߹Θͤ ͯstorybookࣗମΛϝϯςφϯε͍ͯ͠Δ
։ൃ • ͦͦStorybookۦಈͰ։ൃͱ͔ͬͯΔ?
։ൃ • ͦͦStorybookۦಈͰ։ൃͱ͔ͬͯΔ?
Q&A • σβΠϯγεςϜΛطଘͷϓϩδΣΫτʹஈ ֊తʹಋೖͨ͠ਓ or ಋೖ͍ͯ͠Δਓ͕ډΔ͔ ฉ͍ͯ΄͍͠Ͱ͢ʂ
Q&A • 1. ԿΛओతʹσβΠϯγεςϜͷඋΛ࢝Ί·͔ͨ͠ʁ • ex. ϒϥϯυΞΠσϯςΟςΟͷೝɺϢʔβೝෛՙͷ ܰݮɺσβΠϯίετݮɺ࣮ίετݮ • 2.
σβΠϯγεςϜͷӡ༻ΛͲͷׂɺ৬छͷਓ͕ओಋ͠ ͯ·͔͢ʁ
Q&A • σόΠεؒͷࠩΛͲ͏ѻ͏ͷ͔օͷݟฉ ͖͍ͨͰ͢ࢲɻ • ωΠςΟϒͷ iOS ͱ Android Ͱ
Platform ʹ ߹Θͤͨύʔπ (τάϧεΠονͱ͔) ͕͋ͬ ͨ߹ɺWeb ΛͲ͏͢Δ͔ɻ߹ʹΑͬͯ WebView Ͱ͍͢͝ࠔΔΜͰ͢ΑͶɻɻɻ