「AI」タグの記事が4件件あります

こんにちは。開発二部の箕浦です。

2025年は「vibe coding(雰囲気でAIに書かせる)」が流行語のように使われた1年でした。
ところが2026年に入ってからは、その揺り戻しのように 「仕様駆動開発(Spec-Driven Development、以下SDD)」 という言葉を頻繁に見るようになっています。

GitHub・AWS・Anthropic・Cursorなど大手プレイヤーが揃って「仕様を先に書く」流儀のツールを出してきており、社内でも一度整理しておく価値があると思ったので、代表的な3ツールを比較してみます。

そもそも「仕様駆動開発」とは​

実は「Spec-Driven Development」という言葉自体は新しくありません。
2010年代にはAPI開発の文脈で、OpenAPI/Swaggerを先に書いてからコードを生成する Design-First / Contract-First のことを指していました。

ところが2025年以降の使われ方はこれと少し違います。
AIコーディングの文脈では、SDDは

自然言語で書いた 「要件 → 設計 → タスク」という仕様 をsource of truthとして扱い、コードはそこから派生的に生成・検証されるもの

として再定義されています。

GitHubのSpec Kit公式ドキュメント(spec-driven.md)の表現はかなりドラスティックで、

Spec-Driven Development (SDD) inverts this power structure. Specifications don't serve code—code serves specifications.

と書かれています。「コードが正、仕様は付属物」だった関係を逆転させようというわけです。

背景にあるのはやはりvibe codingの限界です。
LLMに「いい感じに作って」と頼むと、小さなプロトタイプは秒で動くのに、いざ本番投入しようとするとコンテキスト不足で破綻したり、後から要件を聞かれて困ったり、という経験はみなさんもあるはずです。
そこで 「仕様を先に明文化し、AIにはその仕様に従って書かせる」 というスタイルが見直されている、というのが大筋の流れです。

代表ツール3本を比較する​

1. GitHub Spec Kit ─ OSSの“型”を提供するツールキット​

2025年9月にGitHubがOSSとして公開したのが github/spec-kit です。
CLI(Specify)とテンプレート群からなり、Claude Code / Cursor CLI / Gemini CLI / Codex CLI など30以上のAIコーディングエージェントから利用できます。

ワークフローはスラッシュコマンドで段階的に進める形式で、現行版は概ね次の流れになっています。

/speckit.constitution  ← プロジェクト憲法(非交渉な原則)
   ↓
/speckit.specify       ← 要件(What/Whyのみ。技術スタックは書かない)
   ↓
/speckit.clarify       ← 曖昧点を質問形式で洗い出し
   ↓
/speckit.plan          ← 設計・データモデル・契約・research を一括生成
   ↓
/speckit.tasks         ← ユーザーストーリー単位のタスク分解
   ↓
/speckit.analyze       ← 整合性チェック
   ↓
/speckit.implement     ← 実装

「何でも乗せるFW」ではなく、 仕様ドキュメントの構造とフローだけ規定して、AIエージェントは自由に選ばせる のがSpec Kitの設計思想です。手元のClaude Code等にそのまま被せて使える点で導入コストが低いのが強みです。

2. AWS Kiro ─ SDDをコア体験に据えたIDE​

Kiro はAWSが2025年7月にpreview公開、2025年11月17日にGA した agentic IDE です。VS Code(Code-OSS)ベースで、バックエンドはAmazon Bedrock経由でClaude Sonnet系などを利用しています。

機能を1コマンドで立ち上げると、Kiroは以下3ファイルを自動生成します。

• requirements.md ─ ユーザーストーリー + 受け入れ条件を EARS記法 で記述
• design.md ─ アーキテクチャ、シーケンス図、データフロー
• tasks.md ─ 連番付きの実装タスクチェックリスト

公式トップの一文がコンセプトをよく表しています。

Bring engineering rigor to agentic development.

vibe codingとの対比も明確で、Introducing Kiroブログには

Kiro is great at 'vibe coding' but goes way beyond that—Kiro's strength is getting those prototypes into production systems with features such as specs and hooks.

とあります。「vibe codingの楽しさは残しつつ、specs と hooks で本番投入できる強度を持たせる」という立て付けです。
半面、クレジット課金($20/月のProプランで1,000クレジット〜)なので、長時間の試行錯誤にはコスト感の見極めが必要になります。

