Power Appsの生成ページ（Generative pages）とは？作り方・制限と日本リージョンでの使い方

Power Appsの生成ページ（英語名 Generative pages）は、作りたい画面を自然言語で伝えると、モデル駆動型アプリの中で動くReactのページをAIが書き出す機能です。2025年7月にパブリックプレビューが始まり、同年11月5日に米国での一般提供（GA）が発表されました。ただし、ブラウザーで作れるのは米国・英国・オーストラリア・シンガポールの環境に限られ、日本リージョンの環境では別の作り方が必要です。この記事では、2026年10月2日に確認したMicrosoft Learnの生成ページの解説と公式リポジトリ（power-platform-skills）をもとに、仕組み・2つの作り方・コードの制約・使い分けまでを整理します。

まとめ：生成ページの要点（2026年10月時点）

• 生成ページはモデル駆動型アプリ専用。キャンバスアプリでは使えません。
• 出力はReact 17＋TypeScript＋Fluent UI v9の1ファイル。データは dataApi 経由でDataverseを読み書きします。
• 作り方は2通り。make.powerapps.com のブラウザー作成は米英豪星の環境＋英語プロンプト限定で、モデルはGPT-4.1のみ。GitHub Copilot CLIやClaude Codeなどのコード生成ツールから作る方法は全世界のパブリッククラウドで使え、Microsoftはこちらを推奨しています。
• 1ページに紐づけられるDataverseテーブルは6個まで。共同編集は不可。コネクタとカスタムAPIはプレビューです。
• 作成時に追加のAIクレジットは不要。利用者側には通常のモデル駆動型アプリと同じライセンスが要ります。

以下、仕組み→作り方→コード→運用→使い分けの順に解説します。

生成ページの仕組みと提供状況

生成ページは、モデル駆動型アプリの「ページ」の一種です。フォームやビューのように決まった型に当てはめるのではなく、エージェントがプロンプトと参照データから画面のコードを書き、アプリのサイトマップに1ページとして載せます。

生成されるコード：React 17・Fluent UI v9・dataApi

Learnの説明では、エージェントは画面のレイアウトと部品の選定に加え、業務ロジックまで含めたReactのコードを生成します。公式プラグイン（microsoft/power-platform-skills）のコード生成ルールを読むと、その中身はかなり限定されています。

• React 17＋TypeScript、コンポーネントやユーティリティはすべて1ファイルに収める
• 使えるライブラリはReact、Fluent UI v9（@fluentui/react-components）、Fluent UIのアイコン、グラフ用のD3.jsと、日付・時刻選択用の互換パッケージ（@fluentui/react-datepicker-compat など）のみ。React Routerなどのルーティングライブラリは使わない
• Dataverseの操作は、ホストから渡される dataApi オブジェクトの6メソッド（createRow・updateRow・deleteRow・retrieveRow・queryTable・getChoices）で行う

つまり、npmの任意のパッケージを足して機能を広げる使い方は想定されていません。プレビュー当初に「外部ライブラリと連携して拡張できる」と紹介された記事もありますが、現行の生成ルールでは許可リスト外のimportは書かない決まりです。グラフはD3、画面遷移は Xrm.Navigation.navigateTo、それ以外の処理はDataverse側（プラグインやカスタムAPI）に寄せる設計になります。

提供状況：GA日・対応リージョン・使えるAIモデル

GA告知は「GPT-5で動く」と書いていましたが、2026年9月25日更新のLearnは、ブラウザーの作成画面で選べるモデルを「現在はGPT-4.1のみ」としています。新しいモデルを使いたい場合はコード生成ツール側から作るよう案内が変わりました。リージョンについても公式文書の書き方がそろっていません。2026年のリリースプランは4月2日付で「世界の対応リージョンで作成・利用できる」としていますが、最新のLearnでブラウザー作成が使えると明記されているのは4地域だけで、全世界対応とされているのはコード生成ツール経由の作成です。AIの影響に関するFAQページには「米国の環境のみ」という古い記述も残っています。日本の環境で計画を立てるなら、更新日の新しいLearn本体ページを基準に、コード生成ツールでの作成を前提にしておくのが安全です。

