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
makiozmurai
February 15, 2019
Design
2
2k
ユニークなデザインシステム改革
一般化や汎用性のあるデザインシステムではなく、「エモい命名」や「組織、プロダクトにあった設計」で作るユニークなデザインシステムを構築しよう。
makiozmurai
February 15, 2019
Tweet
Share
Other Decks in Design
See All in Design
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
nikkei_engineer_recruiting
6
800
エンジニアでも捗る デザイナー的思考入門
tinykitten
1
1.2k
アクセシビリティに取り組むメリット
magi1125
2
240
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
1.9k
保育AIプロダクトの UXデザインで考えてきたこと / hoiku-ai-ux-design
hiro93n
0
130
新卒の目から見たサイボウズのデザイン組織
ryota5884
0
170
デザイナー向けフライル説明資料
toshiblues
0
110
Installing and Running decksh/pdfdeck
ajstarks
1
840
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
t2yamaguchi429
0
710
「キャリア」のプロダクトをつくる私の「キャリア」への向き合い方 / JAM de NIGHT DESIGN SESSION Vol3
visional_engineering_and_design
1
150
そのUIコンポーネント、これから先も使えますか?―Headless UI,Open UI,グローバルデザインシステム
sakito
2
1.6k
株式会社バクタム 会社説明資料
bactum
0
290
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Gamification - CAS2011
davidbonilla
81
5.4k
Designing for humans not robots
tammielis
253
25k
KATA
mclloyd
32
14k
4 Signs Your Business is Dying
shpigford
184
22k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Code Review Best Practice
trishagee
70
19k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
830
Transcript
presented by Design system revolution with unique naming Ϣ χ
ʔ Ϋ ͳ σ β Π ϯ γ ε ς Ϝ վ ֵ a ͍ ɺ Ұ ൠ Խ Ί Α ͏ Ϙ ι ο
presented by ͡Ί·ͯ͠ Profile ٠ক࢙ Owls, Inc. ʛCDO ɾ%SFTTDBNQΞγελϯτσβΠφʔ ɾ,*/0ϝϯζϑΝογϣϯσβΠφʔ
ɾ౦ژίϨΫγϣϯΦϦδφϧϒϥϯυͱͯ͠ࢀՃ ɾ#SVUP *ODσβΠφʔϓϥϯφʔ ɾϑϦʔϥϯεσβΠφʔ ɾ0XMT *OD$%0ʢνʔϑσβΠϯΦϑΟαʔʣ
presented by ͡Ί·ͯ͠ Profile اۀՁΛσβΠϯ͢Δ ίϯαϧςΟϯά σβΠϯΧϯύχʔ
presented by ͡Ί·ͯ͠ Profile
presented by ͡Ί·ͯ͠ Profile ͍ͭ͜
presented by ͡Ί·ͯ͠ Profile ͍ͭ͜ ͜ͷΠϕϯτͷΦʔΨφΠβʔ͕ ʮεϙϯαʔΒͳ͍ʁʯ ͬͯ༠ׂ͖ͬͯͨʹϦϛοτɹɹɹɹɹɹͳͷͰ μογϡͰ͠·͢ɻ
presented by 01.ΞτϛοΫσβΠϯΛಋೖ͢Δత 02.ඪ४Խʹಉ࣭Խʁʹӡ༻͍͢͠ͱݴ͑ͳ͍ 03.࣮σβΠϯγεςϜϒϥϯσΟϯάͷ֓೦ͱ͍ۙͷΑ ͓͢Δ͜ͱ Agenda
presented by 01. ΞτϛοΫσβΠϯΛಋೖ͢Δత
presented by ˠΞτϛοΫσβΠϯΛೖΕ͍ͨɻ ɻɻɻࠓͬΆ͍Β͍͠͠ 01.ΞτϛοΫσβΠϯΛಋೖ͢Δత
presented by ˠΞτϛοΫσβΠϯΛೖΕ͍ͨɻ ɻɻɻࠓͬΆ͍Β͍͠͠ 01.ΞτϛοΫσβΠϯΛಋೖ͢Δత ʢ͜Εئʣ
presented by ˠΞτϛοΫσβΠϯΛͬͯӡ༻͍ͨ͠ 01.ΞτϛοΫσβΠϯΛಋೖ͢Δత
presented by ˠΞτϛοΫσβΠϯΛͬͯӡ༻͍ͨ͠ 01.ΞτϛοΫσβΠϯΛಋೖ͢Δత ʢ͜Εئʣ
presented by ˠαʔϏε͕ͯ͠ઃܭࢥ͕͑͏Δӡ༻Λ͍ͨ͠ 01.ΞτϛοΫσβΠϯΛಋೖ͢Δత
presented by ˠαʔϏε͕ͯ͠ઃܭࢥ͕͑͏Δӡ༻Λ͍ͨ͠ 01.ΞτϛοΫσβΠϯΛಋೖ͢Δత ʢ͜Εʂʣ
presented by 02. ඪ४Խʹಉ࣭Խʁʹӡ༻͍͢͠ͱݴ͑ͳ͍
presented by 02.ඪ४Խʹಉ࣭Խʁʹӡ༻͍͢͠ͱݴ͑ͳ͍ Atomic Design ࣮ଶ ΄͑ʔɺ͔֬ʹΘ͔Δʔ ͜ΕͰཧͰ͖ͨΒΧοί͑͑ͳ͋ ATMOSʹΘ͔Δ MOLECULESʹ͏Μɻɻɻ
ORGANISMSʹ͏Μʂʁ TEMPLATESʹ ΤϯδχΞ Θ͔Δɻ σβΠφ ʁʁʁ PAGES= ΤϯδχΞσβΠφʣ·͋·͋ɻɻɻ
presented by ҋਂ͗͢ ࣄҊൃੜத 02.ඪ४Խʹಉ࣭Խʁʹӡ༻͍͢͠ͱݴ͑ͳ͍
presented by "ࣾͱ#ࣾͷΞτϛοΫσβΠϯͷఆٛ ATMOS MOLECULES "ࣾ #ࣾ ͋͞ɺඪ४Խࢦ͠·͠ΐ͏ ORGANISMS 02.ඪ४Խʹಉ࣭Խʁʹӡ༻͍͢͠ͱݴ͑ͳ͍
ཁૉ ҙຯΛ࣋ͨͳ͍άϧʔϓ ҙຯΛ࣋ͬͨίϯςϯπ TEMPLATES ίϯςφͳͲ͕ఆٛ͞Εͨ PAGES ☝͕ΈΘͤΒΕͨϖʔδ ATMOS MOLECULES ORGANISMS ཁૉ -W ίϯϙʔωϯτʢ-W ίϯϙʔωϯτͷίϯϙʔωϯτʢ-W TEMPLATES ҙຯΛ͍࣋ͯͬͯͳ͍ςϯϓϨʔτ PAGES ☝͕ΈΘͤΒΕͨϖʔδ
presented by "ࣾͱ#ࣾͷΞτϛοΫσβΠϯͷఆٛ ATMOS MOLECULES "ࣾ #ࣾ ͋͞ɺඪ४Խࢦ͠·͠ΐ͏ ORGANISMS 02.ඪ४Խʹಉ࣭Խʁʹӡ༻͍͢͠ͱݴ͑ͳ͍
ཁૉ ҙຯΛ࣋ͨͳ͍άϧʔϓ ҙຯΛ࣋ͬͨίϯςϯπ TEMPLATES ίϯςφͳͲ͕ఆٛ͞Εͨ PAGES ☝͕ΈΘͤΒΕͨϖʔδ ATMOS MOLECULES ORGANISMS ཁૉ -W ίϯϙʔωϯτʢ-W ίϯϙʔωϯτͷίϯϙʔωϯτʢ-W TEMPLATES ҙຯΛ͍࣋ͯͬͯͳ͍ςϯϓϨʔτ PAGES ☝͕ΈΘͤΒΕͨϖʔδ ͋͞ɺ͋ͳͨͲΕʁ
presented by "ࣾͱ#ࣾͷΞτϛοΫσβΠϯͷఆٛ ATMOS MOLECULES "ࣾ #ࣾ ͋͞ɺඪ४Խࢦ͠·͠ΐ͏ ORGANISMS 02.ඪ४Խʹಉ࣭Խʁʹӡ༻͍͢͠ͱݴ͑ͳ͍
ཁૉ ҙຯΛ࣋ͨͳ͍άϧʔϓ ҙຯΛ࣋ͬͨίϯςϯπ TEMPLATES ίϯςφͳͲ͕ఆٛ͞Εͨ PAGES ☝͕ΈΘͤΒΕͨϖʔδ ATMOS MOLECULES ORGANISMS ཁૉ -W ίϯϙʔωϯτʢ-W ίϯϙʔωϯτͷίϯϙʔωϯτʢ-W TEMPLATES ҙຯΛ͍࣋ͯͬͯͳ͍ςϯϓϨʔτ PAGES ☝͕ΈΘͤΒΕͨϖʔδ ߹Θͤͨ͘ͳͬͪΌ͏ΑͶ ϧʔϧ
presented by "ࣾͱ#ࣾͷΞτϛοΫσβΠϯͷఆٛ ATMOS MOLECULES "ࣾ #ࣾ ͋͞ɺඪ४Խࢦ͠·͠ΐ͏ ORGANISMS 02.ඪ४Խʹಉ࣭Խʁʹӡ༻͍͢͠ͱݴ͑ͳ͍
ཁૉ ҙຯΛ࣋ͨͳ͍άϧʔϓ ҙຯΛ࣋ͬͨίϯςϯπ TEMPLATES ίϯςφͳͲ͕ఆٛ͞Εͨ PAGES ☝͕ΈΘͤΒΕͨϖʔδ ATMOS MOLECULES ORGANISMS ཁૉ -W ίϯϙʔωϯτʢ-W ίϯϙʔωϯτͷίϯϙʔωϯτʢ-W TEMPLATES ҙຯΛ͍࣋ͯͬͯͳ͍ςϯϓϨʔτ PAGES ☝͕ΈΘͤΒΕͨϖʔδ ׂͱࡉ͔͘ఆٛ͞ΕͯΔ෩ -Wදه֊ߏ
presented by "ࣾͱ#ࣾͷΞτϛοΫσβΠϯͷఆٛ ATMOS MOLECULES "ࣾ #ࣾ Ծʹࢮ͵ؾͰ߹Θͤͨͱ͠Α͏ɻ ORGANISMS 02.ඪ४Խʹಉ࣭Խʁʹӡ༻͍͢͠ͱݴ͑ͳ͍
ཁૉ ҙຯΛ࣋ͨͳ͍άϧʔϓ ҙຯΛ࣋ͬͨίϯςϯπ TEMPLATES ίϯςφͳͲ͕ఆٛ͞Εͨ PAGES ☝͕ΈΘͤΒΕͨϖʔδ ATMOS MOLECULES ORGANISMS ཁૉ ҙຯΛ࣋ͨͳ͍άϧʔϓ ҙຯΛ࣋ͬͨίϯςϯπ TEMPLATES ίϯςφͳͲ͕ఆٛ͞Εͨ PAGES ☝͕ΈΘͤΒΕͨϖʔδ
presented by "ࣾͱ#ࣾͷΞτϛοΫσβΠϯͷఆٛ ATMOS MOLECULES "ࣾ #ࣾ Ծʹࢮ͵ؾͰ߹Θͤͨͱ͠Α͏ɻ ORGANISMS 02.ඪ४Խʹಉ࣭Խʁʹӡ༻͍͢͠ͱݴ͑ͳ͍
ཁૉ ҙຯΛ࣋ͨͳ͍άϧʔϓ ҙຯΛ࣋ͬͨίϯςϯπ TEMPLATES ίϯςφͳͲ͕ఆٛ͞Εͨ PAGES ☝͕ΈΘͤΒΕͨϖʔδ ATMOS MOLECULES ORGANISMS ཁૉ ҙຯΛ࣋ͨͳ͍άϧʔϓ ҙຯΛ࣋ͬͨίϯςϯπ TEMPLATES ίϯςφͳͲ͕ఆٛ͞Εͨ PAGES ☝͕ΈΘͤΒΕͨϖʔδ ࣮ɺଞαʔϏεͷίϯϙʔωϯτࢦ͕ ϕʔεʹͳ͍ͬͯͨͨΊɺ ରαʔϏεͷߟ͑ํ͕վఆ͞Ε ่յ
presented by "ࣾͱ#ࣾͷΞτϛοΫσβΠϯͷఆٛ ATMOS MOLECULES "ࣾ #ࣾ Ծʹࢮ͵ؾͰ߹Θͤͨͱ͠Α͏ɻ ORGANISMS 02.ඪ४Խʹಉ࣭Խʁʹӡ༻͍͢͠ͱݴ͑ͳ͍
ཁૉ ҙຯΛ࣋ͨͳ͍άϧʔϓ ҙຯΛ࣋ͬͨίϯςϯπ TEMPLATES ίϯςφͳͲ͕ఆٛ͞Εͨ PAGES ☝͕ΈΘͤΒΕͨϖʔδ ATMOS MOLECULES ORGANISMS ཁૉ ҙຯΛ࣋ͨͳ͍άϧʔϓ ҙຯΛ࣋ͬͨίϯςϯπ TEMPLATES ίϯςφͳͲ͕ఆٛ͞Εͨ PAGES ☝͕ΈΘͤΒΕͨϖʔδ ͦͯͪ͠ΖΜࢮ͵ؾͰ߹Θͤͨ#ࣾ ่յ ࣮ɺଞαʔϏεͷίϯϙʔωϯτࢦ͕ ϕʔεʹͳ͍ͬͯͨͨΊɺ ରαʔϏεͷߟ͑ํ͕վఆ͞Ε ่յ
presented by "ࣾͱ#ࣾͷΞτϛοΫσβΠϯͷఆٛ ATMOS MOLECULES "ࣾ #ࣾ Ծʹࢮ͵ؾͰ߹Θͤͨͱ͠Α͏ɻ ORGANISMS 02.ඪ४Խʹಉ࣭Խʁʹӡ༻͍͢͠ͱݴ͑ͳ͍
ཁૉ ҙຯΛ࣋ͨͳ͍άϧʔϓ ҙຯΛ࣋ͬͨίϯςϯπ TEMPLATES ίϯςφͳͲ͕ఆٛ͞Εͨ PAGES ☝͕ΈΘͤΒΕͨϖʔδ ATMOS MOLECULES ORGANISMS ཁૉ ҙຯΛ࣋ͨͳ͍άϧʔϓ ҙຯΛ࣋ͬͨίϯςϯπ TEMPLATES ίϯςφͳͲ͕ఆٛ͞Εͨ PAGES ☝͕ΈΘͤΒΕͨϖʔδ ͦͯͪ͠ΖΜࢮ͵ؾͰ߹Θͤͨ#ࣾ ่յ ࣮ɺଞαʔϏεͷίϯϙʔωϯτࢦ͕ ϕʔεʹͳ͍ͬͯͨͨΊɺ ରαʔϏεͷߟ͑ํ͕վఆ͞Ε ่յ όϧεʂ
presented by "ࣾͱ#ࣾͷΞτϛοΫσβΠϯͷఆٛ ATMOS MOLECULES "ࣾ #ࣾ ͋͞ɺඪ४Խࢦ͠·͠ΐ͏ ORGANISMS 02.ඪ४Խʹಉ࣭Խʁʹӡ༻͍͢͠ͱݴ͑ͳ͍
ཁૉ ҙຯΛ࣋ͨͳ͍άϧʔϓ ҙຯΛ࣋ͬͨίϯςϯπ TEMPLATES ίϯςφͳͲ͕ఆٛ͞Εͨ PAGES ☝͕ΈΘͤΒΕͨϖʔδ ATMOS MOLECULES ORGANISMS ཁૉ -W ίϯϙʔωϯτʢ-W ίϯϙʔωϯτͷίϯϙʔωϯτʢ-W TEMPLATES ҙຯΛ͍࣋ͯͬͯͳ͍ςϯϓϨʔτ PAGES ☝͕ΈΘͤΒΕͨϖʔδ ׂͱࡉ͔͘ఆٛ͞ΕͯΔ෩ -Wදه֊ߏͳͷͰѱ͘Θͳ͍ ଧͭखͳ͠
presented by "ࣾͱ#ࣾͷΞτϛοΫσβΠϯͷఆٛ ATMOS MOLECULES "ࣾ #ࣾ ͋͞ɺඪ४Խࢦ͠·͠ΐ͏ ORGANISMS 02.ඪ४Խʹಉ࣭Խʁʹӡ༻͍͢͠ͱݴ͑ͳ͍
ཁૉ ҙຯΛ࣋ͨͳ͍άϧʔϓ ҙຯΛ࣋ͬͨίϯςϯπ TEMPLATES ίϯςφͳͲ͕ఆٛ͞Εͨ PAGES ☝͕ΈΘͤΒΕͨϖʔδ ATMOS MOLECULES ORGANISMS ཁૉ -W ίϯϙʔωϯτʢ-W ίϯϙʔωϯτͷίϯϙʔωϯτʢ-W TEMPLATES ҙຯΛ͍࣋ͯͬͯͳ͍ςϯϓϨʔτ PAGES ☝͕ΈΘͤΒΕͨϖʔδ ׂͱࡉ͔͘ఆٛ͞ΕͯΔ෩ -Wදه֊ߏͳͷͰѱ͘Θͳ͍ ͍͍͡Όͳ͍ͷΑɻ ϢχʔΫͳఆٛҰॹʹ࡞Ζ͏Α
presented by "ࣾͱ#ࣾͷΞτϛοΫσβΠϯͷఆٛ ATMOS MOLECULES "ࣾ #ࣾ ͋͞ɺඪ४Խࢦ͠·͠ΐ͏ ORGANISMS 02.ඪ४Խʹಉ࣭Խʁʹӡ༻͍͢͠ͱݴ͑ͳ͍
ཁૉ ҙຯΛ࣋ͨͳ͍άϧʔϓ ҙຯΛ࣋ͬͨίϯςϯπ TEMPLATES ίϯςφͳͲ͕ఆٛ͞Εͨ PAGES ☝͕ΈΘͤΒΕͨϖʔδ ATMOS MOLECULES ORGANISMS ཁૉ -W ίϯϙʔωϯτʢ-W ίϯϙʔωϯτͷίϯϙʔωϯτʢ-W TEMPLATES ҙຯΛ͍࣋ͯͬͯͳ͍ςϯϓϨʔτ PAGES ☝͕ΈΘͤΒΕͨϖʔδ ׂͱࡉ͔͘ఆٛ͞ΕͯΔ෩ -Wදه֊ߏͳͷͰѱ͘Θͳ͍ σβΠϯγεςϜ ඪ४Խ͢Δ͖Ͱͳ͍ɻ
presented by 03. ࣮σβΠϯγεςϜϒϥϯσΟϯάͷ֓೦ͱ͍ۙͷΑ
presented by 03.࣮σβΠϯγεςϜϒϥϯσΟϯάͷ֓೦ͱ͍ۙͷΑ ͜͜Ͱ͍͖ͳΓ ϒϥϯυͷ
presented by 03.࣮σβΠϯγεςϜϒϥϯσΟϯάͷ֓೦ͱ͍ۙͷΑ Ϛελʔϒϥϯυମܥ ϑϦʔελϯσ Οϯάϒϥϯυମܥ $* #*7* $* #*7*
ϝϦοτ σϝϦοτ ϒϥϯυͷίϛϡχέʔγϣϯޮ͕͍͍ ѱධ͕શମʹٴͿՄೳੑ͕͋Δ ϑϦʔελϯσΟϯάϒϥϯυମܥ ϝϦοτ σϝϦοτ ݸผͷੈք؍Λࣗ༝ʹߏங ͦΕͧΕʹϚʔέςΟϯάίετ͕͔͔Δ
presented by 03.࣮σβΠϯγεςϜϒϥϯσΟϯάͷ֓೦ͱ͍ۙͷΑ ͳΜ͔ۙ͘ͳ͍ʁ
presented by 03.࣮σβΠϯγεςϜϒϥϯσΟϯάͷ֓೦ͱ͍ۙͷΑ Ϛελʔϒϥϯυମܥ ϑϦʔελϯσ Οϯάϒϥϯυମܥ $* #*7* $* #*7*
"ࣾ #ࣾ ϝϦοτ σϝϦοτ ։ൃ͕গͳ͍ վम͕શମʹٴͿՄೳੑ͕͋Δ ϑϦʔελϯσΟϯάϒϥϯυମܥ ϝϦοτ σϝϦοτ ݸผͷੈք؍Λࣗ༝ʹߏங ͦΕͧΕʹ։ൃίετ͕͔͔Δ The Design System
presented by 03.࣮σβΠϯγεςϜϒϥϯσΟϯάͷ֓೦ͱ͍ۙͷΑ αʔϏε͝ͱʹ ࠷దԽ͞ΕͯવΔ͖
presented by ࠷ޙʹ Epilogue " 5 - " 4 4
* " / " J S C O C 4 Q P U J G Z
presented by ࠷ޙʹ Epilogue ا ۀ Ձ Λ σ
β Π ϯ ͢ Δ ຊ 6 4 ͔ Β Ε ͯ ͍ · ͢ ɻ σ β Π ϯ γ ε ς Ϝ ੈ ք Ͱ ඪ ४ ͱ ͳ Γ ͭ ͭ ͋ Γ · ͢ ɻ ͦ ͷ ߟ ͑ ɺ ج ຊ ଟ ༷ Խ ͠ ͯ ͍ · ͢ ɻ
presented by ࠷ޙʹ Epilogue Ұ ॹ ʹ ࡞ Ζ ͏
Ξ ϧ ε ί ϯ α ϧ ܕ ͷ σ β Π ϯ ৫ ɻ ক དྷ ࣗ Ͱ ࣄ ۀ Λ ى ͜ ͠ ͨ ͍ ਓ ɺ ݸ ͷ ྗ Λ ࠷ େ Խ ͞ ͤ ͨ ͍ ਓ Π ϊ ϕ ʔ γ ϣ ϯ ͷ ۙ ͘ ʹ ͍ ͳ ͚ Ε ͍ ͚ ͳ ͍ ɻ
presented by ࠷ޙʹ Epilogue Ұ ॹ ʹ ࡞ Ζ ͏
༷ ʑ ͳ α ʔ Ϗ ε ͱ Ϗ δ ω ε ʹ ৮ Ε ͯ ɺ ࠓ ׆ ͖ Δ ٕ ज़ Ͱ ͳ ͘ ɺ ະ དྷ ͷ ࣗ ͷ ͨ Ί ͷ ܦ ݧ ʹ ࢿ ͠ Α ͏ ɻ
presented by '*/