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

Transcript

1. ίʔυΛॻ͖ͳ͕ΒσβΠϯ͢Δ
   ҙຯͱޮՌ Cookpad Product Kitchen #1 with Takram Takaya Deguchi

   @dex1t

2. Design Engineering P

3. UX Engineer Design Engineer

4. 事業会社でのサービス開発において、 デザインとエンジニアリングを越境す ることの意味や効果をご紹介します。

5. @dex1t Takaya Deguchi UX Engineer / Product Manager à Cookpad

   Inc. (2013.04-)

6. 料理コミュニティ 情報共有SaaS 料理学習アプリ Cookpad Cookpad Global 2013 2015 2018 社内外で新規サービスの

   ⽴ち上げを中⼼に5年半 やってきました

7. Cookpad Product Kitchen #1 with Takram 料理コミュニティ (2013 - 2014)

   新規サービスのグロース, オーナー RailsやiOSアプリを書きつつ、コミュニティ運営や CS対応、SEOなど集客施策ふくめ必要なこと全部。

8. Cookpad Product Kitchen #1 with Takram 情報共有系SaaS (2015 - 2018)

   社外で事業⽴ち上げ, オーナー スタートアップに出向して、初期はインフラから デザインまで、⽴ち上げに必要なこと全部。 後期はPMやカスタマーサクセス中⼼に担当。

9. Cookpad Product Kitchen #1 with Takram 料理学習アプリ(2018) 新規サービスの⽴ち上げ, メンバー 主にUIやアニメーションのデザイン、プロトタイ

   ピング、React Nativeでのアプリ開発を担当

10. Server-side Engineering これまでやってきたこと Front-end Engineering Mobile Engineering UX Design UI

    Design Animation Product Management Community Management Customer Success Customer Support

11. Server-side Engineering 開発領域内での越境 Front-end Engineering Mobile Engineering UX Design UI

    Design Animation Product Management Community Management Customer Success Customer Support

12. Server-side Engineering ⾮開発領域への越境 Front-end Engineering Mobile Engineering UX Design UI

    Design Animation Product Management Community Management Customer Success Customer Support

13. Server-side Engineering ⾮開発領域内での越境 Front-end Engineering Mobile Engineering UX Design UI

    Design Animation Product Management Community Management Customer Success Customer Support

14. Server-side Engineering デザイン領域への越境 ここで肩書をUXエンジニアへ Front-end Engineering Mobile Engineering UX Design

    UI Design Animation Product Management Community Management Customer Success Customer Support

15. Server-side Engineering 最近はデザイン領域内での越境 Front-end Engineering Mobile Engineering UX Design UI

    Design Animation Product Management Community Management Customer Success Customer Support

16. 器⽤貧乏マン どの領域でも専⾨家には勝てない

17. https://www.amazon.co.jp/dp/486480012X https://industry-co-creation.com/icc-salon/74

18. プロダクトの成功確度を上げるために 必要なことをなんでもやる スタンス

19. やりたい 得意 やるべき 3つの輪

20. カオスであればあるほど 器⽤貧乏は⽣きる 最近気づいたこと

21. 何をやったらいいか分からない状況ほど 越境が効いてくる ⾔い換えると

22. Wicked Problems: 厄介な問題 https://www.slideshare.net/atsushi/design-confidence-designship-2018-124662546 • 解き⽅が不明 • 正解は無い • 客観的な解決判定が不可能

23. “毎⽇の料理を楽しみにする” • 楽しみにする⽅法は不明 • その⽅法があるのかすら不明 • 楽しみになったのか客観的に判断できない

24. 禅問答 Wicked Problem を解く難しさは 禅問答に陥りやすいこと

25. 禅問答 禅問答化したサービス開発 • 同じことをぐるぐる考え続ける • 具体的なアウトプットがでない • 引くに引けなくなり冷静な判断ができない

26. None

27. 「クックパッドのレシピを⾒ても料理って 上達しないよね。なんとかできない？」

28. 議論しながらロジカルにやってみたら 案の定、禅問答になってしまった…

29. 1⽇1プロトタイプ⽣活

30. 前⽇の評価 09:00 10:00 11:00 アイデアを出す とりあえずデザイン 12:00 今⽇つくるもの を決める 13:00

    14:00 17:00 18:00 雑に実装する デプロイして退社 スーパーに⾏く 19:00 家で料理しながら 使ってみる 1⽇1プロトタイプ⽣活 in UK %

