GitHub Copilotを最大限に活用できていますか？毎回同じような指示をチャット欄に入力するのは、意外と手間がかかるものです。そこで活用したいのが、新しく登場した「プロンプトファイル」機能です。
この記事では、頻繁に使うプロンプトをファイル化して簡単に呼び出す方法と、Web制作の現場ですぐに役立つ具体的なプロンプト例を4つ紹介します。
プロンプトファイルの設定方法
まずは、独自のプロンプトファイルを作成・構成する手順を解説します。
Cmd + Shift + P（Windowsの場合はCtrl + Shift + P）でコマンドパレットを表示します。- 「Chat Configure Prompt Files」を入力し、「チャット: プロンプト ファイルの構成…」を選択します。
- 「＋新しいプロンプトファイル」を選択します。
- プロンプトファイルを保存する場所として「ユーザーデータ」を選択してください。
- ファイル名を入力します（例：
word-check）。
設定完了後、以下のディレクトリに設定ファイルが作成されます。
/Users/[ユーザー名]/Library/Application Support/Code/User/prompts/[プロンプトファイル名].prompt.mdファイルの中身を編集する
作成されたファイルを開くと、初期状態では以下のようなコードが記述されています。
---
agent: agent
---
Define the task to achieve, including specific requirements, constraints, and success criteria.この --- で囲まれた部分（フロントマター）で、使用するAIモデルやエージェントのモードを指定し、その下に具体的なプロンプト内容を記述します。
AIモデル入力について
モデル選択： フロントマターの model: の直後に、半角で「c」と入力すると、ドロップダウンメニューに「(copilot)」と付いた利用可能なモデルが表示されます。その中から使いたいモデルをエンターキーで選ぶだけで設定完了です。
「(copilot)」付きはなにが違う？
「通常のチャットでは(copilot)なんて付いていないけど？」と思うかもしれませんが、実は通常のチャット画面ですでに選んでいる「Claude Sonnet 4.6」や「GPT-5 mini」も、実体はこの(copilot)版と同じものです。プロンプトファイルの設定画面では、システム上の識別として(copilot)という名称が表示されています。
「通常のチャットでは(copilot)なんて付いていないけど？」と思うかもしれませんが、実は通常のチャット画面ですでに選んでいる「Claude Sonnet 4.6」や「GPT-5 mini」も、実体はこの(copilot)版と同じものです。プロンプトファイルの設定画面では、システム上の識別として(copilot)という名称が表示されています。
【設定例：誤字脱字チェック】
---
description: "誤字脱字チェック"
model: GPT-5 mini (copilot)
agent: agent
---
## タスク
開いているファイル/変更されたファイルを分析し、テキストに誤字脱字がないかチェックして修正してください
## 背景・文脈
コミット前の品質チェックとして、人間のレビュアーが見落としがちなタイポや不自然な表現を検出したい
作成後、GitHub Copilotのチャット欄で /（スラッシュ）に続けて設定したファイル名（例：/word-check）を入力すると、作成したプロンプトを瞬時に呼び出して実行できます。
Web制作で使えるおすすめプロンプト例 4選
【プロンプト利用に関するご注意】
本記事で紹介するプロンプトによって生成・修正されたコードは、必ずご自身で内容を確認した上で適用してください。プロンプトの利用により生じた不具合やトラブルについて、当メディアでは一切の責任を負いかねます。
本記事で紹介するプロンプトによって生成・修正されたコードは、必ずご自身で内容を確認した上で適用してください。プロンプトの利用により生じた不具合やトラブルについて、当メディアでは一切の責任を負いかねます。
Web制作の現場でよく発生するチェック作業を自動化するためのプロンプト例を紹介します。それぞれの .prompt.md ファイルにコピーして活用してください。
1. HTML/CSS命名規則チェック
プロジェクト独自の命名ルールが守られているかを確認します。
code-name-check.prompt.md
2. SCSS重複・冗長性チェック
レスポンシブ対応などで肥大化しがちなSCSSの無駄を削ぎ落とします。
code-scss-check.prompt.md
3. SCSS BEM記法チェック・修正
通常のSCSS記述を、BEMに基づいた効率的な記述へと自動修正します。
code-bem-check.prompt.md
4. コードレビュー自動化
セルフレビューの精度を高めるための指示です。
code-review.prompt.md
よくある質問
- プロンプトファイルはチームで共有できますか？
- はい、可能です。プロンプトファイルをプロジェクトのルートディレクトリにある
.github/prompts/フォルダに保存してGitで共有すれば、プロジェクトに関わるメンバー全員が同じプロンプトを利用できるようになります。 - プロンプトファイルの中で、通常のチャットのように「#file」や「#selection」などの変数（コンテキスト）を使って対象を指定できますか？
- 併用可能です。プロンプトファイル内に「#file:index.html」のように記述して特定のファイルを固定することもできます。ただし、今回紹介した実例のように「開いているファイル/変更されたファイル」と指示しておけば、Copilot側が自動的にアクティブなタブのコードをコンテキスト（文脈）として読み込んでくれるため、基本的にはファイルを固定せず汎用的に作っておくのが便利です。
- 複数のファイルを一度にチェックさせることは可能ですか？
- 可能です。プロンプト内で「現在開いているすべてのファイル」や、特定のディレクトリを指定することで、広範囲な分析を依頼できます。ただし、一度に送信できるデータ量には制限があるため、大規模なプロジェクトでは分割して指示を出すのが効率的です。
