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
SaaSのマーケティングを進めるサービスサイトを育てる取り組み / Designship 2024 Main Stage
sms_tech
1
1.4k
デザインシステム構築の進め方 基本から実践まで、具体的な手順を徹底解説
ncdc
1
370
Design System for training program
mct
0
310
最速[要出典]アクセシビリティチェック
magi1125
2
160
Charcoal 2.0: デザインシステムの基盤を再構築
godlingkogami
1
700
How to go from research data to insights?
mastervicedesign
0
200
一人ひとりのポテンシャルを活かしたナレッジマネジメントとは?
atsushihomma
0
330
【pmconf2024】ユーザーになりきる「コスプレUX」で リサーチ解像度を上げる
kamechi7222222
1
8k
Карта реализации историй — убийца USM
ashapiro
0
300
Money Forward UIの紹介 / Introducing Money Forward UI
taigakiyokawa
1
2.8k
The Very Small Creatures - dressing up warm sequence
lizziestoryboards
0
130
プロダクトデザインの「守破離」の「破」について
hayashirine
0
290
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
How STYLIGHT went responsive
nonsquared
96
5.3k
Side Projects
sachag
452
42k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
The Invisible Side of Design
smashingmag
299
50k
KATA
mclloyd
29
14k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
26
1.9k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
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 '*/