モバイル開発をしている上でデザインとの関係性は切手は切れない関係だとお思います。 また、プロダクト自体も成長に伴い複雑性がましてきました。そのときに私はデザインシステム に注目して様々なアプローチしてきました。
本発表ではあまり馴染みではない「デザインシステム」はどういうものなのかという基本的な話から ではどのようにしてプロダクトにデザインシステムを導入し、どこまで何をしていったのか エンジニアリングを持って何を解決していったのかを解説します。
J04%$αʔϏεʹ͓͚Δ%FTJHO4ZTUFNͷߏங
View Slide
4PGUXBSF&OHJOFFS%F/"J04%$4UB⒎/,+*OUFSOFUJ04"OESPJENBD04
͖͔͚ͬ
σβΠφෆ˞ݱ৬Ͱͳ͍
σβΠφɾΤϯδχΞͷೝࣝͷҧ͍
%FTJHO4ZTUFN
%FTJHO4ZTUFNwσβΠϯݪଇɺϒϥϯυɺελΠϧΨΠυɺύλʔϯϥΠϒϥϦͳͲʹΑͬͯߏ͞Εͨͷ
%FTJHO4ZTUFNwσβΠϯݪଇɺϒϥϯυɺελΠϧΨΠυɺύλʔϯϥΠϒϥϦͳͲʹΑͬͯߏ͞Εͨͷw།ҰͷࢦͰ͋Γ৫શମʹ͓͚ΔσβΠϯͷڞ௨ݴޠ
Կ͕มΘΔͷʁwνʔϜϝϯό͕Ұ؏ͨ͠σβΠϯʹΑΔ69ͷఏڙ͕Ͱ͖ΔwνʔϜϝϯόʹΑΔޮతͳ։ൃ͕Ͱ͖ΔwσβΠϯࣝͷਁಁ
ࣄྫ
5&%wϧʔϧɿΏΔ͍w෦ɿ݁߹ܕw৫ɿࢄܕ
"JSCOCwϧʔϧɿݫ֨w෦ɿϞδϡʔϧܕPS݁߹ܕw৫ɿूதܕIUUQTBJSCOCEFTJHOCVJMEJOHBWJTVBMMBOHVBHF
#PPUTUSBQ
5XJUUFS#PPUTUSBQwϧʔϧɿݫ֨w෦ɿϞδϡʔϧܕPS݁߹ܕw৫ɿ
)*(
.BUFSJBM%FTJHO
✍
%FTJHO4ZTUFNw୯७ʹελΠϧΨΠυɺύλʔϯϥΠϒϥϦͷπʔϧ܈ͱ͍͏Θ͚Ͱͳ͍w࡞Γํʹܾ·ͬͨܗ͕ࣜͳ͍
ࢥ
σβΠϯݪଇ
ڧऑۙ ෮ྻ
ڧऑۙ ෮ྻ T
ϓϩμΫτΛ࡞Δͱ͖ʹେʹͯ͠ཉ͍͜͠ͱ
%FTJHO4ZTUFN ελΠϧΨΠυίϯϙʔωϯτϥΠϒϥϦϓϩμΫτσβΠϯݪଇϒϥϯσΟϯάΨΠυϥΠϯใઃܭ5ZQPHSBQIZ$PMPS4QBDJOH(SJE/BWJHBUJPO"MFSU*UFNMJTU*DPO*NBHF#VUUPO
σβΠϯݪଇͷಛwγϯϓϧͰΘ͔Γ͍͢wͦΕ͕આ໌Ͱ͖ΔwͲ͕͜༏ઌ͞Ε͍ͯΔͷ͔͕Θ͔Δwؔ࿈͚͘͢ɺ͍֮͑͢
TIUUQTQSJODJQMFTEFTJHO
"QQMF
&TTFOUJBM%FTJHO1SJODJQMFTIUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED
IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED
(PPHMF
w.BUFSJBMJTUIFNFUBQIPSw#PME HSBQIJD JOUFOUJPOBMw.PUJPOQSPWJEFTNFBOJOHw'MFYJCMFGPVOEBUJPOw$SPTTQMBUGPSN.BUFSJBM%FTJHO
)*(ɺ.BUFSJBM%FTJHOͰ͍͍ͷͰͳ͍͔ʁ
αʔϏεಛ༗ͷԿ͔ͳ͍͔ߟ͢Δ
αʔϏεಛ༗ͷԿ͔wϒϥϯσΟϯάwͲ͏ݟΒΕ͍͔ͨwϢʔβʔετʔϦʔwԿΛղܾ͍ͤͨ͞ͷ͔wνʔϜͷՁ؍
αʔϏεʹ͓͚ΔσβΠϯݪଇϓϥοτϑΥʔϜʹ͓͚ΔσβΠϯݪଇ
ελΠϧΨΠυ
ελΠϧΨΠυw5ZQPHSBQIZw$PMPSw4QBDFw(SJEw&UD
ελΠϧΨΠυwͲͷΑ͏ʹཧ͢Δ͔w໋໊͢ΔwҙຯΛ࣋ͨͤΔ
ύλʔϯϥΠϒϥϦ
ύλʔϯϥΠϒϥϦwσβΠϯύλʔϯͷηοτ
ύλʔϯϥΠϒϥϦw#VUUPOw"MFSUw/BWJHBUJPOw-JTUw&UD
ύλʔϯϥΠϒϥϦwॏཁͳͷ͔Βநग़wࢹೝੑͷߴ͍ॴΛ༻ҙ
1PDPDIBʹ͓͚Δ%FTJHO4ZTUFN
1PDPDIBwιʔγϟϧϥΠϒ৴ΞϓϦwdwଟ࠼ͳΠϕϯτاըΛ࣮ࢪwϨϕϧʹԠͨ͡ԋग़ΪϛοΫ
1PDPDIBw͕̎ܦա͠ϓϩδΣΫτͷن֦େwΑΓେ͖͍νʔϜͰϓϩδΣΫτӡ༻͢Δసظ
ϓϩμΫτ࡞Γͷೝࣝͷҧ͍
ݴޠԽ
ݴޠԽͷඞཁੑwཧղͷڧԽw྆ϓϥοτϑΥʔϜͷඍົͳҧ͍ΛΧόʔwαʔϏεಛ༗ͷ֓೦
ݴޠԽͷඞཁੑwཧղͷڧԽw྆ϓϥοτϑΥʔϜͷඍົͳҧ͍ΛΧόʔwαʔϏεಛ༗ͷ֓೦ཧϨϏϡʔ͠ͳͯ͘6*ઃܭ࣌ʹߟྀ࣮ͯ͠ߦ͕Ͱ͖͍ͯΔ
%PDVNFOU
%PDVNFOUwݱঢ়wղܾࡦwͳͥͳͷ͔Λهड़w۩ମྫ
%PDVNFOUwཧղΛਂΊͯΒ͏wͦΕΛԠ༻֤ͯࣗ͠Ͱద࣮͕ٓͰ͖Δ
ൣғwϧʔϧɿΏΔ͍w෦ɿϞδϡʔϧܕw৫ɿࢄܕ
σβΠϯݪଇwࢹௌɾ৴ը໘wͦΕҎ֎
σβΠϯݪଇwࢹௌɾ৴ը໘wָ͠͞ɾײಈΛલ໘ʹwͦΕҎ֎wγϯϓϧɺ؆୯ɺΘ͔Γ͍͢
վળ
σβΠϯݪଇwϢʔβಉ࢜ʹͱ͜ͱΜָ͠ΜͰΒ͏w࣮ͳͱ͜Ζ࣮ʹ
.BUFSJBM%FTJHO)*(
αʔϏεʹ͓͚ΔσβΠϯݪଇϓϥοτϑΥʔϜʹ͓͚ΔσβΠϯݪଇ1PDPDIBΒ͠͞Λ౿ऻͤ͞Δ
֤ཁૉʹམͱ͠ࠐΉ
σβΠϯݪଇwΠϯλϥΫγϣϯwϥΠςΟϯά
ΠϯλϥΫγϣϯw5SBOTJUJPOw7BMJEBUJPOw/FUXPSLJOH
5SBOTJUJPOw.PEBMwҙͷ࡞ۀʹूதw.PEBMPO.PEBMw/BWJHBUJPOw֊తͳใॏཁͳใ
5SBOTJUJPOw.PEBMwҙͷ࡞ۀʹूதw.PEBMPO.PEBMw/BWJHBUJPOw֊తͳใίϯςΩετҡ࣋
7BMJEBUJPOw'FFECBDLϦΞϧλΠϜʹwϢʔβʹબࢶΛ༩͑ͳ͍wԿΛೖྗ͢Δͷ͔໌֬ʹ͢ΔwΤϥʔදࣔͤͣ͞ʹࣄલʹࢭΊΔ
/FUXPSLJOHwݪଇ௨৴ҙࣝͤ͞ͳ͍wඇಉظͳͷ͔ಉظͳͷ͔ΛݟۃΊΔw௨৴தͷදݱ͞Γ͛ͳ͘
ϥΠςΟϯάw5POFw.FTTBHFw"MFSUw&SSPS
ελΠϧΨΠυw5ZQPHSBQIZw$PMPSw4QBDFw&UD
ίʔυԽͱࢹ֮Խ
ελΠϧΨΠυw໊લͰཧղɾ࣮Մೳʹ͢ΔwੜࣗಈԽwGSBNFXPSLΛผʹͯ͠ཧ
w໊લͰཧղɾ࣮Մೳʹ͢ΔwੜࣗಈԽwGSBNFXPSLΛผʹͯ͠ཧελΠϧΨΠυ4XJGU(FO
w໊લͰཧղɾ࣮Մೳʹ͢ΔwੜࣗಈԽwGSBNFXPSLΛผʹͯ͠ཧελΠϧΨΠυ
ύλʔϯϥΠϒϥϦw#VUUPOw"MFSUw/BWJHBUJPOw-JTUFUD
ύλʔϯϥΠϒϥϦw໊લͰཧղɾ࣮Մೳʹ͢ΔwGSBNFXPSLΛผʹͯ͠ཧwՄࢹԽw֬ೝ༻ͷεΩʔϚΛ࡞
·ͱΊ
%FTJHO4ZTUFNwσβΠϯݪଇ͔ΒܾΊ͍ͯ͘wϞόΠϧϓϥοτϑΥʔϜͷ%FTJHO4ZTUFNΛ౿ऻͤ͞Δ
%FTJHO4ZTUFNwͲΜͳϑΣʔζɺνʔϜنͰ͋Εɺେখ͋ΕͲݴޠԽɾࢹ֮Խ͢Δ͜ͱҰ؏ͨ͠ϓϩμΫτ࡞ΓʹେͳׂΛՌͨͯ͘͠ΕΔ
%FBJHO0QT
5IBOLT
&OKPZ