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.3k
キャリアの分岐点 / the intersection of my carrier
dex1t
3
250
Cookpad Summer Internship 2018, 5 days Product Course
dex1t
3
7.3k
Machine Learning for Rapid Prototyping #CIIDSummerSchool
dex1t
8
4.8k
2018 Cookpad Spring Internship Service Develoment Course
dex1t
3
3.3k
体験を売るためのサービスづくり
dex1t
3
800
ユーザーと向き合いながらつくる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
Flow, Not Stock 知識触媒としてのIA
5kaichi
1
280
実践ゼロから作らないデザインシステム SaaS × デザインシステム × プロダクトデザイン / Efficient Design System for SaaS—no need to start from scratch.
kaminashi
2
1.6k
Building foundations 堅牢なデザイントークンの設計
hilokifigma
2
3.3k
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
390
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
securecat
5
1.4k
DC Style Redesign
mcduckyart
0
110
オリジナルのデザイン地図を作ってみた!〜OpenMapTilesとMaputnikを活用した地図スタイル〜
hjmkth
1
530
クライアントワークにおける UXリサーチの実践
kozotaira
0
660
portfolio_YumiYasuda
yum0418
0
250
線で考える画面構成
natsuume
1
870
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
200
Storyboard Honey
rocioparronrubio
0
250
Featured
See All Featured
Facilitating Awesome Meetings
lara
54
6.4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Code Review Best Practice
trishagee
68
18k
What's in a price? How to price your products and services
michaelherold
245
12k
Adopting Sorbet at Scale
ufuk
77
9.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Side Projects
sachag
454
42k
Documentation Writing (for coders)
carmenintech
71
4.8k
Docker and Python
trallard
44
3.4k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
How GitHub (no longer) Works
holman
314
140k
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 à