メインコンテンツへスキップ
見出し画像

Claude Code Modsとは?使い方やSkills・Hooksとの違い、画面を拡張する方法を解説!

    こんにちは、kazuです。

    Claude Codeを使っていて、「この情報を入力欄の近くに出しておきたい」「変更内容を自分の見やすい画面で確認したい」と感じたことはありませんか。

    Anthropicが公開したClaude CodeのModsは、Claude Codeの動作や画面をJavaScript/TypeScriptで拡張する仕組みです。2026年10月1日に公式発表されました。

    Claudeへの指示だけでなく、Claude Codeという道具の振る舞いや表示を、自分の作業に合わせて変えられるのがポイントです。

    私は以下のようなModsを作り運用しています。

    画像

    この記事では、できること、Skills・Hooks・MCPとの使い分け、始め方を整理します。最後に、手元で確認できた範囲と、導入前に押さえたい権限の話も紹介します。

    Modsで何ができる?

    Modは、Claude Codeの中で起きた出来事に反応する小さなプログラムです。「ツールを使おうとした」「画面を描こうとした」などが、その出来事に当たります。

    用途は、次の3つに分けるとイメージしやすいです。

    必要な情報を画面に表示する
    入力欄の上に作業メモを出したり、会話の横に独自のパネルを置いたりできます。ボタンや入力欄を持つ画面も作れます。

    処理の途中で確認や調整を行う
    ツール実行の前後で内容を確認したり、イベントの内容を変更したりできます。単に結果を記録するだけでなく、通常の処理に代わって応答することも可能です。

    自分用のコマンドを追加する
    決まった処理を行うコマンドを用意できます。Modsの関数だけで処理するコマンドなら、その都度Claudeに文章を生成させずに実行する設計もできます。

    画像

    Modsはイベントに応じて動きます。何もしないで次へ渡す、内容を変えて渡す、その場で応答するといった処理を組み立てます。

    公式資料:Modsの概要

    公式資料:画面にパネルや表示を追加する方法

    Skills・Hooks・MCPとは、どう違う?

    Claude Codeには、すでに複数の拡張方法があります。すべてをModsに置き換える必要はありません。まず「何を変えたいのか」から選びます。

    Skills:繰り返し使う手順や判断基準を教える
    たとえば、「記事をこの順序でレビューする」「報告書をこの形式でまとめる」という依頼です。SKILL.mdに書いた指示をClaudeが読み、作業に利用します。

    公式資料:Skills

    Hooks:決まったタイミングで処理を動かす
    たとえば、ファイル変更後に既存の整形スクリプトを動かす場合です。設定ファイルに定義するHooksは、イベントをきっかけにコマンドなどを実行します。許可判定や入力・結果の調整も扱うため、「Hooksでは確認しかできない」と単純化しないほうがよいです。

    公式資料:Hooks

    MCP:外部のツールやデータに接続する
    たとえば、課題管理サービスやデータベースをClaudeから扱いたい場合です。接続先が提供する機能を、Claudeが使えるツールとして追加します。

    公式資料:MCP連携

    Mods:Claude Codeの画面や内部の処理を拡張する
    たとえば、独自の確認パネルを出し、そのボタン操作に応じて処理を進める場合です。Modsもイベントを扱いますが、Claude Codeの中で関数として動き、独自の画面を描ける点が大きな違いです。

    画像

    これは主な選び方を整理した図です。役割が重なる部分もあり、1つのプラグインに複数の仕組みをまとめることもできます。

    なお、Pluginは配布・導入するためのまとまりです。ModsとPluginsは別々の競合機能というより、ModをPluginに含めて届ける関係と考えると分かりやすいです。

    公式資料:Modsと他の拡張方法の比較

    公式のサンプルには、どんなものがある?

    公式の入門ガイドでは、次の3つが紹介されています。何を作れるかを知る参考になります。

    Token Weather
    コンテキストの使用状況を、入力欄の上に天気のような表示で示す例です。会話で使っている情報量を、目に入りやすい場所で確認できます。

    Blast Radius
    特定の危険なコマンドを実行する前に、影響するファイルなどを示して確認する例です。ただし、コマンド文字列を見て判断する仕組みなので、すべての危険な操作を防げるわけではありません。

    Replay Theater
    直前のターンで行われたファイル編集を、順番に見返す例です。まとめて変更されたときに、編集を1つずつ追うための画面を追加します。

    この3つだけでも、「AIの回答を変える」以外に、作業状況や確認の仕方を変える使い道があると分かります。公式サンプルの紹介であり、この記事で3つすべてを導入・検証した結果ではありません。

    公式ガイド:Modsの作成と3つのサンプル

    使い始める前に、対応環境を確認する

    画面の拡張を使う入口は、主にClaude Codeのターミナルと、Claude DesktopのCodeタブです。

    公式資料では、ターミナル版はClaude Codeのv2.1.287以降、DesktopのCodeタブに含まれるClaude Codeはv2.1.286以降が案内されています。ターミナルでは、次のコマンドで確認できます。

    claude --version

    Desktopは別のClaude Codeを内蔵しているため、ターミナルで確認したバージョンと同じとは限りません。Codeタブのローカルセッションで/statusを実行し、Claude Codeの行を確認します。

    Modが動くことと、Modの画面が表示されることも別です。たとえば、VS Code拡張のチャットパネルではイベント処理は動いても、Mods独自のパネルなどは表示されません。通常のClaudeチャットに同じ画面を追加する機能として捉えないようにします。

    公式資料:対応環境とバージョン

    始め方は「既存のModを入れる」と「作ってもらう」の2つ

    最初は、目的を1つに絞ると確認しやすくなります。既存のものを探す場合と、自分用に作る場合で入口が変わります。

    既存のModを探す場合
    Claude Codeで/pluginを開き、Discoverから目的に合うプラグインを探します。説明だけでなく、追加される機能、作者、ソースコード、導入する範囲を確認します。

    すべてのプラグインにModが入っているわけではありません。導入後はInstalledで状態を確認し、画面やコマンドが実際に使えるかを確かめます。再読み込みを求められた場合は、表示された案内に従います。

    公式資料:プラグインの導入と管理

    Claude Codeに作ってもらう場合
    対話中のClaude Codeに、欲しい動作を文章で伝えます。必要なら/plugin-authoringで、作成用の組み込みスキルを呼び出せます。

    たとえば、表示だけの小さな練習なら、次のように依頼できます。これは記事用に作成した依頼文の例です。

    Claude CodeのModを作ってください。
    入力欄の上に「作業メモ:記事の下書き中」と表示したいです。
    既存の表示は残してください。まずファイルと実装内容を示し、claude plugin validateで静的検査をしてください。外部通信、モデル呼び出し、ファイルの読み書き、権限の自動承認を行う処理はModに入れないでください。読み込み前に、追加される処理を説明してください。

    公式の作成手順では、セッション内で作ったModを読み込む際に、ホットリロードの確認が出ます。有効にすると、そのセッション内の変更がターン終了後に反映されます。

    そこで作ったModは、最初から全セッションで使える恒久的な設定になるわけではありません。継続利用する場合は保存場所を移して保管し、プラグインとして読み込む手順を確認します。

    公式資料:ClaudeにModを作ってもらう方法

    手元で確認したことと、まだ確認できていないこと

    今回、macOSのClaude Code v2.1.288で、先ほどの作業メモを表示する小さなサンプルを用意しました。イベントは画面描画だけを対象にし、Modから外部通信やモデル呼び出しを行わない内容です。

    claude plugin validateによる静的検査は通過しました。出力でも、画面描画のイベントと、描画部品を取得するAPIだけが検出されました。

    一方、claude plugin testでは、以前のセッションで保存された無効状態がまだ更新されていないという案内が出て、テストは開始できませんでした。この環境で確認できたのは静的検査までで、実際の画面表示や継続動作は未確認です。

    これだけを根拠に「全ユーザーがModsを使えない」とは言えません。公式にも、提供側の制御や組織の設定によって読み込みが止まる場合の説明があります。バージョンだけで判断せず、実際のメッセージを確認することが大切です。

    公式資料:Modsが読み込まれない場合の確認方法

    また、静的検査の通過は、想定どおり動くことや、安全性全体の保証ではありません。テストで画面の構造を確認できても、実際の見え方はアプリ上で確認する必要があります。

    公式資料:Modsのテストで確認できること

    導入時は「便利な設定」より「実行するプログラム」と考える

    Modsは、Claude Codeと同じ利用者権限で動きます。ファイルへのアクセス、プロセスの起動、ネットワーク通信、モデルの利用などを行えるため、導入元と処理内容の確認が必要です。

    Claude CodeのBash用サンドボックスを有効にしても、Mod自身の処理がそのまま同じ隔離範囲に入るわけではありません。「サンドボックスを使っているから、どのModを入れても大丈夫」とは判断できません。

    導入するときは、次の3点を確認したいところです。

    誰が作り、何をするコードか
    ソースや説明を読み、目的に対して不要な通信・ファイル操作・モデル呼び出しがないかを見ます。Modが追加でモデルを呼ぶ設計なら、利用量や費用にも関わります。

    表示の補助か、許可判断にも関わるか
    作業状況を表示するだけのものと、ツールの実行を許可・拒否するものでは、確認すべき範囲が変わります。便利さのために、自動承認を広く入れる必要はありません。

    組織の管理ルールと両立するか
    Team・Enterpriseや管理設定のある環境では、組織向けの制御が適用されます。ただし、それだけであらゆるファイルアクセスや通信が禁止されるわけではありません。業務で使う場合は、管理者の方針に沿って導入します。

    公式資料:組織でModsを管理する方法

    まとめ

    Modsは、Claude Codeの画面や動作を、自分の仕事に合わせて拡張する仕組みです。

    繰り返す指示をまとめたいならSkills、既存スクリプトを決まったタイミングで動かしたいならHooks、外部サービスとつなぎたいならMCP。独自の画面や処理の組み合わせが必要になったときに、Modsが選択肢に入ります。

    まずは「いつも見たい情報を1つ表示する」くらいの小さな用途から考えると、何を変えたのかを追いやすいです。導入できたかだけでなく、必要な表示や動作になったかまで確かめていきたいですね。

    ここまでお読みいただきありがとうございました!使い分けを考える際の参考になれば幸いです。

    よくある質問(FAQ)

    Q. ModsはClaudeの新しいモデルですか?
    A. モデル名ではありません。Claude Codeの動作や画面を拡張する機能です。

    Q. プログラミングができなくても作れますか?
    A. Claude Codeに、欲しい動作を文章で伝えて作ってもらう方法があります。ただし、何をするプログラムかを確認し、読み込み後の動作も確かめる必要があります。

    Q. SkillsやHooksは、もう使わなくなりますか?
    A. その必要はありません。手順の指示ならSkills、既存の自動処理ならHooksで足りる場合があります。画面や内部の処理まで変えたいかで選びます。

    Q. Modの作成中に変更した内容は、ずっと残りますか?
    A. セッション内で作ったModは、そのセッションに読み込まれます。開発用フォルダーには自動整理の対象となるものがあるため、継続して使う場合は公式手順に沿って別の場所に保管し、導入してください。

    Q. 静的検査が通れば、安全に使えますか?
    A. 静的検査は、ファイル構成や認識されるイベント・API呼び出しなどを確認するものです。動作や安全性全体を保証するものではなく、コードの確認、テスト、実際の表示確認を分けて行います。

    ワンコインメンバーシップのご紹介

    ChatGPT・Dify等の技術検証ログや、すぐに使える設定ファイル・プロンプト等の素材を紹介しています。生成AIを仕事に取り入れたい方は、ぜひご覧ください。

    生成AIラボ


    生成AI・AIエージェントを動画で学びたい方はこちら

    私が講師を務める生成AIコースでは、生成AIの基礎からAIエージェントを使った業務の自動化まで解説しています。

    生成AIコース(基礎)

    生成AIコース(実践)

    AI人材コース(機械学習・深層学習の基礎からPythonでAIエージェント開発まで)

    案件のご相談はこちら

    Difyやn8nをはじめとしたAIを活用した業務効率化エージェントの構築を支援しています。社内でAIエージェントを構築したい法人様は、下記よりお問い合わせください。

    お問い合わせはこちら

    X(旧Twitter)からでもお問い合わせいただけます。

    継続的なAI活用を支援するAI顧問サービスも提供しています。

    AI顧問サービスの詳細はこちら

    #Claude #ClaudeCode #Mods #生成AI #AIエージェント #業務効率化 #プログラミング #AI


     
     
    AIと働く仕組みを構築/Claude Code・Codex・最新AIについて共有/権限と承認、AIエージェント時代のAIセキュリティも発信/2016年AI Academy創業→売却→AI顧問/生成AI×教育 #AIエージェント #AIセキュリティ #EdTech

    あなたへのおすすめ