デザインエンジニア

一言でいうと

デザインエンジニアは、画面のデザインと実装の両方を担当し、デザイナーが意図した見た目と操作を、細部まで正確にコードで実現する職種です。

この職種の出自と登場時期

ソフトウェアの分野でこの職種名を定義した文書として、Vercelが2024年3月29日に公開した「Design Engineering at Vercel」があります。Vercelはこの記事で、Design Engineerを注目を集めつつある新しい職種と紹介し、美的な感覚と技術の力を組み合わせて、課題を理解し、設計し、作り、公開するまでを自律して行う役割と説明しています。同社のデザインエンジニアは、デザイナーと密に協力し、従来の受け渡し（ハンドオフ）の工程を省いて実装を進めるとしています。

同じ2024年4月には、Progress Telerikのブログが、デザインエンジニアをデザインと開発の間の隙間を担う職種として解説しています。

なお、機械や製品の設計を担当する技術者も英語でdesign engineerと呼ばれます。求人票や候補者の経歴でこの名称を見たときは、ソフトウェアの画面を扱う職種か、機械設計の職種かを確認する必要があります。国内のソフトウェア企業では、UIエンジニアの名称で近い役割を募集する例もあります。

ミッション

デザインエンジニアは、プロダクトの画面が、デザインの意図どおりの品質で利用者に届く状態に責任を負います。見た目の一致だけでなく、動きの滑らかさ、読み込みの速さ、さまざまな端末と入力方法への対応、支援技術を使う利用者への配慮までが品質の対象です。

多くの組織では、デザイナーとエンジニアが共通して使う部品の集まりであるデザインシステムを作り、保守することも役割に含まれます。

主な業務範囲

• デザイナーと共同での画面の設計と、試作品のコードでの作成
• 画面の実装と、アニメーションや操作の反応の調整
• デザインシステムの部品の実装と、利用ルールの整備
• 画面の表示速度と、端末ごとの表示の確認
• アクセシビリティへの対応
• デザインツールとコードの間の仕様の整合の管理

求められる能力

技術面では、HTML・CSS・JavaScript（TypeScript）と、Reactなどの画面を作るライブラリでの実装力が求められます。アニメーション、表示速度の最適化、アクセシビリティの実装に関する知識も必要です。加えて、Figmaなどのデザインツールを使い、レイアウト・配色・文字組みの判断を自分で行える力が求められます。

非技術面では、デザイナーとエンジニアの両方の言葉で話し、意図の食い違いを実装の前に解消する力が問われます。細部の品質に妥協しない姿勢と、期限のなかで優先する箇所を決める判断の両立も必要です。

この職種に就く人のキャリア経路

フロントエンドエンジニアがデザインの判断に関わる範囲を広げて移る経路と、UIデザイナーがコードを書く範囲を広げて移る経路の両方があります。

その後は、デザインシステムの責任者、フロントエンドの設計責任者、デザイン組織やフロントエンド組織の責任者へ進む経路があります。

隣接職種との違い

採用担当の見極めポイント

• この職種名の担当範囲は企業ごとに異なります。デザインの成果物とコードの両方を確認し、どこまでを担ってきたかを具体的に聞いてください
• デザイナーの意図と実装の制約が食い違ったとき、どう決着させたかを聞いてください。双方の事情を説明したうえで判断した経験を話せる場合は、この職種の役割を実際に担ってきたと判断できます
• 求人票には、デザインの判断をどこまで任せるのかと、デザインシステムの担当の有無を明記してください。フロントエンドエンジニアの募集と区別がつかない求人票では、デザインの力を持つ候補者に意図が伝わりません

求人・市場の傾向

デザインエンジニアは職種名として新しく、国内で専任の募集を出している企業は限られます。デザインと実装の両方の成果物を示せる人は、どちらか一方の職種で活動している人に比べて見つけにくくなります。採用では、フロントエンドエンジニアやUIデザイナーの名称で活動している人のなかから、両方の成果物を持つ人を探す必要があります。