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
クックパッドクリエイティブワークフロー / cookpad creative workflow
Search
tomoya-tsuji
February 10, 2018
Design
10
2.7k
クックパッドクリエイティブワークフロー / cookpad creative workflow
「Cookpad TechConf 2018」(2/10)で発表資料です。
tomoya-tsuji
February 10, 2018
Tweet
Share
More Decks by tomoya-tsuji
See All by tomoya-tsuji
ReDesigner Online MeetUp Vol.2 / 3.25
1020tomoya
4
150
s-dev talks 大忘年LT大会 〜観察〜
1020tomoya
0
450
デザイナーが働きやすいクックパッドの環境とは
1020tomoya
3
400
Other Decks in Design
See All in Design
デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド / The Power of Design System
spindle
9
4.9k
同人音声のための、 最高の視聴体験を求めて【サブカル×デザインMeetUP!】
vivion
0
250
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
3.1k
portfolio2025_kanakoohata
kanako106
0
680
生成AIを受け入れ共創できるデザイナーマインドへープロセス改革を想定したデザイナーの準備ー
takumasaito
1
1.7k
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
1.6k
マンガで分かるサービスデザインガイドライン
senryakuka
1
630
シームレスな連携を実現するデザイントークンの設計と構築
amishiratori
0
500
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
390
250131_product meetup
motokoishida
0
110
241214_StackNagoya_プレイングマネージャーのプレイングの時間の使い方
kiyoshifuwa
0
210
入社3ヶ月目のプロダクトデザイナー視点で見たヤプリ / Joining Yappli as a Product Designer: My Perspective After 90 Days
yappli_developers
0
120
Featured
See All Featured
Optimizing for Happiness
mojombo
376
70k
Gamification - CAS2011
davidbonilla
80
5.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
We Have a Design System, Now What?
morganepeng
51
7.4k
BBQ
matthewcrist
87
9.5k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Transcript
⁋ே ձһࣄۀ෦ɹσβΠφʔ ΫοΫύου ΫϦΤΠςΟϒϫʔΫϑϩʔ
ࣗݾհ ɾΫοΫύου\J04 "OESPJE^ΞϓϦσβΠϯ ɾΫοΫύουΞϓϦϦϦʔεϚωʔδϟʔ ɾ\νʔϜ ϓϩδΣΫτ^σΟϨΫγϣϯ 2 ⁋ே σβΠφʔσΟϨΫλʔ !UPNPZB@UTVKJ@
ࣗݾհ ɾ݄ΫοΫύου৽ଔೖࣾ ɾ݄ٕज़෦69άϧʔϓ ɾ݄ߘ։ൃ෦ ɾ݄αʔϏε։ൃ෦͖Ζ͘νʔϜ ɾ݄ձһࣄۀ෦ 3
4 ྉཧ͖Ζ͘
ࠓͷ͓ 5
ຊͷ͓ 6 νʔϜɾ৫શһͰϢʔβʔΛߟ͑ ૉૣ͘ՁΛಧ͚Δ ΫοΫύουͷαʔϏε։ൃͱ
ΞδΣϯμ ɾΫοΫύουͷαʔϏε։ൃମ੍ ɾνʔϜ։ൃͷࣄྫհ ɾσβΠφʔͷऔΓΈ ɾ·ͱΊ 7
ΫοΫύουͷ αʔϏε։ൃମ੍ʹ͍ͭͯ 8
ΫοΫύουΛ։ൃ͢Δϝϯόʔ 9 ਓ ։ ൃ ऀ
νʔϜߏ 10 ߘ ݕࡧ ͖Ζ͘ ༗ྉձһ νʔϜA νʔϜA νʔϜA νʔϜA
νʔϜB νʔϜB νʔϜB νʔϜC
νʔϜߏ 11 ñ ñ ò ñ ô ô ò ñ
ò ò ò ñ νʔϜA νʔϜB νʔϜC
νʔϜߏ 12 ñ ñ ò ñ ô ô ò ñ
ò ò ò ñ νʔϜA νʔϜB νʔϜC Φʔφʔ σβΠφʔ ΤϯδχΞ σΟϨΫλʔ
νʔϜ։ൃͷࣄྫհ 13
14 ྉཧ͖Ζ͘
νʔϜମ੍ 15 ϛογϣϯΦʔφʔ σβΠφʔ݉ J04ΤϯδχΞ "OESPJEΤϯδχΞ σΟϨΫλʔ
ͦΕͧΕͷׂ 16 ϛογϣϯΦʔφʔ σβΠφʔ݉ J04ΤϯδχΞ "OESPJEΤϯδχΞ σΟϨΫλʔ ඪ Ϣʔβʔମݧͷ ΤϯδχΞϦϯάͷ
ϝϯόʔಉ࢜ͷؔ 17 ΤϯδχΞͱσβΠφʔ͕͓ޓ͍Λิ͢Δ σβΠφʔσΟϨΫλʔ ΤϯδχΞ
νʔϜϫʔΫϑϩʔ 18 ࢪࡦܾΊ ϓϩτλΠϐϯά σβΠϯϨϏϡʔ ༷֬ఆ ࢪࡦͷࢦඪˍϩάܾΊ ࣮ ςετ ϦϦʔεޙɺੳ
िؒdϲ݄ ΞϓϦ։ൃجຊతʹ
νʔϜϫʔΫϑϩʔ 19 ࢪࡦܾΊ ϓϩτλΠϐϯά σβΠϯϨϏϡʔ ༷֬ఆ ࢪࡦͷࢦඪˍϩάܾΊ ࣮ ςετ ϦϦʔεޙɺੳ
͜ͷͭʹ͍ͭͯ ৄ͘͠հ
20 νʔϜϫʔΫϑϩʔ ࢪࡦܾΊ ϓϩτλΠϐϯά σβΠϯϨϏϡʔ ༷֬ఆ ࢪࡦͷࢦඪˍϩάܾΊ ࣮ ςετ ϦϦʔεޙɺੳ
ᶃࢪࡦɾମݧΛߟ͑Δ
ࢪࡦɾମݧΛߟ͑Δ 21 ɾৗʹͳΜͷͨΊʹ͍ͬͯΔͷ͔Λҙࣝ͢Δ ɾશһ͕ಉ͡ํΛ͍ͯ։ൃͰ͖ΔΑ͏ʹ ɾ໎ͬͨΒཱͪΕΔ తͱԾઆΛ໌֬ʹ
ࢪࡦɾମݧΛߟ͑Δ 22 ɾΈΜͳͰִ͚ͯͳ͘ΞΠσΞɾҙݟ͕ग़ͤΔΑ͏ʹ ɾൃࢄޙɺΈΜͳͰू·ΓlతzʹԊͬͨͷͰ͋Δ͔ʁ ɹΛج४ʹܾఆ͍ͯ͘͠ (JU)VCJTTVFͰΞΠσΞൃࢄ
23 νʔϜϫʔΫϑϩʔ ࢪࡦܾΊ ϓϩτλΠϐϯά σβΠϯϨϏϡʔ ༷֬ఆ ࢪࡦͷࢦඪˍϩάܾΊ ࣮ ςετ ϦϦʔεޙɺੳ
ᶄσβΠϯϨϏϡʔ
σβΠϯϨϏϡʔ 24 lతɾഎܠɾσβΠϯͷҙਤzͳͲΛ໌֬ʹɻ (JU)VCJTTVF্ͰɺνʔϜ֎ͷ σβΠφʔɾΤϯδχΞ͔ΒϨϏϡʔ
(JU)VCJTTVFʹΑΔσβΠϯϨϏϡʔ 25 ɾ৬छؔͳ͘ɺԣ۲ͰσβΠϯΛධՁ͢Δ ɾ্࣭ͱҡ࣋ ɾσβΠϯมߋͷܦҢ͕୭ͰࢀরͰ͖Δ ɾٞʹΑΔ৽ͨͳؾ͖ͮ
26 νʔϜϫʔΫϑϩʔ ࢪࡦܾΊ ϓϩτλΠϐϯά σβΠϯϨϏϡʔ ༷֬ఆ ࢪࡦͷࢦඪˍϩάܾΊ ࣮ ςετ ϦϦʔεޙɺੳ
ᶅࢪࡦͷࢦඪͱϩά
ࢪࡦͷࢦඪͱϩά 27 ɾϢʔβʔʹಧ͚͍ͨ͜ͱ͕ɺ͔ͬ͠Γಧ͍͍ͯΔ͔ΛਤΔͨΊʹ ɾͲ͜ʹࢦඪΛஔ͖ɺϩάΛࠐΊੳͰ͖Δͷ͔νʔϜͰݕ౼ ɾσΟϨΫλʔσβΠφʔϩάʹରͯ͠ҙݟΛݴ͏ ࢦඪɾϩάͷઃܭνʔϜશһͰ
ࢪࡦͷࢦඪͱϩά 28 શһ͕͙͢ݟ͑Δॴʹ
29 νʔϜϫʔΫϑϩʔ ࢪࡦܾΊ ϓϩτλΠϐϯά σβΠϯϨϏϡʔ ༷֬ఆ ࢪࡦͷࢦඪˍϩάܾΊ ࣮ ςετ ϦϦʔεޙɺੳ
ᶆνʔϜͰ खಈςετΛ࣮ߦ͢Δ
νʔϜͰखಈςετΛ࣮ߦ͢Δ 30 ɾͰ͖Δ͚ͩνʔϜͰɻϦϦʔεޙͷʮ͏ਓʯΛߟ͑ͯɻ ɾΤοδέʔεؚΊͨςετέʔεΛ࡞͠ɺ໊ͰνΣοΫ खΛೖΕͨ෦ͷ࣭ཧΛ͔ͬ͠Γ͢Δ
νʔϜͰखಈςετΛ࣮ߦ͢Δ 31 ɾ͕ग़ͨΒॻ͘εϨ͕͋Δ ɾରԠ͖͢༏ઌॱҐ͚ͭͯ ɹΛҰཡԽ खΛೖΕͨ෦ͷ࣭ཧΛ͔ͬ͠Γ͢Δ
32 खಈςετΛͯ͠ؾͮ͘ɺࡉ͔͍ߟྀෆʜ Τϥʔͷͱ͖ Ͳ͏ͳΔͷʁ ಡΈࠐΈதʜ ήετʁϩάΠϯͯ͠Δ Ϣʔβʔʁ ଞͷ͋ΔΑ
33 σβΠϯ্ͷࡉ͔͍ߟྀ࿙ΕΛ ࣄલʹ͙͕͋Γ·͢
34 IUUQUSBOTJULJYIBUFOBCMPHKQFOUSZ
ͭΑ͍6* 35 σβΠϯΛ࡞ͬͨޙʹɺߟྀ࿙Ε͕ͳ͍͔վΊͯݟฦ͢
36 νʔϜϫʔΫϑϩʔ ࢪࡦܾΊ ϓϩτλΠϐϯά σβΠϯϨϏϡʔ ༷֬ఆ ࢪࡦͷࢦඪˍϩάܾΊ ࣮ ςετ ϦϦʔεޙɺੳ
ᶇৼΓฦΓͱڞ༗
ৼΓฦΓͱڞ༗ 37 ࣅͨΑ͏ͳ͜ͱ୭͕͕ͯͨ͠ؾ͕͢Δɻ ͋ͷࢪࡦͲ͏ͳͬͨΜͩΖ͏ʜ Ͳ͔͜ʹ·ͱΊͯ͋ͬͨؾ͕͢Δ͚Ͳʜ ͋ͷ࣌ͬͨʓʓ ͜͜ʹ·ͱ·͍ͬͯΔΑʂ ͜Ε·Ͱʜ ͜͏͍ͨ͠ʂ όϥ
όϥʜ ৼΓฦΓ͕ ͔̍ॴʹ
ৼΓฦΓͱڞ༗ 38 ࣅͨΑ͏ͳ͜ͱ୭͕͕ͯͨ͠ؾ͕͢Δɻ ͋ͷࢪࡦͲ͏ͳͬͨΜͩΖ͏ʜ Ͳ͔͜ʹ·ͱΊͯ͋ͬͨؾ͕͢Δ͚Ͳʜ ͋ͷ࣌ͬͨʓʓ ͜͜ʹ·ͱ·͍ͬͯΔΑʂ ͜Ε·Ͱʜ ͜͏͍ͨ͠ʂ όϥ
όϥʜ ৼΓฦΓ͕ ͔̍ॴʹ 3FQPSUNE
3FQPSUNE 39 ɾ(JU)VCͷSFQPTJUPSZͰཧɻݟ͍ͨ࣌ʹɺ͙͢ݟΕΔɻ
3FQPSUNE 40 ɾॻ͍ͨΒ1VMM3FRVFTUʹग़ͯ͠ɺνʔϜͰϨϏϡʔ͠߹͏ ɾσβΠφʔσΟϨΫλʔ42-ॻ͖·͢
ৼΓฦΓͱڞ༗ 41 ར༻ऀͷ
νʔϜߏ 42 ߘ ݕࡧ ͖Ζ͘ ༗ྉձһ νʔϜA νʔϜA νʔϜA νʔϜA
νʔϜB νʔϜB νʔϜB νʔϜC
43 ñ ñ ò ñ ô ô ò ñ ò
ò ò ñ νʔϜA νʔϜB νʔϜC Φʔφʔ σβΠφʔ ΤϯδχΞ σΟϨΫλʔ νʔϜ͔Ε͍ͯΔ͕ɺαʔϏεͱͯ͠Ұͭɻ શମͷετʔϦʔ͕ਖ਼͘͠ઃܭ͞Ε͍ͯΔ͔ʁ ϢʔβʔઢʹཱͬͨஅɾऔΓΈ͕ग़དྷ͍ͯΔ͔ʁ
44 ñ ñ ò ñ ô ô ò ñ ò
ò ò ñ νʔϜA νʔϜB νʔϜC Φʔφʔ σβΠφʔ ΤϯδχΞ σΟϨΫλʔ ΫοΫύουશମͷαʔϏεΛ ԣஅ၆ᛌతʹଊ͑ΔׂͱऔΓΈ͕ଘࡏ νʔϜ͔Ε͍ͯΔ͕ɺαʔϏεͱͯ͠Ұͭɻ શମͷετʔϦʔ͕ਖ਼͘͠ઃܭ͞Ε͍ͯΔ͔ʁ ϢʔβʔઢʹཱͬͨஅɾऔΓΈ͕ग़དྷ͍ͯΔ͔ʁ
αʔϏεΛԣஅతʹݟΔ σβΠφʔͷऔΓΈ 45
46 σβΠϯϦϦʔεϚωʔδϟͷઃஔ
σβΠϯϦϦʔεϚωʔδϟͱ 47 ϦϦʔεόʔγϣϯ୯ҐͰɺϢʔβʔͷମݧ 6*ʹมߋ͕͋ΔՕॴΛѲ͠ σβΠϯपΓΛҰ؏ͯ͠ݟΔׂ
σβΠϯϦϦʔεϚωʔδϟ͕Δ͜ͱ 48 σβΠϯ֬ೝձ ։ൃ ։ൃ͕ऴΘΓɺϦϦʔε͢Δ·Ͱͷؒʹ ग़དྷ্͕ͬͨػೳͱશମͷମݧΛ ΞϓϦσβΠφʔશһͰ৮ͬͯ֬ೝ͢Δ ϦϦʔε
49 σβΠϯձ
σβΠϯձ 50 ɾिճɺ࣌ؒ ɾΫοΫύουɺଞϓϩμΫτʹؔΘΔσβΠφʔશһ͕ࢀՃ ɾ-5ʹΑΔݟڞ༗αʔϏεશମͷ՝ڞ༗ͳͲ
·ͱΊ 51
·ͱΊ 52 ɾత/ՁԾઆΛ໌֬ʹ͠ɺ࠷ޙ·ͰϒϨͳ͍Α͏ʹ ɾͭΑ͍UIreport.mdΛͬͨ୭͕ਅࣅ/ҙࣝͰ͖Δ ɾʮϢʔβʔʯΛओޠʹετʔϦʔΛԣஅతʹΈΔ ૉૣ͘ϢʔβʔʹՁΛಧ͚ΔͨΊʹʜ
࠷ޙʹɺ 53 ҰਓͰσβΠϯΛ࡞͍ͬͯΔΘ͚Ͱͳ͍ɻ νʔϜ৫શһͰʮϢʔβʔʯΛ{ҙࣝɾߟ͑ΒΕΔ}ΈΛ ࡞Δ͜ͱσβΠφʔͷׂͰ͢ɻ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