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
コードを書きながらデザインする意味と効果 / The intersection of desi...
Search
Takaya Deguchi
December 06, 2018
Design
7
2.5k
コードを書きながらデザインする意味と効果 / The intersection of design & engineering
Cookpad Product Kitchen #1 with Takram
https://cookpad.connpass.com/event/107374/
Takaya Deguchi
December 06, 2018
Tweet
Share
More Decks by Takaya Deguchi
See All by Takaya Deguchi
Figmaでデザインを"ひらく" / Design for Everyone by Figma
dex1t
1
1.2k
キャリアの分岐点 / the intersection of my carrier
dex1t
3
240
Cookpad Summer Internship 2018, 5 days Product Course
dex1t
3
7.2k
Machine Learning for Rapid Prototyping #CIIDSummerSchool
dex1t
8
4.8k
2018 Cookpad Spring Internship Service Develoment Course
dex1t
3
3.3k
体験を売るためのサービスづくり
dex1t
3
770
ユーザーと向き合いながらつくるSaaS #service_dev
dex1t
3
9.6k
Kibela meets Stripe - Stripeを使って新規SaaSを立ち上げた話 #JP_Stripes
dex1t
12
4.6k
不確実さとうまく付きあうサービス開発
dex1t
3
2.5k
Other Decks in Design
See All in Design
今日からできる実践アクセシビリティSNSというかXでaltをつけよう
securecat
1
140
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
3
2.9k
太田博三(@usagisan2020)
otanet
0
220
利用者が離れないUX/UIデザイン 長く使われる業務アプリデザインのポイント
ncdc
5
430
Masked shaman-Storyboard 2025
ashley0521
0
160
(第1回) アーキテクト・テックリード育成講座
masakaya
0
160
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
380
AIと創る広告の未来 ― タップルと極AIお台場スタジオの最新事例― / ai-tapple-odaiba
cyberagentdevelopers
PRO
1
680
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
570
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜
tak073
0
240
Дизайн современной услуги с Картой процесса-опыта
ashapiro
0
110
HCDフォーラム2024 「HCDとHAI ~人間とAIが共存する世界の実現~」
kamechi7222222
0
280
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Automating Front-end Workflow
addyosmani
1367
200k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
8
270
For a Future-Friendly Web
brad_frost
176
9.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Docker and Python
trallard
44
3.3k
Scaling GitHub
holman
459
140k
How STYLIGHT went responsive
nonsquared
98
5.3k
Making Projects Easy
brettharned
116
6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Transcript
ίʔυΛॻ͖ͳ͕ΒσβΠϯ͢Δ ҙຯͱޮՌ Cookpad Product Kitchen #1 with Takram Takaya Deguchi
@dex1t
Design Engineering P
UX Engineer Design Engineer
事業会社でのサービス開発において、 デザインとエンジニアリングを越境す ることの意味や効果をご紹介します。
@dex1t Takaya Deguchi UX Engineer / Product Manager à Cookpad
Inc. (2013.04-)
料理コミュニティ 情報共有SaaS 料理学習アプリ Cookpad Cookpad Global 2013 2015 2018 社内外で新規サービスの
⽴ち上げを中⼼に5年半 やってきました
Cookpad Product Kitchen #1 with Takram 料理コミュニティ (2013 - 2014)
新規サービスのグロース, オーナー RailsやiOSアプリを書きつつ、コミュニティ運営や CS対応、SEOなど集客施策ふくめ必要なこと全部。
Cookpad Product Kitchen #1 with Takram 情報共有系SaaS (2015 - 2018)
社外で事業⽴ち上げ, オーナー スタートアップに出向して、初期はインフラから デザインまで、⽴ち上げに必要なこと全部。 後期はPMやカスタマーサクセス中⼼に担当。
Cookpad Product Kitchen #1 with Takram 料理学習アプリ(2018) 新規サービスの⽴ち上げ, メンバー 主にUIやアニメーションのデザイン、プロトタイ
ピング、React Nativeでのアプリ開発を担当
Server-side Engineering これまでやってきたこと Front-end Engineering Mobile Engineering UX Design UI
Design Animation Product Management Community Management Customer Success Customer Support
Server-side Engineering 開発領域内での越境 Front-end Engineering Mobile Engineering UX Design UI
Design Animation Product Management Community Management Customer Success Customer Support
Server-side Engineering ⾮開発領域への越境 Front-end Engineering Mobile Engineering UX Design UI
Design Animation Product Management Community Management Customer Success Customer Support
Server-side Engineering ⾮開発領域内での越境 Front-end Engineering Mobile Engineering UX Design UI
Design Animation Product Management Community Management Customer Success Customer Support
Server-side Engineering デザイン領域への越境 ここで肩書をUXエンジニアへ Front-end Engineering Mobile Engineering UX Design
UI Design Animation Product Management Community Management Customer Success Customer Support
Server-side Engineering 最近はデザイン領域内での越境 Front-end Engineering Mobile Engineering UX Design UI
Design Animation Product Management Community Management Customer Success Customer Support
器⽤貧乏マン どの領域でも専⾨家には勝てない
https://www.amazon.co.jp/dp/486480012X https://industry-co-creation.com/icc-salon/74
プロダクトの成功確度を上げるために 必要なことをなんでもやる スタンス
やりたい 得意 やるべき 3つの輪
カオスであればあるほど 器⽤貧乏は⽣きる 最近気づいたこと
何をやったらいいか分からない状況ほど 越境が効いてくる ⾔い換えると
Wicked Problems: 厄介な問題 https://www.slideshare.net/atsushi/design-confidence-designship-2018-124662546 • 解き⽅が不明 • 正解は無い • 客観的な解決判定が不可能
“毎⽇の料理を楽しみにする” • 楽しみにする⽅法は不明 • その⽅法があるのかすら不明 • 楽しみになったのか客観的に判断できない
禅問答 Wicked Problem を解く難しさは 禅問答に陥りやすいこと
禅問答 禅問答化したサービス開発 • 同じことをぐるぐる考え続ける • 具体的なアウトプットがでない • 引くに引けなくなり冷静な判断ができない
None
「クックパッドのレシピを⾒ても料理って 上達しないよね。なんとかできない?」
議論しながらロジカルにやってみたら 案の定、禅問答になってしまった…
1⽇1プロトタイプ⽣活
前⽇の評価 09:00 10:00 11:00 アイデアを出す とりあえずデザイン 12:00 今⽇つくるもの を決める 13:00
14:00 17:00 18:00 雑に実装する デプロイして退社 スーパーに⾏く 19:00 家で料理しながら 使ってみる 1⽇1プロトタイプ⽣活 in UK %
前⽇の評価 09:00 10:00 11:00 アイデアを出す とりあえずデザイン 12:00 今⽇つくるもの を決める 13:00
14:00 17:00 18:00 雑に実装する デプロイして退社 スーパーに⾏く 19:00 家で料理しながら 使ってみる 1⽇1プロトタイプ⽣活 in UK %
前⽇の評価 09:00 10:00 11:00 アイデアを出す とりあえずデザイン 12:00 今⽇つくるもの を決める 13:00
14:00 17:00 18:00 雑に実装する デプロイして退社 スーパーに⾏く 19:00 家で料理しながら 使ってみる 1⽇1プロトタイプ⽣活 in UK %
前⽇の評価 09:00 10:00 11:00 アイデアを出す とりあえずデザイン 12:00 今⽇つくるもの を決める 13:00
14:00 17:00 18:00 雑に実装する デプロイして退社 スーパーに⾏く 19:00 家で料理しながら 使ってみる 1⽇1プロトタイプ⽣活 in UK %
前⽇の評価 09:00 10:00 11:00 アイデアを出す とりあえずデザイン 12:00 今⽇つくるもの を決める 13:00
14:00 17:00 18:00 雑に実装する デプロイして退社 スーパーに⾏く 19:00 家で料理しながら 使ってみる 1⽇1プロトタイプ⽣活 in UK %
スプレッドシート コンセプトビデオ ⼨劇 プロトタイプの形はアプリとも限らない
⽬的 P テスト対象 ⾃分の得意 試作時間 プロトタイピングの⽅程式 P P コンセプト 体験
使い勝⼿ etc ⾃分 メンバー 上司 友達 ⼀般ユーザー Web開発 モバイル開発 UIデザイン グラフィック 動画制作 etc 1⽇ 5⽇ 1ヶ⽉ etc
ľ Ľ 企画 製品 仮説 プロトタイプ 思考 スケッチ 議論 テキスト
抽象 具体
Design Engineering P
https://www.ideo.com/jp/post/our-values lٞ͢ΔΑΓߦಈ͠Α͏z
抽象と具体を⾏き来しながら プロダクトの輪郭を描く UXエンジニアの役割
プロダクトチームにおける UXエンジニア
https://www.ideo.com/jp/post/our-values lᐆດ͞Λڐ༰͠Α͏z
仕様はFixしないものと考える 曖昧なサービス開発
⽔平統合的サービス開発 & ディレクター 企画 ' デザイナー デザイン ( 開発者 開発
期限 期限 期限 1つのプロダクト開発ラインを分割する
閃きが“⼿戻り”になる & ディレクター ' デザイナー ( 開発者 期限 期限 期限
Ľ え、⼿戻り? 企画 デザイン 開発 え、仕様変更?
企画 デザイン 開発 & UXエンジニア ' ( UXエンジニア UXエンジニア 企画
デザイン 企画 開発 開発 デザイン 企画 デザイン 企画 開発 デザイン デザイン 開発 ⽬安 垂直統合的サービス開発 プロダクト開発ラインを複数つくる
Cookpad Product Kitchen #1 with Takram
実際にはハイブリッド型 & ディレクター 仕様策定 ' デザイナー デザイン ( 開発者 開発
期限 期限 期限 ex. 課⾦機能は⽔平統合、未知数な機能は垂直統合 企画 デザイン 企画 開発 デザイン デザイン 開発 UXエンジニア
開発とデザインを繋げる仕組みづくり Citrus - Design System Cookpad Symbols - Symbol Font
Sara - CSS Framework
新しいツールの検証やワークフロー構築 Figma Haiku
None
なぜクックパッドが UXエンジニアを求めるのか
UXエンジニアという肩書は今は僕だけ
肩書は違えど同じ動きをする⼈はたくさんいる
Graphic UI UX Client Server Backend Infra Application デザイナー サービス開発エンジニア
基盤エンジニア・SRE Product Development
Graphic UI UX Client Server Backend Infra Application デザイナー サービス開発エンジニア
基盤エンジニア・SRE Product Development 重なる領域が拡⼤してきた
Graphic UI UX Client Server Backend Infra Application デザイナー サービス開発エンジニア
基盤エンジニア・SRE Product Development UXエンジニア
https://info.cookpad.com/service_product/japan
https://cookpad.jobs
@dex1t Takaya Deguchi UX Engineer / Product Manager à