Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
ゆめみのデザインエンジニア概要2022
unotovive
November 11, 2022
Programming
0
320
ゆめみのデザインエンジニア概要2022
unotovive
November 11, 2022
Tweet
Share
More Decks by unotovive
See All by unotovive
Designship2022 デザインエンジニアが語る、隣接領域を学ぶということ
unotovive
2
1.5k
NIF2020 - Giral
unotovive
0
290
ふとした時に読みたくなる3冊
unotovive
0
130
【ABD】SCRUM BOOT CAMP p16-18
unotovive
0
49
ノンデザイナーズ・デザインツール
unotovive
1
270
Vueのテスト手法とVRTのススメ
unotovive
5
7.5k
Other Decks in Programming
See All in Programming
Prácticas de Seguridad en Kubernetes
pablokbs
0
120
Ruby Pattern Matching
bkuhlmann
0
610
Spring BootとKubernetesで実現する今どきのDevOps入門
xblood
0
340
Micro Frontends with Module Federation @MicroFrontend Summit 2023
manfredsteyer
PRO
0
460
新卒でサービス立ち上げから Hasuraを使って3年経った振り返り
yutorin
0
210
How to Fight Production Incidents?
asatarin
0
170
量子コンピュータ時代のプログラミングセミナー / 20221222_Amplify_seminar _route_optimization
fixstars
0
240
Hono v3 - Do Everything, Run Anywhere, But Small, And Faster
yusukebe
4
130
Refactor with using `available` and `deprecated`
417_72ki
3
380
T3 Stack and TypeScript ecosystem
quramy
3
720
10年以上続くプロダクトの フロントエンド刷新プロジェクトのふりかえり
yotahada3
2
320
ECS Service Connectでマイクロサービスを繋いでみた
xblood
0
530
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
284
18k
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
196
9.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
50k
Building a Modern Day E-commerce SEO Strategy
aleyda
6
4.5k
Optimizing for Happiness
mojombo
365
64k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
29
7.8k
What the flash - Photography Introduction
edds
64
10k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
657
120k
Designing the Hi-DPI Web
ddemaree
273
32k
Building Better People: How to give real-time feedback that sticks.
wjessup
346
17k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
13
1.1k
Designing with Data
zakiwarfel
91
4.2k
Transcript
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! ご覧くださりありがとうございました!フィードバックをお待ちしております!
None
Q&A 質問たーいむ! Q&A Q.具体的にいつからどのくらい稼働できる? A. 11月から約1.5人月程度, 23年以降は増えるかも Q. 初期フェーズで全員アサインするとお金ヤバくないですか? A.
ケースバイケースだと思うので、相談させてください Q. ギルド、どうするん? A. どちらへ参加するかは任意で、 互いのギルドの知見を共有するハブにもなりえる Q. 具体的な営業~プリセ~案件開始までの流れ? A. ハマりそうな案件が合った際にプリセに同行します!