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

ゆめみのデザインエンジニア概要2022

unotovive
November 11, 2022

 ゆめみのデザインエンジニア概要2022

unotovive

November 11, 2022
Tweet

More Decks by unotovive

Other Decks in Programming

Transcript

  1. Frontend & Design
    プロジェクトに を与える
    スピード感
    ゆめみのデザインエンジニア
    どんなプロジェクトでどんな事をするのか、みなさんに知っていただく会

    View full-size slide

  2. Agenda アジェンダ
    Agenda
    1 About デザインエンジニアとは
    2 Goals デザインエンジニアが目指すゴール
    3 Skill Set デザインエンジニアが持つスキルセット
    4 Teamwork デザインエンジニアチームの動き方
    5 Suitable Projects デザインエンジニアが活躍するプロジェクトのイメージ
    6 Unsuitable Projects デザインエンジニアが活躍しづらいプロジェクトのイメージ
    7 Next 今後の展望
    Q&A 質疑応答
    1

    View full-size slide

  3. About
    デザインエンジニアとは
    2

    View full-size slide

  4. About デザインエンジニアとは
    デザインと を横断的に担当し

    デザイン理解を得意とする
    フロントエンド
    エンジニア
    3

    View full-size slide

  5. Goals
    デザインエンジニアが
    目指すゴール
    4

    View full-size slide

  6. About デザインエンジニアとは
    プロジェクトに を与える
    スピード感
    ƒ 要件定義の段階から、プロダクトの詳細なイメージを可視化し、
    ƒ 画面の情報設計時に、開発目線の観点を取り入れ、
    ƒ デザインタスクと開発タスクを並行して同じチームで
    共通認識を深めo
    開発からの手戻りを低減すo
    同じ意識・考え方をもって進める
    5

    View full-size slide

  7. Skill Set
    デザインエンジニアが持つ
    スキルセット
    6

    View full-size slide

  8. Skill Set デザインエンジニアが持つスキルセット
    Service Design
    Service Design
    課題ヒアリング
    提案
    サービス設計
    プレゼンテーション
    UI Design
    UI Design
    デザインガイドライン策定
    情報設計
    プロトタイピング
    UIデザイン
    ビジュアルデザイン
    Front-end Dev.
    Front-end Dev.
    CSSアニメーション
    React / Next.js
    大規模アプリケーションの想定
    Vue / Nuxt.js
    小〜中規模アプリケーションの想定(2.x系)
    アクセシビリティ
    サービスデザイン・企画フェーズから、UIデザインフェーズ、フロントエンド開発まで、

    UI実現に関わるスコープのスキルに幅広く興味を持ち、各人で得意領域を持ちます。
    7

    View full-size slide

  9. Teamwork
    デザインエンジニア

    チームの動き方
    8

    View full-size slide

  10. Teamwork デザインエンジニアチームの動き方
    Pattern.1
    潤滑油としてのデザインエンジニア
    Pattern.2
    なんでも屋のデザインエンジニア
    Design enginner
    要件定義
    フロントエンド

    実装
    UIデザイン
    Designer
    Design

    Engineer Engineer
    要件定義
    デザイン要件確認
    実装可否判断 フロントエンド

    実装
    インフラ
    UIデザイン
    Designer
    Design

    Engineer Engineer
    要件定義
    デザイン要件確認
    実装可否判断 フロントエンド

    実装
    インフラ
    UIデザイン
    9

    View full-size slide

  11. Teamwork デザインエンジニアチームの動き方
    プロジェクトマネージャ
    サーバ

    チーム
    デザインエンジニアチーム
    API実装 フロント実装 UI作画 要件定義
    Pattern.2
    なんでも屋のデザインエンジニア
    プロジェクトの体制
    10

    View full-size slide

  12. Teamwork デザインエンジニアチームの動き方
    Pattern.2
    なんでも屋のデザインエンジニア
    チケットベースの

    流動的な動き
    初期フェーズ
    機能Aの要件定義
    ゆめみ太郎 要件定義
    機能Aの要件定義
    ゆめみ太郎 要件定義
    機能Bの要件定義
    ゆめみ花子 要件定義
    機能Bの要件定義
    ゆめみ花子 要件定義
    デザインコンセプト決定
    夢乃華権左衛門 UI
    デザインコンセプト決定
    夢乃華権左衛門 UI
    開発環境構築
    Yu me min 開発
    開発環境構築
    Yu me min 開発
    終盤
    機能Aの機能追加
    ゆめみ太郎 UI 開発
    機能Aの機能追加
    ゆめみ太郎 UI 開発
    機能Bのデザイン修正
    ゆめみ花子 UI
    機能Bのデザイン修正
    ゆめみ花子 UI
    CORS対応
    夢乃華権左衛門 開発
    CORS対応
    夢乃華権左衛門 開発
    機能CのAPIつなぎ込み
    Yu me min 開発
    機能CのAPIつなぎ込み
    Yu me min 開発
    11

    View full-size slide

  13. Teamwork デザインエンジニアチームの動き方
    Pros / Cons
    いいこと / よくないこと
    今までのチーム
    いいこと
    x それぞれのプロフェッショナルが をできw
    x を利用できw
    x 豊富なメンバーリソースで柔軟な対応ができる
    専門性の高いアウトプット
    過去案件の知見
    よくないこと
    x 他チームの動きによって 可能性があw
    x 多職種間の がかかる
    「待ち」が発生する
    コミュニケーションコスト
    12

    View full-size slide

  14. Teamwork デザインエンジニアチームの動き方
    Pros / Cons
    いいこと / よくないこと
    デザインエンジニア

    チーム
    いいこと
    r 流動的に動くことで
    r スピード感が出˜
    r 同一の視点をもつチームで
    (開発時にデザインの意図をスムーズに反映できる)

    (開発のことを意識したデザインをすることができる)
    待ちの時間を無くせd
    コミュニケーションコストが低い

    よくないこと
    r その道一本の人材と比べると
    r 人材がいなƒ
    r 既存の
    専門性の幅が狭まd
    ノウハウを活用しづらい
    13

    View full-size slide

  15. Teamwork デザインエンジニアチームの動き方
    Pros / Cons
    いいこと / よくないこと
    デザインエンジニア

    チーム
    よくないこと
    T その道一本の人材と比べると
    T 人材がいなX
    T 既存の
    アウトプットの質が下がv
    ノウハウを活用しづらい
    T 勉強会でのスキル補完 / 各ギルドテックリードと連h
    T 求人オープン / 社内リクルーz
    T プロジェクトを経験し改善サイクルを行う
    14

    View full-size slide

  16. Suitable

    Projects
    デザインエンジニアが活躍する
    プロジェクトイメージ
    15

    View full-size slide

  17. Suitable Projects デザインエンジニアが活躍するプロジェクトイメージ
    Case Image
    デザインエンジニアが活躍する
    プロジェクト

    イメージ
    toB向け管理画面
    toB向け管理画面
    プロトタイプ

    開発
    プロトタイプ

    開発
    ダッシュボード
    開発
    ダッシュボード
    開発
    16

    View full-size slide

  18. Suitable Projects デザインエンジニアが活躍するプロジェクトイメージ
    Persona
    デザインエンジニアが
    どのような

    お客様を対象に
    デザインを重視はしてはいないが、

    必要最低限の使いやすさや見た目は担保したい
    デザインを重視はしてはいないが、

    必要最低限の使いやすさや見た目は担保したい
    デザインと開発のコラボレーションに課題を感じている
    デザインと開発のコラボレーションに課題を感じている
    作業担当者(デザイナー・エンジニア)と直接会話しながら

    作り上げていきたい
    作業担当者(デザイナー・エンジニア)と直接会話しながら

    作り上げていきたい
    17

    View full-size slide

  19. Suitable Projects デザインエンジニアが活躍するプロジェクトイメージ
    プロジェクトのフェーズを要件定義から開発まで一気通貫で担当できるので
    スピード感をもってプロジェクトを推進できる
    要件定義 UIデザイン 設計/開発
    18

    View full-size slide

  20. Unsuitable

    Projects
    デザインエンジニアが活躍しづらい
    プロジェクトイメージ
    19

    View full-size slide

  21. Unsuitable Projects デザインエンジニアが活躍しづらいプロジェクトイメージ
    Case Image
    デザインエンジニアが活躍しない
    プロジェクト

    イメージ
    デザイン面を

    重視した

    プロジェクト
    過去案件例
    四季デザイン案件

    ※特にグラフィック要素が必要なモノ
    デザイン面を

    重視した

    プロジェクト
    過去案件例
    四季デザイン案件

    ※特にグラフィック要素が必要なモノ
    大規模な

    開発
    ※1チームで受けきれない規模だと

    デザインエンジニアチームの

    強みが活かせない
    大規模な

    開発
    ※1チームで受けきれない規模だと

    デザインエンジニアチームの

    強みが活かせない
    20

    View full-size slide

  22. Unsuitable Projects デザインエンジニアが活躍しづらいプロジェクトイメージ
    Case Image
    活躍しづらいプロジェクト
    Example
    使いやすさ・UIも大事だが、

    見たときの印象(visualize)が重要で

    グラフィックデザインの要素が強いもの
    https://www.town.shimane-misato.lg.jp/misatoto/
    21

    View full-size slide

  23. Next
    今後の展望
    22

    View full-size slide

  24. Next 今後の展望
    Milestone
    組織確立フェーズ(2022 3,4Q ~)
    今後の想定
    2022年9月
    PMさん / 営業さん向け勉強会
    2022年10月
    チーム設立・チーム異動
    2022年11月
    プリセールス・移行期間
    2023年1月
    プロジェクト開始
    近い将来
    すごくなる
    23

    View full-size slide

  25. Next 今後の展望
    Milestone
    組織運用フェーズ(2023〜)
    今後の想定
    プロジェクト活動
    プロジェクトを通して得た知見を、チーム内で共有
    会・報告会を都度行い、バリューを高める。
    プロジェクト活動
    プロジェクトを通して得た知見を、チーム内で共有
    会・報告会を都度行い、バリューを高める。
    外部発信活動
    受託会社でデザインエンジニアを組織化している例
    はほぼないため、外部発信活動を行う。
    外部発信活動
    受託会社でデザインエンジニアを組織化している例
    はほぼないため、外部発信活動を行う。
    育成活動
    自分たちをJIKKEN対象としつつ、デザインエンジ
    ニアの組織拡大のために、育成方法を確立する。
    育成活動
    自分たちをJIKKEN対象としつつ、デザインエンジ
    ニアの組織拡大のために、育成方法を確立する。
    採用活動
    プロジェクト・外部発信・育成の軸が見えたら、採
    用をオープンする。それまでは個別対応する。
    採用活動
    プロジェクト・外部発信・育成の軸が見えたら、採
    用をオープンする。それまでは個別対応する。
    24

    View full-size slide

  26. Frontend & Design
    Thank you!

    Please give us Feedbacks!
    ご覧くださりありがとうございました!フィードバックをお待ちしております!

    View full-size slide

  27. Q&A 質問たーいむ!
    Q&A
    Q.具体的にいつからどのくらい稼働できる?
    A. 11月から約1.5人月程度, 23年以降は増えるかも
    Q. 初期フェーズで全員アサインするとお金ヤバくないですか?
    A. ケースバイケースだと思うので、相談させてください
    Q. ギルド、どうするん?
    A. どちらへ参加するかは任意で、

      互いのギルドの知見を共有するハブにもなりえる
    Q. 具体的な営業~プリセ~案件開始までの流れ?
    A. ハマりそうな案件が合った際にプリセに同行します!

    View full-size slide