Web開発者やデザイナーにとって、HTMLやCSSでアプリの画面を設計するという手法は長く変わっていませんでした。しかし、生成AIによって、その作り方が変わる時代が近づいています。どのような変化が起きているのか、わかりやすく解説します。
ジェネレーティブUIとは？
これまで、Webアプリやシステム画面を作るときは、ある画面のどこにボタンを配置し、どのように文章や画像、表などを配置するのか、いわゆるUI（ユーザーインターフェース）をデザイナーやITエンジニアが作成していました。そして、利用者の画面には、開発者が用意した配置で、決められた内容が表示されるのが当たり前でした。
このような決められたUI（画面部品やレイアウト）ではなく、AIが利用者の状況や入力に応じてリアルタイムでUIを生成する仕組みを「ジェネレーティブUI（Generative UI、GenUI）」と呼びます。
たとえば、利用者が「来月の売上を見たい」と入力すると、AIがその意図を読み取り、最適なグラフや表、検索欄などを動的に組み立てて表示します。
そして、この表現方法と対話型AIは親和性が高いこともポイントです。従来のチャット画面は「テキスト形式で答える」というのが基本でしたが、ジェネレーティブUIを使うことで「操作できるUIそのものを返す」ことができるようになりました。利用者はテキスト形式での応答を見るだけでなく、ボタンやスライダーなどを使って操作できるため、より使いやすい画面を利用できることが大きな特徴です。
＊生成AIでWebサイトを構築することをジェネレーティブUIと呼ぶこともありますが、本稿では、リアルタイムにUIを生成することを指します。
なぜ今、注目されているのか
ジェネレーティブUIが使われるようになった背景として、大規模言語モデル（LLM）とマルチモーダルAIの急速な進化があります。数年前までは「AIにコードを書かせる」ことすら難しかったのが、今やReactコンポーネントやHTMLをリアルタイムに生成できるようになりました。そして、画像などを渡すと、そこから物体を認識したり、文字起こししたりできるようになりました。
さらに、2024年に一般公開されたものとして、「v0（ブイゼロ）」があります。これは、Vercel社が提供している「自然言語でUIデザインとコードを自動生成してくれるAIツール」です。さらに、このVercel社が、「AI SDK」を、iOSやAndroidアプリの開発に使われるFlutterも「genui」というSDKを提供しています。このように、各種フレームワークによりUI生成が扱いやすくなったことで、実装のハードルも下がっています。
■利用者それぞれに合わせたUIの必要性
もう1つの追い風は利用者が求めるUX（ユーザー体験）の変化です。利用者の知識レベルや目的が多様化しており、「全員に同じ画面」を見せるという設計では限界があることが明らかです。
入力欄を表示するときも、初心者には入力する内容についての詳しい説明を見せることが必要な一方で、熟練者には最低限の説明で高速に入力できることが求められます。
また、こどもへの対応、高齢者への対応、外国人への対応など、さまざまな利用者に対応するアクセシビリティが求められ、個別に最適化する必要があります。こういったときも、ジェネレーティブUIであれば手軽に実現できます。
企業が社内で使う業務アプリの分野でも注目が高まっています。定型業務は画面数が多く、細かく作り込むとメンテナンスコストがかさみます。しかし、状況に応じた画面をAIが組み立ててくれれば、作り込む画面数そのものを減らせる可能性があります。
現場で何が変わる？
ジェネレーティブUIの時代になっても、ITエンジニアの仕事がなくなるわけではありません。むしろ役割が変化すると言えます。
知っておきたいのは、このジェネレーティブUIを実現する方法は1つではない、ということです。たとえば、AnthropicやOpenAIが推進する「MCP Apps」のほか、Googleが推進する「A2-UI」のほか、上記のAI SDKやgenuiのようなフレームワークを使う方法などがあります。
いずれにしても、「AIが組み合わせやすいように考える」ことが求められます。ボタンやフォーム、カードといったコンポーネントとして表現するとき、適切に説明すればするほど、AIは安全で使いやすいUIを組み立ててくれます。このため、コンポーネント設計やReact、Vueといった基礎知識は、これからも求められると言えるでしょう。
それに加えて、「プロンプト設計」と「ガードレール設計」が求められます。AIに自由に作らせると、利用者が意図しない画面や危険な操作が作り込まれる可能性があります。このため、出力してよいもの、出力してはいけないもの、接続してもよいAPIなどを明示して設計しておくことが、これからのフロントエンド開発で求められるのです。
まとめ
現在も新しい手法が次から次へと登場し、日々変化しています。まずは、上記で解説したVercelのAI SDKなどを実際に動かしながら、どのように見た目が変わるのかを試してみましょう。
自分で作ったコンポーネントが、AIによってどのように選ばれて、画面に出力される体験をしておくだけでも、これからのUI開発の方向性を感じられるでしょう。
増井技術士事務所代表。技術士（情報工学部門）。情報処理技術者試験にも多数合格。ビジネス数学検定1級。「ビジネス」×「数学」×「IT」を組み合わせ、コンピューターを「正しく」「効率よく」使うためのスキルアップ支援や、各種ソフトウェアの開発、データ分析などを行う。著書に『Pythonではじめるアルゴリズム入門』『図解まるわかり プログラミングのしくみ』『「技術書」の読書術 達人が教える選び方・読み方・情報発信&共有のコツとテクニック』、最新刊の『AI用語図鑑』（翔泳社）がある。
※本記事に記載されている会社名、製品名はそれぞれ各社の商標および登録商標です。
※本稿の内容は2026年4月時点の情報に基づいています。