31. 前⽇の評価 09:00 10:00 11:00 アイデアを出す とりあえずデザイン 12:00 今⽇つくるもの を決める 13:00

    14:00 17:00 18:00 雑に実装する デプロイして退社 スーパーに⾏く 19:00 家で料理しながら 使ってみる 1⽇1プロトタイプ⽣活 in UK %

32. 前⽇の評価 09:00 10:00 11:00 アイデアを出す とりあえずデザイン 12:00 今⽇つくるもの を決める 13:00

    14:00 17:00 18:00 雑に実装する デプロイして退社 スーパーに⾏く 19:00 家で料理しながら 使ってみる 1⽇1プロトタイプ⽣活 in UK %

33. 前⽇の評価 09:00 10:00 11:00 アイデアを出す とりあえずデザイン 12:00 今⽇つくるもの を決める 13:00

    14:00 17:00 18:00 雑に実装する デプロイして退社 スーパーに⾏く 19:00 家で料理しながら 使ってみる 1⽇1プロトタイプ⽣活 in UK %

34. 前⽇の評価 09:00 10:00 11:00 アイデアを出す とりあえずデザイン 12:00 今⽇つくるもの を決める 13:00

    14:00 17:00 18:00 雑に実装する デプロイして退社 スーパーに⾏く 19:00 家で料理しながら 使ってみる 1⽇1プロトタイプ⽣活 in UK %

35. スプレッドシート コンセプトビデオ ⼨劇 プロトタイプの形はアプリとも限らない

36. ⽬的 P テスト対象 ⾃分の得意 試作時間 プロトタイピングの⽅程式 P P コンセプト 体験

    使い勝⼿ etc ⾃分 メンバー 上司 友達 ⼀般ユーザー Web開発 モバイル開発 UIデザイン グラフィック 動画制作 etc 1⽇ 5⽇ 1ヶ⽉ etc

37. ľ Ľ 企画 製品 仮説 プロトタイプ 思考 スケッチ 議論 テキスト

    抽象 具体

38. Design Engineering P

39. https://www.ideo.com/jp/post/our-values lٞ࿦͢ΔΑΓߦಈ͠Α͏z

40. 抽象と具体を⾏き来しながら プロダクトの輪郭を描く UXエンジニアの役割

41. プロダクトチームにおける UXエンジニア

42. https://www.ideo.com/jp/post/our-values lᐆດ͞Λڐ༰͠Α͏z

43. 仕様はFixしないものと考える 曖昧なサービス開発

44. ⽔平統合的サービス開発 & ディレクター 企画 ' デザイナー デザイン ( 開発者 開発

    期限 期限 期限 1つのプロダクト開発ラインを分割する

45. 閃きが“⼿戻り”になる & ディレクター ' デザイナー ( 開発者 期限 期限 期限

    Ľ え、⼿戻り？ 企画 デザイン 開発 え、仕様変更？

46. 企画 デザイン 開発 & UXエンジニア ' ( UXエンジニア UXエンジニア 企画

    デザイン 企画 開発 開発 デザイン 企画 デザイン 企画 開発 デザイン デザイン 開発 ⽬安 垂直統合的サービス開発 プロダクト開発ラインを複数つくる

47. Cookpad Product Kitchen #1 with Takram

48. 実際にはハイブリッド型 & ディレクター 仕様策定 ' デザイナー デザイン ( 開発者 開発

    期限 期限 期限 ex. 課⾦機能は⽔平統合、未知数な機能は垂直統合 企画 デザイン 企画 開発 デザイン デザイン 開発 UXエンジニア

49. 開発とデザインを繋げる仕組みづくり Citrus - Design System Cookpad Symbols - Symbol Font

    Sara - CSS Framework

50. 新しいツールの検証やワークフロー構築 Figma Haiku

51. None

52. なぜクックパッドが UXエンジニアを求めるのか

53. UXエンジニアという肩書は今は僕だけ

54. 肩書は違えど同じ動きをする⼈はたくさんいる

55. Graphic UI UX Client Server Backend Infra Application デザイナー サービス開発エンジニア

    基盤エンジニア・SRE Product Development

56. Graphic UI UX Client Server Backend Infra Application デザイナー サービス開発エンジニア

    基盤エンジニア・SRE Product Development 重なる領域が拡⼤してきた

57. Graphic UI UX Client Server Backend Infra Application デザイナー サービス開発エンジニア

    基盤エンジニア・SRE Product Development UXエンジニア

58. https://info.cookpad.com/service_product/japan

59. https://cookpad.jobs

60. @dex1t Takaya Deguchi UX Engineer / Product Manager à