ジェネレーティブUIデザイン：2026年のための実践ハンドブック

2026年に出荷される画面は、ユーザーが要求するまで存在しないかもしれません。これがジェネレーティブUIの根底にある考え方であり、デザインの本質そのものを変革するものです。

本稿は、ジェネレーティブUIのための実践的なハンドブックです。用語の定義、製品版で使用されている4つのアーキテクチャ、パターン語彙、障害モードの特定、そして時代に即したデザイナーのための新たな職務内容を提示します。意図的に独自の意見を述べています。

ハイプサイクルはベンダーページを十分すぎるほど生み出してきました。デザイナーが今必要としているのは、次のモデルリリースにも耐えうる原則です。

ジェネレーティブUIとは何か

ジェネレーティブUIとは、ユーザーの意図に応じて実行時に自己構築されるインターフェースです。システムは、プリミティブの語彙、それらを構成する方法を知っているモデル、そして許容される構成を規定する契約を保持しています。ユーザーが入力、音声入力、またはクリックすると、インターフェースが形成されます。

ジェネレーティブUIの対極にあるのは、私たちが20年間続けてきたデザインです。つまり、すべての画面が事前に描画された静的な成果物であり、固定されたフローとして配信されるデザインです。ジェネレーティブUIは静的な画面を置き換えるものではありません。ロングテールを吸収するのです。ほとんどの製品において、ユーザーが特定の回答と、その周辺でのわずかなインタラクティブ性だけを求めている、退屈な中間部分は、サイトマップ上のルートではなく、生成されたサーフェスになります。

有用なテストとして、2人のユーザーからの同じ質問に対して、2つの異なるレイアウトが妥当な場合、そのサーフェスはジェネレーティブUIの候補となります。回答が常に日付順に並べられた注文リストである場合は、候補ではありません。

なぜこれが2022年ではなく2026年に実現するのか

3つのことが同時に実現する必要がありました。モデルは、構造化された出力を十分に処理できるようになり、ツールを呼び出し、段落ではなく有効なコンポーネントツリーを出力できる必要がありました。フレームワークは、それらのツリーを実行中のアプリケーションにストリーミングする方法を提供する必要がありました。コンポーネントライブラリは、モデルが実際に推論できる語彙へと成熟する必要がありました。

2026年初頭までに、これら3つすべてが実用化されます。v0は、shadcnとトークンに既に適合するコンポーネントをコードベースに組み込みます。Vercel AI SDKを使用すると、モデルが生成したReactコンポーネントをサーバールートからストリーミングできます。Claude Artifactsは、チャットターン内で自己完結型のインタラクティブプログラムをレンダリングします。

ChatGPT Canvasは、ドキュメントとその周囲のUIを1つの編集可能なサーフェスとして扱います。BoltとSame.newは、プロンプトから実行可能なアプリケーションを生成します。AnthropicのツールとCursorのコンポーザーを使用すると、エージェントは構造化システムにアクセスし、それに対してインターフェースを出力できます。

これらはどれも同じ製品ではありません。これらは、基盤がついに存在し、デザインに関する議論が生成UIが機能するかどうかという段階から、それをどのようにうまく構築するかという段階へと進むことができるという証拠です。

本番環境で出荷されている4つのアーキテクチャ

本番環境で使用されている生成UIのほとんどは、以下の4つの形状のいずれかです。慎重に選択してください。選択によって、デザインシステム、評価、そしてレイテンシーの予算が制約されるからです。

1. LLMレンダリングコンポーネント モデルは、コードベース内の固定されたコンポーネント語彙から選択し、型付きツリーを出力します。Vercel AI SDKパターンです。予測可能で、ブランドに一貫性があり、評価も容易ですが、ライブラリの豊富さによって制限されます。

2. 構造化ツール呼び出し モデルは、構造化データを返すツールを呼び出し、静的なレイアウトがそれをレンダリングします。ほとんどのチャット製品の機能はこの方式で動作し、固定インターフェースと動的なコンテンツを使用します。安価で安全ですが、柔軟性に限界があります。

3. オンデマンドコード生成 モデルは、Claude Artifacts、v0、Bolt、Same.new、ChatGPT Canvasなどのパターンでインターフェースを生成するコードを生成します。最大範囲、最大リスク、ブランドイメージの維持とアクセシビリティの確保が最も難しい。

