どうも、株式会社ソフトクリエイト で情報屋やってます。山口です。
普段は企業様向けに Microsoft 365 活用のご支援をおこなっています。
「社内向けのちょっとしたポータルサイトがほしいけど、作る時間も人もいない…」そんなお悩み、ありませんか？ FAQやお知らせ、問い合わせ窓口をまとめたヘルプデスクサイトは、あると便利なのに後回しになりがちですよね(^^;
そんな中、Microsoft 365 Copilot に「コード」が選択できるようになりました。そこで今回は、このコード機能を使って、社内向けの「IT Help Desk」サイトをプロンプト1つで作成し、公開して、さらに Microsoft 365 管理センターでどう見えるのかまで、実際に試してみた流れをご紹介します。
⚠ 試す前に知っておいてほしいこと
・Copilot Code は 2026/10/26 現在、Frontier プログラムのプレビュー機能です。提供状況や機能は今後変わる可能性があります。
・サイトの作成や利用（アクセス）で Copilot Credits を消費すること が前提になります。
・Code の管理設定は、2026/10/26 現在、機能的にはまだ足りていないと感じています。特に「コード」の利用者や、公開サイトの 管理者承認機能 は必要だと考えています。
Copilot アプリの「コード」で社内サイトを作ってみた！～プロンプト1つで「IT Help Desk」ポータルを作成・公開するまで～
■ そもそも Copilot Code（コード）って？
Microsoft 365 Copilot の［コード］タブを使うと、組織内のユーザーが自分のデバイスまたはクラウドで、プレーンな言葉の説明から動作するソフトウェアを構築できるとされています。つまり、「こんなアプリを作って」と日本語でお願いするだけで、HTML/CSS/JavaScript のアプリが組み上がり、そのまま公開までできてしまうわけです。
Copilot アプリの画面上部には「チャット」「Cowork」と並んで「コード」が表示されるようになっていて、気軽に切り替えて使えます。一方で、作ったアプリは組織内に公開でき、Copilot Credits も消費するので、管理者側の目線もセットで押さえておくのが大事です。
■ 前提条件
| 項目 | 内容 |
|---|---|
| プログラム | Frontier プレビュー プログラムへの参加が必要（プレビュー機能） |
| ライセンス | Microsoft Copilot のライセンスで Copilot Code の利用可否が制御されます（必要なライセンス種別はテナントにより要確認） |
| 組織設定 | ライセンスと組織レベルの設定の両方が有効になって初めて［コード］タブが表示されます |
| 課金 | サイトの作成・利用で Copilot Credits を消費します。管理者は支出ポリシーやユーザーごとの支出制限を設定できます |
| サインイン | Microsoft Entra（職場）アカウント |
| 提供状況 | テナント・時期により表示や項目名が異なる場合があります（要確認） |
■ 手順
◆ フェーズ1｜アプリを作成する
STEP 1：Copilot アプリで「コード」を選択する
Microsoft Copilot アプリ（ブラウザー版）を開き、左上の「チャット」「Cowork」「コード」の切り替えから「コード」を選択します。「一緒に何かを構築しましょう。」という画面が表示され、中央の入力欄に作りたいものを書いていく形です。右上に「FRONTIER」の表示があるのもポイントですね。
図1：Copilot アプリで「コード」を選択する
STEP 2：プロンプトを入力して送信する
入力欄に、作りたいサイトの内容をプロンプトとして入力し、右下の送信ボタン（↑）をクリックします。今回使ったプロンプトは次のとおりです。そのままコピーして使えるよう全文を載せておきます。
社内向け「IT Help Desk」アプリを構築してください。
HTML/CSS/JavaScriptを基本とし、PC・タブレット・スマートフォンで利用できるレスポンシブなアプリとして完成させてください。
## 目的
社内従業員が、PC、Microsoft 365、アカウント、ネットワーク、セキュリティなどのITトラブルについて、「探す → FAQで自己解決する → 解決しなければ問い合わせる」という流れで利用できるサポートポータルにします。
サイト名：IT Help Desk
サブタイトル：情報システム部 サポートポータル
Microsoft 365 / Fluent Designを参考に、白・ライトグレー・ブルーを基調とした、シンプルで信頼感のあるUIにしてください。
## 画面構成
### 1. ホーム
メインメッセージ：
「ITのお困りごとは、こちらから。」
説明：
「パソコン、Microsoft 365、ネットワーク、アカウントなど、社内ITに関する疑問やトラブルをサポートします。」
次の2つの主要ボタンを表示してください。
- フォームで問い合わせる
- Teamsで相談する
今回はデモのため、両方とも以下のURLを新しいタブで開いてください。
[デモ用リンク](https://www.softcreate.co.jp/rescue/microsoft/yamaguchi/list)
画面上には小さく「デモ用リンク」と表示してください。
URLは設定値として一元管理し、後からMicrosoft FormsとMicrosoft Teamsの実URLへ簡単に変更できるようにしてください。
### 2. お困りごとから探す
次の6カテゴリーをアイコン付きカードで表示してください。
- アカウント・パスワード
- Outlook・メール
- Teams・Microsoft 365
- PC・周辺機器
- ネットワーク・VPN
- セキュリティ
カードを選択するとFAQへ移動し、そのカテゴリーで自動的に絞り込んでください。
### 3. FAQ
FAQはアコーディオン形式にし、キーワード検索とカテゴリーフィルターを実装してください。
以下を含む一般的なFAQを10件程度用意してください。
- パスワードを忘れた
- 多要素認証が利用できない
- Outlookでメールを受信できない
- Teamsにサインインできない
- OneDriveが同期しない
- PCが起動しない
- Wi-Fiに接続できない
- ソフトウェアを追加したい
- 不審なメールを受信した
- PCを紛失した
回答は一般的な内容に限定し、会社固有の設定・連絡先・運用ルールを創作しないでください。
検索結果が0件の場合は問い合わせ方法を案内してください。
### 4. お知らせ
情報システム部からのお知らせを表示します。
カテゴリー：
- メンテナンス
- システム障害
- セキュリティ情報
- Microsoft 365関連
- その他
今回は架空のお知らせを作成せず、初期状態では「現在、公開されているお知らせはありません。」と表示してください。
### 5. お問い合わせ
次の2つをカード形式で表示してください。
**フォームから問い合わせ**
問い合わせ内容を整理して送信したい場合はこちら。
**Teamsチャネルで相談**
ITに関する質問や相談をチャネルで行う場合はこちら。
今回は両方とも前述のデモURLを使用してください。
### 6. 緊急時の案内
PC紛失、アカウント不正利用、マルウェア感染、情報漏えいなどの場合は、通常の問い合わせとは別に、組織が定める緊急連絡手段を利用する必要があることを表示してください。
実際の連絡先は未指定なので、電話番号、メールアドレス、担当者などを創作しないでください。
FAQやお知らせを後から簡単に追加・変更できる構造にしてください。
図2：プロンプトを入力して送信する
STEP 3：アプリが作成され、プレビューを確認する
送信してから約5分でアプリが作成され、画面右側にプレビューが表示されました。チャット側には「確認したこと」「残っていること」として、コードチェックの結果や、URLの差し替えなど次にやるべきことも整理して返してくれます。
図3：アプリが作成されてプレビューが表示される
◆ フェーズ2｜動作確認と公開
STEP 4：「アプリで開く」で実際の画面を確認する
プレビュー上部の「アプリで開く」アイコンをクリックすると、別タブでアプリが開きます。
図4：「アプリで開く」をクリックする
ヘッダー、ナビゲーション、「ITのお困りごとは、こちらから。」のメインメッセージ、2つの問い合わせボタン、「探す → FAQで自己解決 → 問い合わせる」の3ステップまで、プロンプトで指示した内容がしっかり反映されています。
図5：作成された IT Help Desk サイト
STEP 5：「公開」で最新の変更を公開する
内容に問題がなければ、プレビュー上部の「公開」（最新の変更を公開）をクリックします。
図6：「公開」をクリックする
2～3分程度で公開処理が完了し、「アプリが公開されました」と表示されます。変更内容は、このアプリにアクセスできるすべてのユーザーが利用できるようになります。ここから「アプリを開く」や「共有」も行えます。
図7：アプリが公開された
◆ フェーズ3｜管理センターで確認する
STEP 6：管理センターで公開したアプリを確認する
Microsoft 365 管理センターの「アプリ」＞「すべてのアプリ」を開くと、「マネージド アプリ」タブに今回作成した「IT Help Desk」が表示されました。所有者、状態（Active）、場所、環境グループ、作成日が確認できます。
図8：管理センターの「すべてのアプリ」で確認する
STEP 7：Copilot ＞ Code でコストや使用状況を確認する
コストの確認などは、管理センターの「Copilot」＞「Code」画面で行うようです。Copilot Code の概要として、Copilot 対象ユーザー数、コード が有効なユーザー数、アクティブな コード ユーザー数が表示され、「支出ポリシーを管理」から使用量ベースの課金の設定へ進めます。「使用量」タブもあります。
図9：管理センターの Copilot ＞ Code 画面
◆ プロンプトを書くときのコツ
今回のプロンプトは、ただ「ヘルプデスクサイトを作って」とお願いするのではなく、いくつかの工夫を入れています。分解すると次のとおりです。
| 工夫 | プロンプトでの書き方 |
|---|---|
| 目的と利用の流れを書く | 「探す → FAQで自己解決する → 解決しなければ問い合わせる」という流れを明示 |
| 画面構成を見出しで分ける | ## や ### で6つの画面ごとに表示内容を指定 |
| デザインの方向性を伝える | Microsoft 365 / Fluent Design を参考に、白・ライトグレー・ブルー基調 |
| 創作させない範囲を決める | 会社固有の設定・連絡先・運用ルール、架空のお知らせ、電話番号などを創作しないよう明記 |
◆ 注意点とよくあるつまずき
| こんなとき | ポイント・対処 |
|---|---|
| ［コード］タブが表示されない | Frontier プログラムへの参加、ライセンス、組織レベルの設定の両方が必要です。管理者に確認しましょう |
| コストが気になる | 作成・利用で Copilot Credits を消費します。管理センターの Copilot ＞ Code で使用状況を確認しましょう |
| 公開前にチェックしたい | 2026/10/26現在、公開サイトの管理者承認機能は見当たりません。社内ルールで公開前の確認フローを決めておくのがおすすめです |
■ まとめ
今回は、Copilot アプリの「コード」を使って、社内向けの IT Help Desk サイトを作成・公開し、管理センターでの見え方まで確認してみました。プロンプトを送ってから約5分でアプリができあがり、公開も2～3分程度で完了と、想像以上にあっという間でした。
ただ、Frontier プログラム中のプレビュー機能であること、作成や利用で Copilot Credits を消費すること、そして利用者の制御や公開サイトの管理者承認といった管理機能がまだ足りないと感じる点は、組織で展開する前にしっかり押さえておきたいところです。
まずは検証用に小さく試しつつ、管理センターでの使用量や支出ポリシーもあわせて確認してみてください。
