https://blog.jbs.co.jp/entry/2026/03/25/085732

【Microsoft×生成AI連載】シリーズです！

今回は、Microsoft Copilot Studio（以下、Copilot Studio）のエージェントで利用できるアダプティブカードを作成する際に、Microsoft 365 Copilot Chat（以下、Copilot Chat）を活用できるか試してみました。

なお、アダプティブカードについては下記記事を併せてご確認いただけますと幸いです。

blog.jbs.co.jp

これまでの連載

これまでの連載記事一覧はこちらの記事にまとめておりますので、過去の連載を確認されたい方はこちらの記事をご参照ください。

blog.jbs.co.jp

Copilot Studioのアダプティブカードのカスタマイズ

Copilot Studioでは、画面上で要素をドラッグアンドドロップするだけで、直感的にアダプティブカードを作成できます。そのため、初心者でも分かりやすく作業を進めることが可能です。

一方で、入力項目の細かなカスタマイズを行う場合は、画面上の設定箇所を一つずつ変更していく必要があります。操作に慣れていない場合、修正に時間を要してしまうことも少なくありません。

アダプティブカードはJSON形式で構成されているため、JSONを直接編集することも可能です。しかし、構造を理解していないと編集が難しく、直感的に編集はできないため、初心者にとってはハードルが高い方法と言えます。

そこで本記事では、Copilot Chatを活用して、文章や画像から作成したいアダプティブカードを指定し、修正後のアダプティブカード用のJSONを生成できるかを試してみました。

文章で説明して作成

まずは「作成済みのアダプティブカードをカスタマイズする」というシナリオを想定します。

どのような変更を行いたいのかをCopilot Chatに文章で説明して、修正できるかを試してみます。

今回は名前を入力し、好きな色を選択して送信するアダプティブカードを用意しました。

好きな色では、「赤」「青」「緑」の3つが選択できます。

これに対して、「名前」の入力項目タイトルを「氏名」に、「名前」を入力する枠内に灰色で表示される入力項目の説明を「氏名の間にスペースを入れずに入力してください」に変更します。

また、好きな色の選択肢から「青」を外し、「黄色」と「白」を追加してみます。

まずはCopilot Studioのアダプティブカードの編集画面から、画面下部の「カードペイロードエディター」をすべて選択しコピーします。

Copilot Chatで、修正したい内容と「カードペイロードエディター」からコピーしたJSONを下記のように記載して送信します。

アダプティブカードを編集したいです。下記のJSONを、修正項目に沿って修正してください。

・「名前」の入力項目タイトル　→　「氏名」に変更
・「名前」の入力項目の説明　→　「氏名の間にスペースを入れずに入力してください」に変更
・「好きな色」の選択肢　→　「青」を外し、「黄色」と「白」を追加

{
    "type": "AdaptiveCard",
    "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.5",
    "body": [
        {
            "type": "Input.Text",
            "label": "名前",
            "placeholder": "名前を入力",
            "id": "Name"
        },
        {
            "type": "Input.ChoiceSet",
            "choices": [
                {
                    "title": "赤",
                    "value": "red"
                },
                {
                    "title": "青",
                    "value": "blue"
                },
                {
                    "title": "緑",
                    "value": "green"
                }
            ],
            "placeholder": "好きな色を選択",
            "label": "好きな色",
            "id": "Color"
        },
        {
            "type": "ActionSet",
            "actions": [
                {
                    "type": "Action.Submit",
                    "title": "決定"
                }
            ]
        }
    ]
}

Copilot ChatがJSONコードを生成するのでコピーします。コードの枠内にカーソルを合わせると右上にツールバーが表示されるので、一番左のアイコンをクリックするとコピーされます。

Copilot Studioのエージェント編集画面に戻り、コピーしたJSONを「カードペイロードエディター」に上書きすると、画面上部のアダプティブカードが変更されることが確認できます。「名前」が「氏名」に変更されており、説明も修正されています。

選択肢も想定通りに変更されました。

画像から作成

続いて、「他エージェントで表示されたアダプティブカードを再現したい」というシナリオを想定します。

ここでは、スクリーンショットからJSONを作成できるかを試してみます。

今回はレビュー対象となるファイルのURLと、レビュー観点となるファイルのURLをテキストで入力して送信するアダプティブカードを作成対象とします。

