generative-ui

生成 UI

生成 UI とは、AI がプレーンテキストで応答するのではなく、フォーム、カード、グラフ、レイアウトなどのインターフェース要素をその場で作成することです。インターフェース自体がモデルの出力になります。

生成 UI による変化

従来の UI はあらかじめ設計されます。生成 UI はその場で作成されます。

• 静的 UI：デザイナーがあらゆる画面を設計します。開発者がそれらを構築します。ユーザーは画面間を移動します。
• 生成 UI：AI がユーザーのニーズに応じてインターフェース要素を作成します。事前に設計された画面はありません。 これにより、デザイナーの役割は画面を設計することから、AI が画面を生成する際に使うルール、制約、パターンを設計することへと変わります。

生成 UI の設計上の制約

AI が生成する内容にはガードレールが必要です。

• コンポーネントライブラリ：AI が組み合わせて使用できる、定義済みのコンポーネントのセット（カード、テーブル、フォーム、グラフ、ボタン）
• レイアウトルール：AI が従わなければならないグリッドシステム、間隔、階層のルール
• スタイルの境界：AI が逸脱してはならない色、タイポグラフィ、ビジュアルスタイル
• インタラクションパターン：生成された要素の動作（クリック可能、編集可能、閉じることが可能）
• アクセシビリティ要件：生成 UI はアクセシビリティ基準を自動的に満たす必要があります

生成 UI を使用する場面

生成 UI は、次のような場合に効果を発揮します。

• 出力が、視覚的に表示することで役立つ構造化データである（テーブル、グラフ、比較など）
• ユーザーのリクエストがインターフェースを必要としている（例：「…のダッシュボードを表示して」）
• インタラクティブな要素がテキストよりも役立つ（例：フォーム、セレクター、トグル）
• コンテンツの変動が大きく、すべてのケースを事前に設計できない

使用しない場面

• プレーンテキストのほうが明確でシンプルな場合
• 生成 UI が分かりにくくなったり、一貫性を欠いたりする可能性がある場合
• アクセシビリティを保証できない場合
• ユーザーが予測可能で安定したインターフェースを期待している場合

設計成果物

• 生成 UI のコンポーネントライブラリ（AI が使用できるもの）
• 生成ルールと制約の仕様
• 生成インターフェースの品質基準
• 生成に失敗した場合のフォールバックデザイン