導入：デザインシステムが崩壊していませんか？AI時代に求められる開発の新しい形

Webアプリケーションの開発現場で、このような悩みを抱えたことはないでしょうか。

「開発スピードを上げるためにAIを活用してコードを生成してみたけれど、生成されたボタンの色や余白（要素間のすき間）が既存の画面と微妙にずれてしまう」 「複数の開発者やAIツールが同時にコードを書くことで、デザインの一貫性が失われ、気づけばCSS（画面の見た目を整える装飾ファイル）が複雑になりすぎて修正不能になっている」

近年、ChatGPTやGitHub Copilotをはじめとする「AIエージェント」（人間に代わって文脈を理解し、目的を達成するために自動でタスクを実行・プログラミングしてくれるAIシステム）の進化は目覚ましいものがあります。指示を入力するだけで、瞬時に画面のコードを組み立ててくれる体験は非常に強力です。

しかし、その一方で大きな課題も浮かび上がっています。それは、AIエージェントが生成する画面パーツ（コンポーネント）が、私たちが作ろうとしているプロダクト全体のデザインルールを理解していない場合、作れば作るほどアプリ全体のデザインや構造がバラバラに破綻してしまうという点です。

どれほどAIが高速にコードを生成できたとしても、出来上がった画面のデザインが不揃いであれば、利用するユーザーは使いにくさを感じてしまいます。また、その崩れたデザインを人間が手作業で直すハメになり、結果として開発コストがかえって増えてしまうという本末転倒な事態も発生しています。

この「人間とAIエージェントが協力してコードを書く時代」特有の課題を解決するアプローチとして注目を集めているのが、「Once UI 2.0」です。

Once UI 2.0は、人間のエンジニアやデザイナーだけでなく、AIエージェントにとっても理解しやすく、一貫性を保ちやすいReact（Web画面を作るための人気のある JavaScript ライブラリ）アプリケーション構築用のデザインフレームワークです。

この記事では、AIエージェント時代の新しい開発基盤である「Once UI 2.0」の概念から、実務に導入・設計・運用するための考え方をわかりやすく解説していきます。専門知識がない方や、これからAIを使った開発プロセスを整えたいと考えているプロダクトマネージャーやエンジニアの方も、ぜひ「自分たちのチームの課題」として最後までお読みください。

Once UI 2.0とは？AIエージェントと人間をつなぐ新しいフレームワーク

一貫性のあるReactアプリを構築する設計思想

Once UI（ワンス ユーアイ）は、人間である開発者（デベロッパー）と、AIエージェントの両方が、一貫したデザインと構造を持つReactアプリケーションを効率よく構築できるように設計されたUIツールキット（画面パーツの詰め合わせ）です。

従来の一般的なUIライブラリ（画面パーツを集めた集積体）は、人間が手作業でコードを書き、スタイル（見た目の調整）を指定することを前提に作られていました。そのため、人間のエンジニアが「どのコンポーネントを使ってどう配置するか」というデザインルールを頭に入れておく必要がありました。

しかし、AIエージェントにコードを生成させる場合、AIは膨大な組み合わせの中からランダム、あるいは過去の一般的な学習データに基づいてコードを出力します。その結果、チームの独自ルールを無視したコードが生成されやすくなります。

Once UIは、こうした課題に対して「最初から人間とAIエージェントの双方が共通のルールに基づいてコードを読み書きできるようにする」というアプローチを取っています。Figma（Web上で画面デザインを作成する定番デザインツール）でのデザイン作成段階から、実際のReactコードへの変換、そしてAIによるコード自動生成に至るまで、ブレのない一貫した標準（ガイドライン）を提供します。

AIエージェントにとってなぜUIフレームワークの標準化が必要なのか？

AIエージェントは非常に賢い存在ですが、「暗黙の了解」を読み取ることは苦手です。「なんとなくいい感じの余白にしておいて」「他の画面と似たような雰囲気のボタンを作って」といった抽象的な指示を出すと、AIごとに異なる解釈をしてしまい、バラバラな見た目のコンポーネントが生成されます。