3. Claude Code(Plan Mode + Skills)─ いま手元にあるもので“軽量SDD”​

専用ツールを入れなくても、Claude Codeの Plan Mode だけでSDD的な使い方は始められます。

Shift + Tab を2回押すか /plan を打つと、Claudeはファイル変更や実行を行わない read-only モードに入り、コードベースを読み込んだ上で構造化された計画を出力します。
これを人間がレビュー・修正してから実装フェーズに移れる、というシンプルな仕掛けです。

さらに2025年10月に登場した Skills (SKILL.md を持つ再利用可能な手順書) を組み合わせれば、「ブレストする」「仕様を書く」「実装する」といった工程をスキルとして固定化できます。
実際このブログ記事も、brainstorming スキルで要件整理 → 3つの調査エージェントを並列で走らせる、というSDD的な流れで書きました。

Spec KitとClaude Codeは併用も普通にできるので、 「まずはClaude CodeのPlan Modeで肌感をつかみ、本格運用ではSpec KitかKiroを選ぶ」 という入り方が現実的だと思います。

実務で取り入れるときの勘所​

1. すべての変更にSDDを被せない ─ ちょっとした修正にまでconstitution→specify→…をやると、HackerNewsで議論された「Waterfallの逆襲」になります。粒度の大きい新機能や、後で他人が読む必要のある変更にだけ適用するのが現実的です。
2. 仕様の解像度を上げるのは人間の仕事 ─ SDDツールは仕様を「書いてくれる」ように見えますが、本質は エンジニア側が要件を言語化する補助 です。ぼんやりした要件を投げると、出てくる仕様もぼんやりします。
3. ツール選定を急がない ─ Spec Kitは無料で軽量、KiroはIDE体験まで揃った代わりに課金、Claude Codeは既存の延長線。プロジェクト規模とチーム構成で選び分ければOKです。

まとめ​

AIコーディングの主役は、いつのまにか「AIにコードを書いてもらう」から 「AIエージェント群に何をさせるかを人間が仕様で指示する」 へと変わりつつあります。
Andrej Karpathyが2026年のSequoia Ascent talkで語った "The programmer is increasingly not just a code writer, but an orchestrator of agents." という表現が、今のリアルな手触りに近いと感じます。

すべてをSDDに振り切る必要はありませんが、 「コードの前に仕様を書く」 という基本動作は、これから数年のスタンダードになっていきそうです。
まずはお使いのClaude CodeのPlan Modeから、軽く試してみてはいかがでしょうか。

こんにちは、箕浦です。

「このファイルをリファクタリングして」と伝えたら、関連ファイルを探し、コードを書き換え、テストを通すところまで勝手にやってくれる
それがAnthropicの自律型AIコーディングエージェント 「Claude Code」 です。

この記事では、導入手順から普段の使い方、知っておくと得する活用テクニックまで、2026年4月時点の情報をもとにまとめました。

第一章：Claude Codeとは？​

概要​

Claude Codeは、Anthropicが公開した 自律型のAIコーディングエージェント です。
コンピュータ上で直接コードを書き、実行し、デバッグまでこなします。

これまでのAIチャット（ChatGPTやGeminiなど）は「コードを生成して画面に表示する」だけで、コピー＆ペーストや実行はユーザー自身が行う必要がありました。
Claude Codeはそこから一歩踏み込み、ファイルの作成・編集・削除、ターミナルコマンドの実行、Gitの操作などを自律的に行います。

他のAIコーディングツールとの違い​

「GitHub Copilotやカーソル（Cursor）と何が違うの？」という疑問を持つ方も多いと思います。
主要ツールとの違いを表にまとめました。

最大の違いは 自律性の高さ です。
Claude Codeは「ここを直して」と伝えるだけで、関連するファイルを自分で探し、修正し、テストを実行して結果を確認するところまで一気に実行します。

料金プラン​

Claude Codeの利用には、以下のいずれかのプランが必要です（2026年4月時点）。

気軽に試す場合はProプラン、本格的に開発に組み込む場合はMaxプランまたはAPI利用がおすすめです。

第二章：Claude Codeの導入とインターフェース​

Claude Codeを利用するためのインターフェースは主に5つあります。
それぞれの導入手順と特徴を詳しく見ていきましょう。

1. CLI（コマンドラインインターフェース）​

全機能が使えて、CI/CDへの組み込みにも対応できる、一番柔軟な使い方です。

動作要件​

