Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Takaya Deguchi
December 06, 2018

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

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

Takaya Deguchi

December 06, 2018
Tweet

More Decks by Takaya Deguchi

Other Decks in Design

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