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

Cookpad Product Kitchen #1 with Takram
https://cookpad.connpass.com/event/107374/

Transcript

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

   View Slide

2. Design
   Engineering
   P
   

   View Slide

3. UX Engineer
   Design Engineer
   

   View Slide

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

   View Slide

5. @dex1t
   Takaya Deguchi
   UX Engineer / Product Manager
   à
   Cookpad Inc. (2013.04-)
   

   View Slide

6. 料理コミュニティ
   情報共有SaaS
   料理学習アプリ
   Cookpad
   Cookpad Global
   2013
   2015
   2018
   社内外で新規サービスの
   ⽴ち上げを中⼼に5年半
   やってきました
   

   View Slide

7. Cookpad Product Kitchen #1 with Takram
   料理コミュニティ (2013 - 2014)
   新規サービスのグロース, オーナー
   RailsやiOSアプリを書きつつ、コミュニティ運営や
   CS対応、SEOなど集客施策ふくめ必要なこと全部。
   

   View Slide

8. Cookpad Product Kitchen #1 with Takram
   情報共有系SaaS (2015 - 2018)
   社外で事業⽴ち上げ, オーナー
   スタートアップに出向して、初期はインフラから
   デザインまで、⽴ち上げに必要なこと全部。
   後期はPMやカスタマーサクセス中⼼に担当。
   

   View Slide

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

   View Slide

10. Server-side
    Engineering
    これまでやってきたこと
    Front-end
    Engineering
    Mobile
    Engineering
    UX Design
    UI Design
    Animation
    Product
    Management
    Community
    Management
    Customer Success
    Customer Support
    

    View Slide

11. Server-side
    Engineering
    開発領域内での越境
    Front-end
    Engineering
    Mobile
    Engineering
    UX Design
    UI Design
    Animation
    Product
    Management
    Community
    Management
    Customer Success
    Customer Support
    

    View Slide

12. Server-side
    Engineering
    ⾮開発領域への越境
    Front-end
    Engineering
    Mobile
    Engineering
    UX Design
    UI Design
    Animation
    Product
    Management
    Community
    Management
    Customer Success
    Customer Support
    

    View Slide

13. Server-side
    Engineering
    ⾮開発領域内での越境
    Front-end
    Engineering
    Mobile
    Engineering
    UX Design
    UI Design
    Animation
    Product
    Management
    Community
    Management
    Customer Success
    Customer Support
    

    View Slide

14. Server-side
    Engineering
    デザイン領域への越境
    ここで肩書をUXエンジニアへ
    Front-end
    Engineering
    Mobile
    Engineering
    UX Design
    UI Design
    Animation
    Product
    Management
    Community
    Management
    Customer Success
    Customer Support
    

    View Slide

15. Server-side
    Engineering
    最近はデザイン領域内での越境
    Front-end
    Engineering
    Mobile
    Engineering
    UX Design
    UI Design
    Animation
    Product
    Management
    Community
    Management
    Customer Success
    Customer Support
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

26. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

30. 前⽇の評価
    09:00 10:00 11:00
    アイデアを出す とりあえずデザイン
    12:00
    今⽇つくるもの
    を決める
    13:00
    14:00 17:00 18:00
    雑に実装する デプロイして退社 スーパーに⾏く
    19:00
    家で料理しながら
    使ってみる
    1⽇1プロトタイプ⽣活 in UK %
    

    View Slide

31. 前⽇の評価
    09:00 10:00 11:00
    アイデアを出す とりあえずデザイン
    12:00
    今⽇つくるもの
    を決める
    13:00
    14:00 17:00 18:00
    雑に実装する デプロイして退社 スーパーに⾏く
    19:00
    家で料理しながら
    使ってみる
    1⽇1プロトタイプ⽣活 in UK %
    

    View Slide

32. 前⽇の評価
    09:00 10:00 11:00
    アイデアを出す とりあえずデザイン
    12:00
    今⽇つくるもの
    を決める
    13:00
    14:00 17:00 18:00
    雑に実装する デプロイして退社 スーパーに⾏く
    19:00
    家で料理しながら
    使ってみる
    1⽇1プロトタイプ⽣活 in UK %
    

    View Slide

33. 前⽇の評価
    09:00 10:00 11:00
    アイデアを出す とりあえずデザイン
    12:00
    今⽇つくるもの
    を決める
    13:00
    14:00 17:00 18:00
    雑に実装する デプロイして退社 スーパーに⾏く
    19:00
    家で料理しながら
    使ってみる
    1⽇1プロトタイプ⽣活 in UK %
    

    View Slide

34. 前⽇の評価
    09:00 10:00 11:00
    アイデアを出す とりあえずデザイン
    12:00
    今⽇つくるもの
    を決める
    13:00
    14:00 17:00 18:00
    雑に実装する デプロイして退社 スーパーに⾏く
    19:00
    家で料理しながら
    使ってみる
    1⽇1プロトタイプ⽣活 in UK %
    

    View Slide

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

    View Slide

36. ⽬的 P テスト対象 ⾃分の得意 試作時間
    プロトタイピングの⽅程式
    P P
    コンセプト
    体験
    使い勝⼿
    etc
    ⾃分
    メンバー
    上司
    友達
    ⼀般ユーザー
    Web開発
    モバイル開発
    UIデザイン
    グラフィック
    動画制作
    etc
    1⽇
    5⽇
    1ヶ⽉
    etc
    

    View Slide

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

    View Slide

38. Design
    Engineering
    P
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

44. ⽔平統合的サービス開発
    &
    ディレクター
    企画
    '
    デザイナー
    デザイン
    (
    開発者
    開発
    期限 期限 期限
    1つのプロダクト開発ラインを分割する
    

    View Slide

45. 閃きが“⼿戻り”になる
    &
    ディレクター
    '
    デザイナー
    (
    開発者
    期限 期限 期限
    Ľ
    え、⼿戻り？
    企画
    デザイン
    開発
    え、仕様変更？
    

    View Slide

46. 企画 デザイン 開発
    &
    UXエンジニア
    '
    (
    UXエンジニア
    UXエンジニア
    企画 デザイン
    企画 開発 開発
    デザイン
    企画 デザイン 企画
    開発 デザイン デザイン 開発
    ⽬安
    垂直統合的サービス開発
    プロダクト開発ラインを複数つくる
    

    View Slide

47. Cookpad Product Kitchen #1 with Takram
    

    View Slide

48. 実際にはハイブリッド型
    &
    ディレクター
    仕様策定
    '
    デザイナー
    デザイン
    (
    開発者
    開発
    期限 期限 期限
    ex. 課⾦機能は⽔平統合、未知数な機能は垂直統合
    企画 デザイン 企画
    開発 デザイン デザイン 開発
    
    UXエンジニア
    

    View Slide

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

    View Slide

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

    View Slide

51. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

56. Graphic UI UX Client Server Backend Infra
    Application
    デザイナー サービス開発エンジニア 基盤エンジニア・SRE
    Product Development
    重なる領域が拡⼤してきた
    

    View Slide

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

    View Slide

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

    View Slide

59. https://cookpad.jobs
    

    View Slide

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

    View Slide