• OS: macOS / Linux / Windows（Git for Windowsが必要）
• Anthropicアカウント: Pro以上のプラン、またはAPIキー

インストール手順​

macOS / Linux / WSLの場合：

# 1. ネイティブインストーラーでインストール（推奨）
curl -fsSL https://claude.ai/install.sh | bash

# 2. プロジェクトディレクトリに移動
cd /path/to/your/project

# 3. Claude Codeを起動
claude

Windows PowerShellの場合：

# 1. ネイティブインストーラーでインストール
irm https://claude.ai/install.ps1 | iex

# 2. プロジェクトディレクトリに移動
cd C:\path\to\your\project

# 3. Claude Codeを起動
claude

ネイティブインストーラーを使うと、バックグラウンドで自動アップデートが行われるため、常に最新版を利用できます。

初回起動時にブラウザが開き、Anthropicアカウントでの認証が求められます。
認証が完了すると、ターミナル上で対話的にClaude Codeを利用できるようになります。

CLIの特徴​

• Claude Codeの 全機能にアクセス可能
• ローカルファイルの直接操作に最適
• パイプやリダイレクトなど、シェルとの連携が可能
• claude -p "質問" のようにワンショットで実行することも可能

2. デスクトップアプリ​

Claudeの公式デスクトップアプリ（macOS / Windows対応）内で利用できるモードです。

利用手順​

1. claude.ai からデスクトップアプリをダウンロード
2. アプリを起動し、ログイン
3. チャット画面の入力欄にある 「コード」ボタン をクリック
4. Claude Codeモードに切り替わる

デスクトップアプリの特徴​

• CLIよりも 視覚的で直感的 なインターフェース
• チャット形式で自然言語による指示が可能
• ファイルのドラッグ＆ドロップに対応
• ターミナル操作に慣れていなくても、チャット感覚で始められる

3. Webブラウザ​

ブラウザ版Claude（claude.ai）からもClaude Codeにアクセス可能です。

Webブラウザ版の特徴​

• GitHubリポジトリとの連携 が前提となる
• クラウド上の仮想環境（サンドボックス）で作業が実行される
• ローカル環境を汚さずに試せるので、まず雰囲気を見たい方にちょうどいい
• ただし、ローカルファイルへの直接アクセスは不可

4. VS Code拡張機能​

VS Code内でネイティブなGUIパネルとしてClaude Codeを利用できる 推奨インターフェース です。

インストール手順​

1. VS Code 1.98.0以上を用意
2. 拡張機能マーケットプレイスで「Claude Code」を検索してインストール
3. Sparkアイコン（✱）をクリックしてClaude Codeパネルを開く

VS Code拡張の特徴​

• インラインdiff表示 でコード変更を視覚的にレビュー
• @ファイル名 でファイルや選択範囲を直接参照
• 複数タブ・複数ウィンドウで並列会話が可能
• CLI機能への統合ターミナルからのアクセスも可能

5. JetBrains IDEプラグイン​

IntelliJ IDEA、PyCharm、WebStormなど主要なJetBrains IDEで利用可能なプラグインです。

インストール手順​

1. Settings → Plugins から「Claude Code」を検索してインストール
2. IDEを再起動
3. 統合ターミナルで claude を実行

JetBrains版の特徴​

• IDEのdiffビューアでコード変更を表示
• 選択中のコードやエディタのコンテキストを自動共有
• IDE内の診断エラー（lint、構文エラー等）を自動共有

インターフェース選択のガイド​

第三章：Claude Codeの基本機能​

1. コンテキストウィンドウの管理​

Claude Codeを使いこなす上で 一番差がつくの がコンテキストウィンドウ（≒記憶容量）の管理です。

コンテキストウィンドウとは？​

AIモデルが一度に参照できる情報量の上限のことです。
Claude Codeでは作業中に以下の情報がコンテキストに蓄積されます。

• ユーザーとの会話履歴
• 読み込んだファイルの内容
• 実行したコマンドの結果
• AIが生成したコードや思考プロセス

この容量が上限に近づくと、古い情報が参照できなくなったり、回答の精度が低下します。

コンテキストを溢れさせないコツ​

1. タスク単位で/clearする: 1つの作業が完了したら会話をリセット
2. /compactで圧縮する: 途中経過は不要だが結論は保持したい場合に使用
3. 巨大なファイルを丸ごと読ませない: 必要な部分だけを指定して読み込ませる
4. 複雑なタスクは分割する: 1回のセッションで1つの明確な目標を設定

