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
580
開発プロセスの判断を「速」にするデザインシステム
2021.12.09 Pepabo Tech Conference #18 で発表した資料です。
getsukikyu
December 09, 2021
Tweet
Share
More Decks by getsukikyu
See All by getsukikyu
デザインレビューの体制を作った話
getsukikyu
1
92
Other Decks in Design
See All in Design
プロダクトリニューアルと同時に進める初めてのデザインシステム
techtekt
PRO
0
110
新卒の目から見たサイボウズのデザイン組織
ryota5884
0
210
Spectrum Tokyo_ デザイナーが事業責任者になってみた
shin_2
0
160
Meet, Learn, Grow × AI ― コミュニティで加速するスキル循環 「コミュニティと関わり方」
tame
0
270
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
920
高卒公務員から Webデザイナーになるまで
kinomidesign
0
110
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
1
460
root COMPANY DECK / We are hiring!
root_recruit
PRO
1
24k
7 Core Values of Round-L
wired888
0
2.2k
Installing and Running decksh/pdfdeck
ajstarks
1
860
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
320
Liquid GlassとApp Intents
touyou
0
410
Featured
See All Featured
The Invisible Side of Design
smashingmag
302
51k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
GitHub's CSS Performance
jonrohan
1032
470k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Faster Mobile Websites
deanohume
310
31k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
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! ʂΧϥʔϛʔγϣοϓͰσβΠφʔืूதͰ͢ʂ