コードを書きながらデザインする意味と効果 / The intersection of design & engineering

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

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

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エンジニア