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

by getsukikyu

Slide 1

Slide 1 text

։ൃϓϩηεͷ൑அΛ ʮ଎ʯʹ͢Δ σβΠϯγεςϜ ࢁྛ ѯ / GMO PEPABO inc. 2021.12.09 Pepabo Tech Conference #18 1

Slide 2

Slide 2 text

2 ࣗݾ঺հ ECࣄۀ෦ ࢁྛ ѯ Yamarin Akane σβΠϯϦʔυͱͯ͠ɺECࣄۀ෦ͷσβΠϯ૊৫ ΍αʔϏεશମͷσβΠϯΛݟ͍ͯΔɻ ͨ·ʹPdM΋΍ͬͯΔɻ ● ೋਓͷଉࢠ͕͓Γɺࠓ೥4݄ʹҭٳ͔Β෮ؼ ● ΞαώεʔύʔυϥΠΛѪ͢ΔϏʔϧΫζ ● Twitter : @getsukikyu 2011೥ த్ೖࣾ

Slide 3

Slide 3 text

3 ࠓ೔͓࿩͢Δ͜ͱ ։ൃϓϩηεͷ൑அΛʮ଎ʯʹ͢ΔσβΠϯγεςϜ ͜ͷ࣌ؒͰ͸ٕज़ͷࡉ͔͍෦෼·Ͱ͸঺հͰ͖·ͤΜ͕ σβΠϯγεςϜΛಋೖ͢Δ͜ͱͰ ։ൃϓϩηεͰ౎౓ൃੜ͢Δ൑அ͕ૣ͘ߦ͏͜ͱ͕Ͱ͖ ͦͷ݁Ռͦͷ݁ՌΑΓՁ஋͋Δ։ൃʹ஫ྗͰ͖ΔΑ͏ʹ͢Δ औΓ૊Έʹ͍͓ͭͯ࿩͠·͢ɻ

Slide 4

Slide 4 text

4 ϖύϘͷ σβΠϯγεςϜ

Slide 5

Slide 5 text

ϖύϘͷσβΠϯγεςϜ 5 ϒϥϯυ͕λονϙΠϯτΛ׆༻ͨ͠ମݧઃܭΛޮ཰తʹ͓͜ͳ͏ͨΊʹɺ͋Β͔͡Ί ݪଇ΍ΨΠυϥΠϯΛఆΊͯɺͦͷ࣮૷ͱͯ͠ΧϥʔύϨοτ΍ίϯϙʔωϯτϥΠϒϥ ϦͳͲͷΞηοτΛ༻ҙͨ͠΋ͷɻ σβΠϯγεςϜͱ͸ Pepabo DesignʮInhouseͱ͸ʯ

Slide 6

Slide 6 text

ϖύϘͷσβΠϯγεςϜ 6 ϖύϘ͸ʮΠϯλʔωοτͰՄೳੑΛͭͳ͛ΔɺͻΖ͛Δʯͱ͍͏ϛογϣϯͷ΋ͱɺϨ ϯλϧαʔόʔ΍υϝΠϯͷऔಘɺϗʔϜϖʔδ΍ωοτγϣοϓͷ࡞੒ɺϋϯυϝΠυ ࡞඼ͷചങ΍ΦϦδφϧάοζΛࡏݿΛ࣋ͨͣʹൢചͰ͖ΔαʔϏεͳͲɺଟ༷ͳࣄۀ Λɺଟ༷ͳϒϥϯυͰల։͍ͯ͠Δɻ ͜ͷϚϧνϒϥϯυઓུ͸ɺݸੑతͳϖύϘͷαʔϏεΛಛ௃͚ͮΔ͚ͩͰͳ͘ɺࢢ৔Λ ֬อ͚ͭͮ͠ΔϦεΫϔοδͱͯ͠΋ػೳ͢ΔҰํͰɺαʔϏεΛ௒͑ͯσβΠϯΛల։ ͢Δͷ͕೉͍͠ͱ͍͏ଆ໘΋͋ͬͨɻ ෳ਺ͷαʔϏεϒϥϯυ͕ଘࡏ͢ΔϖύϘͳΒͰ͸ͷ՝୊ ϖύϘςοΫϒϩάʮϖύϘͷσβΠϯγεςϜͷυΩϡϝϯτΛެ։͠·͢ʯ

Slide 7

