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
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
9
3.8k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.1k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
230
Removing Corepack
yosuke_furukawa
PRO
9
1.6k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.8k
Strip Types と Storage
yosuke_furukawa
PRO
4
410
Module Harmony について
yosuke_furukawa
PRO
3
1.7k
LTのやり方
yosuke_furukawa
PRO
16
2.6k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
810
Other Decks in Programming
See All in Programming
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
3
470
What's new in AppKit on macOS 26
1024jp
0
140
Hack Claude Code with Claude Code
choplin
6
2.4k
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
2
20k
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
670
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
280
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
170
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
370
型で語るカタ
irof
0
530
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
240
すべてのコンテキストを、 ユーザー価値に変える
applism118
4
1.4k
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
330
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
It's Worth the Effort
3n
185
28k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Git: the NoSQL Database
bkeepers
PRO
430
65k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Making Projects Easy
brettharned
116
6.3k
A designer walks into a library…
pauljervisheath
207
24k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Unsuck your backbone
ammeep
671
58k
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 Ͱ͍͢͝ࠔΔΜͰ͢ΑͶɻɻɻ