2. 基本的な操作と「Planモード」​

通常モードと Planモードの切り替え​

Claude Codeにはパーミッションモードという仕組みがあり、AIの自律度を段階的に制御できます。

Shift + Tab キーを押すと、有効化されているモードを順番に巡回します。

上記4モードの他に、CI/CD向けで許可済みツールのみ実行する dontAsk モードと、サンドボックス環境専用の bypassPermissions モードも存在します。

Planモードが有効なケース​

• 複数ファイルにまたがる大規模な変更
• アーキテクチャの設計判断が必要な作業
• 失敗するとリカバリが大変な操作（データベースのマイグレーション等）

実践例：Planモードの活用​

# Planモードで指示を出す例
> [Plan] React + TypeScriptで、ユーザーのTODOリストを管理するアプリを作ってください。
> 要件：
> - TODOの追加・削除・完了切り替えができること
> - ローカルストレージに保存すること
> - Tailwind CSSでスタイリングすること

Planモードでは、Claude Codeが以下のような計画を提示します。

計画:
1. プロジェクトの初期セットアップ（Vite + React + TypeScript）
2. Tailwind CSSの設定
3. TODOの型定義を作成
4. useLocalStorageカスタムフックを実装
5. TodoItemコンポーネントを作成
6. TodoListコンポーネントを作成
7. Appコンポーネントに統合
8. 動作確認

この計画でよろしいですか？

ユーザーが「OK」と返すと、計画に沿って順番に実装を進めます。

3. スラッシュコマンド一覧​

/ から始まるコマンドで様々な操作が可能です。
主要なコマンドをカテゴリ別にまとめました。

セッション管理​

情報・設定​

ファイル・コード操作​

4. CLAUDE.md（指示書ファイル）​

CLAUDE.mdは、プロジェクトごとのルールやコーディング規約、ユーザーの好みをAIに伝えるための 設定ファイル です。

CLAUDE.mdの配置場所と優先順位​

CLAUDE.mdは複数の場所に配置でき、すべてが読み込まれます。

CLAUDE.mdの記述例​

# プロジェクトルール

## コーディング規約

- TypeScriptを使用し、`any`型の使用を禁止する
- 関数コンポーネントとhooksパターンを使用する
- テストは必ずVitest + Testing Libraryで書く

## コミットメッセージ

- Conventional Commitsの形式に従う
- 日本語で記述する

## プロジェクト構成

- src/components: UIコンポーネント
- src/hooks: カスタムフック
- src/utils: ユーティリティ関数
- src/types: 型定義

## 注意事項

- 回答は必ず日本語で行うこと
- 既存のコードスタイルを尊重すること

/init コマンドを実行すると、Claude Codeがプロジェクトの構成を分析し、適切なCLAUDE.mdを自動生成してくれます。

5. 5つの主要拡張機能​

Claude Codeには機能を広げる5つの仕組みがあります。それぞれ見ていきましょう。

(1) MCP（Model Context Protocol）​

外部ツールやサービスとClaude Codeを連携 させるためのプロトコルです。

具体的な連携例：

• GitHub MCP: Issue・PRの作成、レビューコメントの投稿
• データベースMCP: PostgreSQLやMongoDBのクエリ実行
• Slack MCP: チャンネルへのメッセージ送信
• ブラウザMCP: Webページの取得・スクレイピング
• AWS MCP: AWSドキュメントの参照

MCPを設定することで、Claude Codeが 開発に必要な外部サービスに直接アクセス できるようになります。

(2) Skills​

Skillsは、特定のタスクに関する 詳細な手順書・マニュアル をClaude Codeに読み込ませる仕組みです。

例えば：

• UIデザインのガイドライン
• テストの書き方のベストプラクティス
• コードレビューのチェックリスト

SKILL.md というファイルに手順を記述し、特定のタスクが要求されたときに自動で読み込まれるよう設定できます。

(3) Hooks​

Hooksは、Claude Codeの特定のイベントに対して 自動で実行される処理 を定義する仕組みです。 現在20以上のフックイベントが用意されています。主要なものを紹介します。

例：タスク完了時に通知音を鳴らす設定

{
  "hooks": {
    "Notification": [
      {
        "matcher": "",
        "hooks": [
          {
            "type": "command",
            "command": "afplay /System/Library/Sounds/Glass.aiff"
          }
        ]
      }
    ]
  }
}

