トップ ＞ 社会

デザインシステム導入で見えた「意思決定」の壁、エンジニアが学び直したこと

内容

何が起きたのか

モノレポの再設計やCIの高速化などに取り組んできたリードエンジニアが、2026年夏、技術の幅を広げるためにデザイン領域へ挑戦し、その体験を記事として公開しました。担当したのは、規模が大きすぎず、今後の機能追加が見込まれる企業向けプロダクトです。成熟した開発チームに別プロダクトから一人で加わり、既存画面をshadcn/uiベースのデザインシステムへ段階的に移行する役割を担いました。

デザインシステムとは何で、なぜ導入したのか

社内の別チームでは、人とAIが共通の判断基準を参照する仕組みとしてデザインシステムがすでに運用されていました。ただ、UIの考え方や業務特有の表現はプロダクトごとに異なるため、既存の仕組みを流用せず、このプロダクト専用のものを新たに作ることになりました。

筆者は当初、デザインシステムを「トークンに基づいて作られた部品の一覧と、それによって見た目がそろったUI」と捉えていました。そのため、導入はshadcn/uiの部品で画面を順に差し替える作業で、成果物はStorybookに並ぶコンポーネントだと考え、画面ごとの移行計画を立てていました。

学び直した「意思決定」とは

デザイナーと話すうちに、計画から置き換え以前の工程が丸ごと抜けていたことが分かりました。shadcn/uiをこのプロダクトに合わせる設計、トークンの定義、画面パターンごとに適用するルールなどです。デザイナーにとっての成果物は部品ではなく、なぜそうするのかという判断と、その裏付けとなるドメインやユーザーへの理解でした。デザインの進め方や役割分担、判断基準、品質の評価方法も計画には含まれていませんでした。

例として挙げられているのが設定画面のフォームです。元の画面でラベルと入力欄が横に並んでいたレイアウトを、筆者は疑わずにそのまま踏襲しようとしていました。検討事項の具体的な一覧は、現時点で明らかになっていません。

進め方と成果はどう変わったのか

認識の違いによって作業量の見積もりが大きく外れ、開発スケジュールを組めない状態に陥りました。そこで筆者は、実際のフォーム画面を題材に、デザイナーが考えを口に出しながら作業する「モブデザイン」を依頼しました。デザイナーがどの順で考え、どこで判断しているのかを間近で見たことで、計画に欠けていたものが見えたといいます。参考書としてフォーム設計の書籍や、公開されているデザインシステムのドキュメントも紹介されました。

最終的には、筆者がデザインを作成し、デザイナーがその意図と判断をレビューで磨く分担に落ち着きました。デザイナー同士のレビューの流れを引き継ぎ、実装とは切り離してデザインを検討する場になっています。筆者は、UIの仕組みや実装の難易度、妥協できる範囲の判断は経験で補えるため、デザインの思想と理論を理解すれば形にする工程に大きな壁はなかったと振り返っています。成果を示す具体的な数値は示されていません。

小規模チームや個人開発でも取り入れられるか

小規模なチームや個人開発への応用については、現時点で明らかになっていません。

注目ポイント

同じ「デザインシステム」という言葉を使いながら、エンジニアとデザイナーが別のものを思い浮かべていたという点に、多くの人が関心を寄せています。フロントエンドに関わりながらデザインを感覚的な理解で済ませている人は少なくないとみられ、身近な問題として受け止められています。AIと人が同じ判断基準を参照するという観点も、今後の開発のあり方を考えるうえでの焦点の一つです。

ネットでの反応

ネット上では、部品の置き換えではなく判断を言葉にするという視点に納得し、エンジニアとデザイナーの認識のずれは「よくあること」だと共感する声が見られます。一方で、成果物と意思決定の違いはそもそも理解しておくべきだとする厳しい意見や、意思決定は組織として共有されなければ個人の基準にとどまるのではないかという指摘もあります。また、「デザインとは見た目ではなく、どう機能するかだ」という趣旨の有名な言葉を引き合いに出す投稿も広がっています。

参考記事

• デザインは見た目ではなく意思決定だった ─ フロントエンドエンジニアがデザインシステム導入で学び直したこと　2026年10月30日 07:25

ランキング登場履歴

この記事の内容に誤りを見つけた方は 情報の誤りを報告 からお知らせください。