Share
Embed
ユニークなデザインシステム改革
一般化や汎用性のあるデザインシステムではなく、「エモい命名」や「組織、プロダクトにあった設計」で作るユニークなデザインシステムを構築しよう。
makiozmurai
February 15, 2019
Transcript
39 slides
-
presented by Design system revolution with unique naming Ϣ χ
ʔ Ϋ ͳ σ β Π ϯ γ ε ς Ϝ վ ֵ a ͍ ɺ Ұ ൠ Խ Ί Α ͏ Ϙ ι ο -
presented by ͡Ί·ͯ͠ Profile ٠ক࢙ Owls, Inc. ʛCDO ɾ%SFTTDBNQΞγελϯτσβΠφʔ ɾ,*/0ϝϯζϑΝογϣϯσβΠφʔ
ɾ౦ژίϨΫγϣϯΦϦδφϧϒϥϯυͱͯ͠ࢀՃ ɾ#SVUP *ODσβΠφʔϓϥϯφʔ ɾϑϦʔϥϯεσβΠφʔ ɾ0XMT *OD$%0ʢνʔϑσβΠϯΦϑΟαʔʣ -
presented by 02.ඪ४Խʹಉ࣭Խʁʹӡ༻͍͢͠ͱݴ͑ͳ͍ Atomic Design ࣮ଶ ΄͑ʔɺ͔֬ʹΘ͔Δʔ ͜ΕͰཧͰ͖ͨΒΧοί͑͑ͳ͋ ATMOSʹΘ͔Δ MOLECULESʹ͏Μɻɻɻ
ORGANISMSʹ͏Μʂʁ 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 ☝͕ΈΘͤΒΕͨϖʔδ ߹Θͤͨ͘ͳͬͪΌ͏ΑͶ ϧʔϧ -
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.࣮σβΠϯγεςϜϒϥϯσΟϯάͷ֓೦ͱ͍ۙͷΑ Ϛελʔϒϥϯυମܥ ϑϦʔελϯσ Οϯάϒϥϯυମܥ $* #*7* $* #*7*
ϝϦοτ σϝϦοτ ϒϥϯυͷίϛϡχέʔγϣϯޮ͕͍͍ ѱධ͕શମʹٴͿՄೳੑ͕͋Δ ϑϦʔελϯσΟϯάϒϥϯυମܥ ϝϦοτ σϝϦοτ ݸผͷੈք؍Λࣗ༝ʹߏங ͦΕͧΕʹϚʔέςΟϯάίετ͕͔͔Δ -
presented by 03.࣮σβΠϯγεςϜϒϥϯσΟϯάͷ֓೦ͱ͍ۙͷΑ Ϛελʔϒϥϯυମܥ ϑϦʔελϯσ Οϯάϒϥϯυମܥ $* #*7* $* #*7*
"ࣾ #ࣾ ϝϦοτ σϝϦοτ ։ൃ͕গͳ͍ վम͕શମʹٴͿՄೳੑ͕͋Δ ϑϦʔελϯσΟϯάϒϥϯυମܥ ϝϦοτ σϝϦοτ ݸผͷੈք؍Λࣗ༝ʹߏங ͦΕͧΕʹ։ൃίετ͕͔͔Δ The Design System -
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 Ұ ॹ ʹ ࡞ Ζ ͏
༷ ʑ ͳ α ʔ Ϗ ε ͱ Ϗ δ ω ε ʹ ৮ Ε ͯ ɺ ࠓ ׆ ͖ Δ ٕ ज़ Ͱ ͳ ͘ ɺ ະ དྷ ͷ ࣗ ͷ ͨ Ί ͷ ܦ ݧ ʹ ࢿ ͠ Α ͏ ɻ