ジェネレーティブ UI ガードレール: デザイン システムを中断することなく、意図に沿ったデザインを実現

固定レイアウトから意図に沿ったデザインまで

固定レイアウトでは、デザイナーがすべての画面を事前に決定します。生成 UI では、AI モデルが特定のリクエストに対してどのインターフェイスを表示するかを決定します。 Google は、生成 UI をコンテンツだけでなくエクスペリエンス全体を生成するモデルと説明しており、現在、これに基づく実験を Gemini アプリと Google 検索の AI モードで提供しています。開発者ツールでは、Vercel AI SDK はより単純なバージョンを記述します。モデルはツールを呼び出し、そのツール呼び出しの結果は React コンポーネントとしてレンダリングされます。

UX の変化

デザイナーは、すべての画面を描画するのをやめて、どのコンポーネントが存在するか、それぞれがいつ適切であるか、そして何を変更してはいけないかなどのルールの設計を開始します。ナビゲーション、入力、元に戻す、設定など、生成されたコンテンツの周囲のフレームは、ユーザーが場所を失わないように固定されたままである必要があります。生成された領域は明確にマークされる必要があり、ユーザーは単純で予測可能なビューに切り替えることができる必要があります。

ガードレール 1: 承認されたコンポーネント カタログ

最も安全なパターンは、コンポーネントを発明するのではなく、モデルにコンポーネントを選択して入力させることです。 Google が作成したオープン プロトコルである A2UI は、次のように動作します。エージェントは宣言的なコンポーネントの説明を送信し、クライアントはエージェントから任意のコードを実行することなく、独自のネイティブ ウィジェットを使用してそれらをレンダリングします。カタログは、テーブル、カード、グラフ、フォーム、リストなど、小さくてもかまいません。それぞれがチームによって作成およびテストされます。

ガードレール 2: 生の値の代わりにトークンを使用する

color.text.primary や space.4 などのセマンティック トークンをモデルに与え、生の 16 進数値や任意のフォント サイズを使用する出力を拒否します。これにより、システム内のコントラスト、タイポグラフィー、間隔が維持され、ダーク モードやハイ コントラストなどのテーマが自動的に機能し続けます。

ガードレール 3: レンダリングする前に検証する

生成された出力を表示する前に、必須フィールドの存在、色のコントラスト、見出しの順序、入力のラベル、フォーカスの順序、タッチ ターゲットのサイズ、モーション軽減のサポートなどの自動チェックを実行します。チェックが失敗した場合は、壊れた UI を表示するのではなく、シンプルで正常であることがわかっているレイアウトに戻ります。

• スキーマ検証: 既知のコンポーネントとプロパティのみ
• アクセシビリティ: コントラスト、ラベル、役割、フォーカス順序
• コンテンツ制限: 最大項目数、テキスト長、画像サイズ
• フォールバック: 検証が失敗した場合の単純なリストまたはテキストの回答