開発プロセスの判断を「速」にするデザインシステム

2021.12.09 Pepabo Tech Conference #18 で発表した資料です。

Transcript

1. ։ൃϓϩηεͷ൑அΛ ʮ଎ʯʹ͢Δ σβΠϯγεςϜ ࢁྛ ѯ / GMO PEPABO inc. 2021.12.09 Pepabo Tech Conference #18 1
2. 2 ࣗݾ঺հ ECࣄۀ෦ ࢁྛ ѯ Yamarin Akane σβΠϯϦʔυͱͯ͠ɺECࣄۀ෦ͷσβΠϯ૊৫ ΍αʔϏεશମͷσβΠϯΛݟ͍ͯΔɻ ͨ·ʹPdM΋΍ͬͯΔɻ • ೋਓͷଉࢠ͕͓Γɺࠓ೥4݄ʹҭٳ͔Β෮ؼ • ΞαώεʔύʔυϥΠΛѪ͢ΔϏʔϧΫζ • Twitter : @getsukikyu 2011೥ த్ೖࣾ
3. 3 ࠓ೔͓࿩͢Δ͜ͱ ։ൃϓϩηεͷ൑அΛʮ଎ʯʹ͢ΔσβΠϯγεςϜ ͜ͷ࣌ؒͰ͸ٕज़ͷࡉ͔͍෦෼·Ͱ͸঺հͰ͖·ͤΜ͕ σβΠϯγεςϜΛಋೖ͢Δ͜ͱͰ ։ൃϓϩηεͰ౎౓ൃੜ͢Δ൑அ͕ૣ͘ߦ͏͜ͱ͕Ͱ͖ ͦͷ݁Ռͦͷ݁ՌΑΓՁ஋͋Δ։ൃʹ஫ྗͰ͖ΔΑ͏ʹ͢Δ औΓ૊Έʹ͍͓ͭͯ࿩͠·͢ɻ
4. 4 ϖύϘͷ σβΠϯγεςϜ
5. ϖύϘͷσβΠϯγεςϜ 5 ϒϥϯυ͕λονϙΠϯτΛ׆༻ͨ͠ମݧઃܭΛޮ཰తʹ͓͜ͳ͏ͨΊʹɺ͋Β͔͡Ί ݪଇ΍ΨΠυϥΠϯΛఆΊͯɺͦͷ࣮૷ͱͯ͠ΧϥʔύϨοτ΍ίϯϙʔωϯτϥΠϒϥ ϦͳͲͷΞηοτΛ༻ҙͨ͠΋ͷɻ σβΠϯγεςϜͱ͸ Pepabo DesignʮInhouseͱ͸ʯ
6. ϖύϘͷσβΠϯγεςϜ 6 ϖύϘ͸ʮΠϯλʔωοτͰՄೳੑΛͭͳ͛ΔɺͻΖ͛Δʯͱ͍͏ϛογϣϯͷ΋ͱɺϨ ϯλϧαʔόʔ΍υϝΠϯͷऔಘɺϗʔϜϖʔδ΍ωοτγϣοϓͷ࡞੒ɺϋϯυϝΠυ ࡞඼ͷചങ΍ΦϦδφϧάοζΛࡏݿΛ࣋ͨͣʹൢചͰ͖ΔαʔϏεͳͲɺଟ༷ͳࣄۀ Λɺଟ༷ͳϒϥϯυͰల։͍ͯ͠Δɻ ͜ͷϚϧνϒϥϯυઓུ͸ɺݸੑతͳϖύϘͷαʔϏεΛಛ௃͚ͮΔ͚ͩͰͳ͘ɺࢢ৔Λ ֬อ͚ͭͮ͠ΔϦεΫϔοδͱͯ͠΋ػೳ͢ΔҰํͰɺαʔϏεΛ௒͑ͯσβΠϯΛల։ ͢Δͷ͕೉͍͠ͱ͍͏ଆ໘΋͋ͬͨɻ ෳ਺ͷαʔϏεϒϥϯυ͕ଘࡏ͢ΔϖύϘͳΒͰ͸ͷ՝୊ ϖύϘςοΫϒϩάʮϖύϘͷσβΠϯγεςϜͷυΩϡϝϯτΛެ։͠·͢ʯ
7. ϖύϘͷσβΠϯγεςϜ 7 ֤αʔϏε͕ݸผʹߟ͍͍͑ͯͯΔݪଇ΍ΨΠυϥΠϯɺ࣮૷͍ͯͨ͠Ξηοτͷ͏ͪɺ ॏෳ͍ͯ͠Δ΋ͷΛ͢΂ͯͷαʔϏεͰ࢖͑ΔΑ͏ʹҰൠԽ͠ɺڞ௨ج൫σβΠϯγες ϜInhouseͱͯ͋͠Β͔͡Ί༻ҙ͓ͯ͘͠ɻ ڞ௨ج൫σβΠϯγεςϜʮInhouseʯʹΑΔҰൠԽͱޮ཰Խ Pepabo DesignʮInhouseͱ͸ʯ
8. ϖύϘͷσβΠϯγεςϜ 8 ϖύϘͰ͸ෳ਺ͷαʔϏεΛӡӦ͍ͯ͠Δ͜ ͱ͔ΒɺInhouse͸ෳ਺ͷϒϥϯυͰ࢖༻͢Δ ͜ͱΛલఏͱ͢Δඞཁ͕͋ΓʮFlavorʯͱ͍ ͏࢓૊ΈΛ࠾༻ɻ৭΍ܗͳͲɺϒϥϯυʹ Α্ͬͯॻ͖ՄೳͳσβΠϯτʔΫϯΛ FlavorͱݺΜͰ͍Δม਺ʹ·ͱΊ͓ͯ͘͜ͱ ͰɺFlavorΛࠩ͠ସ͑Δ͜ͱͰϒϥϯυΠ ϝʔδΛ่͞ͳ͍σβΠϯ͕Ͱ͖ΔΑ͏ʹ ͳ͍ͬͯΔɻ ϒϥϯυΠϝʔδΛ่͞ͳ͍࢓૊ΈʮFlavorʯ Pepabo DesignʮInhouseͱ͸ʯ
9. 9 Χϥʔϛʔγϣοϓͷ σβΠϯγεςϜ
10. 10 Χϥʔϛʔγϣοϓ σβΠϯγεςϜ Flippers ϑϦούʔζ ΧϥʔϛʔγϣοϓͷσβΠϯγεςϜ
11. ΧϥʔϛʔγϣοϓͷσβΠϯγεςϜ - Flippers 11 ΧϥʔϛʔγϣοϓͷαʔϏεن໛͕֦େ͢ΔʹͭΕͯεςʔΫϗϧμʔ΋૿͑ɺ༷ʑͳ ϓϩδΣΫτ͕ฒߦͯ͠ಈ͘ঢ়گͰɺ͋ΒΏΔλονϙΠϯτ͔Βఏڙ͢ΔϢʔβʔମݧ ʹҰ؏ੑΛ࣋ͨͤΔʹ͸Ͳ͏͢Ε͹ྑ͍͔ɻ ·ͨͦΕΒΛεϐʔυײΛଛͳΘͣʹߦ͏ʹ͸Ͳ͏͢Ε͹ྑ͍͔ɻ Flippers ஀ੜͷܦҢ Χϥʔϛʔγϣοϓͷڞ௨ݴޠͱͯ͠σβΠϯγεςϜΛಋೖ
12. 12 • σβΠφʔΛத৺ʹσΟϨΫλʔ΍ΤϯδχΞͳͲ৬छ໰Θͣू·ͬͯਐΊ͍ͯΔ • ։ൃஈ֊͔Βଟ༷ͳࢹ఺ΛऔΓೖΕΔ͜ͱͰૣ͍ஈ֊Ͱ՝୊Λ࡯஌Ͱ͖Δ • ʮσβΠϯγεςϜ͸ΈΜͳͷ΋ͷʯͱ͍͏ཧղΛಘ΍͍͢ • InhouseͷऔΓ૊ΈΛ͸͡ΊશࣾతʹσβΠϯγεςϜͷॏཁੑ͕ڞ௨ೝࣝͱͯ͋͠ ΔͷͰɺͦΕΒʹऔΓ૊ΉͨΊͷ͕࣌ؒ֬อ͞Ε͍ͯΔʢि20%ఔ౓ʙʣ • िʹҰ౓ɺਐḿ֬ೝͱ૬ஊΛߦ͏ఆྫMTGΛ։࠵ • InhouseͱಉظΛऔΔͨΊʹ֤αʔϏεͷσβΠϯγεςϜʹؔΘΔϝϯόʔͱͷఆ ྫMTGʹ΋ࢀՃ ΧϥʔϛʔγϣοϓͷσβΠϯγεςϜ - Flippers Flippers ։ൃνʔϜ
13. 13 Flippersͷ։ൃ ΧϥʔϛʔγϣοϓͷσβΠϯγεςϜ
14. ΧϥʔϛʔγϣοϓͷσβΠϯγεςϜ - σβΠϯγεςϜͷ։ൃ 14 جຊ͸Inhouseʹͷ͍ͬͯ͘ɻ Inhouse͸֤αʔϏεͰधཁͷߴ͍΋ͷɺӨڹൣғ͕޿͍΋ͷ͔ΒऔΓ૊ΜͰ͍Δɻ InhouseͰఆٛ͞Ε͍ͯΔ΋ͷʹؔͯ͠͸ಠࣗʹ։ൃΛߦͬͨΓ͸ͤͣɺ׆༻Ͱ͖Δͱ͜ Ζ͸ੵۃతʹऔΓೖΕ͍͖ͯɺԿ͔͋Ε͹ϑΟʔυόοΫΛ͠Ұॹʹվળ͢Δɻ FlavorʛComponentʛResource Pepabo Designʹ͸ະެ։ͷΨΠυϥΠϯ΍Ξηοτ΋֤αʔϏεͱڠྗͯ͠։ൃதɻ Inhouse΁ͷʮͷ͍͖ͬͯʯ
15. ΧϥʔϛʔγϣοϓͷσβΠϯγεςϜ - Ͳ͏΍ͬͯਐΊ͍ͯΔ͔ 15 αʔϏεଆͰ௚ۙඞཁͳΨΠυϥΠϯ΍Ξηοτ͕ൃੜͨ͠৔߹͸ɺInhouseͷಋೖΛ଴ ͭͷͰ͸ͳ͘αʔϏεଆͰఆٛͨ͠΋ͷΛInhouseʹٯ༌ೖ͍ͯ͠Δɻ ྫ͑͹ɺػೳ։ൃதʹ Card UI ͕ඞཁʹͳ͕ͬͨInhouseͰ͸·ͩ༻ҙ͞Ε͍ͯͳ͔ͬͨ ͨΊɺΧϥʔϛʔγϣοϓଆͰΨΠυϥΠϯɾΞηοτԽΛલఏʹਐΊΔͳͲɻ Flippers͔ΒInhouse΁ͷٯ༌ೖ Ұ౓ͷ࢖͍੾ΓͰ͸ͳ͘ɺҰൠԽͯ͠ଞαʔϏεͰ΋ల։͢Δ͜ͱΛલఏʹ࡞Δ ڞ༗ࢿ࢈͕஝ੵ͞ΕΔ͜ͱͰ৽͍͠औΓ૊ΈΛখ͘͞ૣ࢝͘ΊΔ͜ͱ͕Մೳʹ
16. 16 Flippersͷಋೖɾӡ༻ ΧϥʔϛʔγϣοϓͷσβΠϯγεςϜ
17. ΧϥʔϛʔγϣοϓͷσβΠϯγεςϜ - ಋೖɾӡ༻ͷ࢓૊Έͮ͘Γ 17 ։ൃ؀ڥ΍ίʔυͷߏ଄ͳͲ͕αʔϏεʹΑͬͯҟͳΓɺಋೖ΁ͷোนͱͳ͍ͬͯΔɻ ͢Ͱʹӡ༻͞Ε͍ͯΔαʔϏε΁ͷInhouseಋೖ • σβΠϯΤϯδχΞʹΑΔࢧԉ • αʔϏεଆͷUXΤϯδχΞϦϯάΛΤΩεύʔτεΩϧ*ͱ͢ΔσβΠφʔͱڠྗ͠ɺσβΠϯΤϯδ χΞ͕؀ڥߏஙͳͲͷαϙʔτΛ͢Δɻ • FlavorΛҰׅஔ׵͢ΔͨΊͷFigmaϓϥάΠϯʮAjihenʢຯมʣʯ • FlavorΛهड़ͨ͠JSONϑΝΠϧͳͲΛΞοϓϩʔυͯ͠σβΠϯτʔΫϯΛ্ॻ͖͢Δ͜ͱ͕Ͱ͖Δɻ Inhouse։ൃνʔϜʹΑΔಋೖࢧԉ *ϖύϘͰ͸σβΠϯʹඞཁͳεΩϧͷྖҬΛఆΊ͍ͯ·͢ʛPepabo DesignʮSkill Areaʯ
18. ΧϥʔϛʔγϣοϓͷσβΠϯγεςϜ - ಋೖɾӡ༻ͷ࢓૊Έͮ͘Γ 18 ίϯϙʔωϯτϥΠϒϥϦͷσβΠϯτʔΫϯΛ্ॻ͖Ͱ͖ΔFigmaϓϥάΠϯΛ࡞ͬͨ @putchom
19. ΧϥʔϛʔγϣοϓͷσβΠϯγεςϜ - ಋೖɾӡ༻ͷ࢓૊Έͮ͘Γ 19 • ։ൃʹར༻͍ͨ͠΋ͷ͸ɺnpm moduleԽ͢Δ͜ͱͰڞ௨ར༻Ͱ͖Δ࢓૊ΈΛ༻ҙ • FlavorʢColor΍TypographyʣͳͲ • ։ൃʹࢀর͍ͨ͠΋ͷ͸ɺґཔ΍ϨϏϡʔͷࡍʹνΣοΫ͢ΔϑϩʔΛ༻ҙ • ϥΠςΟϯάελΠϧΨΠυͳͲ αʔϏεʹؔΘΔΈΜͳͱҰॹʹӡ༻͍ͯͨ͘͠Ίͷ࢓૊Έͮ͘Γ σβΠϯγεςϜ͸ʮ࡞Δʯ͚ͩͰ͸ͳ͘ɺӡ༻͞ΕΔʮ࢓૊Έʯ΋େ੾
20. 20 ·ͱΊ
21. 21 ·ͱΊ • ෳ਺αʔϏε͕͋Δ৔߹ɺڞ௨ج൫σβΠϯγεςϜΛ࡞Δ͜ͱͰڞ༗Ͱ͖ΔΨΠυϥΠϯ΍Ξ ηοτ͸ݸผʹऔΓ૊Ήඞཁ͕ͳ͘ͳΓɺ࠷దղ͕༻ҙ͞Ε͍ͯΔ͜ͱͰ։ൃεϐʔυ্͕͕Δ • ֤αʔϏεͰσβΠϯγεςϜʹऔΓ૊Ή৔߹͸ɺҰൠԽ͢Δ͜ͱΛҙࣝ͢Δ͜ͱͰଞαʔϏε Ͱ΋׆༻Ͱ͖Δࢿ࢈ͱͳΔ • σβΠϯγεςϜΛܧଓతʹऔΓ૊ΜͰ͍ͨ͘Ίʹ՝୊ͱ໨తΛ໌֬ʹ͠ɺޮՌ΍Ձ஋Λڞ௨ೝ ࣝͱ͢Δͱྑ͍ • σβΠϯγεςϜΛ։ൃ͢Δ͚ͩͰ͸ͳ͘ӡ༻͞ΕΔ࢓૊ΈΛ࡞Δ͜ͱ͕େ੾ ։ൃϓϩηεͷ൑அΛʮ଎ʯʹ͢ΔσβΠϯγεςϜͱ͸ ͦͷ݁Ռɺ։ൃϓϩηεͰͷҙࢥܾఆ͕ૣ͘ͳΓ ΑΓϢʔβʔʹͱͬͯՁ஋ͷߴ͍։ൃʹ஫ྗ͕Ͱ͖Δ
22. 22 Thank You! Thank You! ʂΧϥʔϛʔγϣοϓͰ͸σβΠφʔ΋ืूதͰ͢ʂ