AIエージェントに期待どおりの完璧なコードを書かせるためには、以下の3要素が厳密に定義されている必要があります。

  1. デザイン・トークン（最小単位のルール）：色、文字の大きさ、余白、影などの指定値が標準化されていること。
  2. 構造化されたコンポーネント（画面の部品）：ボタン、入力フォーム、カードなどのパーツが、決まった命名規則と決まった組み合わせ方（プロパティ）で用意されていること。
  3. 予測可能性（ブレのなさ）：特定のコンポーネントを組み合わせたときに、どのような見た目と動作になるかが一義的に決まること。

Once UI 2.0を導入することで、AIエージェントに対して「このデザインルールとパーツ群（コンポーネント）だけを使って画面を構成しなさい」という強固な制約を与えることができます。制約があるからこそ、AIエージェントは迷うことなく、チームのルールに100%適合した質の高いReactコードを生成できるようになります。

なお、Once UI 2.0の具体的な内部コード構成や、旧バージョンからの全変更点（詳細スペック）については、外部公開されている主要な資料において全てが明記されているわけではありません（一部の拡張機能や内部実装の詳細などは未確認となります）。本記事では公表されているコンセプトや全体像に基づき解説を進めます。

AIエージェントを組み込んだアプリ開発の設計・導入手順

それでは、実際にOnce UI 2.0の考え方を取り入れ、AIエージェントと共にReactアプリケーションを構築・運用していくための具体的なステップを解説します。

ステップ1：Figmaとコードの一体化（デザインシステムの構築）

最初に行うべきは、デザイナーが作成する画面設計図（Figma）と、エンジニアが使用するコード（React / Once UI）の標準化です。

  • Figma側の準備：デザインツール「Figma」上で、Once UIが提供するスタイル定義（色、フォント、余白などの基本設定）を採用します。デザイナーはこの基本パーツを組み合わせて画面を作成します。
  • コード側の準備：ReactプロジェクトにOnce UIのパッケージを導入し、デザイン側と同じスタイル設定（デザイン・トークン）を読み込ませます。

このように「画面上のデザインパーツ」と「コード上のプログラム部品」が1対1で対応する状態を作ることで、AIエージェントがFigmaの設計データやプロンプト（AIへの指示文）を読み取った際に、どのReactコンポーネントを呼び出すべきかを正確に判断できるようになります。

ステップ2：AIエージェントへの指示（プロンプト）と利用ルールの最適化

次に、AIエージェントがコードを生成する際の「ルールブック」を作成します。

AIエージェント（例えば Cursor や GitHub Copilot、独自構築したAIエージェントなど）に対して、プロジェクトのルートディレクトリに設定ファイルや指示文書（SYSTEM_PROMPT.md や .cursorrules など）を用意します。

指示文書には以下のような内容を記述します。

  • 「画面構築の際は、独自CSSを極力書かず、Once UIが提供するコンポーネント（Layout, Button, Card等）のみを使用すること」
  • 「余白や色の指定は、直接数値（16pxや#FF0000など）を書かず、Once UIが定義するデザイン・トークン（例: var(--space-m) など）を使用すること」
  • 「新規コンポーネントを作成する前に、既存のOnce UIコンポーネントで代用できないかを検討すること」

このようにAIエージェントに対して「厳格なガードレール」を設置することで、AIが独自の判断で不要なスタイルを新設したり、デザインを崩したりするリスクを大幅に減らすことができます。

ステップ3：自動生成と人間によるレビューの運用フロー確立

準備が整ったら、実際の開発運用を開始します。実務における推奨フローは以下のとおりです。

  1. 画面要求の言語化・定義：人間（プロダクトマネージャーやエンジニア）が、「どのような画面を作りたいか」をFigmaで定義するか、テキストで仕様をまとめます。
  2. AIエージェントによる一次コード生成：AIエージェントに対し、「Once UIを使って〇〇の画面を作成して」と指示を出します。AIは定義されたルールに従い、コンポーネントを組み合わせてコードを出力します。
  3. 人間によるコードレビューと調整：生成されたコードをエンジニアが確認します。見た目の崩れがないか、アクセシビリティ（障害を持つ方や多様な環境でも使いやすいか）が保たれているかをチェックします。
  4. マージ（結合）と継続的改善：問題がなければメインのプログラムに組み込みます。もしAIエージェントが間違ったコンポーネントの使い方をした場合は、指示文書（プロンプト）を更新して次回以降の精度を高めます。

