GitHub Copilotのカスタム指示でWeb制作を自動化｜プロジェクト固有ルール設定で開発高速化

Q: 既存のプロジェクトに後から追加できますか？

はい、いつでも追加できます。.github/prompts/ディレクトリを作成して、カスタムコマンドファイルを追加するだけです。

2026年3月2日

生徒

GitHub Copilotを使っているんですが、毎回同じ指示を出すのが面倒で…プロジェクトのルールを覚えさせる方法はないでしょうか？

ペン博士

よーく聞くんだぞ。GitHub Copilotのカスタム指示機能を使えば、プロジェクト固有のルールを一度設定するだけで、チーム全体で統一されたコードを自動生成できるんじゃ。今日はこの強力な機能を詳しく解説するぞい！

GitHub Copilotのカスタム指示を使えば、プロジェクト固有のルールを.github/prompts/ディレクトリのMarkdownファイルに一度定義するだけで、毎回の繰り返し指示が不要になります。コンポーネント生成・SEOチェック・API設計書作成など頻繁な作業を自動化でき、開発時間を50%以上削減できます。

GitHub Copilotのカスタム指示とは

GitHub Copilotのカスタム指示（カスタムコマンド）は、プロジェクト固有のルールや指示を事前に定義しておき、何度でも呼び出せる機能です。

カスタム指示の動作フロー

【カスタム指示の動作フロー】

1. プロジェクトに.github/prompts/ディレクトリを作成
   ↓
2. カスタムコマンドをMarkdownファイルで定義
   例：review-code.md、generate-docs.md
   ↓
3. ファイルにYAMLメタデータと指示内容を記述
   ↓
4. GitHub Copilot Chatでコマンドを呼び出す
   例：@workspace /review-code
   ↓
5. 定義された指示に従ってCopilotが動作
   ↓
6. プロジェクトルールに準拠したコードが生成される

【従来のCopilotとの違い】
✅ カスタム指示：
  - プロジェクト固有のルールを適用
  - 毎回同じ指示を繰り返さなくて良い
  - チーム全体で統一されたコード生成

❌ 従来のCopilot：
  - 一般的な規約に基づく生成
  - 毎回詳細な指示が必要
  - プロジェクトによって品質がバラバラ

カスタム指示の3つの特徴

一度の設定で何度でも使用可能：カスタムコマンドを一度定義すれば、プロジェクト全体で何度でも呼び出せる。コードレビュー・ドキュメント生成・テストコード作成など、頻繁に行う作業を自動化できる
チーム全体でフォーマットを統一：カスタムコマンドはGitリポジトリで管理されるため、チームメンバー全員が同じルールでコードを生成できる。新メンバーが参加してもすぐにプロジェクト規約に準拠したコードを書ける
プロジェクトに必要なコマンドを自由に追加：Web制作なら「コンポーネント生成」「API設計」「SEO対策チェック」など、独自のコマンドを制限なく作成できる

カスタム指示 vs 従来のCopilot：徹底比較

項目	従来のCopilot	カスタム指示あり
指示の手間	毎回同じ指示を入力	コマンド1つで呼び出し
コードの一貫性	メンバーごとにバラつき	チーム全体で統一
新メンバー教育	規約を覚えるのに時間がかかる	コマンドを使うだけで規約準拠
レビュー時間	フォーマットチェックに時間	自動チェックで本質に集中
ドキュメント作成	手動で作成（時間がかかる）	コマンドで自動生成
プロジェクト管理	個人の記憶に依存	リポジトリで一元管理

カスタム指示で解決できる5つの課題

課題1：毎回同じ指示を繰り返す手間

従来の方法：

毎回Copilot Chatに指示：
「このプロジェクトではReact + TypeScript + Tailwind CSSを使用しています。
コンポーネント名はPascalCaseで、
propsの型は必ずインターフェースで定義してください。
コメントは日本語で書いてください。」

→ 毎回入力するのが面倒

カスタム指示を使った場合：

一度カスタムコマンドを定義：
/generate-component と入力するだけ

→ 自動的にプロジェクトルールに従ったコンポーネントが生成される

課題2：チーム内でコーディング規約がバラバラ

各メンバーが異なる書き方をすると、コードレビューで指摘が多くなり、品質が不安定になります。カスタム指示をリポジトリで共有すれば、チーム全員が同じルールでコードを生成でき、コードの一貫性が保たれます。

課題3：新メンバーの教育に時間がかかる

新しいメンバーがプロジェクトに参加した際、コーディング規約を覚えるのに時間がかかります。カスタム指示があれば、新メンバーもすぐにプロジェクトの規約に準拠したコードを書けます。教育コストを大幅に削減できます。

課題4：コードレビューに時間がかかる