4. ハイブリッド 最も興味深いカテゴリであり、多くの本格的な製品が最終的にたどり着く場所です。静的なUIの信頼できるシェル、動的な中間部分のためのLLMレンダリングされたコンポーネントの語彙、そして稀なカスタムケースのためのコード生成による回避策。

どのアーキテクチャを使用しているか分からない場合、間違ったアーキテクチャを使用していることになります。

選択方法

3つの質問でアーキテクチャを決定します。

| 質問 | LLMレンダリング | ツール呼び出し | コード生成 | ハイブリッド |

|---|---|---|---|---|

| ブランドの一貫性は負荷を支える要素ですか？ | 強い | 最も強い | 弱い | 強い |

| サーフェスに新しいレイアウトが必要ですか？ | 時々 | ほとんどない | はい | はい |

| 数秒の生成遅延を許容できますか？ | いいえ | いいえ | 多くの場合はい | 混合 |

|問題が発生した場合、最初に何が壊れるか？ | 構成エラー | コンテンツの誤り | コードの破損 | 境界エラー |

LLMでレンダリングされたコンポーネントは、ほとんどのチームにとって適切なデフォルトです。コード生成は、カスタム分析や急ごしらえのプロトタイプなど、サーフェスが本当に一度きりのものであり、ユーザーがドラフトを見ていることを理解している場合に有効です。ツール呼び出しは、レイアウトが解決済みでデータのみが動的なケースを処理します。ハイブリッドは、12か月間の本番トラフィックを経て最終的にたどり着くものです。

パターン言語：デザイナーが実際に設計するもの

ジェネレーティブUIはデザイン作業をなくすものではありません。デザイン作業のあり方を変えるものです。出荷される成果物は画面ではなく、語彙です。

実用的な語彙は5つのレイヤーで構成されます。

1. プリミティブ モデルが使用できる最小単位のコンポーネント。カード、テーブル、チャート、フォーム、リスト、画像、コールアウト、コードブロック。それぞれに、モデルが満たすことのできる型付きプロパティが必要です。

2. インテントスロット ユーザーの意図に基づいてモデルが埋める名前付き領域。「概要」「証拠」「アクション」「フォローアップ」など。スロットは構成を固定することなく制約します。

3. フォールバック状態 すべてのプリミティブには、適切な空の状態、読み込み中の状態、部分的な状態、拒否された状態が必要です。モデルは常にこれら4つの状態を生成します。これらを第一級のアーティファクトとして設計してください。

4. リカバリ機能 編集インプレース、再生成、「別のバージョンを表示」、元に戻す機能。生成型インターフェースは会話であり、会話には戻るボタンが必要です。

5. 引用とソースUI データの出所、取得日時、システムの信頼度。これがないと、生成型UIは自信満々の嘘つきのように見えます。これがあれば、同じ出力でも正直に見えます。

デザイナーが製品における語彙の各レイヤーの内容を明確に説明できない場合、その語彙はまだ存在しておらず、モデルは公然と推測しているに過ぎません。

インテントスロットの実践

インテントスロットは、多くのチームが見落とし、後で後悔する部分です。ワイヤーフレームの新たな役割として捉えましょう。

スロットとは、そこに配置できる要素に関するルールを持つ、名前と型が指定された領域です。「主要な回答」には、コールアウト、表、グラフなどが配置できますが、フォームは配置できません。「推奨される次のステップ」には、ボタンまたはCTA（コールトゥアクション）が1つだけ含まれたカードが配置できますが、長い段落は配置できません。

モデルは、ジュニアデザイナーに説明するのと同じように、システムプロンプトでスロットについて説明を受けます。フロントエンドは、安定したレイアウトグリッドでスロットをレンダリングするため、コンテンツが毎回変更されても、インターフェースは統一された製品のように感じられます。

結果として、生成されたごちゃごちゃした画面ではなく、たまたま変化するデザインされたインターフェースとして認識されます。この違いこそが、勝敗を分ける決定的な要素です。

発生する可能性のある障害モードとその対策

ジェネレーティブUIは、特定の、再現性のある方法で失敗します。これらの障害モードを事前に把握するか、本番環境で再発見するかを検討しましょう。

• 幻覚的なUI モデルが、何も機能しないボタン、コンテンツのないタブ、あるいは架空の数値グラフなどを生成することがあります。これを防ぐには、コンポーネントの厳密な契約、生成されるすべてのツリーのサーバーサイド検証、ハンドラーが接続されていないコントロールの無効化状態の設定が必要です。

