Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

E4e5ea8eb39c09ef4b91d8fdcac95281?s=47 getsukikyu
December 09, 2021

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

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

E4e5ea8eb39c09ef4b91d8fdcac95281?s=128

getsukikyu

December 09, 2021
Tweet

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! ʂΧϥʔϛʔγϣοϓͰ͸σβΠφʔ΋ืूதͰ͢ʂ