デザインエンジニアの話
前提として、UIとUXは異なるということ
━━━━━━━━━━━━━━━━━━━━━━━━
UIはユーザーインターフェース
UXはユーザーエクスペリエンス
フロントエンド開発でユーザーの使いやすさを考慮しながら、デザインデータをもとに実装していることは「UIを開発している」ということ
フロントエンドエンジニアの成長の方向として
━━━━━━━━━━━━━━━━━━━━━━━━
以下のような状況の時に、業務できるのもデザイン*エンジニアリングができるメリットだと考える
フロントエンドエンジニアが要件定義フェーズでワイヤーを作成してもよさそうと感じた
デザイナーがアサインされていない段階で誰がワイヤーを作るか
ディレクターが要件定義と画面設計を同時に行うのは大変かも
フロントエンドは後で話すことが多くなってくる要件定義フェーズで手を動かす作業が空きがちかも
裏側の話と連携してワイヤーを作る必要がある
UIスタックやデザインリソースについて把握できる
技術選定に関わる場合、スムーズな検討ができる
ゆめみのデザインエンジニア
━━━━━━━━━━━━━━━━━━━━━━━━
デザインエンジニアの定義 | ゆめみオープン・ハンドブック
概要
フロントエンド/iOS/Android/Flutterエンジニアといった「UIを開発する職種の能力」を持った人が、UIデザイナーといった「UIをデザインする職種の能力」を併せ持ち、双方の能力を発揮して活動するマルチスタックエンジニアの事を「デザインエンジニア」と呼ぶ
Flutterを取り扱うデザインエンジニア「Flutterデザインエンジニア」 すごい、特化してる！beeeyan.icon
UXエンジニアという言葉は、「UX」という言葉が人によって認識が異なるため、肩書の印象としてぼやけやすい
役割
UIを開発する
主体は「UIを開発する事」
デザインから開発を全て行うというわけではない
スケジュールや体制によってはデザインから開発まで全部やっても良い
UI（ユーザーインタフェース）とは
UIはあくまでユーザとデバイスの接点に限定される
UIを開発するためには、デザイナーとスムーズに連携や意思疎通ができる事が求められる
テクニカルプロトタイピングの開発
デザインツールからエクスポートしたものではなく、デザインデータからUI部分に関する開発を行う
全てのプロジェクトに対してではなく、プロトタイピングを必要とするプロジェクト
フェーズ別の活躍イメージ
プリセールスフェーズ（リードエンジニア以上）
デザインやUIに関連する要件や制約事項についてデザイナーと協力しながら検討し、関係者と合意形成ができる
デザインを考慮したUI開発の工数見積もりを行う事ができる
企画・要件定義フェーズ
デザインデータに対してシステム要求を鑑みたUI開発目線でレビューを行うことができる
異常系、正常系の別パターン、非同期表示のタイムラグ、状態変化のパターン、ホバー時・・・
デザインデータを元に画面仕様書を作成することができる
デザインデータを基にテクニカルプロトタイピングを開発する事ができる
デザインシステムとしてUIコンポーネントライブラリを開発する事ができる（例：BBCのStorybook）
開発フェーズ
各職種の開発責務
ビジネスロジックによってUIに変化がある場合の実装では品質や開発速度を高められる
検収フェーズ
表示に関する不具合の対応可否判断・実際の対応
ゆめみのデザインエンジニアが定義されるまで
━━━━━━━━━━━━━━━━━━━━━━━━
ゆめみのデザインエンジニアを定義した話｜ほっぺ
大学の先輩だった😳
ええええbeeeyan.icon
Wantedly見たら同じところ卒業してました😌
著書もある
「デザインに理解があるエンジニア」というバックグラウンドの話にとても共感を感じる
就職しようと思った時に、エンジニアなのかデザイナなのか企画なのか、どの職種で応募するか悩みました。何かに特化しているわけでもなかったですが、これまで学んだことから「わかりよいものを作れる人」になりたいと思い、エンジニアとデザインどちらも伸ばしていける環境を探しました。しかし、どちらも業務範囲としてできるような募集は見つけられず、結局、エンジニア職で探しつつ、「デザイン理解のあるエンジニア」を自身のアピールポイントとして、就活を行いました。
「デザイナとのコミュニケーションできる・いざとなればデザイン作業の補助ができる」という強み分析とてもわかる
キャリアを重ねる中で、「デザイナとのコミュニケーションできる・いざとなればデザイン作業の補助ができる」という部分が、自分にとって一番バリューが出せそうかなと考え始めました。
UI/UXの影響範囲が広いことにもやっとしていて、問題がうまく言語化されている
「みんなが考えているUXエンジニアってなんだろう？」と思うようになりました。理由は「UX」の冠がついている事から、役割の名前から想像できる人物像は、想起する人によって微妙に異なりそう
情報収集を行い検討会を開いた
https://scrapbox.io/files/65669c9ecde4190024ba2861.webp
UXエンジニアの事例情報を海外含め集める
事例情報から役割を細分化する
https://gyazo.com/64cd809a846983e44c5097207d0bf448
ゆめみのUXエンジニアは何をするのかを検討する
https://scrapbox.io/files/65669ca2ed9ff50022f1c8f4.webp
関連する他職種との役割の棲み分けについて検討する
他職種の人からレビューを受ける
Youtube Live（URL限定公開）で社内向けに配信したりして、コアメンバー以外もラジオ的に聴けるように
「こんな事考えている人たちがいるんだ」という社内認知を獲得
「デザインエンジニア」の定義が誕生
そこで、検討メンバーに相談し、これまで検討した材料を元に、「UIデザイン＋エンジニア」のマルチスタックの人材の事を「デザインエンジニア」として定義する形を取り、UXエンジニア検討会のアウトプットとする事になりました。
seyaさんの記事
━━━━━━━━━━━━━━━━━━━━━━━━
「エンジニアが仕事でデザインし始めて思ったこと｜seya」を参考
「エンジニアがデザイナーといい仕事ができるために頑張ったこと | seya」を参考
カミナシにおける「デザインエンジニア」
━━━━━━━━━━━━━━━━━━━━━━━━
「カミナシで活躍する『デザインエンジニア』の3つの重要な役割とは？」を参考
双方を理解している人が共通言語を作る
①デザイナーとエンジニアのコミュニケーションの架け橋
デザインエンジニアは「デザイン」と「エンジニア」のバイリンガルであるため、高度に専門化されたデザイナーとエンジニアの間のコラボレーションの質を劇的に高めることができます。
デザインシステムの一貫性を担保するためには、双方をよく知っている必要がある
②さまざまな観点を取り入れたデザインシステムの構築
（プロダクト、デザイン、エンジニアリング）三者それぞれの考え方や定義をデザインシステム内に落とし込んでつなぎ合わせてデザインし、さらにコーディングと運用までの一貫性を担保するには、デザインとエンジニアリング両方のことをよく知っている人が必要なのです。
高度なプロトタイピングが合意形成をスムーズに行い、成功角度を一気にあげる
③スピーディーで高精度なプロトタイピング
デザインとエンジニアリングの専門性をまたいだり、つなぎ合わせたりして問題の本質を見極めることで、ピントのあった精度の高い議論をした上にスピーディーにプロトタイプに落とせる
さらに、プロトタイプのフィードバックをユーザーや各ステークホルダーからもらったうえで、仮説検証を繰り返していくのがデザインエンジニアの大事な役割
デザインエンジニアが複雑な課題の解決に取り組むとき、スピーディーで高精度なプロトタイプを連続的に検証をすることによって、プロダクトの成功確度を一気にあげることができます。