こんにちは、Infragistics ソリューションコンサルタントの田上です。
AIを活用したWebアプリ開発が進む一方で、「ロジックやAPIはAIコーディングで楽になったが、フロントエンドのUI画面は人間がデザインしなければならない」という声を、現場からよく耳にします。業務アプリのUIデザインは、構造や使い勝手が重要なため、AIでは機械的に自動化しにくい領域だと考えられてきました。
ですが、ついにAIと会話しながらUIデザインを自動生成できる「App Builder AI」がリリースされました。
App Builder AI では、
- 1. テキストで要件を伝えるだけで、業務向けのUIデザインを自動生成できる
- 2. 参考画像を添付して指示することで、UIデザインの生成精度をさらに高められる
という、2つのアプローチが用意されています。この記事では、App Builder AI と実際に会話しながら、
- テキスト指示で、どこまでUIを自動生成できるのか
- 添付画像による指示で、UIの自動生成がどのように変わるのか
を、具体的な実例とともに紹介していきます。
- 1. App Builder AI の2つのアプローチ
- 2. 実例① チャットボットアプリ（プロンプト入力テキストのみ）
- 3. 実例② チャットボットアプリ（添付画像による精度向上）
- 4. どのようなシナリオで効果を発揮するのか
- 5. まとめ
1. App Builder AI の2つのアプローチ
App Builder AI は、Infragistics が提供する法人向けBtoB業務アプリのUI作成に特化した対話式のAI機能です。App Builder AI の特徴は以下の通りです。
1-1. 「プロンプトベースの細かい指示」で、AIのUIデザイン生成精度を向上する
AIと対話をしながら、自然言語（日本語）で要件を入力するだけで、AIが適切なコンポーネントを自動配置します。英語で正式名称を指定することで、Grid、TreeGrid、Accordion、Financial Chart などの高度な部品も正確に配置可能です。
1-2. 「添付画像による指示」で、AIのUIデザイン生成精度を向上する
App Builder AI の最大の特徴は、プロンプトと一緒に画像を添付できることです。
参考にしたいUIデザインのスクリーンショットや手書きのワイヤーフレーム、既存アプリケーションの画面キャプチャなどを添付することで、AIがその構造やレイアウトを理解し、より精度の高いUI生成が可能になります。従来よりも、「こんな感じのデザインで作りたい」という曖昧なイメージを、視覚的に伝えることができるようになりました。
それでは早速、実際に画像添付とプロンプトを使った具体例を見ていきましょう。
2. 実例① チャットボットアプリ（プロンプト入力テキストのみ）
まずは、AIプロンプトへテキスト指示だけで、どのレベルのUIデザインが自動生成できるのか、見て行きましょう。
2-1. 入力したプロンプト（日本語）
・デスクトップで利用するチャットボットアプリケーション ・画面の左右比率は1:2 ・画面左側(1)にサイドバー （縦並びのラジオボタン３つ、テキスト入力フォーム１つ、実行ボタンを１つ） ・画面右側(2)にメインのチャット欄 チャット欄には、複数人でチャットができる大きなフレーム枠があり、 １つのチャットで、ユーザーのプロフィールアイコンと吹き出しの様なフレーム上に、 チャットテキストを表示する。 ・画面下に「チャットコメントを入力するフォーム」を表示する
2-2. 添付した元画像
- 添付画像なし
- App Builder AI プロンプトに対して、テキスト指示のみ
2-3. 生成されたアウトプット（デモンストレーション動画）
テキスト指示のみ、を与えた場合の自動生成結果を見てみましょう。
プロンプトから、AIが左右分割（比率1:2）のレイアウトで、サイドバーとメッセージエリアを持つチャットボットアプリのUIデザインを自動生成しました。入力されたプロンプト情報をAIが正確に理解して、業務アプリらしいシンプルなデザインに仕上がっています。
3. 実例② チャットボットアプリ（添付画像による精度向上）
では次に、テキスト指示だけでなく「添付画像による指示」を App Builder AI に与えてみましょう。私の方で事前に制作したイメージ画像をAIに読み込ませていきます。
3-1. 入力したプロンプト（日本語）
・デスクトップで利用するチャットボットアプリケーション ・画面の左右比率は1:2 ・画面左側(1)にサイドバー （縦並びのラジオボタン３つ、テキスト入力フォーム１つ、実行ボタンを１つ） ・画面右側(2)にメインのチャット欄 チャット欄には、複数人でチャットができる大きなフレーム枠があり、 １つのチャットで、ユーザーのプロフィールアイコンと吹き出しの様なフレーム上に、 チャットテキストを表示する。 ・画面下に「チャットコメントを入力するフォーム」を表示する
3-2. 添付した元画像
こちらの元画像は、無料で使える Infragistics Indigo.Design UIキット（UI部品のテンプレート） とフリー素材を使用して、Figmaデザイナーツールで作成したサンプル画像です。
この画像を、App Builder AI に読み込ませてみました。
3-3. 生成されたアウトプット（デモンストレーション動画）
それではAIプロンプトに、テキスト指示と添付画像による指示を与えてみます。
同じチャットボットアプリでも、実例①（プロンプト入力テキストのみ）と、実例②では、添付画像による指示によって App Builder AI が認識する精度が向上していることが分かります。AIによる機械的な判断によるため、100％のアウトプットではないかも知れませんが、部分的な修正を加えるだけで、デザイン工程が完了できそうです。
このように指示のアプローチ方法を変えることで、より良いアウトプットを得られるでしょう。
- プロンプト指示のみ（△） ＜ 添付画像による指示（◎）
- 添付画像の指示があることによって、AIの自動生成によるデザイン精度が向上する
3-4. 画像制作に Indigo.Design UIキット（無料）を使用したい方は
無料で使える Indigo.Design UIキット（UI部品のテンプレート）について、詳しく知りたい方はコチラの記事へアクセスしてください。UI部品をコピー＆ペーストで切り貼りだけで、UIデザインとして使用する画像を制作することができます。
4. どのようなシナリオで効果を発揮するのか
App Builder AI は非常に強力なUIデザイナーだと言えるでしょう。
フロントエンドのUIデザインのおける下記の様な困りごとを解決できる可能性を秘めています。
- クラシックなデスクトップアプリをWebアプリにマイグレーションしたい
- AIと対話ラリーを多く続けることなく、欲しいUIデザインが手に入る
- UIデザインされた、画像があれば同様のUIデザインを再現することができる
- AIと対話しながら、Webアプリ内へダイレクトにUI部品を自動配置できる
画像添付時の注意点
- 読み込ませる画像の著作権に注意する
- できるだけクリアで見やすい画像を使用する
- レイアウト全体が分かる画面を添付する
- 複数の画面を参考にしたい場合でも、1枚ずつ試すのがおすすめ
- 手書きの場合も、できるだけ丁寧に描く
5. まとめ
本記事により、業務アプリのUIをわずか数分で生成できることがお分かりいただけたと思います。
App Builder のAI機能は、特に画像添付機能により、
- 視覚的なイメージを正確に伝えること
- レイアウト構造を明確に示すこと
- デザインの意図をAIに理解させること
が可能になり、テキストのみのプロンプトだけでは難しかった「イメージ通りのUI生成」を実現します。
これは単なる効率化ではなく、「AIにデザインを注文するだけで、業務アプリのUIが完成する」という将来のビジョンを、今すぐ体験できるということです。
もしあなたが「AIでUIを作りたいけれど品質や構造に不満がある」と感じているなら、ぜひ一度、App Builder を活用してみてください。マイグレーションや、開発のスタートダッシュが、驚くほどスムーズになるはずです。
無料トライアルのご案内
こちらからトライアルへご参加できます。
無料相談会のご案内
専門コンサルタントが直接ご質問にお答えし、貴社に最適な移行戦略をご提案します。
