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

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

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

About デザインエンジニアとは デザインと を横断的に担当し デザイン理解を得意とする フロントエンド エンジニア 3

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

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

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

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

Teamwork デザインエンジニア チームの動き方 8

Teamwork デザインエンジニアチームの動き方 Pattern.1 潤滑油としてのデザインエンジニア Pattern.2 なんでも屋のデザインエンジニア Design enginner 要件定義 フロントエンド 実装 UIデザイン Designer Design Engineer Engineer 要件定義 デザイン要件確認 実装可否判断 フロントエンド 実装 インフラ UIデザイン Designer Design Engineer Engineer 要件定義 デザイン要件確認 実装可否判断 フロントエンド 実装 インフラ UIデザイン 9

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

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

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

Teamwork デザインエンジニアチームの動き方 Pros / Cons いいこと / よくないこと デザインエンジニア チーム いいこと r 流動的に動くことで r スピード感が出˜ r 同一の視点をもつチームで (開発時にデザインの意図をスムーズに反映できる) (開発のことを意識したデザインをすることができる) 待ちの時間を無くせd コミュニケーションコストが低い よくないこと r その道一本の人材と比べると r 人材がいなƒ r 既存の 専門性の幅が狭まd ノウハウを活用しづらい 13

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

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

Suitable Projects デザインエンジニアが活躍するプロジェクトイメージ Case Image デザインエンジニアが活躍する プロジェクト イメージ toB向け管理画面 toB向け管理画面 プロトタイプ 開発 プロトタイプ 開発 ダッシュボード 開発 ダッシュボード 開発 16

Suitable Projects デザインエンジニアが活躍するプロジェクトイメージ Persona デザインエンジニアが どのような お客様を対象に デザインを重視はしてはいないが、 必要最低限の使いやすさや見た目は担保したい デザインを重視はしてはいないが、 必要最低限の使いやすさや見た目は担保したい デザインと開発のコラボレーションに課題を感じている デザインと開発のコラボレーションに課題を感じている 作業担当者（デザイナー・エンジニア）と直接会話しながら 作り上げていきたい 作業担当者（デザイナー・エンジニア）と直接会話しながら 作り上げていきたい 17

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

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

Unsuitable Projects デザインエンジニアが活躍しづらいプロジェクトイメージ Case Image デザインエンジニアが活躍しない プロジェクト イメージ デザイン面を 重視した プロジェクト 過去案件例 四季デザイン案件 ※特にグラフィック要素が必要なモノ デザイン面を 重視した プロジェクト 過去案件例 四季デザイン案件 ※特にグラフィック要素が必要なモノ 大規模な 開発 ※1チームで受けきれない規模だと デザインエンジニアチームの 強みが活かせない 大規模な 開発 ※1チームで受けきれない規模だと デザインエンジニアチームの 強みが活かせない 20

Unsuitable Projects デザインエンジニアが活躍しづらいプロジェクトイメージ Case Image 活躍しづらいプロジェクト Example 使いやすさ・UIも大事だが、 見たときの印象（visualize）が重要で グラフィックデザインの要素が強いもの https://www.town.shimane-misato.lg.jp/misatoto/ 21

Next 今後の展望 22

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

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

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

No content

Q&A 質問たーいむ！ Q&A Q.具体的にいつからどのくらい稼働できる？ A. 11月から約1.5人月程度, 23年以降は増えるかも Q. 初期フェーズで全員アサインするとお金ヤバくないですか？ A. ケースバイケースだと思うので、相談させてください Q. ギルド、どうするん？ A. どちらへ参加するかは任意で、 　 互いのギルドの知見を共有するハブにもなりえる Q. 具体的な営業～プリセ～案件開始までの流れ？ A. ハマりそうな案件が合った際にプリセに同行します！