• レイテンシーへの不安 モデルが処理している間、ユーザーはスピナーをじっと見つめることになります。部分的な結果をストリーミング配信し、コンテンツの前にレイアウト領域を確保し、データが配置される前にモデルの意図（「比較表を作成中」など）を表示しましょう。

• 無限キャンバスの罠 コード生成によって生成されたサーフェスは無限に感じられ、最終的に使い物にならなくなります。キャンバスを制限しましょう。どのような出力が可能かを事前にユーザーに示しましょう。空白のテキストエリアよりも、入力プロンプトのグリッドの方がはるかに効果的です。

• 単一モデルへの依存 特定のプロバイダーの癖に合わせた語彙は、モデルを変更した途端に機能しなくなります。あらゆる妥当なモデルが満たせるコンポーネント契約を作成し、リリース前に少なくとも2つのプロバイダーで評価を実行してください。

• 会話内容の記憶喪失 インターフェースは、生成した内容を忘れてしまいます。生成された成果物は、ユーザーが名前を付けたり、保存したり、共有したり、後で参照したりできる、第一級オブジェクトとして永続化してください。ChatGPT Canvasはこの点を正しく理解しています。ほとんどのチャット専用製品は、この点で失敗しています。

持続可能な生成型UIをリリースするチームは、これらをQAで修正すべきバグではなく、初日からアーキテクチャ上の問題として捉えています。

生成型UIサーフェスの評価方法

生成型UI機能は、静的ページをレビューするのと同じようには評価できません。出力は単一の成果物ではなく、分散型です。

効果的な評価は3つのレイヤーで構成されます。第一に、生成されるすべてのツリーに対してコードとして実行される決定論的な評価基準があります。モデルが許可されたコンポーネントのみを使用しているか、インテントスロットを満たしているか、スキーマで引用が必要な場合に引用が含まれているか、ワイヤリングされたハンドラーなしでコントロールが配置されていないかなどをチェックします。

これらのチェックは合否判定です。プロンプト、コンポーネント、またはモデルへの変更があるたびに実行されます。チェックに失敗した場合、サーフェスはレンダリングを拒否し、安全な状態に戻ります。これらのチェックは、バックエンドチームが統合テストを扱うのと同様に、デプロイ時に同じように強力なブロック権限を持つものとして扱います。

第二の層は、サンプリングされた人間によるレビューです。理想的にはブランドデザイナーとドメインエキスパートを含む少人数のパネルが、生成された出力を週に10～20個、トーン、ブランド適合性、有用性に関する5段階評価基準に基づいて採点します。

スコアを時系列で追跡します。スコアが低下した場合は、リグレッションが発生したことを意味します。スコアが上昇した場合は、変更した内容がうまくいったことを意味し、その内容を把握する必要があります。

第三の層は、製品内フィードバックです。生成されたすべての画面には、いいね、よくないね、そして自由記述式のコメント欄が付属しています。これらのフィードバックは、一般的なフィードバックボックスに送られて埋もれてしまうのではなく、語彙を管理するチームに直接フィードバックされるようにしましょう。改善が進む生成型UI製品は、最初の3ヶ月間、担当者がすべてのコメントに目を通すものです。

生成型UIプロジェクトのスコープ設定方法

ほとんどの生成型UIプロジェクトは、実行段階ではなく、スコープ設定段階で失敗します。チームは重要すぎる、規制が厳しすぎる、あるいは複雑すぎる画面を選択してしまい、6週間後にはロールバックの理由が「AIはまだ準備ができていない」という話になってしまうのです。

適切な最初の画面は、次の3つの特性を備えています。ユーザーはパーソナライズされた回答から明確なメリットを得られること、生成が失敗した場合に静的なフォールバックが許容できること、そして誤った回答が致命的な結果ではなく、復旧可能であること。

社内ダッシュボードはこれら3つの特性をすべて満たしています。ヘルプセンターの回答もこれら3つの特性をすべて満たしています。パーソナライズされた分析サマリーもこれら3つの特性をすべて満たしています。アカウント作成、支払い承認、医療アドバイスは、これらの特性をどれも満たしていません。

