Power Apps の新機能である Generative page は、自然言語や画像を活用してアプリ画面を自動生成する革新的な機能です。本ブログ記事では、Generative page の特長、制限事項、実践的な Tips、そして参考情報を体系的に紹介します。
以下の記事でGenerative page に対して GPT-5 対応がアナウンスされました
Generative pages get better with GPT-5: Improved quality, enhanced performance – Microsoft Power Platform Blog
USリージョンでの一般提供がアナウンスされました。
https://www.microsoft.com/en-us/power-platform/blog/2025/11/05/generative-pages-in-power-apps-is-now-generally-available
YouTubeでも Generative page の概要を紹介しておりますのでご参考ください。
目次
Generative page の特長
Generative page の強みは、従来のプロ開発で課題となるインフラ準備やセキュリティ要件の対応を、Power Platform 環境だからこそ不要にし、すぐに利用を開始できる点にあります。
それを支えるポイントとして以下のような特長があります。
- 自然言語プロンプトや画像から UI を自動生成
- フォーム、ギャラリー、カード、グラフなどの主要コンポーネントに対応
- Power Apps モデル駆動型アプリのページとして利用可能
- Dataverse などのデータソースとの連携が可能
制限事項
現在、US環境で一般提供しています。
- 日本環境では提供されていません。ただし、US環境であれば日本語で動作可能
- 生成されたページは、モデル駆動型アプリに限定される（キャンバスアプリでは未対応）
- 動的な動作（アニメーション、リアルタイム更新など）はプロンプトで補足が必要
- 認証が必要な API やセキュアな接続はDataverseにエンドポイントを保存して接続するなどの対応が必要
- デザインは モデル駆動型アプリのデザインを踏襲しており、すべて柔軟に対応できるわけではない
コード編集ができないため、細かなロジックや UI の修正はプロンプトでの設定が必要
コードを編集可能になりました。追加して、イテレーション比較機能で、変更履歴を追跡しながら改善できるようになりました。環境間の移動（エクスポート・インポート）ができないため、再構築が必要になるケースもある
ソリューションに対応して環境間の移送が可能になりました- 直接のデータソースは Datavese に制限されている
実践 Tips
Generative page は革新的な機能ですが、これまでの開発手法とは異なります。
生成AIに如何に指示を出して、開発を行っていくか、という手法に慣れていく必要があります。
実践的に進めていき、求めるアプリケーションを開発するには仕様やコツを理解する必要があります。そういったポイントを実践Tipsとして以下より紹介いたします。
プロンプトをCopilotに改善してもらう
Generative page に指示してもなんとなくうまくいかないとき、Copilot にプロンプトを見直してもらってみてください。
このように指示するとよいです。
コピーしました！
React のコードを効率的に出力できるようにプロンプトを改善して: 
作成した後のページの改善にもCopilotはぴったりです。
作成したページについて何かアイディアがほしいときには、改善するには？という観点でCopilotにきいてみても良いと思います。
コピーしました！
React ベースで {ページ}を作成しました。現在このような {機能} がありますが、改善アイディアを提案してください。Copilotをうまく使いながらGenerative pageでの開発を進めてみてください。
作成できる代表的な UI を知っておく
以下は画像入力無し ― つまりプロンプトだけでも作成することができます。
画像をプロンプトに入れて作成すると、より期待した結果を得ることができます。その例は次で紹介します。
対応可能なUIの代表的な例は以下のとおりです。
- ガントチャート（プロジェクト管理や工程管理に活用）
- カンバンビュー（タスク管理や進捗管理に最適）
- カレンダービュー（予定やイベントの可視化）
- グリッド
- ギャラリー
- ウィザード形式（段階的な入力プロセス。ステップフォームでもよい）
- KPI ダッシュボード（複数指標のカード表示）
- ツリービュー (親子階層の表示)
- チャット
画像入力して画面を作成する
紙への手書き、PowerPoint でのイメージ画面、ホワイトボードでのラフスケッチ、普段使っているアプリやサービスのスクリーンショットなどを入力して画面を作成することができます。
アプリやサービスにはデザイン上の意匠権が設定されている場合もありますので注意しましょう。
プロジェクト管理画面
こちらはPowerPointで作成したデザイン画面です。
似たような画面を作成してくれています。
インシデント管理画面
こちらは手書きも組み合わせて作成した例ですが、これを元にしても画面を作成することができます。
手書きでもシンプルに要件を捉えてアプリ化してくれます。
アプリやサービスのスクリーンショット
スクリーンショットを取得して、それをアップロードして画面を作成してもらうことができます。
このような Power Platform 管理センターの画面を添付してみます。
するとこの画面が作成されました。とてもよく似た画面が作成できたことがわかります。
実は画像は続けて入力することができますので、再現度が高くなければ再度入力して修正点を指示することや、別の画像を入力して細部や別の画面のコンポーネントを作成させることができます。
- UI 要素（フォーム、ギャラリー、チャートなど）が明確に写っている画像を使用
- 複数画面を構成する場合は、画面ごとに画像とプロンプトを分けて入力すると精度が向上
- 分析系ダッシュボードもこのカテゴリに含まれ、KPI カードやグラフの構成を画像で指定可能
動的な機能を追加する方法
ユーザー操作に応じて動的に変化する UI にすることで、ユーザー体験を向上させます。
特にこれまでキャンバスアプリでは難しかったことが実現できますので、ぜひ適する場面で使用していきたいものです。
- 要素の並び替えや移動を行うドラッグ＆ドロップ
- 詳細情報や入力フォームを表示するポップアップ
- ページ内に表示するハンバーガーメニュー
- コンテンツを分類するタブ切り替えやボタンでのフィルター
- ローディング中の進捗バー
- マウスカーソルを当てると詳細ポップアップを表示するツールチップ
- 直接編集するインライン編集
- 画面遷移：
- 選択したレコードの関連するビューやフォームへの遷移を行うCRUDボタンを配置する
- 別のGenerative pageへの遷移をするボタンを配置する
- モデル駆動型アプリを開き、移動先のGenerative pageのURLを以下のように取得する。スラッシュ以下のURLを取得するようにする。
- 続けて、そのURLを指定してボタンを作成するプロンプトで指示をする。これで別のページに移動できるようになります
- モデル駆動型アプリを開き、移動先のGenerative pageのURLを以下のように取得する。スラッシュ以下のURLを取得するようにする。
Dataverse以外のデータソースに接続する
直接のデータソースとしては Dataverse のみに制限されています。
例えば、キャンバスアプリのようにコネクターを利用して SharePoint などに接続することはできません。
ただし、 Dataverse を介して別のデータソースに接続する機能として仮想テーブルという機能が提供されておりますので、これを利用することができます。
仮想テーブル には、データベース内のレコード保存用に関連付けられた物理テーブルのないテーブルの定義が含まれます。
Dataverse 実行時にレコードが必要な場合、その状態は関連付けられている外部システムから動的に取得されます。
外部 API 連携の活用
様々なAPIに対して接続する事ができます。ただし、Entra ID認証などの認証が必要なサイトには対応していません (しかし、回避策はあるので次のTipsで紹介します)。API-KEYなどで接続可能なサービスへは接続できます。
例えば、 Azure OpenAI Service はAPI-KEYで接続することができます。エンドポイントやキーのような重要な情報はDataverseに格納しておき、直接コードには記載しないでAPIアクセスすることが重要です。
直接チャットにエンドポイントやキーを記載するとエラーになります。
以下はGoogle ニュースのRSSに接続する方法です。
コピーしました！
Material UI で、Google ニュースの RSS を検索キーワードに基づいて取得し、ニュース一覧を表示する React アプリを作成してください。以下の要件を満たすようにしてください：
UI 要件
検索キーワードを入力できるテキストボックス（初期値は「生成AI」）
「読み込む」ボタンを押すと、RSS を取得して表示
ニュース取得中は進捗バー（ローディングインジケーター）を表示
ニュース一覧はタイトルとリンクをカード形式で表示
データ取得要件
RSS URL は以下の形式で構成：
https://news.google.com/rss/search?q={検索キーワード}&hl=ja&gl=JP&ceid=JP:ja
RSS は XML 形式で取得されるため、JSON に変換して扱う
XML → JSON 変換には xml2js などのライブラリを使用
技術要件
React（hooks 使用）
Axios で RSS を取得
状態管理は useState / useEffect を使用
UI ライブラリは使用しなくてよい（プレーンな HTML/CSS で構成）このプロンプトにより以下のような画面を作成することができます。
認証が必要なサービスへの接続
標準では対応していませんが、Dataverseにレコードを作成するトリガーによりPower Automateを起動することで、様々なコネクターを利用することができます。
Power Automate の戻り値は同じDataverse の行に保存し、そのデータをリアルタイムで取得することで同期的に見せることができます。
よりセキュア&動的な構成を実現するため、設定情報は Dataverse に保管する
コード内にそのまま エンドポイントやページ取得件数などのパラメーターを書いてしまうと (いわゆるハードコーディング) 、安全でもなければ、柔軟性もありません。パラメーターは後で変更したいものです。
そのため、 Dataverseに接続できるという利点を活かして、Dataverse に設定情報を保存して活用しましょう。
API のエンドポイントやキー情報を Dataverse のテーブルに格納し、画面生成時に参照
例えばAzure OpenAI の接続情報を以下のようにDataverseに保管して利用することができます。
レコード取得件数や表示条件を設定値として保持し、プロンプトで反映
最大のページ取得件数をパラメーター化しておくことが考えられます。
RSS の検索キーワード条件を Dataverse に保存し、動的に読み込む
検索キーワードをパラメーター化しておくことが考えられます。
エラーが発生したときの対処方法
エラーが表示されている場合
このように、画面にエラーが表示されている場合、それをGenerative pageのプロンプトに指定して修正するように指示します。
具体的にはこのように指定します。
大抵の場合、このように修正されます。
エラー内容が短くてあまり詳細ではない場合
Generative page で開発を進めているとこのようなエラーに遭遇することがあります。
この状態ではエラーをきちんとキャプチャできていません。一度アプリを公開し、実行してみてください。
詳細を表示することでエラーをキャプチャすることができます。
これを元に一度Copilot にプロンプトを提案させます。
そこで生成されたプロンプトを参考にして、修正依頼をGenerative pageに依頼してみてください。
エラーが表示されていない場合
ページが何も表示されないケースがあります。そんなときは、UIに問題があるケースがほとんどなので、まずはUIを見直してもらうのが良いかと思います。例えば、以下のように指示します。
- Microsoft 風にデザインし直して。
ここでは Microsoft としていますが、好きな会社やサービスを指定してみても面白いです。
それぞれのデザインを指定した結果は、次のTipsで紹介します。
コードから修正箇所を特定する
別の手段としては、ビューでコードに切り替え、書かれているコードを取得して、Copilotに修正ポイントを訪ねるという手段があります。
まず最初にコードをGenerative pageから取得します。
次に、コピーしたコードを利用してCopilotに修正ポイントを訪ねます。
このように提案されました。それをプロンプトにします。
コピーしました！
修正点を指示するプロンプトを提案して。
このように提案してもらえます。このプロンプトを利用して、Generative pageに依頼します。
最終手段
それでもうまくいかない場合は、いちからコードを作成して。と指示すると復活する場合があります。
デザインを指定する
デザインは、そこまで柔軟性が高いわけではありませんが、テンプレートやサービス名などを指定して変更することができます。例えば、以下のように〇〇風のデザインに変更してと指定するとデザインがある程度適用されます。
全般的な色彩や影、ボタンの形については反映されます。
もともとのCSSのライブラリを指定するとバグることがあるので注意しましょう。
Fluent UI
Material design
Amazon
Salesforce
Microsoft
X
Udemy
Tabler
https://github.com/devias-io/material-kit-react
Shards Dashboard
https://github.com/DesignRevision/shards-dashboard
Airframe
http://dashboards.webkom.co/react/airframe/dashboards/projects
Ant design
https://github.com/ant-design/ant-design-landing
atomize
Design System for React JS | Atomize React
ポケモン
テーブルの設定は最初に。後から減らすことは可能
基本的には接続するDataverseのデータソースの設定は最初に行う必要があります。
後からプロンプトウインドウ内にスラッシュを加えて追加することもできますが、エラーが発生する確率が高まります。
途中からテーブルを追加する場合は、これまでのコードは削除して、新しく作成するようにしましょう。
後でテーブルを削除する場合は、以下のように画面上部の[…]から削除することができます。
React で実現できることを知る
Generative pageは基本的にReactベースで実装されます。そのため、どのようなライブラリがあり、どのようなことができるのかを知っておくことで新しいアイディアを思いつくことがあります。
というわけで、React の公式ページを見ておいて決して損はありません。
また、理解できない部分があっても、Copilotといっしょに読み進めることができます。
例えば、実現したいことがあれば、React で実現できる動的なサイトの例を教えてとCopilotに聞いてみると、いい例を入手することができるかもしれません。
参考情報・トレーニングマテリアル
以下は Generative Page の理解と活用に役立つ公式リソースです。特に Microsoft Learn の以下のページでは、Model-driven アプリにおける Generative Page の使い方が詳しく解説されています。
公式Learnのドキュメントは確認しおくようにしましょう。
YouTubeで代表的な機能については紹介しています。
動画では以下のような内容を紹介しています。
- ページの作成方法
- プロンプトの記述例
- データとの接続方法
- 生成されたページの編集方法
まとめ
Generative page は、Power Apps におけるアプリ開発体験を大きく変革する可能性を秘めた機能です。自然言語と画像を活用することで、従来の手動設計に比べて迅速かつ直感的な UI 構築が可能になります。
制限事項を理解した上で、適切なユースケースに応じて活用することで、業務効率化やユーザー体験の向上に寄与します。今後も Microsoft からのアップデートや新機能の追加が期待されるため、継続的な情報収集と検証が重要です。
