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
入社3ヶ月目のプロダクトデザイナー視点で見たヤプリ / Joining Yappli as a Product Designer: My Perspective After 90 Days
yappli_developers
0
120
ゲーム開発における、Figma活用事例の紹介 / applibot-figma
cyberagentdevelopers
PRO
2
650
LayerX DesignersDeck
layerx
PRO
0
2.6k
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 組織横断のデザインの 取り組みについて
sig
1
270
FANCL×CA流アプリリニューアルPJ 成功の秘訣とそのプロセス / dx-fancl-renewal
cyberagentdevelopers
PRO
2
900
Illustrator2025がやってきた!私が好きな新機能
hamko1114
0
110
デザイナーのお仕事(UI/UX GRAPHIC GROUP)
mirrativ
0
130
「Figmaプラグイン開発してみた」@スタメンデザイナーオープン勉強会
kiyoshifuwa
0
130
ネットワークセキュリティ科 学科紹介
sklbj_unz
0
180
今更聞けないデザイン思考 - 高専キャリア2024冬 / imasara-design-thinking
chige
5
880
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
570
Goodpatch Tour💙 / We are hiring!
goodpatch
31
790k
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
133
9.1k
RailsConf 2023
tenderlove
29
1k
Code Review Best Practice
trishagee
67
18k
Why Our Code Smells
bkeepers
PRO
336
57k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
A Tale of Four Properties
chriscoyier
158
23k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
9
450
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Producing Creativity
orderedlist
PRO
344
39k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
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 ҰਓͰσβΠϯΛ࡞͍ͬͯΔΘ͚Ͱͳ͍ɻ νʔϜ৫શһͰʮϢʔβʔʯΛ{ҙࣝɾߟ͑ΒΕΔ}ΈΛ ࡞Δ͜ͱσβΠφʔͷׂͰ͢ɻ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