2つの作り方：ブラウザー作成とAIコード生成ツール

どちらで作っても、出来上がるページは同じ種類です。違いは作業場所と、裏で動くAIモデルです。

日本リージョンの環境で開発しているなら、選択肢は実質コード生成ツール一択です。ブラウザー作成を試すためだけに米国リージョンの開発環境を別に作る方法もありますが、データの所在地の要件と衝突しやすく、本番の環境へはソリューションで運ぶことになるため、最初からコード生成ツールで組んだほうが手戻りが少なくなります。

ブラウザーで生成ページを作る手順（米英豪星の環境）

対象リージョンの環境を持っている場合の手順です。Learnの記載に沿って並べます。

1. make.powerapps.com にサインインし、モデル駆動型アプリを編集で開く
2. アプリデザイナーで［ページの追加］→［生成ページ］を選び、［Describe a page］を押す
3. 作りたい画面を英語で記述する（機能要件と、必要ならUIの指定。プロンプトは最大50,000文字）
4. ［Add data］→［Add table］でDataverseテーブルを最大6個まで追加する
5. 必要なら手書きのラフやワイヤーフレームの画像を添付する
6. ［Generate page］で生成し、プレビューを確認して［保存して公開］する

Learnが例に挙げるプロンプトは「Accountレコードをモダンなカードのギャラリーで表示し、上部に名前と画像、下にWebサイト・メール・電話番号を出し、スクロールできるようにする」というものです。表示する列と並べ方まで書くと、生成の当たり外れが減ります。

生成後の確認：Codeタブ・Compare・アクセシビリティアシスタント

生成は「考えの表示→コード生成→トランスパイル→描画」の順に進み、画面上で経過を追えます。生成後は［Code］タブでコードを読み、チャットで修正を頼むか［Edit］で直接書き換えます。2回目の反復からは［Compare］で前回との差分を確認できます。各反復の後には画面下部のアクセシビリティアシスタントがコードを検査し、［Auto fix］で違反をエージェントに直させることもできます。［Include images］（プレビュー）を有効にすると、AI生成ではなく約25,000点の厳選ストック画像から、プレースホルダーや背景の画像を選んで使います。

GitHub Copilot CLI・Claude Codeで生成ページを作る手順

日本リージョンの環境でも使える、Microsoftの推奨ルートです。必要なのはNode.js 18以降、最新のPower Platform CLI（PAC CLI）、そしてGitHub Copilot CLIかClaude Codeなどのコード生成ツールです。先にPAC CLIで対象環境に認証しておきます。

curl -fsSL https://raw.githubusercontent.com/microsoft/power-platform-skills/main/scripts/install.js | node

上はPower Platformのプラグイン一式を入れるインストーラーで、Windowsのコマンドプロンプトで実行します（PowerShell用のコマンドもLearnに載っています）。生成ページのプラグインだけを入れる場合は、次の2行をGitHub Copilot CLIまたはClaude Codeの中で実行します。

/plugin marketplace add microsoft/power-platform-skills
/plugin install model-apps@power-platform-skills

インストール後は /genpage コマンドを打つか、作りたいページを普通に説明するだけでプラグインが動きます。処理の流れは次のとおりです。

1. プランナーのエージェントが要件を読み、ページ数・使うテーブル・載せるアプリとソリューションを計画として提示する
2. 人が計画を確認・修正して承認する（ページ数やテーブル、配置先のアプリを変えられる）
3. テーブル作成役とページ作成役のエージェントが、TypeScriptとReactのコードと必要なテーブルを作る
4. pac model genpage upload などのPAC CLIコマンドで環境に配置・公開する
5. 任意で、生成したPlaywrightテストでブラウザー上の動作を確かめる