Slide 7 text

ϖύϘͷσβΠϯγεςϜ 7 ֤αʔϏε͕ݸผʹߟ͍͍͑ͯͯΔݪଇ΍ΨΠυϥΠϯɺ࣮૷͍ͯͨ͠Ξηοτͷ͏ͪɺ ॏෳ͍ͯ͠Δ΋ͷΛ͢΂ͯͷαʔϏεͰ࢖͑ΔΑ͏ʹҰൠԽ͠ɺڞ௨ج൫σβΠϯγες ϜInhouseͱͯ͋͠Β͔͡Ί༻ҙ͓ͯ͘͠ɻ ڞ௨ج൫σβΠϯγεςϜʮInhouseʯʹΑΔҰൠԽͱޮ཰Խ Pepabo DesignʮInhouseͱ͸ʯ

Slide 8

Slide 8 text

ϖύϘͷσβΠϯγεςϜ 8 ϖύϘͰ͸ෳ਺ͷαʔϏεΛӡӦ͍ͯ͠Δ͜ ͱ͔ΒɺInhouse͸ෳ਺ͷϒϥϯυͰ࢖༻͢Δ ͜ͱΛલఏͱ͢Δඞཁ͕͋ΓʮFlavorʯͱ͍ ͏࢓૊ΈΛ࠾༻ɻ৭΍ܗͳͲɺϒϥϯυʹ Α্ͬͯॻ͖ՄೳͳσβΠϯτʔΫϯΛ FlavorͱݺΜͰ͍Δม਺ʹ·ͱΊ͓ͯ͘͜ͱ ͰɺFlavorΛࠩ͠ସ͑Δ͜ͱͰϒϥϯυΠ ϝʔδΛ่͞ͳ͍σβΠϯ͕Ͱ͖ΔΑ͏ʹ ͳ͍ͬͯΔɻ ϒϥϯυΠϝʔδΛ่͞ͳ͍࢓૊ΈʮFlavorʯ Pepabo DesignʮInhouseͱ͸ʯ

Slide 9

Slide 9 text

9 Χϥʔϛʔγϣοϓͷ σβΠϯγεςϜ

Slide 10

Slide 10 text

10 Χϥʔϛʔγϣοϓ σβΠϯγεςϜ Flippers ϑϦούʔζ ΧϥʔϛʔγϣοϓͷσβΠϯγεςϜ

Slide 11

Slide 11 text

ΧϥʔϛʔγϣοϓͷσβΠϯγεςϜ - Flippers 11 ΧϥʔϛʔγϣοϓͷαʔϏεن໛͕֦େ͢ΔʹͭΕͯεςʔΫϗϧμʔ΋૿͑ɺ༷ʑͳ ϓϩδΣΫτ͕ฒߦͯ͠ಈ͘ঢ়گͰɺ͋ΒΏΔλονϙΠϯτ͔Βఏڙ͢ΔϢʔβʔମݧ ʹҰ؏ੑΛ࣋ͨͤΔʹ͸Ͳ͏͢Ε͹ྑ͍͔ɻ ·ͨͦΕΒΛεϐʔυײΛଛͳΘͣʹߦ͏ʹ͸Ͳ͏͢Ε͹ྑ͍͔ɻ Flippers ஀ੜͷܦҢ Χϥʔϛʔγϣοϓͷڞ௨ݴޠͱͯ͠σβΠϯγεςϜΛಋೖ

Slide 12

Slide 12 text

12 • σβΠφʔΛத৺ʹσΟϨΫλʔ΍ΤϯδχΞͳͲ৬छ໰Θͣू·ͬͯਐΊ͍ͯΔ • ։ൃஈ֊͔Βଟ༷ͳࢹ఺ΛऔΓೖΕΔ͜ͱͰૣ͍ஈ֊Ͱ՝୊Λ࡯஌Ͱ͖Δ • ʮσβΠϯγεςϜ͸ΈΜͳͷ΋ͷʯͱ͍͏ཧղΛಘ΍͍͢ • InhouseͷऔΓ૊ΈΛ͸͡ΊશࣾతʹσβΠϯγεςϜͷॏཁੑ͕ڞ௨ೝࣝͱͯ͋͠ ΔͷͰɺͦΕΒʹऔΓ૊ΉͨΊͷ͕࣌ؒ֬อ͞Ε͍ͯΔʢि20%ఔ౓ʙʣ • िʹҰ౓ɺਐḿ֬ೝͱ૬ஊΛߦ͏ఆྫMTGΛ։࠵ • InhouseͱಉظΛऔΔͨΊʹ֤αʔϏεͷσβΠϯγεςϜʹؔΘΔϝϯόʔͱͷఆ ྫMTGʹ΋ࢀՃ ΧϥʔϛʔγϣοϓͷσβΠϯγεςϜ - Flippers Flippers ։ൃνʔϜ