(4) Subagent​

Subagentは、メインのClaude Codeセッションから 特定のタスクに特化した子AI を呼び出す仕組みです。

• 大量のコード検索を並列で行う
• 独立したリサーチタスクを委託する
• 複雑な作業を分割して効率化する

メインのコンテキストを汚さずに別タスクを実行できるのが便利な点です。

(5) Plugins​

Pluginsは、上記のMCP・Skills・Hooksなどを 1つのパッケージにまとめて配布 する仕組みです。
チームや組織で共通の設定を簡単に共有できます。

第四章：実践テクニック​

1. 効果的なプロンプトの書き方​

Claude Codeへの指示は、具体的に書くほど意図どおりの結果になります。

悪い例：

ログイン機能を作って

良い例：

Next.js App Routerでメールアドレスとパスワードによるログイン機能を実装してください。
- 認証にはNextAuth.jsを使用
- バリデーションはzodで行う
- エラーメッセージは日本語で表示
- ログイン成功後は/dashboardにリダイレクト

2. タスクの分割戦略​

大きな機能を一度に依頼するより、小さなタスクに分割して段階的に進める ほうがうまくいきます。

Step 1: データベースのスキーマ定義 → /clear
Step 2: APIエンドポイントの実装 → /clear
Step 3: フロントエンドのUI実装 → /clear
Step 4: テストの追加 → /clear
Step 5: 統合テストとバグ修正

各ステップの完了後に /clear でコンテキストをリセットし、次のステップに集中させます。

3. よくあるトラブルと対処法​

まとめ​

Claude Codeは更新ペースが速く、頻繁に新機能が追加されています。
この記事で紹介した内容をまとめると：

• Claude Codeとは: ファイル操作やコマンド実行まで自律的に行うAIコーディングエージェント
• 5つの利用方法: CLI、VS Code、JetBrains、デスクトップアプリ、Webブラウザ
• コンテキスト管理が鍵: /clear と /compact を活用して精度を保つ
• Planモード: 大規模な変更前には必ず計画を立てさせる
• CLAUDE.md: プロジェクトルールを記述して一貫性のある出力を得る
• 拡張機能: MCP・Skills・Hooks・Subagent・Pluginsで機能を拡張

Proプラン（月$20）から始められます。公式ドキュメント（code.claude.com/docs）に目を通して、まずは小さなタスクから試してみてください。

こんにちは、箕浦です。

フロントエンド開発をしていると、「Figma でデザインを確認 → エディタに戻ってコード実装 → また Figma で確認…」という往復作業に時間を取られていませんか？
デザイナーとの連携では「デザインファイルのバージョン管理ができない」「最新版がどれかわからない」といった課題も、よく耳にします。

今回は、そんな開発者の悩みを根本から解決してくれる新しいデザインツール Pencil（pencil.dev）を紹介します。

Pencil とは​

Pencil は "Design on canvas. Land in code."（キャンバスでデザインし、コードに着地する）をコンセプトに掲げるデザインツールです。

最大の特徴は、IDE の中で直接デザインができること。
VSCode や Cursor の拡張機能として統合されるほか、macOS / Linux / Windows 向けのデスクトップアプリも提供されており、デザインツールとエディタを行き来する必要がなくなります。

しかも 現在完全無料 で利用できます。

従来のデザインツールとの違い​

「Figma や Sketch と何が違うの？」という疑問に、一覧表で答えます。

Pencil はエンジニアの開発ワークフローに自然に溶け込むことを最優先に設計されています。

主な機能​

1. IDE 統合デザインエディタ​

Pencil は IDE の拡張機能、またはスタンドアロンのデスクトップアプリとして動作します。
無限キャンバス上でフレーム、テキスト、シェイプなどのベクター要素を自由に配置でき、Figma と同様のレイヤーパネルも備えています。

利用方法は以下の通りです。

コードを書いている最中に、すぐ隣のタブでデザインを調整できるため、コンテキストスイッチのコストが大幅に削減されます。

2. Git ネイティブなファイル管理​

Pencil のデザインファイルは .pen という拡張子の JSON ベースのテキストファイルです。
これにより、以下のことが当たり前にできます。

• git diff でデザインの変更差分を確認
• ブランチ を切ってデザインのバリエーションを試す
• プルリクエスト でデザインレビュー
• マージ でデザイン変更を統合