作業範囲を機能リリースではなく、語彙リリースとして設定してください。成果物は「生成されたダッシュボードが第3四半期に出荷される」ではなく、「v1語彙、v1評価スイート、v1生成サーフェスが第3四半期にまとめて出荷され、それ以降の製品におけるv2生成サーフェスはすべて同じ語彙を使用する」というものです。語彙はプラットフォームへの投資として捉えてください。これが、この作業に実際に必要なデザインシステムへの取り組みを正当化する唯一の枠組みです。

デザイナーの新しい仕事：語彙、評価、そして意図

ジェネレーティブUIは、レスポンシブデザイン以来、デザイナーの仕事内容を最も大きく書き換えるものです。

作業単位は画面からシステムへと移行します。デザイナーはすべての状態を描くのをやめ、モデルを構成するプリミティブ、スロット、フォールバックをキュレーションするようになります。Figmaファイルは、作業の最終目的地ではなく、語彙の参照先となります。

仕様は評価へと変わります。生成型サーフェスは、単一のモックアップで受け入れテストを行うことはできません。なぜなら、同じプロンプトから多くの有効な出力が生成されるからです。

デザイナーは代わりにルーブリックを作成します。「結果には引用を含めること、ブランドチャートパレットを使用すること、フォローアップアクションを提示すること、競合他社の製品を推奨しないこと」などです。これらのルーブリックは、モデルリリースごとに自動評価として実行されます。デザインの品質が測定可能になります。

ドキュメントはプロンプトになります。モデルが語彙をどのように構成すべきかを記述するシステムプロンプトは、デザイン成果物となります。バージョン管理され、レビューされ、多くの製品において、チームが作成する最も重要な「デザインコピー」となります。

出荷製品における優れた状態とは

原則を裏付けるための例をいくつか紹介します（推奨ではありません）。

Vercel AI SDKの生成型UIプリミティブは、コンポーネントを型付き語彙として扱い、モデルがサーバーレンダリングされたルートにストリームします。その利点は、ブランドの一貫性と予測可能性です。コストは、あなたが作成したライブラリによって制限されています。

Claude Artifactsは、チャットのやり取りの中でオンデマンドでコードを生成するデモンストレーションであり、永続性とインプレース編集機能を備えています。リカバリ機能とアーティファクト・アズ・オブジェクトパターンに優れています。完成品ではなく、あくまでもドラフト段階であることを正直に示しています。

ChatGPT Canvasはハイブリッド型です。会話は意図を提供し、キャンバスは安定した編集可能なアーティファクトを提供し、モデルはそこにテキストまたはコードを生成できます。生成されたコンテンツを永続的なキャンバスに固定することで、モデル操作の認知コストを大幅に削減できるという教訓が得られます。

v0とBoltは、本番環境への引き渡しに最適化されたコード生成です。出力がレビュー可能な開発者に渡される場合、障害モードは対処可能ですが、出力がエンドユーザーに直接表示される場合は対応不可能であることを示しています。

Same.newは、アプリ全体を生成されたアーティファクトとして扱った場合に何が起こるかを示しています。プロトタイピングには役立ちますが、負荷のかかるシステムには危険です。 AnthropicのツールやCursorのコンポーザーは、エージェントが生成されたUIを構造化されたバックエンドに接続する次の段階を示唆しています。

これらのツールすべてに共通するパターンは、コアとなるインターフェースの生成性が高まるほど、周囲の機能の役割が大きくなり、モデルを取り巻くデザインシステムがブランド、アクセシビリティ、信頼性といった要素をより強く担うようになるということです。生成型UIは、単なるモデルではありません。モデルに加えて、チームが構築した基盤となるレール（基盤）も必要です。

今四半期に始める方法

どのプロダクトチームでもすぐに実行できる具体的なステップを、順番に紹介します。

1. インターフェースを1つ選びましょう。 現在ユーザーが静的なページを使っているものの、動的にすべき機能を1つ選びます。レポート、ダッシュボード、レコメンデーション、サマリーなどが候補です。チェックアウト、認証、規制関連のプロセスはすべてスキップしましょう。

2. 語彙を整理する。デザインシステム内で、型付きプロパティとテスト済みの空状態/読み込み状態/エラー状態を持つすべての基本コンポーネントをリストアップしてください。リストの項目数が10個未満の場合は、生成を開始する前に修正してください。

3. インテントスロットを3つ定義する。最もシンプルで実用的なレイアウトは「回答、証拠、次のステップ」です。特に理由がない限り、このレイアウトを使用してください。