Slide 13

Slide 13 text

13 Flippersͷ։ൃ ΧϥʔϛʔγϣοϓͷσβΠϯγεςϜ

Slide 14

Slide 14 text

ΧϥʔϛʔγϣοϓͷσβΠϯγεςϜ - σβΠϯγεςϜͷ։ൃ 14 جຊ͸Inhouseʹͷ͍ͬͯ͘ɻ Inhouse͸֤αʔϏεͰधཁͷߴ͍΋ͷɺӨڹൣғ͕޿͍΋ͷ͔ΒऔΓ૊ΜͰ͍Δɻ InhouseͰఆٛ͞Ε͍ͯΔ΋ͷʹؔͯ͠͸ಠࣗʹ։ൃΛߦͬͨΓ͸ͤͣɺ׆༻Ͱ͖Δͱ͜ Ζ͸ੵۃతʹऔΓೖΕ͍͖ͯɺԿ͔͋Ε͹ϑΟʔυόοΫΛ͠Ұॹʹվળ͢Δɻ FlavorʛComponentʛResource Pepabo Designʹ͸ະެ։ͷΨΠυϥΠϯ΍Ξηοτ΋֤αʔϏεͱڠྗͯ͠։ൃதɻ Inhouse΁ͷʮͷ͍͖ͬͯʯ

Slide 15

Slide 15 text

ΧϥʔϛʔγϣοϓͷσβΠϯγεςϜ - Ͳ͏΍ͬͯਐΊ͍ͯΔ͔ 15 αʔϏεଆͰ௚ۙඞཁͳΨΠυϥΠϯ΍Ξηοτ͕ൃੜͨ͠৔߹͸ɺInhouseͷಋೖΛ଴ ͭͷͰ͸ͳ͘αʔϏεଆͰఆٛͨ͠΋ͷΛInhouseʹٯ༌ೖ͍ͯ͠Δɻ ྫ͑͹ɺػೳ։ൃதʹ Card UI ͕ඞཁʹͳ͕ͬͨInhouseͰ͸·ͩ༻ҙ͞Ε͍ͯͳ͔ͬͨ ͨΊɺΧϥʔϛʔγϣοϓଆͰΨΠυϥΠϯɾΞηοτԽΛલఏʹਐΊΔͳͲɻ Flippers͔ΒInhouse΁ͷٯ༌ೖ Ұ౓ͷ࢖͍੾ΓͰ͸ͳ͘ɺҰൠԽͯ͠ଞαʔϏεͰ΋ల։͢Δ͜ͱΛલఏʹ࡞Δ ڞ༗ࢿ࢈͕஝ੵ͞ΕΔ͜ͱͰ৽͍͠औΓ૊ΈΛখ͘͞ૣ࢝͘ΊΔ͜ͱ͕Մೳʹ

Slide 16

Slide 16 text

16 Flippersͷಋೖɾӡ༻ ΧϥʔϛʔγϣοϓͷσβΠϯγεςϜ

Slide 17

Slide 17 text

ΧϥʔϛʔγϣοϓͷσβΠϯγεςϜ - ಋೖɾӡ༻ͷ࢓૊Έͮ͘Γ 17 ։ൃ؀ڥ΍ίʔυͷߏ଄ͳͲ͕αʔϏεʹΑͬͯҟͳΓɺಋೖ΁ͷোนͱͳ͍ͬͯΔɻ ͢Ͱʹӡ༻͞Ε͍ͯΔαʔϏε΁ͷInhouseಋೖ • σβΠϯΤϯδχΞʹΑΔࢧԉ • αʔϏεଆͷUXΤϯδχΞϦϯάΛΤΩεύʔτεΩϧ*ͱ͢ΔσβΠφʔͱڠྗ͠ɺσβΠϯΤϯδ χΞ͕؀ڥߏஙͳͲͷαϙʔτΛ͢Δɻ • FlavorΛҰׅஔ׵͢ΔͨΊͷFigmaϓϥάΠϯʮAjihenʢຯมʣʯ • FlavorΛهड़ͨ͠JSONϑΝΠϧͳͲΛΞοϓϩʔυͯ͠σβΠϯτʔΫϯΛ্ॻ͖͢Δ͜ͱ͕Ͱ͖Δɻ Inhouse։ൃνʔϜʹΑΔಋೖࢧԉ *ϖύϘͰ͸σβΠϯʹඞཁͳεΩϧͷྖҬΛఆΊ͍ͯ·͢ʛPepabo DesignʮSkill Areaʯ

