【2025年】AIで法人向けWebアプリを5分で自動生成！複雑なタブUI画面を生成してみよう！

こんにちは、Infragistics ソリューションコンサルタントの田上です。

最近、「ChatGPTやClaudeでコードを自動生成しているけれど、UIのデザインは思ったように作れない」という声を、現場のエンジニアやDX推進担当の方からよくいただきます。

確かに、AIは短時間でコードを作ってくれますが、複雑な業務アプリケーション向けのUIになると、まだ課題が残ります。

デザインは出てきても、部品の配置や構造が業務向けに最適化されていない
社内標準UIやフレームワーク仕様に合わせるのに時間がかかる
グリッドやチャートのような高度なコンポーネントは、使い方や設定をAIに理解させるのが難しい

そこで今回は、App Builder のAI機能で「複雑なタブ構成のページ」を、わずか5分で生成する方法をご紹介します。

1. App Builder AI とは
- プロンプトベースでビューを生成
- BtoB業務画面に最適化
2. プロンプト入力のポイント
3. 実際に入力したプロンプト
4. 生成結果
5. APIをセットしよう
6. Webアプリケーション全体をコード自動生成しよう
- 6-1. フレームワークを選択する
- 6-2. 関連ブログ
7. まとめ
- 無料トライアルのご案内
- 無料相談会のご案内

1. App Builder AI とは

App Builder AI は、Infragistics が提供する法人向けBtoB業務アプリのUI作成に特化したAI機能です。従来のコード生成AIでは、デザインは生成されても「業務アプリ向けに最適化されたレイアウト」や「複雑なタブUI」を短時間で作ることは難しいケースが多くありました。

App Builder AI の特徴は以下の通りです。

プロンプトベースでビューを生成

自然言語で要件を入力するだけで、AIが適切なコンポーネントを自動配置します。英語で正式名称を指定することで、Grid、TreeGrid、Accordion、Financial Chart などの高度な部品も正確に配置可能です。

BtoB業務画面に最適化

マーケティングサイトのような装飾重視ではなく、社員ポータルや業務管理画面など、日常業務で使いやすいUIを短時間で作成できます。

「AIはコードを書けるけれど、業務UIの最適化はまだ難しい」という課題を持つ開発者やDX担当者にとって、App Builder AI は最適な解決策となります。

2. プロンプト入力のポイント

App Builder AI機能を使いこなすための「プロンプト入力のポイント」をご紹介します。

コンポーネント名は英語の正式名称で書く
例：Grid, TreeGrid, Accordion, ColumnLayout, Financial Chart, Pie Chart
利用する想定ユーザーを冒頭に書く
例：「社員ポータルを利用する営業担当者」
デスクトップ向けかモバイル向けか明記する
アイコンが必要な箇所にアイコン画像と書く
App Builderが適切なアイコンを自動設定してくれます。
GridやChartのUI部品だけ配置されるので、API連携は後から手動で設定する
API連携はプロンプトに書いても自動では反映されません。
美麗なマーケティングサイト向けではなく、業務アプリ向けUI画面を想定

App Builder AI はBtoB法人向けのシンプルで機能的な業務画面が得意です。

それでは早速、実際にプロンプトを入力してみましょう。

3. 実際に入力したプロンプト

以下が、今回App Builder AIに入力したプロンプト全文です。

タブ管理された社員ポータルページを、モダンでクリーンかつプロフェッショナルなUIデザインで作成してください。

■利用する想定

- デスクトップ向け
- 想定されるユーザー：社員ポータルを利用する営業担当者

■主要なユーザータスク（タブメニュー）

- ホーム
- 取引
- 申請
- レポート
- 設定

■タブメニュー内のページレイアウト

- ホームタブ
    - 左レイアウト
        - Card コンポーネント、プロフィール（プロフィールアイコン、名前、部門名、役職名、アバター画像）
    - 右レイアウト①
        - Accordion コンポーネント
            - ColumnLayout
                - title = A製品のリリース情報
                - List = プロフィールアイコン、リリースタイトル名、リリース情報、書き込みボタン
        - Accordion コンポーネント
            - ColumnLayout
                - title = B製品のリリース情報
                - List = プロフィールアイコン、リリースタイトル名、リリース情報、書き込みボタン
    - 右レイアウト②
        - カレンダー（上部）
            - Calendar コンポーネント
        - 定期リリース情報（下部）
- 取引タブ
    - 内部タブ１：取引データ
        - Grid のData設定に「Northwind Swagger」の「/Orders」をセットする
    - 内部タブ２：詳細データ
        - Tree Grid のData設定に「Northwind Swagger」の「/Employees/GetEmployeesWithSkip.items」をセットする
    - 内部タブ３：新規データ
        - Grid のData設定に「Northwind Swagger」の「/Categories」をセットする
- 申請タブ
    - 中央レイアウト ColumnLayout マージン 20px
        - 入力テキストフォーム
            - 顧客情報
            - 顧客名
            - 代表者名
            - 郵便番号、郵便番号検索ボタン
            - 住所１（都道府県）、住所２（市区町村）、住所３（マンション・番地）
            - 電話番号１
            - 電話番号２
            - 電話番号３
        - 保存ボタン
        - キャンセルボタン
- レポートタブ
    - 内部タブ１
        - Category Chart のData設定に「Financial」の「/Global Electricity Demand」をセットする
    - 内部タブ２
        - Financial Chart のData設定に「Financial」の「/Sales」をセットする
    - 内部タブ３
        - Pie Chart のData設定に「Financial」の「/Box Office Revenue」をセットする
- 設定タブ
    - （左レイアウト）メニューリスト名
        - （適したアイコン画像）＋プロファイル
        - （適したアイコン画像）＋プライバシー、検索、サービス
        - （適したアイコン画像）＋外観
        - （適したアイコン画像）＋共有、コピーとして貼り付け
        - （適したアイコン画像）＋システムとパフォーマンス
        - （適したアイコン画像）＋アクセシビリティ
    - （右レイアウト）プロファイル
        - アバター画像
        - プロフィール編集ボタン（アイコン画像）
        - プロフィール削除ボタン（アイコン画像）
        - サインアウトボタン