生成 AI による新しい UI/UX
~ Generative “UI” の世界観を感じよう ~
Author : 淡路 大輔
みなさん、こんにちは ! ソリューションアーキテクトの淡路です。
私は日々コードを書いたり、資料を作る上で、生成 AI を活用しています。以前はデモアプリケーションの実装に 1 週間かかっていたのが、生成 AI の力を借りてソースコードやテストコードを生成することで数日で済むようになったように感じます。もう生成 AI は無くてはならない相棒のような存在ですね。
さて、みなさまは普段生成 AI をどのように活用しているでしょうか ? プレゼンする企画案のブレストですか ? それともメールなどの文章作成でしょうか ? 生成 AI は UI (User Interface) のデザインやソースコードを生成することもできるようになってきました。
そこで、この記事ではみなさまに Generative “UI” という新しい世界観を感じていただこうと思います。
「EC サイトを作ってください」や「〇〇サービスの管理画面で購入済みの商品一覧を作ってください」と生成 AI にお願いするだけで、ほんの数秒で、ウェブサイトの UI が確認ができるとしたらどうでしょうか ? 開発や設計だけでなく、お客様と会話する際にプロトタイプとして使えるかもしれません。あるいはフロントエンドやデザインのスキルがない場合でも気軽に実装ができてしまいます。懇親会や移動中に、お客様に意見を聞くために使ってみても良いですね。
Generative “UI” とは
Generative “UI“ には様々な定義がありますが、例えば Vercel は「アイデアを説明するのと同じくらい簡単にウェブサイトの作成をすること」を Generative UI (生成 UI) と呼んでいます。あるいは、Nielsen Norman Group の記事では、「ユーザーのニーズとコンテキストに合わせてカスタマイズされたエクスペリエンスを提供するために、AI によってリアルタイムで動的に生成される UI (User Interface) である」と定義づけています。
私はこれを、広義には「生成 AI がフロントエンドの UI を生成すること」と解釈しています。
AWS では生成 AI を安全に業務活用するための、ビジネスユースケース集を備えたアプリケーションの実装サンプルとして Generative AI Use Cases JP (GenU) を提供しています。この中の 1 つのユースケースとして 生成 AI がフロントエンドの UI を自動生成する Generative UI の機能を最近実装しました。（※ この機能は AWS Summit Japan 2024 におけるブース展示のためのコンテンツとして特別なブランチ summit-2024 にて開発が進められています)
どんな UI が生成できるか
さて、早速 Generative AI Use Cases JP (GenU) のウェブサイト生成機能を使ってみましょう。どのような UI が生成できるでしょうか ?
※ なお、本記事では生成 AI の LLM に Claude3 Sonnet を利用しています。
1. TODO アプリを SPA で
まずは、SPA (Single Page Application) でどの程度の機能が作れるか試してみましょう。
「TODO アプリを SPA で実装してください。」とお願いをしてみました。
こちらは生成されたウェブサイトです。右側には生成 AI によって生成されたソースコードが表示できるようになっています。Vue.js を採用して TODO リストの要素の追加、削除という機能が実装できているようですね。
画像をクリックすると拡大します
生成 AI は対話的にやりとりすることで徐々にアウトプットを精度の高いものに組み立てていくことができます。追加でプロンプトにお願いしてみましょう。
「一括削除の機能を追加してください。」と入力してみます。
画像をクリックすると拡大します
「Clear Completed」というボタンが追加されました。適切に意図を解釈してウェブサイトを作ってくれているようですね。
簡単な TODO リストアプリなら作れることがわかりました。
2. 観葉植物の EC サイト
今度はすこし複雑な要件をお願いしてみましょう。以下のようなプロンプトを入力してみます。
観葉植物を専門に取り扱う EC サイトを作ってください。
レイアウトのイメージは Amazon.com です。
この EC サイトの名前は「Green Village」です。
ショッピングカートに追加する機能を作ってください。
買い物カゴに追加すると、アニメーションもつけてください。
現在何が買い物カゴに入っているのか確認し、合計金額の計算もできます。
ページ遷移は行わず、SPA のように 1 ページで処理を行ってください。
このようなウェブサイトが生成されました。
買い物カゴに追加したり、合計金額の計算もしてくれています。また、画像も観葉植物の要素に近いものを選んでくれました。 (馬が表示されたものもありますが、生成 AI のご愛嬌ですね) さらに Add to Cart ボタンをクリックすると、ボタンが動くアニメーションが実装されていました。
画像をクリックすると拡大します
ここまでできれば、設計・開発している際や、お客様と会話する際にペーパープロトタイピングとして使用できるかもしれませんね。
3. ラフな手書きスケッチ画像から
Claude 3 は画像とテキストによるマルチモーダル機能をサポートしています。画像とテキストという異なるモダリティの情報を組み合わせることによって、より豊かな情報を処理し、より深い理解や洞察を提供することができます。
今回は紙にペンで描いた手書きのスケッチを入力としてウェブサイトが作れるか試してみましょう。
このような手書きのスケッチ画像を用意してみました。
ヘッダーがあり、ダッシュボードにはテキストとテーブル形式の情報が記述されており、右上にはユーザーのプロフィール画像があります。これを解釈してウェブサイトを描画できるでしょうか ?
こちらが生成されたウェブサイトです。
いかがでしょうか ?「Dashboard」という文字列は左側のメニューに含まれてしまったものの、8 割程度は正しく理解されて描画されているのではないでしょうか ? もちろん、ここからさらにプロンプトを入力して手直しすることもできます。
このように Generative UI の仕組みでペーパープロトタイピングを進めることで、開発コストを抑えつつユーザーにとって最適な UX を検討することができそうです。
画像をクリックすると拡大します
どんな仕組みなのか ?
ウェブサイトを自動的に生成しているとなんだかすごいことをしているように見えますが、実は仕組みは非常にシンプルです。
生成 AI が HTML のソースコードを生成してくれさえすれば、あとはその HTML をそのまま iframe (インラインフレーム) に埋め込むだけで実現できます。
アーキテクチャの概要
Amazon Bedrock は生成 AI のモデルを提供するサーバーレスサービスです。インフラストラクチャの管理も不要で、利用した分だけの従量課金であるため、手軽に実装に組み込むことができます。
Amazon Bedrock は API でアクセスする必要があるため、API サーバー相当のコンピューティングレイヤーを用意しておく必要があります。
今回は AWS Lambda を採用しました。AWS Lambda は HTTPs 経由で簡単にアクセスすることのできる機能として Function URLs を提供しています。AWS Lambda Functions URLs の機能を使用することで、任意の Lambda 関数に HTTPS エンドポイントを追加できます。また InvokeMode を RESPONSE_STREAM として指定することで、AWS Lambda の Response Streaming を利用できます。
ブラウザの画面で徐々にテキストが表示されるユーザー体験を実現するために、Response Streaming は良い選択です。ユーザーに待ち時間を感じさせず、インタラクティブに生成 AI とやり取りしているユーザー体験 (UX) を与えることができます。ユーザーが介在する生成 AI アプリにおいて、Response Streaming は必須といっても良いかもしれませんね。
なお、余談ですが Next.js のようなリッチなフロントエンドのフレームワークにはコンポーネント単位で Streaming 的にレスポンスを生成するものもあります。Lambda に Next.js を載せて Response Streaming を利用するブログ も併せて参照ください。
システムプロンプト
システムプロンプトとは、生成 AI に対して質問やタスクを提示する際に、前提として伝えておくプロンプトのことです。事前にシステムプロンプトを与えておくことで、生成 AI に何を期待しているのか、具体的なタスクや目標を明確にします。今回の場合、ウェブサイト生成に特化した利用であること、HTML のソースコードを出力して欲しいことなどを事前に伝えておきます。
以下がウェブサイトを生成するシステムプロンプトの例です。
あなたは、HTML と CSS, JavaScript が得意な Web デザイナーです。
与えられた Web ページの画像とルールに従い、HTML と CSS, JavaScript のソースコードを出力してください。
<rules>
* スタイリングは、Tailwind.css を使用します。アイコンも積極的に使用してください。
* 1つのページを描画できるように CSS, JavaScript も含めた 1 ファイルの HTML とする
* 途中で切ってはいけません。必ず全てのソースコードを最後まで返却してください
* <!DOCTYPE html><html から始まり、 で終わる構造としてください。それ以外の情報を出力してはいけません。もちろん挨拶や説明を前後に入れてはいけません。例外はありません。
* SPA を実装する場合で、Vue.js を採用する場合は、https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.prod.js を忘れずにロードしてください。
* SPA を実装する場合は、ページ遷移も実装してください。Vue Router は指定されない限り使用せず、簡易的な実装で良いです。
* ソースコード以外の文言を出力することは一切禁止されています。挨拶、雑談、ルールの説明など一切禁止です。
* 生成するアプリケーションは基本的に画面いっぱいに表示するが、指定があれば変更しても良いとする
* トリプルバックティックまたはトリプルバッククォート（\`\`\`）は出力してはいけない
* 必要であれば API をフェッチして表示するソースコードも生成する
* background color は white を基調とする
* 画像が必要な場合、Unsplash から適当なものを参照してください。指定があればそれ以外から参照することも可能です。
</rules>
これによって、与えられたユーザープロンプトをもとにフロントエンドのコードを提供する AI アシスタントができあがりました。
Generative “UI” の可能性
本記事ではウェブサイト全体の HTML を生成しましたが、一部の要素だけを生成したり、あるいは React のコンポーネントを生成したり、用途は幅広く応用が効く可能性があります。
本記事ではスタイリングに Tailwind.css を指定していますが、例えば Material Design を使うこともできるでしょう。あるいは社内の特定のデザインシステムを指定することもできるかもしれません。それに従って Web の UI を生成できると生成 AI が生成するコードやデザインにも一貫性を与えることができます。
さらに、Generative “UI“ は現在のところソースコードを生成したり、Figma などのデザインコンポーネントを描画したりといったケースに留まっていますが、近い将来ユーザーの行動データや趣向を大規模なデータセットとして分析し、ユーザーの好みに合わせた最適な UI が提供できるようになるかもしれません。ユーザーにとって最適な UX の実現にもつながります。
さいごに
本記事では、生成 AI によって UI を生成する Generative “UI” という考え方と、そのデモアプリケーションの実装についてご紹介しました。生成 AI の可能性について想像すると、今後の未来に期待が高まりますね !
AWS Summit Japan 2024 では、本日ご紹介した Generative AI Use Cases JP の特別機能の展示を予定しています。この記事でご紹介した Generative UI に加え、Backend の AWS Lambda のソースコードを生成 AI が作り出したり、RDB のテーブル定義から SQL 文を生成したりと、開発者向けにも面白いデモを予定しています。AWS Summit Japan で体感ください !
筆者プロフィール
淡路 大輔 (Awaji Daisuke / @gee0awa)
アマゾン ウェブ サービス ジャパン合同会社 ソリューションアーキテクト
現在は、公共部門のお客様向けの技術支援に従事しています。特にアプリケーションのユーザー体験 (UI/UX) を専門とし、アプリケーションのモダン化の支援を行っています。仕事以外では、家族と過ごす時間、料理を楽しんでいます。
AWS を無料でお試しいただけます