Slide 18

Slide 18 text

ΧϥʔϛʔγϣοϓͷσβΠϯγεςϜ - ಋೖɾӡ༻ͷ࢓૊Έͮ͘Γ 18 ίϯϙʔωϯτϥΠϒϥϦͷσβΠϯτʔΫϯΛ্ॻ͖Ͱ͖ΔFigmaϓϥάΠϯΛ࡞ͬͨ @putchom

Slide 19

Slide 19 text

ΧϥʔϛʔγϣοϓͷσβΠϯγεςϜ - ಋೖɾӡ༻ͷ࢓૊Έͮ͘Γ 19 • ։ൃʹར༻͍ͨ͠΋ͷ͸ɺnpm moduleԽ͢Δ͜ͱͰڞ௨ར༻Ͱ͖Δ࢓૊ΈΛ༻ҙ • FlavorʢColor΍TypographyʣͳͲ • ։ൃʹࢀর͍ͨ͠΋ͷ͸ɺґཔ΍ϨϏϡʔͷࡍʹνΣοΫ͢ΔϑϩʔΛ༻ҙ • ϥΠςΟϯάελΠϧΨΠυͳͲ αʔϏεʹؔΘΔΈΜͳͱҰॹʹӡ༻͍ͯͨ͘͠Ίͷ࢓૊Έͮ͘Γ σβΠϯγεςϜ͸ʮ࡞Δʯ͚ͩͰ͸ͳ͘ɺӡ༻͞ΕΔʮ࢓૊Έʯ΋େ੾

Slide 20

Slide 20 text

20 ·ͱΊ

Slide 21

Slide 21 text

21 ·ͱΊ ● ෳ਺αʔϏε͕͋Δ৔߹ɺڞ௨ج൫σβΠϯγεςϜΛ࡞Δ͜ͱͰڞ༗Ͱ͖ΔΨΠυϥΠϯ΍Ξ ηοτ͸ݸผʹऔΓ૊Ήඞཁ͕ͳ͘ͳΓɺ࠷దղ͕༻ҙ͞Ε͍ͯΔ͜ͱͰ։ൃεϐʔυ্͕͕Δ ● ֤αʔϏεͰσβΠϯγεςϜʹऔΓ૊Ή৔߹͸ɺҰൠԽ͢Δ͜ͱΛҙࣝ͢Δ͜ͱͰଞαʔϏε Ͱ΋׆༻Ͱ͖Δࢿ࢈ͱͳΔ ● σβΠϯγεςϜΛܧଓతʹऔΓ૊ΜͰ͍ͨ͘Ίʹ՝୊ͱ໨తΛ໌֬ʹ͠ɺޮՌ΍Ձ஋Λڞ௨ೝ ࣝͱ͢Δͱྑ͍ ● σβΠϯγεςϜΛ։ൃ͢Δ͚ͩͰ͸ͳ͘ӡ༻͞ΕΔ࢓૊ΈΛ࡞Δ͜ͱ͕େ੾ ։ൃϓϩηεͷ൑அΛʮ଎ʯʹ͢ΔσβΠϯγεςϜͱ͸ ͦͷ݁Ռɺ։ൃϓϩηεͰͷҙࢥܾఆ͕ૣ͘ͳΓ ΑΓϢʔβʔʹͱͬͯՁ஋ͷߴ͍։ൃʹ஫ྗ͕Ͱ͖Δ

Slide 22

Slide 22 text

22 Thank You! Thank You! ʂΧϥʔϛʔγϣοϓͰ͸σβΠφʔ΋ืूதͰ͢ʂ