既存ページの修正は、ページ名（またはGUID）とアプリ名を伝えて取得させ、変更内容を自然言語で頼みます。壊れたら「直前の動く版に戻して」と頼めば、ツール側で差分を戻して再配置します。Claude Codeのプラグインの仕組み自体はClaude Codeプラグインの作り方と社内配布で、Claude Codeの導入はClaude Codeの使い方で解説しています。

ローカルに残る package.json と genpage.d.ts

コード生成ツールで作ると、作業フォルダに package.json（ページが前提とする依存関係）と genpage.d.ts（dataApi や pageInput の型宣言）が書き出されます。npm install を実行すればVS CodeのIntelliSenseで補完や型確認ができ、依存関係やホスト提供オブジェクトの型を解決できます。コード自体の型エラーがなくなるわけではありません。依存の版は、公式プラグインの一覧で react 17.0.2、@fluentui/react-components ^9.54.0、@fluentui/react-icons 2.0.326、グラフを使う場合の d3 ^7.8.5 です。

dataApiでDataverseを読み書きするコード

生成ページのデータ操作はすべて dataApi を通ります。読み取りの中心は queryTable で、OData形式の filter と orderBy、1ページあたりの件数 pageSize を渡します。続きは戻り値の loadMoreRows で取ります。

// 有効な取引先企業を名前順に50件ずつ取得する
const result = await dataApi.queryTable("account", {
  select: ["accountid", "name", "telephone1"],
  filter: "statecode eq 0",
  orderBy: "name asc",
  pageSize: 50,
});
let rows = result.rows;
if (result.hasMoreRows && result.loadMoreRows) {
  const next = await result.loadMoreRows();
  rows = rows.concat(next.rows);
}

// 取引先担当者を作成し、検索列で取引先企業にひも付ける（accountIdは取得済みのGUID）
const contactId = await dataApi.createRow("contact", {
  firstname: "Taro",
  lastname: "Yamada",
  "[email protected]": `/account(${accountId})`,
});

Learnは性能のため select で列を絞るよう推奨しています。省略すると全列が返ります。選択肢列のラベルは getChoices("account-accountcategorycode") のように「テーブル名-列名」で取得します。

生成コードを手で直すときに守る制約

［Edit］やローカルで手直しするときは、公式プラグインのルールに沿わないと実行時に崩れます。特に次の3点は、ルールに明記された既知の失敗パターンです。

• dataApi を useEffect の依存配列に入れない：ホストは描画のたびに新しい dataApi を渡し、ページを開くと約300ミリ秒差で2回マウントするため、取得が2重3重に走る。進行中のPromiseを window に置いて共有する
• フックを早期returnより下に置かない：読み込み中に早期returnする詳細ページで、初回だけReactのエラー#310が出る原因になる
• 100vh や position: fixed の全画面オーバーレイを使わない：プレビューはiframeで隔離されておらず、デザイナーのエージェント欄まで覆ってしまう

React 17は非同期関数内の setState をまとめないため、読み込み状態とデータを1つのstateで1回だけ更新する決まりもあります。手直しが増えるほど、こうした前提を踏み外しやすくなります。

フォームへの埋め込みとnavigateToでの画面遷移

生成ページは入力パラメーター recordId・entityName・data を受け取れます。プロンプトで「accountのrecordIdを受け取り、読み込み時にその取引先の詳細を表示する」のように頼むと、初期化コードが書かれます。

フォームに埋め込む場合は、フォームデザイナーの［コンポーネント］→［表示］→［生成ページ］から対象ページを選びます。レコードを開くと現在のレコードIDが自動で recordId に渡されるため、静的な値の設定は要りません。

リボンのボタンなどのクライアントスクリプトや別ページから開くときは、クライアントAPIの navigateTo に pageType: "generative" を指定します。target: 2 でダイアログ、position: 2 で右側のサイドダイアログになります。