Once UI 2.0を活用する際の注意点と限界

AIエージェントとOnce UI 2.0の組み合わせは、開発速度と品質を飛躍的に向上させる可能性を秘めていますが、実務に導入する際にはいくつかの注意点や制約が存在します。盲目的に導入してトラブルにならないよう、あらかじめ理解しておきましょう。

1. AIエージェントは万能ではない（完全自動化の罠）

どれほど精巧なデザインシステム（Once UI）を用意しても、AIエージェントが完璧なUIを100%自動で作り直してくれるわけではありません。

複雑なインタラクション（アニメーションやユーザーの複雑な操作に応じた画面の変化）や、高度な状態管理（アプリ内で保持するデータの複雑なやり取り）が必要な場合、AIエージェントは不適切なコンポーネントの組み合わせを選択してしまうことがあります。

「コードの8割はAIエージェントにOnce UIを使って素早く書いてもらい、残りの2割の複雑なロジックや微調整は人間のエンジニアが責任を持って行う」というように、役割分担を明確に意識することが重要です。

2. デザインの自由度とのトレードオフ

Once UIのような一貫性を重視したフレームワークを使用すると、アプリ全体のデザインが「整った統一感のある見た目」になります。これはWebサービスや管理画面（ダッシュボード）においては非常に大きなメリットです。

しかし一方で、非常に個性的で独創的な表現、あるいは複雑なグラフィックを多様するエンタメ系サイトなどでは、フレームワークの制約が足かせになる場合があります。自分たちが作ろうとしているプロダクトが「一貫性と開発スピード」を重視するものなのか、それとも「唯一無二の尖ったデザイン」を重視するものなのかを見極める必要があります。

3. 一次情報の未確認事項と公式ドキュメントの確認

Once UI 2.0に関する機能のアップデート頻度や、特定のサードパーティ製（他社製）ツールとの互換性、詳細なパフォーマンステストの結果などについては、現時点で外部の公開サマリー情報（Product Hunt等）だけでは全容が把握できない未確認の事項が含まれます。

実際にプロジェクトへ導入する際は、必ず最新の公式ドキュメントやリポジトリ（ソースコードの保管場所）を確認し、自分たちの開発環境（ReactのバージョンやNext.js等のフレームワーク構成）で動作検証を行ってください。

まとめ：AIエージェントとの協働で加速するプロダクト開発の未来

今回は、人間とAIエージェントが共に一貫性のあるReactアプリを構築するためのデザインフレームワーク「Once UI 2.0」について、導入・設計・運用の視点から解説しました。

改めて、今回の重要ポイントを振り返りましょう。

  • 課題：AIエージェントにコードを書かせると、デザインルールが無視され、アプリのデザインやコード構造が破綻しやすい。
  • 解決策：Once UI 2.0を導入し、デザイン（Figma）とコード（React）の双方で厳格な標準（デザイン・トークンと共通コンポーネント）を定義する。
  • 運用のコツ：AIエージェントに対して「Once UIのルールに従う」という強固な指示（プロンプト）を与え、生成されたコードを人間がレビューする協働体制を作る。

これからのWeb開発において、「コードを1行ずつ手作業で書く時間」は減り、「AIエージェントに適切な指示を出し、出力された成果物が全体の方針と合致しているかを評価・設計する時間」が増えていきます。

人間とAIエージェントが同じ言語（デザインシステム）を話し、互いの得意分野を活かし合うアプローチは、今後のプロダクト開発における世界的な標準となっていくでしょう。

「開発スピードを上げたいけれど、アプリの品質やデザインの崩れが心配」とお悩みの方は、ぜひ Once UI 2.0 の設計思想を取り入れ、AIエージェントと共に歩む新しい開発スタイルへの一歩を踏み出してみてはいかがでしょうか。

参考資料