Claude Code modsとは｜声で話すAIの相棒がいるパネルを自作して分かった作り方と注意点

こんにちは、ルーティンラボのせなお（@rutinelabo）です。今回は、Claude Codeに追加された新機能modsを使って、自分専用のパネルを作ってみました。

これまでのClaude Codeは、誰が使っても同じ画面で、チャットの欄に指示を出すだけでした。modsを使うと、その画面と動きを、自分の仕事に合わせて作り変えられます。

僕は、Claude Codeの横に声で話すドット絵の相棒「ジャーヴィス」を置き、使用量や今日のネタが並ぶパネルまで作りました。この記事では、modsの仕組みとHooks・Skills・MCPとの違い、作り方と注意点をまとめます。

結論は、画面と動きを作り変える仕組み

Claude Code modsは、Claude Codeの中で動く小さなプログラムを足して、画面や動き方を変えられる仕組みです。CLAUDE.mdのようにAIへお願いを書くのではなく、プログラムそのものを埋め込みます。

そのため、残量のゲージやボタン、声のやり取りまで、作業の画面の中に出せます。作るのにプログラミングの知識は要らず、いつものClaude Codeに頼めば作ってくれるのも大きなポイントです。

・使える版：ターミナルはClaude Code 2.1.287以降（2026年10月1日公開）
・できること：覗いて書き換える／画面を描く／機能を足す
・作り方：小さいものは頼むだけ。作り込むなら頼み続けて育てる
・注意点：サンドボックスがなく、自分の権限で動く

ただし中身は本物のプログラムなので、入れる前の確認と、作った後の手直しは欠かせません。このあと順番に見ていきます。

Claude Code modsとは

modsは、Anthropicが2026年10月1日（米国時間）に発表したClaude Codeの新機能です。公式の発表では、Claude Codeの動き方を変える小さなTypeScriptの関数と説明されています。

TypeScriptはプログラミング言語の一つですが、使う側は名前を知っておくだけで大丈夫です。仕組みとしては、modはプラグインの一種で、ツールの呼び出しや依頼の送信、画面の描画といった出来事のたびに呼ばれます。

使うには、ターミナルならClaude Code 2.1.287以降が必要です。次のコマンドで最新版に上げて、版を確かめられます。

claude update
claude --version

使える場所によって、画面の描き方が少し違います。

・ターミナル：動く・画面も描ける（2.1.287以降）
・デスクトップアプリのCodeタブ：動く・ターミナル専用の部品を除いて描ける（2.1.286以降）
・VS Codeの拡張機能：動く・拡張機能2.1.299以降で描ける
・claude -p・Agent SDK：動くが、画面は描けない

（2026年10月時点・Claude Code Docsの「Mods overview」を参照）

できることは、大きく3つに分けると分かりやすいです。送る前のプロンプトやツールの呼び出しを覗いて書き換える、会話の横にパネルやボタンを描く、コマンドやタイマーのような機能を足す、の3つです。

Hooks・Skills・MCPとの違い

Claude Codeを使い込んでいる方ほど、似た仕組みが多くて混乱しやすいところだと思います。まずCLAUDE.mdは、Claudeへの事前のお願いを書くファイルです。

settings.jsonに書くHooksは、決まった出来事に合わせて外側のコマンドを動かす仕組みです。決まった手順書を登録するのがSkills、外のサービスや道具をClaudeにつなぐのがMCPです。

これらはどれも、Claude Codeの外側から足すものです。画面まで描けるのはmodsだけで、AIに伝えて動いてもらうのか、Claude Codeそのものに機能を足すのか、という違いで考えると整理しやすいです。

声で話す相棒にネタを聞いてみた

ここからは、僕が実際に作ったものの話です。Claude Codeの横のパネルにドット絵の相棒ジャーヴィスを置いて、声で話しかけられるようにしました。映画に出てくる音声のAIアシスタントをイメージした、完全に僕の趣味の作品です。

試しに、YouTubeのおすすめのネタを声で聞いてみました。すると「KLING 4の実写化検証です。海外のニュースで公開直後から非常に高い再生数を記録しています」と、ネタと理由をセットで答えてくれます。

続けて中身を聞くと、アニメ5枚を他のAIと同じ指示で実写に変換して比較する、という企画の形まで提案してくれました。手を止めずに声で相談できるのは、想像以上に便利です。

