【Microsoft×生成AI連載】シリーズの記事です。
本記事では、Microsoft Power Pagesで利用できるCopilot機能についてご紹介します。
- これまでの連載
- Microsoft Power Pagesとは
- Microsoft Power PagesでMicrosoft Copilotを使ってみた
- 利用シーン・メリット/デメリット・注意点
- まとめ
- おまけ(Copilot Chatによる本記事の要約)
これまでの連載
これまでの連載記事一覧はこちらの記事にまとめておりますので、過去の連載を確認されたい方はこちらの記載をご参照ください。
Microsoft Power Pagesとは
Microsoft Power Pagesは、ノーコード/ローコードでWebサイトを構築できるプラットフォームです。Power Platformの一部として、DataverseやPower Automateと連携し、業務アプリケーションやデータ駆動型サイトを簡単に作成できます。
- ローコードによるサイト構築可能
- Power Pages は、専門的なプログラミングスキルがなくても、直感的な操作で業務用ウェブサイトを作成できます。
- ドラッグ＆ドロップでコンテンツを配置できるため、誰でも簡単に始められます。
- デザインスタジオでの編集
- テンプレートを活用して、迅速にサイトの構造を構築できます。
- スタイルやレイアウトのカスタマイズも柔軟に行えます。
- セキュリティとアクセス管理が充実
- Microsoft Entra ID（旧 Azure AD）やローカルアカウントによる認証が可能です。
- ページやデータへのアクセス権限を細かく設定することができます。
- Dataverse との統合によりデータ管理が容易
- Power Pages は Microsoft Dataverse と連携しており、フォームやリストを通じてデータの入力・表示が可能です。
- データの保存や管理も効率的に行えます。
- レスポンシブデザインに対応
- 作成したサイトは、PC、スマートフォン、タブレットなど、さまざまなデバイスで快適に閲覧できます。
- 高度なカスタマイズが可能
- JavaScript や Liquid テンプレート言語を使って、より複雑な動作や表示を実現できます。
- API やカスタムコードの統合も可能です。
- 分析機能によりサイトの利用状況を把握
- Power BI などと連携することで、ユーザーの行動やデータの分析が可能です。
- サイトの改善に役立てることができます。
参照：Power Pages 機能 | Microsoft Learn
Microsoft Power PagesでMicrosoft Copilotを使ってみた
Power PagesでCopilotを利用すると自然言語で指示を出して操作し、効率的にWebサイトを構築することができます。
- サイト作成者向け
- ページやフォームの生成（マルチステップフォーム含む）
- テキストやカラーテーマのAI生成
- Copilotに質問してサポートを受ける
- 開発者向け
- AIによるコード生成（プレビュー）
- データ要約API（プレビュー）
- 管理者向け
- Copilot機能のオン/オフ制御
- ガバナンス設定で生成AI機能を管理
- エンドユーザー向け
- AIエージェントや検索コンポーネントの追加（プレビュー）
- フォーム入力支援や検索機能の強化
参照：Power Pages の AI 搭載機能と Copilot 機能の概要 | Microsoft Learn
Power Pagesで使用できるCopilotの機能をいくつか実際に使ってみて紹介します。
CopilotによるWebページ生成の自動化
Copilotを使って、テキストで指示するだけでページの骨組みを作成することができます。
まず、Power Pages ポータルのホーム画面でCopilotに指示してみました。
使用したプロンプトは以下のようになります。
製品紹介ページを作成してください。製品名は“Smart IoT Hub”、特徴は“クラウド連携、セキュリティ強化、簡単設定”です。ページには製品概要、特徴リスト、問い合わせフォームへのリンクを含めてください。ステップ1として、サイトの名前、Web アドレス、言語をCopilotが設定してくれましたが、Web アドレスは半角英数字とハイフンのみなので修正します。
修正してから「次へ」をクリックして、次のステップに進みます。
Copilotが生成したレイアウトを確認します。指示文通りに、ページには製品概要、特徴リスト、問い合わせフォームへのリンクを含めてレイアウトが生成されたことを確認できます。
「次へ」をクリックして、次のステップに進みます。
最後のステップとして、共通ページを追加します。Copilotから提案されたページの中で「製品概要」、「特徴」、「FAQ」をクリックして選択しました。
「完了」をクリックして、ページの作成を終了します。
以下のように、ページが作成されたことを確認できました。
Copilotによるデータ接続とフォーム作成支援
ページの作成に続いて、質問を収集するためのフォームを作成します。フォームを利用するためにはフォームのデータを保存するDataverse テーブルが必要なので、まずはそちらを作成していきます。
DataverseのテーブルもCopilotを利用して作成します。
Power Appsのテーブルで「新しいテーブル」 - 「新しいテーブルを作成する」をクリックします。
「Copilotで開始する」をクリックし、プロンプトを入力して「生成」をクリックします。
使用したプロンプトは以下のようになります。
以下の項目を保存するテーブル「CustomerForm」テーブルを作成する。
- 氏名
- メールアドレス
- 電話番号
- 問い合わせ内容
作成されたテーブルを確認します。
続きまして、Power Pagesで問い合わせフォームを配置するページを作成します。
「＋ページ」をクリックし、プロンプトを入力します。
使用したプロンプトは以下のようになります。
問い合わせフォームを配置するページを作成する。
新しいページが作成されたことを確認できます。
不要な内容もありましたので、一部を削除しました。今回は下記の部分が不要だったので削除しました。
※ 作成したページは必要に応じて文章の修正や不要な箇所の削除を行います。
データフォームを作成するために、右のCopilotから「データフォーム」をクリックします。
「新しいフォームを作成して」をクリックします。
作成するフォーム内容のプロンプトを入力します。
使用したプロンプトは以下のようになります。
顧客が問い合わせを入力するフォームを作成してください。
フォームには以下の項目を入力する。
- 氏名
- メールアドレス
- 電話番号
- 問い合わせ内容
データを格納するテーブルとして先ほど作成した「CustomerForm」テーブルを指定します。
※ 「新しいテーブルでフォームを作成」もできますが、以下のように項目名が正しくなったため、Dataverse テーブルを先に作成してからフォーム作成時にテーブルを選択する方をおすすめします。
以下のようにデータフォームが作成されたことを確認します。
フォームが氏名、メールアドレス、電話番号 / 問い合わせ内容の2ステップに分かれているので、「次のステップ」をクリックして確認します。
「フォームを維持する」をクリックして、保存します。
ページのプレビューを開いて、データを入力して送信してみました。
送信内容が問題なくDataverseのCustomerFormテーブルに登録されたことを確認できました。
Copilotによるカラーテーマの提案
Copilotを使用してサイトのカラーテーマを作成することができます。
Copilotウィンドウを開き、Copilotに指示します。
使用したプロンプトは以下のようになります。
紺色と黄色を基調にした、シンプルで信頼感のあるカラーテーマを提案してください。
Copilotがカラーテーマを提案します。色を選択して「テーマの適用」をクリックします。
サイトの全体的なカラーテーマが変更されたことを確認できます。
※ サイトのヘッダーのフォントの色などは以下のように「サイトヘッダーの編集」から修正できます。
サイト Copilot ボット
サイト内にCopilotボットを配置し、質問に答えることができます。
サイト Copilotを有効化するために、サイト右下のボットアイコンをクリックし、「コパイロットを有効化する」をクリックします。
設定ページが開くので、ここから「エージェントを作成する」を有効にします。
しばらく待機すると、エージェントが作成されます。
ナレッジとして利用するDataverseテーブルを指定するために、「データを絞り込む」の「変更する」をクリックします。
※ Dataverseテーブルは事前に作成しておいたものを利用しました。
「テーブルの選択」からDataverseテーブルを選択します。
ページリンク、参照するDataverseテーブルの列を選択します。
「完了」をクリックします。
「エージェントをテストする」をクリックして、エージェントをテストします。
英語で回答が返ってきますが、エージェントが動作することを確認できます。
Copilot Studioで作成したエージェントを確認・編集することができます。
プライマリ言語としては英語だけ使用できますが、セカンダリ言語として日本語を追加することができます。
セカンダリ言語を追加することで、日本語での回答ができました。
利用シーン・メリット/デメリット・注意点
利用シーン
- ビジネスサイトや顧客ポータルの構築
- Copilotを利用すると自然言語で指示して、ページやフォームを生成することができます。
- コンテンツ作成支援
- Copilotによるテキストやレイアウトの提案でページの内容生成を効率化することができます。
- チャットボットの追加
- 顧客対応やデータの収集を簡単に実装できます。
メリット/デメリット
メリット
- 直観的な操作
- 自然言語の指示に対応します。
- 時間効率の向上
- Copilotによる自動生成で作業時間を短縮することができます。
デメリット
- カスタマイズ制限
- 一部の機能や高度な機能はCopilotで対応できない場合があります。
- AIの精度
- Copilotが作成した結果は入力したプロンプト
注意点
- Copilotから作成されたコンテンツの確認
- Copilotが作成したテキストやフォームは必ずユーザーからレビューか必要です。
- AIのハルシネーション
- AIからの提案や情報は誤情報を含む可能性があるため、検証が必要です。
- プロンプトを具体的に作成
- 曖昧な指示では期待通りの結果を得られないため、要件を明確に伝える必要があります。
まとめ
本記事では、Power Pagesで使用できるCopilot機能について紹介しました。
Copilotを使用するとPower Pagesでサイトを作成する際に自然言語で指示するだけでページやフォームの作成、カラーテーマの提案、ボットの作成ができます。
Power PagesでCopilotを使用してサイトを作成する際に、参考になれば幸いです。
おまけ(Copilot Chatによる本記事の要約)
Power Pages概要
ノーコード/ローコードでWebサイト構築可能。
DataverseやPower Automateと連携。
セキュリティ、レスポンシブ対応、カスタマイズ性あり。Copilot機能の特徴
サイト作成者向け：ページ・フォーム生成、テキストやカラーテーマ提案。
開発者向け：コード生成（プレビュー）、データ要約API。
管理者向け：Copilot機能のオン/オフ、ガバナンス設定。
エンドユーザー向け：AIエージェントや検索機能追加。実際の利用例
製品紹介ページを自然言語で指示して自動生成。
Dataverseテーブル＋問い合わせフォーム作成。
カラーテーマ提案（例：紺×黄）。
サイト内Copilotボットで質問対応。メリット
自然言語で直感的操作。
作業時間短縮。デメリット・注意点
カスタマイズ制限あり。
AI精度に依存、誤情報の可能性。
プロンプトは具体的に。
作成結果は必ずレビュー。まとめ
Copilotを使うと、Power PagesでWebサイト構築が効率化され、フォームやテーマ、ボット追加も自然言語で簡単に実現可能。
