本稿は、2026/02/26に開催された「デザインエンジニアMeetup #5 開発スピードを落とさずにUI品質を守る」の講演内容をまとめたものです。
https://estie.connpass.com/event/382375/
「デザインエンジニアMeetup」は、デザインとエンジニアリングを横断して問題解決を行うデザインエンジニアが、知見を共有し交流を深める場です。今回は、株式会社estie デザインエンジニアのomote氏、株式会社マネーフォワード デザインシステム「MFUI」開発チームリーダーのとんがり氏、株式会社LayerX バクラク事業部 プロダクトデザイナーのtararira氏が登壇。AIの進化によりフロントエンド実装の高速化が進む中で、いかにUI品質を維持し、継続的なデリバリーにつなげるかについて、設計・実装・レビュー・運用といった各フェーズからの実践的なアプローチが共有されました。
AI時代のFrontend Architecture
AIが変革するデザインと開発のパラダイム
AIの進化は、デザインと開発の現場にこれまでにない変化をもたらしており、「つくるコストゼロ時代」という認識がこの変革の核心にあると指摘されています。かつては実装スピードが競争優位性の一つであったものの、AIの活用により「実装スピードの優位性」は急速に失われつつあります。AIがコード生成やUIデザインの自動化を担うことで、従来のボトルネックであった「つくる」工程は劇的に効率化され、ほぼゼロに近いコストと時間でプロダクトのプロトタイプや機能の実現が可能になります。
この変化により、新たなボトルネックが顕在化しているのは「人間」の部分です。特に「制作の前後の意思決定が遅くなっている」ことが大きな課題として挙げられます。何を、なぜ作るのか、そして作ったものをどう評価し次につなげるのかといった意思決定プロセスには人間が介在する部分が多く、AIが加速する「How」の部分と、人間が担う「Why」や「What」の部分との間に大きな速度差が生じている状況です。AIが多くの作業を自動化する時代において、デザイナーや開発者は「人が介入すべきポイントを絞る」ことが求められます。全ての工程に人が深く関与するのではなく、AIが効率的に処理できる部分は任せ、人間ならではの価値を発揮できる部分に集中するという戦略的な思考が不可欠です。
デザインの主戦場となる「体験設計」と新たなレイヤー構造
実装や自動化がAIに委ねられる中で、デザイナーの役割は大きくシフトし、その中心となるのが「体験設計」であると予測されます。AIがUIコンポーネントの生成や配置を担うようになると、個々のUI要素のデザインスキルそのものの価値は相対的に低下する可能性があります。代わりに、ユーザーがプロダクトを通じて得られる一連の感情、認知、行動といった「体験」全体をデザインする能力が、デザイナーの最も重要な武器となります。この「体験設計」こそが、AI時代におけるデザインの主戦場となると見られています。ユーザーのニーズを深く理解し、どのような価値を提供すべきか、どのような感情を喚起すべきかといった、より本質的な問いに答えを出す能力が問われる状況です。
この体験設計の文脈で、デザインは以下の3つのレイヤーで捉え直すことができます。
- 基盤: 組織全体で持つべきレイヤーであり、ブランドガイドライン、デザイン原則、技術スタックなど、プロダクトやサービス全体を支える共通の土台を指します。一貫した体験を提供するための揺るぎない基盤であり、個々のデザイナーだけでなく組織全体で共有・維持されるべきものです。
- ストーリー: 人間が介在すべき中核的なレイヤーです。ユーザーのペインポイントを解決し、価値を届けるための具体的なシナリオやユーザーフロー、感情の起伏など、プロダクトが語りかける物語そのものを設計する部分です。AIはデータに基づいてパターンを生成できますが、真に心を動かすストーリーや意図的な体験の流れは、人間の深い共感と洞察から生まれます。
- 汎用UI: ライブラリやAIによって自動化が可能なレイヤーです。ボタン、入力フォーム、ナビゲーションといった具体的なUIコンポーネントや、それらの配置ルールなど、汎用性が高くパターン化された要素を指します。AIは、デザインシステムに基づいてこれらのUIを効率的に生成し、デザイナーの負担を軽減します。
各レイヤーが独立しつつも密接に連携し、全体として一貫した体験を形成するためには、高い「凝集度」が求められます。各コンポーネントや機能が、それぞれの役割を明確に持ちながら、相互に協調して一つの体験を達成する状態です。また「自然言語CUS」という概念も提示されました。これは、自然言語処理の進化を通じて、ユーザーの意図や文脈をより深く理解し、それに基づいて最適な体験を設計・提供するシステムの重要性を示唆しています。ユーザーの言葉から直接ニーズを汲み取り、それをデザインに反映させる仕組みは、体験設計において不可欠な要素となります。
マルチプロダクト企業でのデザインシステム立ち上げとAIとの未来
AI時代の基盤となるデザインシステム
AIがデザインプロセスに深く関わるようになる中で、「デザインシステム」の存在はこれまで以上に重要性を増しています。それは単なる効率化のツールではなく、AIとの協調を前提とした新たな基盤としての役割を担います。デザインシステムは、AI時代において導入が急務となっています。その理由は、一貫性のあるユーザー体験の提供、開発効率の向上、そしてAIとの連携基盤としての役割にあるからです。
デザインシステムがAI時代に必須となる具体的な理由は以下の通りです。
- コンポーネントを使い回せる: デザインシステムは、再利用可能なUIコンポーネントの集合体です。これにより、一貫性のあるデザインを迅速に構築でき、手戻りを減らします。
- ルールを理解した上で実装できる: デザインシステムには、コンポーネントだけでなく、タイポグラフィ、カラーパレット、スペーシングなどのデザインルール、そしてそれらの使用ガイドラインが含まれます。これにより、エンジニアやデザイナーが共通の理解のもとで開発・実装を進めることができます。
- AIのための基盤になっていく: 最も重要な点は、デザインシステムが「AIのための基盤になっていく」という視点です。AIがデザインタスクを自動化する際、その判断基準となるのがデザインシステムに定義されたルールやアセットです。AIはシステムが提供するコンポーネントやパターン、原則に基づいて最適なUIを生成したり、既存のデザインを改善したりするようになります。
AIとデザインシステムの進化は、各職種の「成果物」にも変化をもたらします。デザイナーはUIコンポーネントを直接操作し、デザインシステムのルールに基づいて具体的なUIを構築する役割を担うようになります。一方、フロントエンドエンジニアはUIの実装そのものよりも、その裏側にあるビジネスロジック、データ構造、システムアーキテクチャといったより根幹的な部分に注力できるようになります。これにより、エンジニアはより高度な技術的課題に集中し、システムの全体的な堅牢性やスケーラビリティを高めることが可能になります。
デザインシステムを組織全体に浸透させるためには、戦略的なアプローチが必要です。普及には「草の根活動」が重要であり、成功事例を共有し、そのメリットを具体的に示すことで「認知」「信頼」「導入する理由」を獲得していく必要があります。また、既存のレガシーシステムや、多様なプロダクトを抱える大規模組織では、デザインシステムの導入が難しいケースも少なくありません。このような状況を考慮した上で、段階的な導入や、特定の領域からの適用など、柔軟な戦略が求められます。将来的には、デザインシステム自体をAIがより効果的に活用できるよう、構造やメタデータを整備していく必要があり、「AIがデザインシステムのアセットにアクセスできる」ようにすることで、AIが自律的にコンポーネントを選択・組み合わせ、デザインの初期稿を生成したり、提案したりすることが可能になります。
AI時代、デザイナーの価値はどこに？
制作プロセスの変革：「作ることで考える」アプローチ
AIの進化は、デザインの「作り方」だけでなく、「考え方」や「進め方」にも大きな変化を促します。従来のプロセスは、徹底的に計画し「考えてから作る」が主流であったものの、AIによる「how」が加速したことで、この流れは逆転する可能性があります。AIが高速でプロトタイプやUIを生成できるようになった結果、「作ることで考える」アプローチが現実的になります。これは、迅速に具体的な形に落とし込み、それを評価・検証しながら思考を深めていくプロセスを意味します。この過程で、QAやCraftsmanshipといった領域も、単なる品質チェックではなく、思考と創造のループの一部として機能するようになります。
「How」がAIによって加速される一方で、「前後の重要性」が格段に高まります。「何を作るのか？」「なぜ作るのか？」といった「Why」と「What」の問いに対する深い洞察と明確な意思決定が、AIが生成するアウトプットの質を決定づける鍵となります。目的が曖昧なままAIに「How」を任せても、望ましい結果は得られないと考えられています。
AIが生成するデザインは、論理的で効率的である一方で、人間特有の感情や感覚に訴えかける「意匠性」や、実際に触ってみて初めてわかる微細な「違和感」を見過ごす可能性があります。「人間の意匠性での仕上げが必要」であり、「本当に必要な体験を生みだすには、まだ人間が必要」な状況です。「触ってみて初めてわかる違和感」を検知し、それを補正する能力は、依然としてデザイナーに求められる重要なスキルとなります。この感性的な品質保証の役割は、AI時代においても人間のデザイナーにしか果たしえない領域です。
新しいデザイナーの役割と行動原則
AIによる自動化が進む中で、デザイナーは自身の役割を再定義し、行動する必要があります。AIが「How」を加速するからこそ、人間が関わる「前後のプロセスも加速させる必要」があります。しかし「全てを見切れない」のが現実です。そこで重要となるのが、情報の共有とチームでの協調です。「デザイナーの思考を日頃から伝える」ことが不可欠であり、「こういう理由でこうした」「こういう事を考えながらデザインしている」といった背景や意図を明確に共有することで、チーム全体の意思決定速度を向上させます。これはプロダクトの品質と一貫性を保つ上でも極めて重要です。
デザイナーの責任範囲は広がり、後続プロセスへの影響も考慮する必要があります。「あとのプロセス物量を減らす」という視点は、デザインが単なる成果物の提供で終わらず、その後の開発、運用、改善に至るまでを見据えた効率化を意味します。「デザイン体験に関するルールをAIが読める形で整備する」は、デザインシステムの一環として、AIが解釈可能な形式でデザイン原則やガイドラインを構築する具体的なアクションを示しています。これにより、AIはより正確に、より自律的にデザインタスクを実行できるようになります。
AIがデザインの多くの部分を自動化するからこそ、人間ならではの「Craft」へのこだわりが価値を持つようになります。「Craft領域にこだわる」とは、AIが生成したアウトプットに対して、人間ならではの感性で微調整を加え、より洗練されたものに昇華させることを意味します。具体的には、「触りまくる」ことで得られる感覚的なフィードバックに基づき、「AIアウトプットへの補正」を行う能力です。そして、デザイナーは単にUIを作るだけでなく、「最初から最後まで責任を持つ」ディレクション能力が求められます。これは、初期の戦略立案から最終的なユーザー体験の実現、そしてその後の改善サイクルまで、プロダクトライフサイクル全体にわたってデザインの視点からリードしていく役割を指します。
まとめ
デザインの、前後の重要性が高まっています。「何を作るのか？」「なぜ作るのか？」という問いに対する深い洞察と明確な意思決定が、AIが生成するアウトプットの質を決定づける鍵となります。