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.6k
コードを書きながらデザインする意味と効果 / 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.3k
キャリアの分岐点 / the intersection of my carrier
dex1t
3
260
Cookpad Summer Internship 2018, 5 days Product Course
dex1t
3
7.4k
Machine Learning for Rapid Prototyping #CIIDSummerSchool
dex1t
8
4.9k
2018 Cookpad Spring Internship Service Develoment Course
dex1t
3
3.3k
体験を売るためのサービスづくり
dex1t
3
810
ユーザーと向き合いながらつくるSaaS #service_dev
dex1t
3
9.6k
Kibela meets Stripe - Stripeを使って新規SaaSを立ち上げた話 #JP_Stripes
dex1t
12
4.7k
不確実さとうまく付きあうサービス開発
dex1t
3
2.6k
Other Decks in Design
See All in Design
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
280
Yumika Yamada Portfolio
yumii
0
1.3k
Them Middle School Kids Pitch
stevie_vee
0
130
21 Ways to Call American Airlines Customer Care Full Guide USA
americanhub
0
200
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
650
ChatGPT、Gemini、Claude は、なぜ似たようなUIを採用しているのか?
fuwarisprit
0
380
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
610
minpaku-community-scrum-patterns
norinity1103
1
250
ビジネス成果を最大限に発揮するPORTFOLIO
ataxi1003
0
480
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
540
The Spectacular Lies of Maps
axbom
PRO
1
260
harutaka Vision Deck
zenkigenforrecruit
0
200
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
YesSQL, Process and Tooling at Scale
rocio
173
14k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6.1k
Making Projects Easy
brettharned
117
6.4k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
KATA
mclloyd
32
14k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Gamification - CAS2011
davidbonilla
81
5.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
How STYLIGHT went responsive
nonsquared
100
5.8k
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 à