フォーマットや命名規則のチェックに時間を取られ、本質的なロジックのレビューに集中できません。カスタム指示で自動的にレビューポイントをリスト化できれば、レビュー時間を50%以上削減できます。

課題5：ドキュメント作成が後回しになる

コーディングに集中して、README作成やAPI仕様書作成が後回しになりがちです。カスタム指示で「ドキュメント生成」コマンドを作れば、コードからドキュメントを自動生成でき、常に最新のドキュメントを維持できます。

実践！カスタム指示の設定方法（4ステップ）

ステップ1：ディレクトリを作成

プロジェクトのルートディレクトリに、.github/prompts/ディレクトリを作成します。

# ターミナルで実行
mkdir -p .github/prompts

# ディレクトリ構造
your-project/
├── .github/
│   └── prompts/
│       ├── review-code.md
│       ├── generate-docs.md
│       └── create-test.md
├── src/
└── package.json

ステップ2：カスタムコマンドファイルを作成

.github/prompts/ディレクトリ内に、Markdownファイルを作成します。

【ファイル例：review-code.md】

---
agent: code
model: gpt-4
tools: [context, shell]
description: コードをレビューして問題点をToDoリストにまとめます
---

# コードレビュー

選択されたコードを以下の観点でレビューし、
問題点をToDoリストにまとめてください。

## レビュー観点

1. **バグ**: ロジックエラー、例外処理の不足
2. **設計**: コードの構造、適切な責任分担
3. **セキュリティ**: SQL injection、XSS等の脆弱性
4. **テスト**: テストケースの不足
5. **可読性**: 変数名、コメント、フォーマット

## 出力形式

以下の形式でToDoリストを作成してください：

### [カテゴリ名]
- [ ] 問題の詳細説明
  - ファイル: `ファイル名:行番号`
  - 推奨対応: 具体的な修正案

ステップ3：YAMLメタデータの設定

ファイルの先頭に、YAMLメタデータを記述します。

【YAMLメタデータの項目】

agent: code | workspace | chat
  - code: コード生成・編集
  - workspace: プロジェクト全体の操作
  - chat: 一般的な対話

model: gpt-4 | gpt-3.5-turbo
  - 使用するAIモデルを指定

tools: [context, shell, file]
  - context: プロジェクトのコンテキスト情報
  - shell: シェルコマンド実行
  - file: ファイル操作

description: コマンドの説明
  - Copilot Chatでコマンド一覧に表示される

ステップ4：コマンドを呼び出す

VS CodeまたはGitHub上で、Copilot Chatからコマンドを呼び出します。

【呼び出し方法】

# VS CodeのCopilot Chat
@workspace /review-code

# コード選択してから実行
1. レビューしたいコードを選択
2. Copilot Chatを開く（Ctrl+I or Cmd+I）
3. @workspace /review-code と入力
4. Enterキーを押す

→ 選択したコードがレビューされ、ToDoリストが生成される

Web制作での実践的な活用例4選

活用例1：Reactコンポーネント生成

【ファイル：generate-component.md】

---
agent: code
model: gpt-4
tools: [context, file]
description: プロジェクト規約に準拠したReactコンポーネントを生成
---

# Reactコンポーネント生成

以下の規約に従って、Reactコンポーネントを生成してください。

## プロジェクト規約

- **言語**: TypeScript
- **フレームワーク**: React 18+ with Next.js 14
- **スタイリング**: Tailwind CSS
- **命名規則**: PascalCase
- **ファイル構成**:
  - コンポーネント: `components/ComponentName/index.tsx`
  - 型定義: `components/ComponentName/types.ts`
  - テスト: `components/ComponentName/__tests__/index.test.tsx`

## コンポーネント要件

- propsの型は必ずインターフェースで定義
- デフォルトエクスポートを使用
- JSDocコメントを日本語で記述
- アクセシビリティ（aria属性）を考慮
- レスポンシブデザイン対応

使用例：

@workspace /generate-component

「商品カードコンポーネントを作成してください。
画像、商品名、価格、カートボタンを含めてください」

→ プロジェクト規約に準拠したコンポーネントが自動生成される

活用例2：API設計書の自動生成

【ファイル：generate-api-docs.md】

---
agent: workspace
model: gpt-4
tools: [context, file]
description: APIエンドポイントからドキュメントを自動生成
---

# API設計書の生成

プロジェクト内のAPIエンドポイントを解析し、
OpenAPI 3.0形式のドキュメントを生成してください。

## ドキュメント要件

- エンドポイントURL
- HTTPメソッド
- リクエストパラメータ（型、必須/任意、説明）
- レスポンス形式（成功時、エラー時）
- 使用例（cURL形式）
- 認証方法

## 出力形式

