はじめに

最近「デザインエンジニア」という役割に出会いました。デザインもできるエンジニア、デザインシステムを仕組みとして組織に残せるエンジニア。フロントエンドエンジニアとしてキャリアを積んできた自分にとって、これが次に目指したい場所かなあと思いました。

きっかけのひとつは、AIエージェントの登場でした。フロントエンドのコンポーネントを書く、APIを叩く、状態管理をする。これまで自分の仕事だった作業が、AIに任せれば一瞬で終わる。「ただコードを書く」だけでは差別化できなくなったとき、何を強みにしていくのか。その問いへの自分なりの答えが、デザインエンジニアでした。

この記事は、そこを目指す途中の記録です。

きっかけはこぎそさんの発信

その入り口になったのが、こぎそさん(@kgsi)の発信です。なかでもClaude Designに関する記事を読んで、自分の中にぼんやりあった像がはっきりしてきました。

デザインもできるエンジニアであること、デザインシステムを仕組みとして組織に残せること、そして正しいものを正しく作ること。これが自分の目指したい方向だと思いました。

最初の一歩 — Figmaを触り始めた

デザインエンジニアになりたいと思ったとき、まず自分に足りないと感じたのがUI設計の経験でした。「Figmaも触らせてほしい」と相談して、簡単なデザインなら自分で起こさせてもらえるようになりました。

正直まだ修行中の身です。要件・要望を聞き、Figmaでデザインに起こしていく。やってみて気づいたことが2つあります。

ひとつめは、Figmaだけだと動的UIの抜け漏れが出やすいということです。Figmaは静止画ベースなので、ホバーや空状態のような動的なふるまいの設計が抜けやすいです。コードで実装するときは「状態が何種類あるか」から入る癖がついているので、見抜けるのですが。

ふたつめは、「なぜこの配置なのか」「なぜこのボタンなのか」を考えるようになったということです。コードを書いていたときは、デザイナーが置いた要素を実装することが仕事でした。でもFigmaを開く側になると、自分で「なぜ」を考え、決めるようになるので、より考えるようになりました。

もともとやっていたことを棚卸ししてみた

Figmaを触り始めて、ふと「他に自分は何をやっているんだっけ」と気になり、日常の業務を棚卸ししてみました。すると、コードを書く以外にもデザインエンジニアの仕事と重なる動きがいくつかあることに気づきました。

GraphQLのAPI設計

要件定義から作られたデザインをもとに、必要になりそうなデータを整理し、GraphQLスキーマに落とし込んでいます。書いたスキーマはバックエンドエンジニアにレビューしてもらい、実現可能性や負荷の観点で問題がないかを確認します。同時にやっているのが、要件やデザインから抜け漏れているものがないかの確認です。UIから逆算すると、自然とデータの形が見えてくる。GraphQLは特にUIとデータ構造が密になっているので、UI側から設計に踏み込む必要があります。

Storybookの拡充とコンポーネント設計

新機能や機能改修でデザインが登場すると、新しいコンポーネントを設計します。propsをどう切るか、どこまで汎用化するかを考えます。Figmaは静止画なので、ホバー・ローディング・エラー・空状態など動的なふるまいは実装してみると「あれ、これどうしよう」が出てきます。実装後にデザイナーと一緒に動かしながら確認する作業は、Figmaと実装のあいだのギャップを埋める大事な過程だと思います。

AI時代に、この役割が意味を持つ理由

コードを書く速度はAIによってもはや差別化要因ではなくなりつつあります。

そうなると希少になるのは、ユーザー目線での判断、何を作るかの判断、どう統一するかの判断。とにかく判断。

AIはユーザーの業務や文脈を直接知ることはできません。まだまだ難しいと思います。「このボタンの位置で本当に押しやすいか」「この画面遷移は業務の流れに沿っているか」 は、実際のユーザーに近い人間のほうが精度高く行える場面が多いです。

これからの展望

デザインエンジニアとして、これから磨いていきたいのは「判断を仕組みにする力」だと思っています。

ユーザーにとって正しいUIを考え、チームで積み上げてきた判断を組織に残し、再利用できる形にする。一人のセンスで終わらせず、チームの資産にしていく。これがデザインエンジニアの真ん中にあると感じています。

そこに踏み込んでいけるように、デザインとエンジニアリングの両方を行き来しながら学び続けたいです。

おわりに

デザインエンジニアになりたいと思って、Figmaを触り始めた。棚卸ししてみたら、もともとやっていたこともデザインエンジニアの仕事と重なっていた。そしてこれから、デザインエンジニアとして仕組み化に踏み込んでいきたい。というお話でした。

まだまだデザインエンジニアと名乗れるものではありませんが、どこを目指せばいいのかがなんとなくわかるようになりました。