使用量と今日のネタを1枚のパネルに

ジャーヴィスのいるパネルには、毎日の作業で見たいものをまとめました。僕はこのパネルを司令席と呼んでいます。

・使用量：Claude・Codex・Geminiの残りを同じ列に並べ、尽きそうな時刻も出す
・次の一手：Claudeの枠が先に尽きそうなとき、重い実装をCodexへ回すよう出す
・今日のネタ：自動で集めた話題から、注目度の高い3つを並べる
・声の段：聞く・考える・話すのどこにいるかを光らせる
・ジャーヴィス：テストが落ちると困った顔、通ると喜ぶ。放っておくと眠る

これまで使用量は、文字で確かめるか、それぞれのサービスの画面を見に行くしかありませんでした。modsはプログラムを埋め込めるので、ゲージの形で作業の画面にいつも出しておけます。

ジャーヴィスは、僕のやることリストも把握しています。まだ終わっていない作業や、今日のYouTubeに投稿するものを踏まえて、声でやり取りできるようにしました。

声のやり取りと仕組みを本人に聞く

声のやり取りも試しました。呼びかけると「はい、こんにちは。お役に立てることはございますでしょうか」と返事が来ます。どうやって話しているのかを本人に聞くと、音声をテキスト化し、内容を処理して、再び音声に変換していると答えてくれました。

「終了して」と言えば声のモードが切れます。パネルの声の段は、聞く・考える・話すのどこにいるかで光る場所が変わるので、今ジャーヴィスが何をしているのかが画面でも分かります。

・会話：Gemini LiveとGPT-Liveの音声モデル（API・使った分の料金）
・読み上げ：Gemini 3.8 Flash TTS（API）
・APIを使わない版：Macの中で動くWhisperで聞き取り、macOSの読み上げで話す

API版は、こちらが話し出すと相手の話を止めて聞き取ってくれる全二重の会話ができて、やり取りがかなり自然です。APIなしの版は料金がかからない代わりに、スムーズさは落ちます。ElevenLabsやFish Audioも良い声のモデルを出しているので、必要に応じて入れ替えていく予定です。

modsの作り方は、Claudeに頼むだけ

modの中身は、基本的に3つのファイルです。名前と説明を書くplugin.json、読み込むファイルを指すhooks.json、本体のプログラムであるregister.tsxの3つで、ビルドの作業は要りません。

my-mod/
├── .claude-plugin/
│   └── plugin.json   （名前と説明）
└── hooks/
    ├── hooks.json    （読み込むファイル）
    └── register.tsx  （本体のプログラム）

とはいえ、このファイルを自分で書く必要はありません。デスクトップアプリでも作れますし、いつものClaude Codeで頼めば作ってくれます。気に入ったmodは、プラグインとしてほかの人に配ることもできます。

手順1：作りたいmodを日本語で頼む

「〇〇するmodを作って」と、いつ・何をして・どこに出すかを日本語で頼みます。Claudeがmodの作り方のガイドを自分で読んで、プログラムを書き、テストまで付けてくれます。

手順2：読み込みを有効にして、その場で試す

作り終わると、このセッションで自動の読み込みを有効にするかを聞かれます。有効にすると、そのターンが終わった瞬間に読み込まれて、もう使えます。動かないところがあれば、同じ会話で直してと頼めば直してくれます。

たとえば、朝に開くと今日のまとめが出るmodは、次の文で頼めます。

朝に開くと「今日のまとめ」が出る mod を作ってください。
- /kyou と打つと、横のパネルに次の3つを出す
  1. 今日やること：このフォルダの やること.md を読んで並べる。この会話や今日の git のコミットで済んだと分かるものには「済み」と付ける
  2. ここまでやったこと：この会話と今日の git のコミットから2〜3行
  3. YouTube のネタ3つ：Google ニュースの RSS（キーワード「Claude Code」）の新しい記事から、動画のタイトル案と一言の理由を出す。どの記事から考えたかも付ける
- 文章は haiku に書かせる。やること.md・記録・記事に無いことは書かない
- パネルに「コピー」「保存（まとめ/日付.md）」「作り直す」「閉じる」のボタンを付ける
- 毎朝9時（日本時間）に一度だけ「今日のまとめを作れます」とトーストで知らせる