Markdown形式で、以下の構成で出力してください：

### エンドポイント名
- **URL**: `/api/xxx`
- **Method**: GET | POST | PUT | DELETE
- **認証**: 必要 / 不要
- **リクエスト**: ...
- **レスポンス**: ...
- **使用例**: ...

活用例3：SEO対策チェックリスト

【ファイル：seo-check.md】

---
agent: workspace
model: gpt-4
tools: [context, file]
description: HTMLファイルのSEO対策状況をチェック
---

# SEO対策チェック

選択されたHTMLファイルのSEO対策状況をチェックし、
改善点をリストアップしてください。

## チェック項目

### 必須項目
- [ ] `<title>`タグが適切（50-60文字）
- [ ] `<meta name="description">`が設定（150-160文字）
- [ ] `<meta name="viewport">`が設定
- [ ] `<h1>`タグが1つだけ存在
- [ ] すべての画像に`alt`属性が設定

### 推奨項目
- [ ] OGP（Open Graph Protocol）タグが設定
- [ ] Twitter Cardタグが設定
- [ ] 構造化データ（JSON-LD）が設定
- [ ] canonicalタグが設定
- [ ] ページ読み込み速度が最適化

## 出力形式

✅ 実装済み：[項目名]
❌ 未実装：[項目名] - 推奨対応: [具体的な修正案]

活用例4：コミットメッセージの自動生成

【ファイル：generate-commit-message.md】

---
agent: workspace
model: gpt-4
tools: [context, shell]
description: 変更内容からコミットメッセージを生成
---

# コミットメッセージの生成

ステージングエリアの変更内容を解析し、
Conventional Commits形式のコミットメッセージを生成してください。

## フォーマット

\```
<type>(<scope>): <subject>

<body>

<footer>
\```

## type の種類

- feat: 新機能
- fix: バグ修正
- docs: ドキュメント変更
- style: フォーマット変更
- refactor: リファクタリング
- test: テスト追加・修正
- chore: ビルド、ツール関連

## ルール

- subject: 50文字以内、命令形、先頭小文字、末尾ピリオドなし
- body: 必要に応じて詳細説明（72文字で改行）
- footer: Breaking Changesや関連Issue番号

カスタム指示のメリット・デメリット

項目	内容
メリット：開発スピード向上	繰り返し作業を自動化することで開発時間を50%以上削減。コンポーネント生成・ドキュメント作成・テストコード生成が数秒で完了
メリット：コード品質の統一	チーム全員が同じルールでコードを生成するため、一貫性が保たれレビュー時間も削減
メリット：新メンバーの即戦力化	コマンドを使うだけで新メンバーもプロジェクト規約に準拠したコードを書ける
デメリット：初期設定に時間	プロジェクトのルールを明文化する必要があり、最初の設定に数時間かかることも
デメリット：プロンプト設計スキルが必要	効果的なカスタムコマンドを作るにはAIへの適切な指示出しスキルが必要。曖昧な指示では期待通りの結果が得られない
デメリット：定期的なメンテナンスが必要	プロジェクトの要件変更・新ツール導入に伴い、カスタムコマンドも更新が必要

カスタム指示を最大限活用するコツ4つ

シンプルから始める：最初から完璧を目指さず、まず1つのシンプルなコマンドから始めて使いながら改善していく
チームで共有・改善：チーム全体で使いながらフィードバックを集めて改善。チームメンバーの意見を取り入れることでより実用的なコマンドになる
テンプレート化する：よく使うカスタムコマンドのパターンをテンプレート化しておくと、新しいプロジェクトでもすぐに適用できる
ドキュメントを整備：各カスタムコマンドの使い方をREADMEに記載しておくと、チームメンバーが迷わず使える

よくある質問

カスタム指示は無料で使えますか？

GitHub Copilotの有料プラン（個人: $10/月、ビジネス: $19/月）に含まれています。カスタム指示機能自体に追加料金はかかりません。

どのIDEで使えますか？

VS Code、Visual Studio、JetBrains IDEsなど、GitHub Copilotがサポートするすべてのエディタで使用できます。

プライベートリポジトリでも使えますか？

はい、プライベートリポジトリでも使用できます。カスタムコマンドはリポジトリ内で管理されるため、社外に情報が漏れることはありません。

コマンドはいくつまで作れますか？

特に制限はありません。プロジェクトに必要なだけカスタムコマンドを作成できます。ただし、多すぎると管理が大変になるので、10〜20個程度が実用的です。

既存のプロジェクトに後から追加できますか？

はい、いつでも追加できます。.github/prompts/ディレクトリを作成して、カスタムコマンドファイルを追加するだけです。

生徒

カスタム指示を使えば、もうコーディングの勉強は必要ないってことですか？