Xrm.Navigation.navigateTo(
  {
    pageType: "generative",
    pageId: "<生成ページのGUID>",
    entityName: "account",
    recordId: accountId,
  },
  { target: 2, position: 1, width: { value: 70, unit: "%" }, title: "取引先の概要" }
);

この例はXrmを直接参照できるクライアントスクリプト向けです。生成ページのReactコードの中から別ページへ移るときは、コンポーネントのスコープにXrmが無いため (window as any).Xrm から取得します。ページのGUIDは、アプリデザイナーでページを選んだときのプロパティ欄［生成ページ］に表示されます。

ソリューションでの環境間移行とApplication Insightsでの監視

環境間移行の対象：最初のプロンプトと公開済みコード

生成ページはソリューション対応です。ページを含むモデル駆動型アプリをソリューションに追加し、サイトマップを含めてエクスポートすると、生成ページは「UX Agent Project」の行として依存関係チェックで要求されます。移行先の環境で開けるのは、最初のプロンプトと公開済みのコードだけで、エージェントとの会話履歴は元の環境に残ります。移行先で「さっきの続きで直して」と頼んでも経緯は伝わらないため、要件の変更点はプロンプトに書き直す前提で運用してください。

プレビュー期間に作ったページは、一度アプリデザイナーで開いて「Upgrading your page」の移行を完了させないと、エクスポートの依存関係に出てきません。

Application Insightsへ自動で出るテレメトリ（プレビュー）

管理者がPower Platform管理センターで環境のApplication Insightsエクスポートを設定すると、公開済みの生成ページのテレメトリが自動で送られます。ページ側にSDKや接続文字列を書く必要はありません。

生成コードの品質は保証されないとLearn自身が明記しているため、本番に出すページほど exceptions と dependencies の推移を見て、遅いクエリや例外を拾う運用が向いています。

制限事項：テーブル6個・対応データ型・共同編集

2026年9月25日更新のLearnに載っている制限をまとめます。

対応するデータ型は、選択肢・通貨・顧客・日付と時刻・日付のみ・10進数・浮動小数点数・画像・検索・複数行テキスト・状態・状態の理由・テキスト・整数・はい/いいえ・一意識別子の16種類です。ファイル列や複数選択の選択肢列は一覧にないため、それらを扱う画面は従来のフォームかカスタムページで作ることになります。

画面の文言は自動では日本語になりません。ブラウザー作成の場合は、対応言語（言語名とLCID）と翻訳辞書の作成をプロンプトで指示します。コード生成ツールのプラグインは、環境で有効な言語を検出して自動で多言語対応のコードを書きます。どちらの場合もサイトマップ上のページ名は別途アプリデザイナーで翻訳が必要です。

カスタムページ・コードアプリとの使い分け

モデル駆動型アプリに独自の画面を足す手段は、生成ページのほかにもあります。判断の軸は「誰が保守するか」と「画面がどこで動くか」です。

カスタムページはキャンバスアプリの部品と式でページを作る機能で、ランタイムやALM、コネクタまでGAです。保守担当がPower Fxに慣れた市民開発者なら、こちらのほうが後から直しやすくなります。コードアプリは管理環境の中で動く独立したWebアプリで、フレームワークを自由に選べる代わりに、利用者にはPower Apps Premium（または従量課金制・App Pass）のライセンスが必要です。モデル駆動型アプリとキャンバスアプリの基本の違いはPower Appsとは？できること・料金で整理しています。

生成ページを選ばないほうがよい場面

次のどれかに当てはまるなら、生成ページは採用しません。

• 保守する人がReactを読めない：生成コードは「本番品質の保証なし」とLearnが明記している。直すたびにエージェント任せになり、意図しない改変を検証できない
• 複数人で同じ画面を並行して作る：共同編集は非対応で、同時に1人しか触れない
• 7個以上のテーブルを1画面で横断する：上限6個。ビューやロールアップ列で手前に集約するか、画面を分ける
• ファイル添付や複数選択の列が主役の画面：対応データ型の一覧にない