# デザインファイルの差分を確認
git diff design/dashboard.pen

# デザイン変更をコミット
git add design/dashboard.pen
git commit -m "ダッシュボードのサイドバーレイアウトを更新"

デザインファイルがコードと同じリポジトリで管理できるため、「デザインの最新版はどこ？」という問題が解消されます。

3. AI エージェント連携（MCP）​

Pencil の最も革新的な機能が、MCP（Model Context Protocol） を通じた AI エージェントとの連携です。

対応する AI プラットフォームは以下の通りです（2026年2月時点）。

• Claude Code（CLI・IDE 版）
• Claude Desktop
• Cursor
• Windsurf IDE
• Codex CLI
• Antigravity IDE
• OpenCode CLI

自然言語でデザインの指示を出すだけで、AI が .pen ファイルを直接操作します。

> 「サイドバー付きのダッシュボード画面を作成して」
> 「このフォームにメールアドレスの入力フィールドを追加して」
> 「カラーテーマをダークモードに切り替えて」

全ての処理はローカルで実行されるため、デザインデータがクラウドに送信されることはありません。

4. コンポーネントシステムとデザイントークン​

再利用可能なコンポーネントを作成でき、メインコンポーネントを変更すると全てのインスタンスに自動反映されます。
Figma のコンポーネント機能に馴染みがある方なら、直感的に使えるはずです。

また、バリアブル（変数）システム により、デザイントークンを一元管理できます。
CSS カスタムプロパティや Tailwind の設定値と連動させれば、デザインとコードの間でトークンが常に同期された状態を保てます。

5. プリビルトUIキット​

ゼロからコンポーネントを作らなくても、すぐに使える UI キットが用意されています。

特に Shadcn UI キットは、Next.js + Tailwind CSS のプロジェクトとの相性が抜群です。

実践：開発ワークフローに組み込む​

Pencil を日常の開発に取り入れると、ワークフローがどう変わるかを見てみましょう。

Before（従来）​

1. Figma でデザインを確認
2. エディタに切り替えてコーディング
3. ブラウザで動作確認
4. Figma に戻ってデザイン調整
5. デザイン変更をスクリーンショットで共有
6. 以上を何度も繰り返す

After（Pencil 導入後）​

1. IDE 内で .pen ファイルを開いてデザインを確認・編集
2. 同じ IDE でコーディング
3. AI に「このコンポーネントのレイアウトを修正して」と指示
4. 変更を git commit でまとめて管理
5. プルリクエストでデザイン・コード両方をレビュー

コンテキストスイッチが激減し、デザインとコードの整合性が自然に保たれるようになります。

実際に使ってみた​

Pencilのデスクトップアプリをインストールして起動した画面がこちら。
Figmaを触ったことある人であれば、なじみある画面構成です。

デザインシステムとして最初からいくつか組み込まれています。
今回は「Shadcn」を使って、簡単なログインフォームを作成してみます。

画面左下にプロンプトを入力します。

AIが「Shadcn」を使ってログインフォームを作成してくれます。

作成されたログインフォームがこちら。
ここまでは正直Figmaでもできます。

Claude Code に移って、先ほど作成したフォームを選択した状態で、Reactのコードを作成してもらいます。

コードが作成されました。
テストコードも作成してくれています。

ブラウザで確認するとこちら。 忠実とまではいかないですが、だいたいこんな感じです。

まとめ​

Pencil は「デザインとコードを一つの世界に統合する」という明確なビジョンを持ったツールです。

Figma がデザイナーのためのツールだとすれば、Pencil は明確にエンジニアのためのデザインツールです。
フロントエンド開発の効率化を考えている方は、ぜひ試してみてください。

公式サイト: https://pencil.dev

こんにちは、箕浦です。

最近、AIコーディングエージェント（Claude Code、GitHub Copilot など）を使う場面がどんどん増えてきていますが、
「毎回同じような指示を出すのが面倒」「特定の分野でもっと精度の高いサポートが欲しい」と感じたことはないでしょうか？

今回は、そんな悩みを解決してくれる Skills という仕組みを紹介します。

Skillsとは​

Skills は、AIエージェントの能力を拡張するためのモジュール型パッケージです。
簡単に言うと「AIに特定分野の専門知識やワークフローを教え込むプラグイン」のようなものです。

