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
デザイナーがAIを使い倒して爆速プロダクト開発!社内ハッカソンでの取り組み紹介
abokadotyann
8
2.4k
decksh object reference
ajstarks
2
1.3k
デザインシステムの「種」を使って、受託開発を加速させる
akane___ui
0
11k
一次体験を起点にしたUX改善の取り組み / Direct Experience Driven UX Improvements
bitkey
PRO
0
220
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
320
そのUIコンポーネント、これから先も使えますか?―Headless UI,Open UI,グローバルデザインシステム
sakito
2
2k
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
920
不確実性の時代にみんなで試したFigma × MCP × Cursor ハンズオン
techtekt
PRO
7
1k
数理的アプローチで挑むスマホUIのデザイン改善:タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
lycorptech_jp
PRO
0
870
【MIXI MEETUP!ー TECH & DESIGN DAYー】新たなSNS「mixi2」の “0→1”開発の舞台裏:デザイナーが語るプロダクト誕生秘話
mixi_design
PRO
0
150
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
4k
Yumika Yamada Portfolio
yumii
0
1.9k
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Scaling GitHub
holman
463
140k
Context Engineering - Making Every Token Count
addyosmani
7
260
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Rails Girls Zürich Keynote
gr2m
95
14k
The Language of Interfaces
destraynor
162
25k
Designing for Performance
lara
610
69k
Git: the NoSQL Database
bkeepers
PRO
431
66k
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! ʂΧϥʔϛʔγϣοϓͰσβΠφʔืूதͰ͢ʂ