ふだんの設定のままのClaude Codeにこの文だけを送ったところ、約17分でテスト付きのmodが動きました。一方、このパネルは何度も頼み続けて約1日かかり、60ファイル・テスト1,300件以上になっています。小さいものは頼むだけ、作り込むなら頼み続けて育てる、という感覚です。

自分用の頼み方の型に入るプロンプトの全文は、公式LINEで合言葉「司令席」と送ると受け取れます。

入れる前の安全チェック

便利な反面、modsには注意点があります。公式の説明でも、modは自分の権限で動くプログラムで、サンドボックスはないと書かれています。

ファイルの読み書き、プログラムの起動、ネットへの通信、環境変数に置いたAPIキーの読み取り、送ったすべての依頼の確認まで、できてしまうということです。人が作ったmodを入れる前には、次のコマンドで中身を確かめます。

claude plugin validate ./some-mod

modが反応する出来事がhooks:の行に、Claude Codeに頼む操作がcalls:の行に一覧で出ます。

僕自身も、作ったパネルを別のAIに何度も点検させて、見つかった指摘はすべて直しました。

作っていて分かった注意点

実際に作り込んでみて一番難しかったのは、プログラムならではのズレです。Claudeと相談しながら作ってもらっても、動かしてみると画面の幅が狭かったり、絵や文字がはみ出したりすることがよくあります。

CLAUDE.mdのようにお願いを書くだけなら、こうしたバグは起きませんでした。modsは本物のプログラムを動かすので、作り直しや指示の出し直しは当たり前と考えて、使いながら直していくのがおすすめです。

・1pxの見切れは人の目がすぐ気づく：全部のコマを1画素ずつ数える検査を足した
・modが読んだ中身は、ほかのmodからも見える：必要な行だけを取り出して読む形に直した
・Claudeはシェルでファイルを書き換えることがある：変更の結果（gitの差分）で判断するように直した

仕事での使いどころ

modsは、普段の作業によって使い方が大きく変わります。毎回使っている機能をすぐ呼べるようにしておくだけでも、作業の時間はかなり短くなります。

・毎日Claude Codeを使う人：使用量の見張り、尽きる前の次の一手
・開発者：テストが落ちたら自動でClaudeに差し戻す、本番の設定に触る前の確認
・会社員：情報収集、やることリストのまとめ、メールの分析、夕方の日報
・声で頼みたい人：手が離せない作業中に、声で頼んで声で聞く

何を作るか迷ったら、Anthropicが公開している見本から試すのが近道です。文脈の埋まり具合を天気で表示するtoken-weather、危ないコマンドを止めて影響を見せるblast-radius、直前の編集を1つずつ再生するreplay-theaterの3つがあります。

まとめ

Claude Code modsを使ってみて分かったことをまとめます。

・modsはClaude Codeの中で動く小さなプログラム。ターミナルは2.1.287以降で使える
・Hooks・Skills・MCP・CLAUDE.mdは外側から足すもの。画面まで描けるのはmodsだけ
・小さいmodは頼むだけで作れる。作り込むなら頼み続けて育てる
・サンドボックスがないので、入れる前にclaude plugin validateで中身を確かめる
・画面のはみ出しやバグは普通に起きる。使いながら直していく前提で作る

みんな同じだったClaude Codeの画面が、自分専用の仕事場に変わっていくのは本当に楽しい体験でした。毎日Claude Codeを使っている方は、まず小さなmodを1つ頼んで、その感覚を試してみてください。

ジャーヴィスとパネルが動く様子は、動画でも詳しく解説しているので、ぜひYouTubeチャンネルをチェックしてみてください。ほかにも、AIツールの検証や活用事例を多数発信しています。

▶︎ YouTubeで続きを見る

また、ブログ「ルーティンラボ」では、modsとHooks・Skills・MCPの違いの表や、作り方の手順をまとめています。ほかにもおすすめのAIツールやサービスを数多く紹介しています。

▶︎ ブログで続きを読む

日々の情報をタイムリーにキャッチしたい方は、ぜひTwitter（X）もフォローしてください。

▶︎ Twitter(X)をフォローする

LINE公式アカウントで合言葉「司令席」と送ると、modsの解説資料と、自分用のmodを頼むプロンプトが届きます。

▶︎ 公式LINEの友だち登録する

ルーティンラボでは、最新のAI技術やデジタルトレンド、ビジネス活用に関するノウハウの情報を発信しています。興味がある方はぜひ、YouTube動画とブログからどうぞ！