たとえば以下のようなスキルがあります。

スキルをインストールすると、AIエージェントがそのスキルに記載されたルールや知識を自動的に参照するようになります。
結果として、毎回細かいプロンプトを書かなくても、目的に合った質の高い出力が得られるわけです。

スキルの探し方​

スキルの管理には skills CLI を使います。
Node.js（18以上）がインストールされていれば、npx で手軽に実行できます。

キーワードで検索する​

npx skills find "検索キーワード"

たとえば、テスト関連のスキルを探したい場合はこうです。

npx skills find "testing"

実行すると、名前・URLの一覧が表示されます。

Install with npx skills add <owner/repo@skill>

onewave-ai/claude-skills@technical-writer
└ https://skills.sh/onewave-ai/claude-skills/technical-writer

スキルの公式サイト https://skills.sh/ でもブラウザから検索できます。

よく使う検索キーワード​

目的に合わせて、以下のようなキーワードで探すと見つかりやすいです。

スキルのインストール方法​

気に入ったスキルが見つかったら、add コマンドでインストールします。

npx skills add <owner/repo@skill> -g -y

• -g : グローバル（ユーザーレベル）にインストール
• -y : 確認プロンプトをスキップ

実際にインストールしてみる​

記事作成を支援するスキルを3つインストールする例です。

# 記事の構成案作成
npx skills add onewave-ai/claude-skills@technical-writer -g -y

# 日本語の表現改善
npx skills add ronantakizawa/japanese-copywriting@japanese-copywriting -g -y

# 技術的な事実確認
npx skills add daymade/claude-code-skills@fact-checker -g -y

インストール先は ~/.agents/skills/ 配下になります。
対応しているAIエージェント環境にインストールされます（環境やオプション指定により対象は変わります）。

インストール済みスキルの確認・更新​

# アップデートがあるか確認
npx skills check

# すべてのスキルを最新版に更新
npx skills update

実践：テックブログ執筆でのスキル活用​

弊社のテックブログ執筆でも、上記3つのスキルを導入して活用しています。
以下のようなフローで記事を作成しています。

1. 企画メモを作る​

まずは記事のテーマ・対象読者・伝えたいことを簡単にメモします。

テーマ: Claude Skills
対象読者: AIツールを使い始めたエンジニア
ゴール: スキルの探し方・導入・活用を自分でできるようになる

2. technical-writer でアウトラインを作成​

「この企画メモで記事のアウトラインを作って」とAIエージェントに指示すると、
technical-writer スキルが自動的に適用され、構成案が出力されます。

見出しの順序や粒度を調整するだけで、記事の骨格が完成します。

3. 下書きを作成​

アウトラインをもとに、本文を書いていきます。
コード例やスクリーンショットも入れると読みやすくなります。

4. japanese-copywriting で校正​

書き終えたら「この記事を校正して」と指示します。
冗長な表現、不自然な言い回し、読みにくい箇所を指摘してくれます。

5. fact-checker で技術的な確認​

「この記事の技術的な記述を確認して」と指示すると、
コマンドの書式やバージョン情報、仕様の正確性をチェックしてくれます。

6. front matter を整えて投稿​

最後に記事ファイルの先頭にある front matter（slug、title、date、authors、tags）を確認し、
リポジトリにプッシュすれば完了です。

自作スキルを作ることもできる​

既存のスキルで足りない場合は、自分でスキルを作ることもできます。

npx skills init my-custom-skill

生成されるスキルファイルは Markdown ベースの YAML フロントマター付きファイルで、
特別なプログラミング知識がなくても記述できます。

たとえば「社内コーディング規約に沿ったレビューを自動で行うスキル」や
「特定フレームワークの設計方針を教え込むスキル」など、
チーム固有のノウハウをスキルとして共有できるのが大きなメリットです。

まとめ​

• Skills は AIエージェントに専門知識を追加するプラグイン的な仕組み
• npx skills find で検索、npx skills add でインストールするだけで使える
• 記事作成なら technical-writer / japanese-copywriting / fact-checker の組み合わせが効果的
• 自作スキルでチーム固有の知見も共有可能

AIエージェントを「汎用アシスタント」から「チーム専属の専門家」に変えてくれる仕組みなので、
ぜひ一度試してみてください。

参考リンク​

• Skills CLI: https://skills.sh/
• Claude Code: https://docs.anthropic.com/en/docs/claude-code