まずはCopilot Studioでアダプティブカードを新規作成します。編集画面から、何も編集していない状態で画面下部の「カードペイロードエディター」をすべて選択しコピーします。

Copilot Chatで、作成したいアダプティブカードのスクリーンショットを添付して、「カードペイロードエディター」からコピーしたJSONを下記のように記載して送信します。

画像のアダプティブカードを再現したいです。下記のJSONに追記する形式で作成してください。

{
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.5",
    "body": []
}

Copilot ChatがJSONコードを生成するのでコピーします。

Copilot Studioのエージェント編集画面に戻り、コピーしたJSONを「カードペイロードエディター」に上書きすると、画面上部のアダプティブカードがスクリーンショットのアダプティブカード通りとなりました。

利用シーンとメリット、注意点

利用シーン

Copilot Studioのエージェントでアダプティブカードを作成する際に利用できます。

アダプティブカードのデザイン変更がCopilot Chatで行えるため、アダプティブカードを初めて作成する開発者でも手軽に様々なデザインを試すことが可能です。

メリット

アダプティブカードをより効率的に作成できます。

特に画像からJSON形式の作成ができるため、他エージェントの良いアダプティブカードデザインを取り入れたい場合に、再現する時間を短縮できることが見込まれます。

注意点

画像からアダプティブカードを作成する方法では、Copilot Studioで作成されたアダプティブカードだけでなく、Webサイトや業務システムで使用されているフォームなど、アダプティブカード以外のUIを元に再現することも可能です。

ただし、アダプティブカードには元のフォームと完全に一致する入力要素が用意されていない場合もあり、画面を完全に再現できない可能性があります。

そのような場合はCopilot Chatとやり取りしながら調整を行い、より理想に近いアダプティブカードになるよう修正してください。

また、生成されたJSONには誤りが含まれる場合があります。アダプティブカードに適用してから、必ず動作確認を行ってください。

まとめ

Copilot Chatを活用することで、より短時間でCopilot Studioのアダプティブカード作成を行うことができるようになります。

Copilotを活用して、仕事効率を向上させていきましょう！

おまけ（Copilot Chatによる本記事の要約）

本記事ここまでの執筆内容をCopilot Chatに転記し、記事内容の要約をしてもらいました。

記事要約

本記事は【Microsoft×生成AI連載】の一環として、Copilot Studioのエージェントで利用するアダプティブカードを、Microsoft 365 Copilot Chat（Copilot Chat）を使って効率的に作成・編集できるかを検証した内容です。

背景・目的

Copilot StudioではGUI操作でアダプティブカードを作成できますが、入力項目や選択肢の細かなカスタマイズにはJSON編集が必要となり、慣れていない場合は手間がかかります。そこで、Copilot Chatに指示することでアダプティブカード用JSONを生成・修正できるかを試しています。

検証内容1：文章によるJSON修正

既存のアダプティブカード（名前入力＋好きな色の選択）を例に、

ラベル名の変更

入力欄の説明文（placeholder）の変更

選択肢の追加・削除

をCopilot Chatに文章で指示。

Copilot Studioの「カードペイロードエディター」からコピーしたJSONをCopilot Chatに渡すことで、指示通りに修正されたJSONが生成され、実際にCopilot Studioへ貼り戻すと想定通りにカードが更新されることを確認。

検証内容2：画像（スクリーンショット）からJSON生成

他エージェントで表示されているアダプティブカードを再現する想定で、

スクリーンショット画像

空のアダプティブカードJSON

をCopilot Chatに渡して生成を依頼。

Copilot Chatが画像内容を読み取り、見た目通りのアダプティブカードJSONを生成できることを確認。

利用シーン

Copilot Studioのエージェント開発におけるアダプティブカード作成・デザイン調整。

アダプティブカードに不慣れな開発者でも、Copilot Chatを使って試行錯誤しやすい。

メリット

JSONを手作業で書かずに済み、アダプティブカード作成を効率化できる。

特に画像からJSONを生成できる点は、既存カードデザインの流用・再現に有効。

注意点

Copilot Chatが生成するJSONには誤りが含まれる可能性があるため、必ずCopilot Studio上で動作確認が必要。

まとめ

Copilot Chatを活用することで、Copilot Studioにおけるアダプティブカード作成・カスタマイズを短時間で行えるようになり、開発効率の向上が期待できる、という結論です。