「Claude Codeって聞いたことあるけど、何から始めればいいの？」
「毎回同じ指示を出すのが面倒。もっと効率よくならないかな？」
そんな悩みを解決するのが、Claude Codeの「スキル（Skills）」機能です。
スキルとは、よく使う作業手順をテンプレート化し、スラッシュコマンド一発で呼び出せる仕組みのこと。プログラミング不要で、Markdownが書ければ誰でも作れます。
この記事では、筆者が実際の業務で使っている3つのスキルのコードを全公開しながら、ゼロからスキルを作る方法をステップバイステップで解説します。
Claude Codeスキルとは？1分でわかる基本概念
Claude Codeのスキルは、一言で言えば「AIへの指示書テンプレート」です。
例えば、ブログ記事を書くたびに「この記事のSNS投稿文を作って。X用は140文字以内で、Instagramはハッシュタグ多めで…」と毎回説明するのは面倒ですよね。
スキルを作っておけば、こう打つだけで済みます。
/sns https://example.com/my-articleたったこれだけで、X・Threads・Instagram用の投稿文がまとめて生成されます。
スキルでできること
- 定型作業の自動化：SNS投稿文の生成、SEOチェック、コードレビューなど
- チーム内での作業標準化：スキルをリポジトリに含めれば、チーム全員が同じ品質で作業できる
- 引数で柔軟に対応：URLやファイルパスを渡して、対象を都度変えられる
旧「スラッシュコマンド」との違い
2026年1月に、以前の「スラッシュコマンド」（.claude/commands/）はスキルに統合されました。既存のコマンドファイルはそのまま動きますが、新しく作るならスキルがおすすめです。
| 項目 | 旧コマンド | スキル（新） |
|---|---|---|
| ファイル形式 | 単一の.mdファイル | ディレクトリ + SKILL.md |
| 自動呼び出し | 不可 | Claudeが関連性を判断して自動ロード |
| サポートファイル | 不可 | テンプレート、スクリプトなど同梱可能 |
スキルの基本構造を理解する
ディレクトリ構成
スキルは.claude/skills/ディレクトリの中に、スキルごとのフォルダを作って配置します。
あなたのプロジェクト/
└── .claude/
└── skills/
├── sns/
│ └── SKILL.md ← SNS投稿生成スキル
├── seo-check/
│ └── SKILL.md ← SEOチェックスキル
└── a11y-check/
└── SKILL.md ← アクセシビリティ診断スキル
SKILL.mdの書き方
すべてのスキルはSKILL.mdという名前のファイルで構成されます。中身は大きく2つのパートに分かれます。
---
name: スキル名
description: スキルの説明文
argument-hint: [引数のヒント]
---
# ここから下が実際の指示内容
Claudeに何をしてほしいかをMarkdownで書く上部の---で囲まれた部分がフロントマター（設定情報）、それ以降が指示内容です。
フロントマターの主要フィールド
| フィールド | 必須？ | 説明 |
|---|---|---|
name |
任意 | スキル名。省略するとフォルダ名が使われる |
description |
推奨 | スキルの説明。Claudeが自動呼び出しする判断材料になる |
argument-hint |
任意 | /スキル名の後に何を入力すればいいかのヒント |
disable-model-invocation |
任意 | trueにすると手動呼び出し専用になる |
引数の使い方
スキルに渡す引数は$ARGUMENTSで受け取れます。
対象URL: $ARGUMENTS複数の引数を使い分けたい場合は、$0、$1、$2のようにインデックスでアクセスできます。
$0 のコンポーネントを $1 から $2 に移行してください。/migrate Button React Vueと実行すると、$0=Button、$1=React、$2=Vueに置き換わります。
【実践1】SNS投稿文を自動生成するスキル
最初に紹介するのは、筆者が最も頻繁に使っているSNS投稿文の自動生成スキルです。記事のURLを渡すだけで、X（Twitter）・Threads・Instagram用の投稿文をまとめて生成してくれます。
使い方
/sns https://example.com/my-articleコード全文
ファイル：.claude/skills/sns/SKILL.md
---
name: sns
description: 記事URLからX・Threads・Instagram用の投稿文を生成する
---
# SNS投稿文生成
記事URL: $ARGUMENTS
## 実行手順
1. 指定されたURLの記事内容をWebFetchで取得する
2. 記事のタイトル、要点、キーワードを抽出する
3. 以下の形式で投稿文を生成する
## 出力フォーマット
### X（Twitter）・Threads用
- 140文字以内のキャッチーな文章
- 記事URL
- ハッシュタグ3〜5個（日本語）
- コピペしやすいようにコードブロックで出力
### Instagram用
- キャプション文（300文字程度、改行を活用して読みやすく）
- ハッシュタグ10〜15個（日本語＋英語混合）
- サムネイル画像は記事のアイキャッチをそのまま使用可能と案内
- コピペしやすいようにコードブロックで出力
## 注意事項
- 訪問者はほぼ日本人なので、投稿文は日本語で作成
- 煽りすぎない自然なトーン
- 記事の核心的な価値を伝える（クリックベイトNG）
- URLが指定されない場合は、最新の記事URLを聞くポイント解説
WebFetchの活用：Claude CodeはURLの中身を取得して分析できます。これを指示に組み込むことで、記事の内容を理解した上で投稿文を作ってくれます。
プラットフォームごとのフォーマット：Xは140文字制限、Instagramはハッシュタグ多めなど、プラットフォームの特性に合わせた指示を書いておくのがコツです。
コードブロック出力の指定：「コピペしやすいようにコードブロックで出力」と書いておくと、生成された投稿文をそのままコピーできて便利です。
【実践2】SEO基本チェックスキル
Web制作者なら必ず気になるSEO。ページの基本的なSEO要素を一括チェックするスキルです。
使い方
/seo-check https://example.comコード全文
ファイル：.claude/skills/seo-check/SKILL.md
---
name: seo-check
description: URLを指定してSEOの基本チェックを行う。タイトル・メタディスクリプション・見出し構造・OGP設定などを診断し、改善提案を出す
argument-hint: [URL]
---
# SEO基本チェック
対象URL: $ARGUMENTS
## 実行手順
1. 指定URLのページをWebFetchで取得する
2. 以下の項目をチェックし、結果を一覧表示する
## チェック項目
### 必須チェック
- **titleタグ**: 存在するか、30〜60文字の適切な長さか
- **meta description**: 存在するか、80〜160文字の適切な長さか
- **h1タグ**: 1ページに1つだけ存在するか
- **見出し構造**: h1→h2→h3の順序が正しいか（飛び階層がないか）
- **OGP設定**: og:title, og:description, og:image が設定されているか
- **canonical URL**: 設定されているか
### 追加チェック
- **画像のalt属性**: 主要画像にalt属性があるか
- **内部リンク**: ナビゲーションや本文内に適切な内部リンクがあるか
- **モバイル対応**: viewport metaタグが設定されているか
## 出力フォーマット
| 項目 | 状態 | 詳細 |
|------|------|------|
| title | OK/NG | 内容と文字数 |
| meta description | OK/NG | 内容と文字数 |
| ... | ... | ... |
### 改善提案（優先度順）
1. 最も重要な改善点
2. 次に重要な改善点
## 注意事項
- チェック結果はあくまで基本的なSEO要素の確認であり、検索順位を保証するものではない
- 日本語で出力する
- 改善提案は具体的なアクション（「〇〇を△△に変更する」）で記述するポイント解説
チェック項目の明確化：「何をチェックするか」を箇条書きで明示しておくと、Claudeが漏れなくチェックしてくれます。
出力フォーマットの指定：テーブル形式を指定することで、結果が見やすく整理されます。
改善提案の具体性：「改善提案は具体的なアクションで記述する」と指示しておくと、「titleが短いです」ではなく「titleを『○○○○』のように30文字以上に変更してください」と具体的に提案してくれます。
【実践3】アクセシビリティ診断スキル
3つ目は、Webアクセシビリティの基本チェックを行うスキルです。WCAG 2.1の主要基準に基づいて診断し、修正コードまで提案してくれます。
使い方
/a11y-check https://example.comローカルファイルを直接チェックすることもできます。
/a11y-check ./src/pages/index.htmlコード全文
ファイル：.claude/skills/a11y-check/SKILL.md
---
name: a11y-check
description: URLまたはHTMLファイルを指定して、Webアクセシビリティの基本チェックを行う。WCAG 2.1の主要基準に基づいて診断し、修正コードも提案する
argument-hint: [URL or ファイルパス]
---
# アクセシビリティ診断
対象: $ARGUMENTS
## 実行手順
1. URLの場合はWebFetchで取得、ファイルパスの場合はReadで読み込む
2. WCAG 2.1 レベルAの主要基準に基づいてチェックする
3. 問題点と修正案を出力する
## チェック項目
### 知覚可能（Perceivable）
- **画像の代替テキスト**: すべてのimg要素にalt属性があるか
- **色だけに依存しない情報伝達**: リンクが色のみで区別されていないか
- **コントラスト比**: テキストと背景のコントラスト比が4.5:1以上か
### 操作可能（Operable）
- **キーボード操作**: インタラクティブ要素がフォーカス可能か
- **スキップリンク**: メインコンテンツへのスキップリンクがあるか
- **リンクテキスト**: 「こちら」「ここをクリック」など曖昧なリンクテキストがないか
### 理解可能（Understandable）
- **lang属性**: html要素にlang属性が設定されているか
- **フォームラベル**: input要素に対応するlabelがあるか
### 堅牢（Robust）
- **セマンティックHTML**: 適切なHTML要素が使われているか
- **ARIA属性**: aria属性が正しく使われているか
- **ランドマーク**: header, nav, main, footer が適切に配置されているか
## 出力フォーマット
### サマリー
- 重大な問題: X件
- 改善推奨: X件
- 良い実装: X件
### 問題一覧（重大度別）
重大な問題 → 改善推奨 → 良い実装 の順で表示し、
問題には該当箇所・WCAG基準番号・修正コード例を含める。
## 注意事項
- 自動チェックには限界があり、実際のスクリーンリーダーでのテストも推奨する
- 日本語で出力する
- 修正例は具体的なコードで提示するポイント解説
URLとファイルパスの両対応：「URLの場合はWebFetch、ファイルパスの場合はRead」と条件分岐を書いておくと、Claudeが自動で適切なツールを選んでくれます。
WCAG基準の明示：チェック基準をWCAG 2.1の4原則（知覚可能・操作可能・理解可能・堅牢）に沿って整理することで、網羅的なチェックが可能になります。
修正コード付きの出力：「修正例は具体的なコードで提示する」と指示しておくと、問題点だけでなく「こう直せばいい」まで教えてくれるので、すぐに対応できます。
スキルを作るときの4つのコツと注意点
実際にスキルを作ってみて分かった、うまく作るためのコツをまとめます。
コツ1：指示は「具体的」に書く
悪い例と良い例を比較してみましょう。
悪い例：
SEOをチェックして結果を教えてください。良い例：
## チェック項目
- **titleタグ**: 存在するか、30〜60文字の適切な長さか
- **meta description**: 存在するか、80〜160文字の適切な長さか何をどうチェックするのか、具体的に書くほど安定した結果が得られます。
コツ2：出力フォーマットを指定する
「テーブル形式で出力」「コードブロックで出力」「箇条書きで出力」など、出力の形式を明示しましょう。毎回同じフォーマットで結果が返ってくるようになります。
コツ3：注意事項でトーンを調整する
「煽りすぎない自然なトーン」「日本語で出力する」「クリックベイトNG」など、やってほしくないことも書いておくと、意図しない出力を防げます。
コツ4：descriptionは丁寧に書く
descriptionはClaudeがスキルを自動呼び出しするかどうかの判断材料です。「いつ使うべきか」が分かるように書きましょう。
# 曖昧（いつ使うか分からない）
description: SEO関連のスキル
# 明確（いつ使うか分かる）
description: URLを指定してSEOの基本チェックを行う。タイトル・メタディスクリプション・見出し構造・OGP設定などを診断し、改善提案を出す注意：機密情報を含めない
スキルファイルをGitリポジトリで管理する場合、APIキー・パスワード・トークンなどの機密情報は絶対に含めないでください。認証情報は.envファイルなどで別途管理し、.gitignoreに追加しましょう。
まとめ：3ステップで今日からスキルを作ろう
この記事で紹介した3つのスキルをおさらいします。
| スキル | 用途 | コマンド例 |
|---|---|---|
| sns | 記事URLからSNS投稿文を生成 | /sns https://... |
| seo-check | SEO基本要素の一括チェック | /seo-check https://... |
| a11y-check | アクセシビリティ診断 | /a11y-check https://... |
スキルを作る手順はたった3ステップ
- フォルダを作る：
.claude/skills/スキル名/ディレクトリを作成 - SKILL.mdを書く：フロントマター（name, description）＋ 指示内容をMarkdownで記述
- 実行する：Claude Codeで
/スキル名 引数を入力
スキルはMarkdownが書ければ誰でも作れます。最初は簡単なものから試してみて、徐々に複雑な自動化に挑戦してみてください。
この記事で紹介したスキルのコードは、そのままコピーしてお使いいただけます。ご自身の業務に合わせてカスタマイズしてみてください。
