Slide 1
Slide 1 text
ίʔυΛॻ͖ͳ͕ΒσβΠϯ͢Δ
ҙຯͱޮՌ
Cookpad Product Kitchen #1 with Takram
Takaya Deguchi
@dex1t
Slide 2
Slide 2 text
Design
Engineering
P
Slide 3
Slide 3 text
UX Engineer
Design Engineer
Slide 4
Slide 4 text
事業会社でのサービス開発において、
デザインとエンジニアリングを越境す
ることの意味や効果をご紹介します。
Slide 5
Slide 5 text
@dex1t
Takaya Deguchi
UX Engineer / Product Manager
à
Cookpad Inc. (2013.04-)
Slide 6
Slide 6 text
料理コミュニティ
情報共有SaaS
料理学習アプリ
Cookpad
Cookpad Global
2013
2015
2018
社内外で新規サービスの
⽴ち上げを中⼼に5年半
やってきました
Slide 7
Slide 7 text
Cookpad Product Kitchen #1 with Takram
料理コミュニティ (2013 - 2014)
新規サービスのグロース, オーナー
RailsやiOSアプリを書きつつ、コミュニティ運営や
CS対応、SEOなど集客施策ふくめ必要なこと全部。
Slide 8
Slide 8 text
Cookpad Product Kitchen #1 with Takram
情報共有系SaaS (2015 - 2018)
社外で事業⽴ち上げ, オーナー
スタートアップに出向して、初期はインフラから
デザインまで、⽴ち上げに必要なこと全部。
後期はPMやカスタマーサクセス中⼼に担当。
Slide 9
Slide 9 text
Cookpad Product Kitchen #1 with Takram
料理学習アプリ(2018)
新規サービスの⽴ち上げ, メンバー
主にUIやアニメーションのデザイン、プロトタイ
ピング、React Nativeでのアプリ開発を担当
Slide 10
Slide 10 text
Server-side
Engineering
これまでやってきたこと
Front-end
Engineering
Mobile
Engineering
UX Design
UI Design
Animation
Product
Management
Community
Management
Customer Success
Customer Support
Slide 11
Slide 11 text
Server-side
Engineering
開発領域内での越境
Front-end
Engineering
Mobile
Engineering
UX Design
UI Design
Animation
Product
Management
Community
Management
Customer Success
Customer Support
Slide 12
Slide 12 text
Server-side
Engineering
⾮開発領域への越境
Front-end
Engineering
Mobile
Engineering
UX Design
UI Design
Animation
Product
Management
Community
Management
Customer Success
Customer Support
Slide 13
Slide 13 text
Server-side
Engineering
⾮開発領域内での越境
Front-end
Engineering
Mobile
Engineering
UX Design
UI Design
Animation
Product
Management
Community
Management
Customer Success
Customer Support
Slide 14
Slide 14 text
Server-side
Engineering
デザイン領域への越境
ここで肩書をUXエンジニアへ
Front-end
Engineering
Mobile
Engineering
UX Design
UI Design
Animation
Product
Management
Community
Management
Customer Success
Customer Support
Slide 15
Slide 15 text
Server-side
Engineering
最近はデザイン領域内での越境
Front-end
Engineering
Mobile
Engineering
UX Design
UI Design
Animation
Product
Management
Community
Management
Customer Success
Customer Support
Slide 16
Slide 16 text
器⽤貧乏マン
どの領域でも専⾨家には勝てない
Slide 17
Slide 17 text
https://www.amazon.co.jp/dp/486480012X
https://industry-co-creation.com/icc-salon/74
Slide 18
Slide 18 text
プロダクトの成功確度を上げるために
必要なことをなんでもやる
スタンス
Slide 19
Slide 19 text
やりたい
得意 やるべき
3つの輪
Slide 20
Slide 20 text
カオスであればあるほど
器⽤貧乏は⽣きる
最近気づいたこと
Slide 21
Slide 21 text
何をやったらいいか分からない状況ほど
越境が効いてくる
⾔い換えると
Slide 22
Slide 22 text
Wicked Problems: 厄介な問題
https://www.slideshare.net/atsushi/design-confidence-designship-2018-124662546
• 解き⽅が不明
• 正解は無い
• 客観的な解決判定が不可能
Slide 23
Slide 23 text
“毎⽇の料理を楽しみにする”
• 楽しみにする⽅法は不明
• その⽅法があるのかすら不明
• 楽しみになったのか客観的に判断できない
Slide 24
Slide 24 text
禅問答
Wicked Problem を解く難しさは
禅問答に陥りやすいこと
Slide 25
Slide 25 text
禅問答
禅問答化したサービス開発
• 同じことをぐるぐる考え続ける
• 具体的なアウトプットがでない
• 引くに引けなくなり冷静な判断ができない
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
「クックパッドのレシピを⾒ても料理って
上達しないよね。なんとかできない？」
Slide 28
Slide 28 text
議論しながらロジカルにやってみたら
案の定、禅問答になってしまった…
Slide 29
Slide 29 text
1⽇1プロトタイプ⽣活
Slide 30
Slide 30 text
前⽇の評価
09:00 10:00 11:00
アイデアを出す とりあえずデザイン
12:00
今⽇つくるもの
を決める
13:00
14:00 17:00 18:00
雑に実装する デプロイして退社 スーパーに⾏く
19:00
家で料理しながら
使ってみる
1⽇1プロトタイプ⽣活 in UK %
Slide 31
Slide 31 text
前⽇の評価
09:00 10:00 11:00
アイデアを出す とりあえずデザイン
12:00
今⽇つくるもの
を決める
13:00
14:00 17:00 18:00
雑に実装する デプロイして退社 スーパーに⾏く
19:00
家で料理しながら
使ってみる
1⽇1プロトタイプ⽣活 in UK %
Slide 32
Slide 32 text
前⽇の評価
09:00 10:00 11:00
アイデアを出す とりあえずデザイン
12:00
今⽇つくるもの
を決める
13:00
14:00 17:00 18:00
雑に実装する デプロイして退社 スーパーに⾏く
19:00
家で料理しながら
使ってみる
1⽇1プロトタイプ⽣活 in UK %
Slide 33
Slide 33 text
前⽇の評価
09:00 10:00 11:00
アイデアを出す とりあえずデザイン
12:00
今⽇つくるもの
を決める
13:00
14:00 17:00 18:00
雑に実装する デプロイして退社 スーパーに⾏く
19:00
家で料理しながら
使ってみる
1⽇1プロトタイプ⽣活 in UK %
Slide 34
Slide 34 text
前⽇の評価
09:00 10:00 11:00
アイデアを出す とりあえずデザイン
12:00
今⽇つくるもの
を決める
13:00
14:00 17:00 18:00
雑に実装する デプロイして退社 スーパーに⾏く
19:00
家で料理しながら
使ってみる
1⽇1プロトタイプ⽣活 in UK %
Slide 35
Slide 35 text
スプレッドシート コンセプトビデオ ⼨劇
プロトタイプの形はアプリとも限らない
Slide 36
Slide 36 text
⽬的 P テスト対象 ⾃分の得意 試作時間
プロトタイピングの⽅程式
P P
コンセプト
体験
使い勝⼿
etc
⾃分
メンバー
上司
友達
⼀般ユーザー
Web開発
モバイル開発
UIデザイン
グラフィック
動画制作
etc
1⽇
5⽇
1ヶ⽉
etc
Slide 37
Slide 37 text
ľ
Ľ
企画 製品
仮説 プロトタイプ
思考 スケッチ
議論 テキスト
抽象 具体
Slide 38
Slide 38 text
Design
Engineering
P
Slide 39
Slide 39 text
https://www.ideo.com/jp/post/our-values
lٞ͢ΔΑΓߦಈ͠Α͏z
Slide 40
Slide 40 text
抽象と具体を⾏き来しながら
プロダクトの輪郭を描く
UXエンジニアの役割
Slide 41
Slide 41 text
プロダクトチームにおける
UXエンジニア
Slide 42
Slide 42 text
https://www.ideo.com/jp/post/our-values
lᐆດ͞Λڐ༰͠Α͏z
Slide 43
Slide 43 text
仕様はFixしないものと考える
曖昧なサービス開発
Slide 44
Slide 44 text
⽔平統合的サービス開発
&
ディレクター
企画
'
デザイナー
デザイン
(
開発者
開発
期限 期限 期限
1つのプロダクト開発ラインを分割する
Slide 45
Slide 45 text
閃きが“⼿戻り”になる
&
ディレクター
'
デザイナー
(
開発者
期限 期限 期限
Ľ
え、⼿戻り？
企画
デザイン
開発
え、仕様変更？
Slide 46
Slide 46 text
企画 デザイン 開発
&
UXエンジニア
'
(
UXエンジニア
UXエンジニア
企画 デザイン
企画 開発 開発
デザイン
企画 デザイン 企画
開発 デザイン デザイン 開発
⽬安
垂直統合的サービス開発
プロダクト開発ラインを複数つくる
Slide 47
Slide 47 text
Cookpad Product Kitchen #1 with Takram
Slide 48
Slide 48 text
実際にはハイブリッド型
&
ディレクター
仕様策定
'
デザイナー
デザイン
(
開発者
開発
期限 期限 期限
ex. 課⾦機能は⽔平統合、未知数な機能は垂直統合
企画 デザイン 企画
開発 デザイン デザイン 開発
UXエンジニア
Slide 49
Slide 49 text
開発とデザインを繋げる仕組みづくり
Citrus - Design System Cookpad Symbols - Symbol Font Sara - CSS Framework
Slide 50
Slide 50 text
新しいツールの検証やワークフロー構築
Figma Haiku
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
なぜクックパッドが
UXエンジニアを求めるのか
Slide 53
Slide 53 text
UXエンジニアという肩書は今は僕だけ
Slide 54
Slide 54 text
肩書は違えど同じ動きをする⼈はたくさんいる
Slide 55
Slide 55 text
Graphic UI UX Client Server Backend Infra
Application
デザイナー サービス開発エンジニア 基盤エンジニア・SRE
Product Development
Slide 56
Slide 56 text
Graphic UI UX Client Server Backend Infra
Application
デザイナー サービス開発エンジニア 基盤エンジニア・SRE
Product Development
重なる領域が拡⼤してきた
Slide 57
Slide 57 text
Graphic UI UX Client Server Backend Infra
Application
デザイナー サービス開発エンジニア 基盤エンジニア・SRE
Product Development
UXエンジニア
Slide 58
Slide 58 text
https://info.cookpad.com/service_product/japan
Slide 59
Slide 59 text
https://cookpad.jobs
Slide 60
Slide 60 text
@dex1t
Takaya Deguchi
UX Engineer / Product Manager
à