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
顕在化されていない期待、デザインの灯台
daitorii
1
1.1k
あらゆる場面でデザインを駆使するための技術 / Techniques for Applying Design in Any Situation
akiramotomura
4
2.1k
Sociotechnical design for software and human systems
xinyao
2
480
Design Leadership in Challenging Times
morganepeng
3
300
事業戦略と組織のビジョンデザイン〜デザイン的アプローチで事業・組織づくりにどう取り組んでいるかのリアル〜
jdesign_tokyo
1
380
共創のための地域基盤としての非公式組織の形成 / Informal community as an infrastructure for co-creation
fumiyaakasaka
2
220
Web 組版の課題とその解法
yamatoiizuka
0
110
Amebaデザインシステム Spindleの開発 / The Development of Spindle
spindle
4
620
WHAT ARE ME?
takuro_nakajima
PRO
0
1.2k
間違った「問い」を乗り越え ノベルティをプチバズりさせた話
takaikanako
0
1.2k
素晴らしき余白の世界
kasumidyaya
1
100
The Fight
euralisw
0
110
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
12
1.5k
Design by the Numbers
sachag
274
18k
What the flash - Photography Introduction
edds
64
11k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
154
14k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
Building Better People: How to give real-time feedback that sticks.
wjessup
354
18k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.3k
The Illustrated Children's Guide to Kubernetes
chrisshort
29
46k
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! ʂΧϥʔϛʔγϣοϓͰσβΠφʔืूதͰ͢ʂ