4. 語彙を明記したシステムプロンプトを作成する。雰囲気ではなく、コンポーネント名、プロパティの型、スロットのルール、モデルが生成してはならないものに関する明確な制約を記述してください。

5. 機能開発前に評価を作成する。5～10個のテストプロンプトと、それぞれに評価基準を設けてください。プロンプト、コンポーネント、またはモデルに変更を加えるたびに、これらのテストプロンプトを実行してください。

6. フラグを立てて、トラフィックの10%にのみ公開し、生成されたすべての画面にフィードバックを表示する。最初の1か月間は、毎朝フィードバックを確認してください。

7. セカンドモデルを決定しましょう。 バックアッププロバイダーを選択し、プライマリに依存する前に同じ評価を実行してください。モデルのリリースによって既存の用語が使えなくなった場合、再設計ではなく、設定を1行変更するだけで済むようにしたいものです。

これは理論上の話ではありません。3人チームであれば、このサイクルを6週間で実行し、1年間の読書よりもジェネレーティブUIについて多くを学ぶことができます。

今後3年間の意味

これをツールサイクルとして捉えるデザイナーは間違っています。カテゴリ変更として捉えるデザイナーは、時期尚早です。

静的な画面は消滅しません。Webアプリのログインフォーム、設定ページ、チェックアウトフローなどは、高速道路が舗装され続けるのと同じ理由で、今後も描かれ続けます。変化するのは、あらゆる製品の中核にあるロングテール、つまりユーザーが特定の回答を分かりやすく提示してほしいと望む部分です。そのロングテールは生成され、その部分が表面積の大部分を占めます。

生き残るデザインシステムは、人間とモデルという2つの読者を想定して書かれたものです。明示的な名前を持つトークン、型付きプロパティを持つコンポーネント、プロンプトとしても機能するドキュメント、ユニットテストがロジックを検証するように構成をテストする評価。既にこのような方法で作業しているチームは、四半期ごとにさらにリードを広げています。モデルが構成できるサーフェスに対して、いまだにピクセルパーフェクトなFigmaファイルを出荷しているチームは、最後の「無意味な道のり」がどのようなものかを身をもって知ることになるでしょう。

より深い賭けは、よりシンプルです。インターフェースはデザインの目的地ではなく、デザインの成果物となります。デザイナーの技術は、インターフェースを生み出すシステム、ルーブリック、語彙へと、一段階上のレベルへと移行します。作業はより困難になり、影響はより大きくなります。そして、今これを学ぶデザイナーは、2029年までに業界を牽引する存在となるでしょう。

これが課題です。今週中にサーフェスを1つ選び、語彙をリリースし、評価を記述して、始めましょう。

hero: key: hero prompt: "Voxel illustration, isometric, soft pastel palette aligned with Brainy ink/paper aesthetic. Composition: a building made of components assembling itself in mid-air, with floating UI fragments (cards, charts, forms) snapping into a layout grid below. Editorial, calm, precise. The composition does not include any human figures." alt: "Voxel building made of UI components assembling itself mid-air" width: 1600 height: 900 inline-1: key: gen-ui-architectures prompt: "Voxel illustration showing four distinct architectures as four floating panels arranged in a 2x2 grid: LLM-rendered components, structured tool calls, code-gen-on-demand, and a hybrid panel showing parts of all three. Soft pastel palette. The composition does not include any human figures." alt: "Four floating voxel panels showing the four generative UI architectures" width: 1400 height: 900 inline-2: key: pattern-vocabulary prompt: "Voxel grid of UI primitives like card, table, chart, form, list, arranged neatly with subtle arrows showing how an LLM picks among them. Soft pastel palette, editorial. The composition does not include any human figures." alt: "Voxel grid of UI primitives with arrows showing model selection" width: 1400 height: 900 inline-3: key: failure-modes prompt: "Voxel illustration of broken or glitching UI: hallucinated buttons floating with no labels, a loading spinner stretched into infinity, an infinite scroll collapsing into a tangle. Soft pastel palette with a hint of chaos. The composition does not include any human figures." alt: "Voxel scene of broken generative UI with hallucinated and stuck states" width: 1400 height: 900 inline-4: key: how-to-start prompt: "Voxel illustration of a designer's desk: a small library of labeled components on a shelf, an eval rubric printed on a tablet, and a model card pinned to a board. Soft pastel palette, calm and methodical. The composition does not include any human figures." alt: "Voxel desk with component library, eval rubric, and model card" width: 1400 height: 900