逆に、営業や問い合わせ対応のアプリで「標準のビューやフォームでは見づらいカンバンやダッシュボードを1枚だけ足したい」という場面は、生成ページの採用候補です。既存のモデル駆動型アプリを壊さずにページ単位で足せるのが利点です。

ライセンスと費用

生成ページを作る操作そのものに追加料金はかかりません（Learnのよくある質問）。主な費用はアプリ利用者のライセンスです。生成ページはモデル駆動型アプリのページで、モデル駆動型アプリはDataverseを前提とするため、利用者にはPower Appsのプレミアム利用権が必要です。代表はPower Apps Premiumと従量課金制で、Dynamics 365のライセンスに含まれる利用権が使える場合もあります（範囲はライセンスガイドで確認してください）。

公式の価格ページは、開発者プランでアプリの構築とテストはできるが、運用環境でアプリを動かすには有料ライセンスが要ると説明しています。このほか、コード生成ツールで作る場合はGitHub CopilotやClaude Codeの利用料が、Application Insightsで監視する場合はAzure側の料金が別途かかります。価格は改定されるため、契約前に公式の価格ページで確認してください。

よくある質問

Power Appsの生成ページは一般提供（GA）されていますか？

はい。リリースプラン上のGA日は2025年10月30日で、公式ブログが11月5日に米国の環境での一般提供を発表しました。2026年9月25日更新のLearnでは、ブラウザーでの作成は米国・英国・オーストラリア・シンガポールの環境で使え、コード生成ツールからの作成は全世界のパブリッククラウドで使えると記載されています。コネクタ、カスタムAPI、Application Insightsのテレメトリは引き続きプレビューです。

日本リージョンの環境や日本語のプロンプトで使えますか？

make.powerapps.com のブラウザー作成は、日本リージョンの環境では使えず、プロンプトも米国英語のみです。日本の環境では、GitHub Copilot CLIやClaude Codeに公式プラグイン（model-apps@power-platform-skills）を入れ、PAC CLIで環境に配置する方法を使います。こちらはリージョンの制約がなく、指示の言語もツール側に依存します。

キャンバスアプリでも生成ページを使えますか？

使えません。Learnのよくある質問は、生成ページは現在モデル駆動型アプリでのみサポートされると明記しています。キャンバスアプリの式や部品で作った画面をモデル駆動型アプリに持ち込みたい場合は、生成ページではなくカスタムページが該当します。

生成ページを作るのに追加料金やAIクレジットはかかりますか？

Learnのよくある質問は、生成ページ（とプラン）の作成体験に追加のAIクレジットやメッセージクレジットは不要としています。ただし、コード生成ツールから作る場合はGitHub CopilotやClaude Codeの利用料が別にかかります。アプリを使う人には、通常のモデル駆動型アプリと同じPower Appsのライセンスが必要です。

Power AppsでReactやJavaScriptのコードを直接書けますか？

生成ページでは、生成されたReact（TypeScript）のコードを［Code］タブの［Edit］で直接編集でき、保存すると新しい反復として残ります。ただしimportは公式の許可一覧に限られます。React／React DOM、Fluent UI v9とアイコン、D3に加え、日付・時刻の選択には専用の互換パッケージを使います。フレームワークを自由に選んで1つのWebアプリを書きたい場合は、Power Appsのコードアプリが受け皿です。

関連記事

• Power Appsとは？できること・料金と画像認識を組む4つの手段
• Power AppsとPower Automateの違いとは？成果物・起動条件・ライセンス境界で選び分ける
• Power Platformとは？5つのサービス・できること・料金と内製の判断まで解説
• Power AppsのYAML(.pa.yaml)から設計書を自動生成する方法
• Claude Codeプラグインの作り方と社内配布｜marketplace.json・管理設定【2026年9月版】