Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
開発プロセスの判断を「速」にするデザインシステム
Search
getsukikyu
December 09, 2021
Design
1
520
開発プロセスの判断を「速」にするデザインシステム
2021.12.09 Pepabo Tech Conference #18 で発表した資料です。
getsukikyu
December 09, 2021
Tweet
Share
More Decks by getsukikyu
See All by getsukikyu
デザインレビューの体制を作った話
getsukikyu
1
78
Other Decks in Design
See All in Design
Resolving text accessibility dilemmas in UIs
romanshamin
0
100
マスとAIをなめらかにつなぐデザイン
abcmisuzu
0
220
231007_tokyor_kato
hjmkth
6
1.2k
不可分の民藝から可分の工業産業へ
creatorqsf
1
320
社内管理画面のデザインもプロダクトデザイン
takanorip
3
670
Wishing Star Comic
torije
1
1k
文化に寄りそうデザイン
recruitengineers
PRO
3
820
もち的デザイナーのキャリアデザイン新提言:副業起業家のすゝめ
mochitaro
0
1.2k
事業戦略と組織のビジョンデザイン〜デザイン的アプローチで事業・組織づくりにどう取り組んでいるかのリアル〜
jdesign_tokyo
1
320
ノベルティの勘所 / Communication DesignNight vol.01
transit_kix
0
720
Toast
miasf
0
150
社内のコミュニケーション課題に対して個人的に行っているデザイン以外の草の根活動
sugiyama_sukedachi
0
110
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
36
2k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
28
5.9k
Teambox: Starting and Learning
jrom
126
8.3k
A designer walks into a library…
pauljervisheath
199
23k
Product Roadmaps are Hard
iamctodd
43
9.6k
Making Projects Easy
brettharned
106
5.4k
Being A Developer After 40
akosma
56
580k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
67
38k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
6
930
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
242
20k
Designing Experiences People Love
moore
135
23k
Fashionably flexible responsive web design (full day workshop)
malarkey
397
65k
Transcript
։ൃϓϩηεͷஅΛ ʮʯʹ͢Δ σβΠϯγεςϜ ࢁྛ ѯ / GMO PEPABO inc. 2021.12.09
Pepabo Tech Conference #18 1
2 ࣗݾհ ECࣄۀ෦ ࢁྛ ѯ Yamarin Akane σβΠϯϦʔυͱͯ͠ɺECࣄۀ෦ͷσβΠϯ৫ αʔϏεશମͷσβΠϯΛݟ͍ͯΔɻ ͨ·ʹPdMͬͯΔɻ
• ೋਓͷଉࢠ͕͓Γɺࠓ4݄ʹҭٳ͔Β෮ؼ • ΞαώεʔύʔυϥΠΛѪ͢ΔϏʔϧΫζ • Twitter : @getsukikyu 2011 த్ೖࣾ
3 ࠓ͓͢Δ͜ͱ ։ൃϓϩηεͷஅΛʮʯʹ͢ΔσβΠϯγεςϜ ͜ͷ࣌ؒͰٕज़ͷࡉ͔͍෦·ͰհͰ͖·ͤΜ͕ σβΠϯγεςϜΛಋೖ͢Δ͜ͱͰ ։ൃϓϩηεͰൃੜ͢Δஅ͕ૣ͘ߦ͏͜ͱ͕Ͱ͖ ͦͷ݁Ռͦͷ݁ՌΑΓՁ͋Δ։ൃʹྗͰ͖ΔΑ͏ʹ͢Δ औΓΈʹ͍͓ͭͯ͠·͢ɻ
4 ϖύϘͷ σβΠϯγεςϜ
ϖύϘͷσβΠϯγεςϜ 5 ϒϥϯυ͕λονϙΠϯτΛ׆༻ͨ͠ମݧઃܭΛޮతʹ͓͜ͳ͏ͨΊʹɺ͋Β͔͡Ί ݪଇΨΠυϥΠϯΛఆΊͯɺͦͷ࣮ͱͯ͠ΧϥʔύϨοτίϯϙʔωϯτϥΠϒϥ ϦͳͲͷΞηοτΛ༻ҙͨ͠ͷɻ σβΠϯγεςϜͱ Pepabo DesignʮInhouseͱʯ
ϖύϘͷσβΠϯγεςϜ 6 ϖύϘʮΠϯλʔωοτͰՄೳੑΛͭͳ͛ΔɺͻΖ͛Δʯͱ͍͏ϛογϣϯͷͱɺϨ ϯλϧαʔόʔυϝΠϯͷऔಘɺϗʔϜϖʔδωοτγϣοϓͷ࡞ɺϋϯυϝΠυ ࡞ͷചങΦϦδφϧάοζΛࡏݿΛ࣋ͨͣʹൢചͰ͖ΔαʔϏεͳͲɺଟ༷ͳࣄۀ Λɺଟ༷ͳϒϥϯυͰల։͍ͯ͠Δɻ ͜ͷϚϧνϒϥϯυઓུɺݸੑతͳϖύϘͷαʔϏεΛಛ͚ͮΔ͚ͩͰͳ͘ɺࢢΛ ֬อ͚ͭͮ͠ΔϦεΫϔοδͱͯ͠ػೳ͢ΔҰํͰɺαʔϏεΛ͑ͯσβΠϯΛల։ ͢Δͷ͕͍͠ͱ͍͏ଆ໘͋ͬͨɻ ෳͷαʔϏεϒϥϯυ͕ଘࡏ͢ΔϖύϘͳΒͰͷ՝
ϖύϘςοΫϒϩάʮϖύϘͷσβΠϯγεςϜͷυΩϡϝϯτΛެ։͠·͢ʯ
ϖύϘͷσβΠϯγεςϜ 7 ֤αʔϏε͕ݸผʹߟ͍͍͑ͯͯΔݪଇΨΠυϥΠϯɺ࣮͍ͯͨ͠Ξηοτͷ͏ͪɺ ॏෳ͍ͯ͠ΔͷΛͯ͢ͷαʔϏεͰ͑ΔΑ͏ʹҰൠԽ͠ɺڞ௨ج൫σβΠϯγες ϜInhouseͱͯ͋͠Β͔͡Ί༻ҙ͓ͯ͘͠ɻ ڞ௨ج൫σβΠϯγεςϜʮInhouseʯʹΑΔҰൠԽͱޮԽ Pepabo DesignʮInhouseͱʯ
ϖύϘͷσβΠϯγεςϜ 8 ϖύϘͰෳͷαʔϏεΛӡӦ͍ͯ͠Δ͜ ͱ͔ΒɺInhouseෳͷϒϥϯυͰ༻͢Δ ͜ͱΛલఏͱ͢Δඞཁ͕͋ΓʮFlavorʯͱ͍ ͏ΈΛ࠾༻ɻ৭ܗͳͲɺϒϥϯυʹ Α্ͬͯॻ͖ՄೳͳσβΠϯτʔΫϯΛ FlavorͱݺΜͰ͍Δมʹ·ͱΊ͓ͯ͘͜ͱ ͰɺFlavorΛࠩ͠ସ͑Δ͜ͱͰϒϥϯυΠ ϝʔδΛ่͞ͳ͍σβΠϯ͕Ͱ͖ΔΑ͏ʹ
ͳ͍ͬͯΔɻ ϒϥϯυΠϝʔδΛ่͞ͳ͍ΈʮFlavorʯ Pepabo DesignʮInhouseͱʯ
9 Χϥʔϛʔγϣοϓͷ σβΠϯγεςϜ
10 Χϥʔϛʔγϣοϓ σβΠϯγεςϜ Flippers ϑϦούʔζ ΧϥʔϛʔγϣοϓͷσβΠϯγεςϜ
ΧϥʔϛʔγϣοϓͷσβΠϯγεςϜ - Flippers 11 ΧϥʔϛʔγϣοϓͷαʔϏεن͕֦େ͢ΔʹͭΕͯεςʔΫϗϧμʔ૿͑ɺ༷ʑͳ ϓϩδΣΫτ͕ฒߦͯ͠ಈ͘ঢ়گͰɺ͋ΒΏΔλονϙΠϯτ͔Βఏڙ͢ΔϢʔβʔମݧ ʹҰ؏ੑΛ࣋ͨͤΔʹͲ͏͢Εྑ͍͔ɻ ·ͨͦΕΒΛεϐʔυײΛଛͳΘͣʹߦ͏ʹͲ͏͢Εྑ͍͔ɻ Flippers ੜͷܦҢ
Χϥʔϛʔγϣοϓͷڞ௨ݴޠͱͯ͠σβΠϯγεςϜΛಋೖ
12 • σβΠφʔΛத৺ʹσΟϨΫλʔΤϯδχΞͳͲ৬छΘͣू·ͬͯਐΊ͍ͯΔ • ։ൃஈ֊͔Βଟ༷ͳࢹΛऔΓೖΕΔ͜ͱͰૣ͍ஈ֊Ͱ՝ΛͰ͖Δ • ʮσβΠϯγεςϜΈΜͳͷͷʯͱ͍͏ཧղΛಘ͍͢ • InhouseͷऔΓΈΛ͡ΊશࣾతʹσβΠϯγεςϜͷॏཁੑ͕ڞ௨ೝࣝͱͯ͋͠ ΔͷͰɺͦΕΒʹऔΓΉͨΊͷ͕࣌ؒ֬อ͞Ε͍ͯΔʢि20%ఔʙʣ
• िʹҰɺਐḿ֬ೝͱ૬ஊΛߦ͏ఆྫMTGΛ։࠵ • InhouseͱಉظΛऔΔͨΊʹ֤αʔϏεͷσβΠϯγεςϜʹؔΘΔϝϯόʔͱͷఆ ྫMTGʹࢀՃ ΧϥʔϛʔγϣοϓͷσβΠϯγεςϜ - Flippers Flippers ։ൃνʔϜ
13 Flippersͷ։ൃ ΧϥʔϛʔγϣοϓͷσβΠϯγεςϜ
ΧϥʔϛʔγϣοϓͷσβΠϯγεςϜ - σβΠϯγεςϜͷ։ൃ 14 جຊInhouseʹͷ͍ͬͯ͘ɻ Inhouse֤αʔϏεͰधཁͷߴ͍ͷɺӨڹൣғ͕͍ͷ͔ΒऔΓΜͰ͍Δɻ InhouseͰఆٛ͞Ε͍ͯΔͷʹؔͯ͠ಠࣗʹ։ൃΛߦͬͨΓͤͣɺ׆༻Ͱ͖Δͱ͜ ΖੵۃతʹऔΓೖΕ͍͖ͯɺԿ͔͋ΕϑΟʔυόοΫΛ͠Ұॹʹվળ͢Δɻ FlavorʛComponentʛResource Pepabo
Designʹະެ։ͷΨΠυϥΠϯΞηοτ֤αʔϏεͱڠྗͯ͠։ൃதɻ Inhouseͷʮͷ͍͖ͬͯʯ
ΧϥʔϛʔγϣοϓͷσβΠϯγεςϜ - Ͳ͏ͬͯਐΊ͍ͯΔ͔ 15 αʔϏεଆͰۙඞཁͳΨΠυϥΠϯΞηοτ͕ൃੜͨ͠߹ɺInhouseͷಋೖΛ ͭͷͰͳ͘αʔϏεଆͰఆٛͨ͠ͷΛInhouseʹٯ༌ೖ͍ͯ͠Δɻ ྫ͑ɺػೳ։ൃதʹ Card UI ͕ඞཁʹͳ͕ͬͨInhouseͰ·ͩ༻ҙ͞Ε͍ͯͳ͔ͬͨ
ͨΊɺΧϥʔϛʔγϣοϓଆͰΨΠυϥΠϯɾΞηοτԽΛલఏʹਐΊΔͳͲɻ Flippers͔ΒInhouseͷٯ༌ೖ Ұͷ͍ΓͰͳ͘ɺҰൠԽͯ͠ଞαʔϏεͰల։͢Δ͜ͱΛલఏʹ࡞Δ ڞ༗ࢿ࢈͕ੵ͞ΕΔ͜ͱͰ৽͍͠औΓΈΛখ͘͞ૣ࢝͘ΊΔ͜ͱ͕Մೳʹ
16 Flippersͷಋೖɾӡ༻ ΧϥʔϛʔγϣοϓͷσβΠϯγεςϜ
ΧϥʔϛʔγϣοϓͷσβΠϯγεςϜ - ಋೖɾӡ༻ͷΈͮ͘Γ 17 ։ൃڥίʔυͷߏͳͲ͕αʔϏεʹΑͬͯҟͳΓɺಋೖͷোนͱͳ͍ͬͯΔɻ ͢Ͱʹӡ༻͞Ε͍ͯΔαʔϏεͷInhouseಋೖ • σβΠϯΤϯδχΞʹΑΔࢧԉ • αʔϏεଆͷUXΤϯδχΞϦϯάΛΤΩεύʔτεΩϧ*ͱ͢ΔσβΠφʔͱڠྗ͠ɺσβΠϯΤϯδ
χΞ͕ڥߏஙͳͲͷαϙʔτΛ͢Δɻ • FlavorΛҰׅஔ͢ΔͨΊͷFigmaϓϥάΠϯʮAjihenʢຯมʣʯ • FlavorΛهड़ͨ͠JSONϑΝΠϧͳͲΛΞοϓϩʔυͯ͠σβΠϯτʔΫϯΛ্ॻ͖͢Δ͜ͱ͕Ͱ͖Δɻ Inhouse։ൃνʔϜʹΑΔಋೖࢧԉ *ϖύϘͰσβΠϯʹඞཁͳεΩϧͷྖҬΛఆΊ͍ͯ·͢ʛPepabo DesignʮSkill Areaʯ
ΧϥʔϛʔγϣοϓͷσβΠϯγεςϜ - ಋೖɾӡ༻ͷΈͮ͘Γ 18 ίϯϙʔωϯτϥΠϒϥϦͷσβΠϯτʔΫϯΛ্ॻ͖Ͱ͖ΔFigmaϓϥάΠϯΛ࡞ͬͨ @putchom
ΧϥʔϛʔγϣοϓͷσβΠϯγεςϜ - ಋೖɾӡ༻ͷΈͮ͘Γ 19 • ։ൃʹར༻͍ͨ͠ͷɺnpm moduleԽ͢Δ͜ͱͰڞ௨ར༻Ͱ͖ΔΈΛ༻ҙ • FlavorʢColorTypographyʣͳͲ •
։ൃʹࢀর͍ͨ͠ͷɺґཔϨϏϡʔͷࡍʹνΣοΫ͢ΔϑϩʔΛ༻ҙ • ϥΠςΟϯάελΠϧΨΠυͳͲ αʔϏεʹؔΘΔΈΜͳͱҰॹʹӡ༻͍ͯͨ͘͠ΊͷΈͮ͘Γ σβΠϯγεςϜʮ࡞Δʯ͚ͩͰͳ͘ɺӡ༻͞ΕΔʮΈʯେ
20 ·ͱΊ
21 ·ͱΊ • ෳαʔϏε͕͋Δ߹ɺڞ௨ج൫σβΠϯγεςϜΛ࡞Δ͜ͱͰڞ༗Ͱ͖ΔΨΠυϥΠϯΞ ηοτݸผʹऔΓΉඞཁ͕ͳ͘ͳΓɺ࠷దղ͕༻ҙ͞Ε͍ͯΔ͜ͱͰ։ൃεϐʔυ্͕͕Δ • ֤αʔϏεͰσβΠϯγεςϜʹऔΓΉ߹ɺҰൠԽ͢Δ͜ͱΛҙࣝ͢Δ͜ͱͰଞαʔϏε Ͱ׆༻Ͱ͖Δࢿ࢈ͱͳΔ • σβΠϯγεςϜΛܧଓతʹऔΓΜͰ͍ͨ͘Ίʹ՝ͱతΛ໌֬ʹ͠ɺޮՌՁΛڞ௨ೝ
ࣝͱ͢Δͱྑ͍ • σβΠϯγεςϜΛ։ൃ͢Δ͚ͩͰͳ͘ӡ༻͞ΕΔΈΛ࡞Δ͜ͱ͕େ ։ൃϓϩηεͷஅΛʮʯʹ͢ΔσβΠϯγεςϜͱ ͦͷ݁Ռɺ։ൃϓϩηεͰͷҙࢥܾఆ͕ૣ͘ͳΓ ΑΓϢʔβʔʹͱͬͯՁͷߴ͍։ൃʹྗ͕Ͱ͖Δ
22 Thank You! Thank You! ʂΧϥʔϛʔγϣοϓͰσβΠφʔืूதͰ͢ʂ