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
Hiroaki WAKATSUKI - Cookpad TechConf 2017
Search
puzzeljp
January 21, 2017
Design
2
9.2k
Hiroaki WAKATSUKI - Cookpad TechConf 2017
「サービス開発におけるデザインの取り組み方」
puzzeljp
January 21, 2017
Tweet
Share
More Decks by puzzeljp
See All by puzzeljp
「料理の追体験」を実現するデザイン
puzzeljp
6
11k
「いま」と「むかし」
puzzeljp
0
130
sketch.app 基礎講座
puzzeljp
0
670
Life is Tech! の 4 回目の夏。
puzzeljp
0
140
Hack 4 Good Teens (TEAM C) ちっちとゆかいな仲間たち
puzzeljp
0
140
Other Decks in Design
See All in Design
サービスデザインにおける、 映像活用の可能性(Spectrum Tokyo Meetup #18)
ka71
0
160
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
2.4k
minpaku-community-scrum-patterns
norinity1103
1
360
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
250
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
lycorptech_jp
PRO
0
400
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
1.9k
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
400
Designing User Experience through Interaction Design
lycorptech_jp
PRO
0
380
「キャリア」のプロダクトをつくる私の「キャリア」への向き合い方 / JAM de NIGHT DESIGN SESSION Vol3
visional_engineering_and_design
1
200
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
bebe
0
810
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
lycorptech_jp
PRO
0
520
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
1.8k
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
The World Runs on Bad Software
bkeepers
PRO
70
11k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
113
20k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
How STYLIGHT went responsive
nonsquared
100
5.8k
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Statistics for Hackers
jakevdp
799
220k
Making Projects Easy
brettharned
117
6.4k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
530
Transcript
αʔϏε։ൃʹ͓͚Δ σβΠϯͷऔΓΈํ Hiroaki WAKATSUKI @puzzeljp 2017/01/21 @ Ebisu the Garden
Room. Cookpad TechConf 2017
$PPLQBE5FDI$POG )JSPBLJ8","546,*!QV[[FMKQ "HFOEB w ࣗݾհ w ߘ։ൃ෦ͰऔΓΜͩ͜ͱ w ՁݕূͷͨΊͷϓϩτλΠ ϐϯά
w ϓϩμΫτ։ൃͱվળ w 9DPEFͷσβΠϯௐ w ·ͱΊ 2
$PPLQBE5FDI$POG )JSPBLJ8","546,*!QV[[FMKQ 3 ࣗݾհ
$PPLQBE5FDI$POG )JSPBLJ8","546,*!QV[[FMKQ ए݄ܒ૱ )JSPBLJ8","546,* !QV[[FMKQ ৽ଔσβΠφʔ J04ΞϓϦɾߘ෦ͷσβΠϯ w 5FDI$POG৽ଔͷαΠτ
ͷ੍࡞ w தֶੜͷࠒ͔Β8FCαΠτ࡞ɻ w झຯɺະ։෧ͷΧηοτςʔϓΛूΊΔ͜ ͱʮΧηοτςʔϓίϨΫλʔʯͰݕࡧʂ 4 ࣗݾհ
$PPLQBE5FDI$POG )JSPBLJ8","546,*!QV[[FMKQ ࣗݾհ ݄ೖࣾϢʔβʔϑΝʔετਪਐࣨଐ ΞϧόΠτ 5
$PPLQBE5FDI$POG )JSPBLJ8","546,*!QV[[FMKQ ࣗݾհ ݄ೖࣾϢʔβʔϑΝʔετਪਐࣨଐ ΞϧόΠτ ݄৽ଔͱͯࣾ͠һʹ 6
$PPLQBE5FDI$POG )JSPBLJ8","546,*!QV[[FMKQ ࣗݾհ ݄ೖࣾϢʔβʔϑΝʔετਪਐࣨଐ ΞϧόΠτ ݄৽ଔͱͯࣾ͠һʹ ݄ߘ։ൃ෦ଐ 7
$PPLQBE5FDI$POG )JSPBLJ8","546,*!QV[[FMKQ 8 σβΠφʔͷࣄʺը໘σβΠϯ ຊͷ͓
$PPLQBE5FDI$POG )JSPBLJ8","546,*!QV[[FMKQ 9 ΫοΫύου৽ଔ ߘ։ൃ෦ଐ
$PPLQBE5FDI$POG )JSPBLJ8","546,*!QV[[FMKQ ϨγϐΛॻ͘ը໘ͷվળ৽ػೳͷ։ൃ ΫοΫύου৽ଔ ߘ։ൃ෦ ଐ 10
$PPLQBE5FDI$POG )JSPBLJ8","546,*!QV[[FMKQ ։ൃϑϩʔ 11 ߘ։ൃ෦ શһͰϒϨετ
$PPLQBE5FDI$POG )JSPBLJ8","546,*!QV[[FMKQ ։ൃϑϩʔ 12 ߘ։ൃ෦ શһͰϒϨετ ,1*ʹج͍ͮͯΔ͔Βͳ͍͔Λδϟοδ
$PPLQBE5FDI$POG )JSPBLJ8","546,*!QV[[FMKQ ։ൃϑϩʔ 13 ߘ։ൃ෦ શһͰϒϨετ ,1*ʹج͍ͮͯΔ͔Βͳ͍͔Λδϟοδ ΞαΠϯ
$PPLQBE5FDI$POG )JSPBLJ8","546,*!QV[[FMKQ ։ൃϑϩʔ 14 ߘ։ൃ෦ શһͰϒϨετ ,1*ʹج͍ͮͯΔ͔Βͳ͍͔Λδϟοδ ΞαΠϯ ༷ܾఆ
$PPLQBE5FDI$POG )JSPBLJ8","546,*!QV[[FMKQ ։ൃϑϩʔ 15 ߘ։ൃ෦ શһͰϒϨετ ,1*ʹج͍ͮͯΔ͔Βͳ͍͔Λδϟοδ ΞαΠϯ ༷ܾఆ ϓϩτλΠϐϯάɾσβΠϯ
$PPLQBE5FDI$POG )JSPBLJ8","546,*!QV[[FMKQ ։ൃϑϩʔ 16 ߘ։ൃ෦ શһͰϒϨετ ,1*ʹج͍ͮͯΔ͔Βͳ͍͔Λδϟοδ ΞαΠϯ ༷ܾఆ ϓϩτλΠϐϯάɾσβΠϯ
࣮
$PPLQBE5FDI$POG )JSPBLJ8","546,*!QV[[FMKQ 17 ߘ։ൃ෦ ՁݕূͷͨΊͷϓϩτλΠϐϯά
$PPLQBE5FDI$POG )JSPBLJ8","546,*!QV[[FMKQ 18 ՁݕূͷͨΊͷ ϓϩτλΠϐϯά ߘ։ൃ෦ NEW! ʮϨγϐΛۙʹײ͡Δʯ͜ͱ͕Ͱ͖Δ ʮ৽͍͠Ϩγϐʯͱͷग़ձ͍ͷ
$PPLQBE5FDI$POG )JSPBLJ8","546,*!QV[[FMKQ 19 ߘ։ൃ෦ ՁݕূͷͨΊͷ ϓϩτλΠϐϯά
$PPLQBE5FDI$POG )JSPBLJ8","546,*!QV[[FMKQ 20 ࣮ࡍͷϨγϐσʔλΛͬͨ͜ͱͰ w ಈ͖ͷΠϝʔδ͕ͭ͘͜ͱ w ։ൃͷίετͳͲ͕໌֬ʹ w εϐʔυײ͋Δ։ൃ͕Մೳʹ
J04൛ΫοΫύουͷʮΈΜͳͷߘʯλϒ͔Β͑Δ ߘ։ൃ෦ NEW! ՁݕূͷͨΊͷ ϓϩτλΠϐϯά ͔Βͷֶͼ
$PPLQBE5FDI$POG )JSPBLJ8","546,*!QV[[FMKQ 21 ߘ։ൃ෦ ϓϩμΫτ։ൃͱվળࢪࡦ
$PPLQBE5FDI$POG )JSPBLJ8","546,*!QV[[FMKQ 22 w ڞ༗ൣғΛ༑ਓՈʹݶఆͯ͠ ϨγϐΛڞ༗Ͱ͖ΔΑ͏ʹ w ࠓ·ͰɺʮΫοΫύουʹެ։ʯ ͔ʮԼॻ͖อଘʯͷͭͷঢ়ଶ͔͠ ͳ͔ͬͨ
ݶఆެ։Ϩγϐߘը໘ ڞ༗͞ΕͨϨγϐը໘ ߘ։ൃ෦ ݶఆެ։ػೳ ϓϩμΫτ։ൃ ݶఆެ։ͷߘJ04ΞϓϦͷΈ
$PPLQBE5FDI$POG )JSPBLJ8","546,*!QV[[FMKQ 23 ߘ։ൃ෦ ݶఆެ։ػೳ ར༻γʔϯ ϝϞͷ༷ͳެ։͢Δ΄Ͳ͡Όͳ͍ ϨγϐΛۙͳਓʹڭ͍͑ͨ
$PPLQBE5FDI$POG )JSPBLJ8","546,*!QV[[FMKQ 24 ݶఆެ։ػೳ վળࢪࡦ w ݱঢ়Ѳ w ఆྔௐࠪʢϩάͳͲʣ w
ఆੑௐࠪʢϢʔβʔΠϯλϏϡʔʣ ߘ։ൃ෦
$PPLQBE5FDI$POG )JSPBLJ8","546,*!QV[[FMKQ 25 ݶఆެ։ػೳ վળࢪࡦ w ݱঢ়Ѳ w ఆྔௐࠪʢϩάͳͲʣ w
ఆੑௐࠪʢϢʔβʔΠϯλϏϡʔʣ w Ϣʔβʔೝ֦େ w ΞϓϦ͓Βͤ w ϝʔϧ৴ w հϖʔδͷ࡞ ߘ։ൃ෦
$PPLQBE5FDI$POG )JSPBLJ8","546,*!QV[[FMKQ 26 ݶఆެ։ػೳ ͔Βͷֶͼ ΤϯδχΞͱίϛϡχέʔγϣϯΛऔΓ ඞཁͳ෦͚ͩσβΠϯΛ੍࡞͢Δ͜ͱͰ ࣌ؒॖΛߦ͑ͨ σβΠφʔ ඞཁͳσβΠϯ
Ͳ͜Ͱ͔͢ σβΠφʔ ༻ҙ͠·͢ ΤϯδχΞ ͜͜ͷσβΠϯͱ ૉࡐ͕΄͍͠Ͱ͢
$PPLQBE5FDI$POG )JSPBLJ8","546,*!QV[[FMKQ 27 ݶఆެ։ػೳ ͔Βͷֶͼ վળࢪࡦ ఆྔతʹஅͤͣఆੑతͳҙݟΛऔ ΓೖΕΔ͜ͱͰɺ ࣍ͷΞΫγϣϯ͕໌֬ʹͳΓɺޮՌ ͕ग़ͨ
$PPLQBE5FDI$POG )JSPBLJ8","546,*!QV[[FMKQ 28 ߘ։ൃ෦ 9DPEFͰ σβΠϯௐ
$PPLQBE5FDI$POG )JSPBLJ8","546,*!QV[[FMKQ 29 9DPEFͰ σβΠϯௐ w ΤϯδχΞͷۤखͳ࡞ۀͷ ݮ w σβΠϯௐͷίϛϡχέʔ
γϣϯʹ͔͚Δ࣌ؒͷॖ త
$PPLQBE5FDI$POG )JSPBLJ8","546,*!QV[[FMKQ 30 9DPEFͰ σβΠϯௐ ͷྲྀΕ 1 2 3 4
5 ࠷ॳʹ 4UPSZCPBSEͷ આ໌Λฉ͘ ࢼ͠ʹ )FMMP8PSME ͯ͠ΈΔ ࣮ࡍʹ4UPSZCPBSE ͷมߋΛߦ͏ 13Λग़ͯ͠ ϨϏϡʔͯ͠Β͏ -(5.
$PPLQBE5FDI$POG )JSPBLJ8","546,*!QV[[FMKQ 31 9DPEFͰ σβΠϯௐ ؾΛ͚ͭͨ͜ͱ ίʔυॻ͔ͳ͍ɻ ˠมͳίʔυΛॻ͍ͯ͠·͏ͱ͔͑ͬͯΤϯδχΞ͕Ϩ Ϗϡʔ͢Δͷେมʹͳͬͯ͠·͏ͨΊ
$PPLQBE5FDI$POG )JSPBLJ8","546,*!QV[[FMKQ 32 ˔ΤϯδχΞͷεέδϡʔϧʹ༨༟͕Ͱ͖Δ ˔ࣗͰσβΠϯௐ͕Ͱ͖Δ 9DPEFͰ σβΠϯௐ ͔Βͷֶͼ
$PPLQBE5FDI$POG )JSPBLJ8","546,*!QV[[FMKQ 33 ·ͱΊ
$PPLQBE5FDI$POG )JSPBLJ8","546,*!QV[[FMKQ 34 ·ͱΊ ՁݕূͷͨΊͷ ϓϩτλΠϐϯά ϓϩμΫτ։ൃͱ վળࢪࡦ 9DPEFͰ σβΠϯௐ
σβΠφʔͷࣄʺը໘ͷσβΠϯ
$PPLQBE5FDI$POG )JSPBLJ8","546,*!QV[[FMKQ 35 σβΠφʔͷࣄʹ ྉཧ͢Δਓͷʮָ͍͠ʂʯΛٕज़Ͱ࣮ݱ͍ͯ͘͜͠ͱ ·ͱΊ ՁݕূͷͨΊͷ ϓϩτλΠϐϯά ϓϩμΫτ։ൃͱ վળࢪࡦ
9DPEFͰ σβΠϯௐ
$PPLQBE5FDI$POG )JSPBLJ8","546,*!QV[[FMKQ 36 ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