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

本ページはプロモーションが含まれています。

 

「僕が実際にClaude Codeの新機能modsでパネルを自作したら、使用量と今日のネタを横目に見ながら、声で話す相棒に相談できるようになりました」

 

Claude Codeに、画面や動きを自分好みに作り変えられる新機能「mods」が追加されました。これまでのClaude Codeは、誰が使っても同じ画面で、チャットの欄に指示を出すだけでした。modsを使うと、自分のオリジナルのパネルや、声で話すAIエージェントまで、いつものセッションの中に置けます。

 

こんにちは、ルーティンラボ（@rutinelabo）です。本記事では、Claude Code modsの仕組みとHooks・Skills・MCPとの違い、作り方と入れる前の安全チェックを解説します。あわせて、僕がmodsで作った「声で話すAIの相棒がいるパネル」の実例と、作って分かった注意点も紹介します。

 

この記事のmodsの解説資料（modの頼み方のプロンプトつき）は、公式LINEで合言葉「司令席」と送ると受け取れます。

 

 

LINE友だち登録して情報Get

 

結論｜Claude Code modsは画面と動きを自分の仕事に合わせて作り変える仕組み

 

先に結論をお伝えします。Claude Code modsは、Claude Codeの中で動く小さなプログラムを足して、画面や動き方を自分の仕事に合わせて作り変えられる仕組みです。CLAUDE.mdのようにAIへお願いを書くのではなく、プログラムそのものを埋め込むので、残量のゲージやボタン、声のやり取りまで画面に出せます。

 

作るのにプログラミングの知識は要りません。いつものようにClaude Codeと会話しながら「こういうmodを作って」と頼めば、Claudeが書いて、その場で読み込むところまで進めてくれます。ただし中身は本物のプログラムなので、入れる前の確認と、作った後の手直しは欠かせません。

 

見るところ	ポイント
使える版	ターミナルはClaude Code 2.1.287以降（2026年10月1日公開）
できること	依頼やツールの呼び出しを覗いて書き換える、画面を描く、コマンドや機能を足す
作り方	小さいものはClaude Codeに頼むだけ。作り込むなら何度も頼んで育てる
注意点	サンドボックスがなく、自分の権限で動く。入れる前に中身を確かめる

 

Claude Code modsとは｜2026年10月1日に公開された新機能

 

modsは、Anthropicが2026年10月1日（米国時間）に発表したClaude Codeの新機能です。公式の発表では「Claude Codeの動き方を変える、小さなTypeScriptの関数」と説明されています（公式記事：Customize Claude Code with mods）。TypeScriptはプログラミング言語の一つですが、使う側は名前を知っておくだけで大丈夫です。

 

仕組みとしては、modはプラグインの一種です。Claude Codeでツールが呼ばれる、依頼が送られる、画面が描かれる、といった出来事が起きるたびに、modの関数が呼ばれます。そこで中身を眺めるだけにするか、書き換えるか、代わりに処理するかを決められます。Claude Codeの/diffのように、もともとある機能の一部もmodで作られています。

 

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

claude update
claude --version

 

使う場所	modが動くか	画面に描けるか
ターミナル（エディターの中のターミナル・JetBrainsを含む）	動く（2.1.287以降）	描ける
デスクトップアプリのCodeタブ	動く（2.1.286以降）	描ける（ターミナル専用の部品を除く）
VS Codeの拡張機能	動く	拡張機能2.1.299以降で描ける（機能フラグを取得するセッションのみ）
claude -p・Agent SDK	動く	描けない
クラウドのセッション	届いたプラグインだけ動く	描けない

出典：Claude Code Docs「Mods overview」（2026年10月時点・公式参照）

 

僕が作ったパネルのドット絵のように、絵を細かく描く部品はターミナルでしか表示されません。見た目にこだわるmodを作るなら、ターミナルで使う前提にしておくと迷いません。

 

できることは「覗く・描く・足す」の3つ

 

modsでできることは、大きく3つに分けると分かりやすいです。毎回同じように書き換えていたプロンプトを自動で直したり、アバターや画面、ボタンを表示したり、目に見えない処理やタイマーのような道具を自分で作ってClaude Codeに渡したりできます。

 

 

Hooks・Skills・MCP・CLAUDE.mdとの違い｜画面まで描けるのはmodsだけ

 

Claude Codeを使い込んでいる方ほど、似た仕組みが多くて混乱しやすいところです。まずCLAUDE.mdは、Claudeへの「事前のお願い」を書くファイルです。読んだAIがそのお願いを頭に入れた状態で作業してくれますが、書いた内容はあくまでAIへの指示です。

 

settings.jsonに書くHooks（設定のフック）は、「ファイルを編集したら必ずこのコマンドを走らせる」のように、決まった出来事に合わせて外側のコマンドを動かす仕組みです。決まった手順書を登録しておくのがSkills、外部のサービスや道具をClaudeにつなぐのがMCPです。これらはどれも、Claude Codeの外側から足すものです。

 

仕組み	中身	変えられるもの	画面に描けるか
CLAUDE.md	Claudeへの事前のお願い（文章）	Claudeの考え方・進め方	描けない
Hooks（設定のフック）	出来事に合わせて動くコマンド	ツールの呼び出しを止める・許す・記録する	描けない
Skills	手順書（SKILL.md）	Claudeが知っていること・やること	描けない
MCP	外部のサービスや道具	Claudeが使える道具	描けない
mods	Claude Codeの中で動くプログラム（JavaScript・TypeScript）	ツールの呼び出し・依頼・コマンド・画面	描ける

出典：Claude Code Docs「Mods overview」の比較表をもとに作成（2026年10月時点・公式参照）

 

はっきり違うのは、modsだけがClaude Codeの中でプログラムとして動き、画面まで描ける点です。ほかの仕組みがAIに伝えて動いてもらうものだとすると、modsはClaude Codeそのものに機能を足すものです。どれか1つを選ぶものではなく、1つのプラグインの中にmodとスキルとMCPを一緒に入れることもできます。

 

CLAUDE.mdの役割と書き方は、CLAUDE.mdの解説記事で詳しく紹介しています。

 

CLAUDE.mdとは｜Claudeへの「事前のお願い」ファイル

続きを見る

 

声で話す相棒にネタを聞いてみた｜Claude Codeの中に「ジャーヴィス」を作った

 

ここからは、僕がmodsで実際に作ったものを紹介します。Claude Codeの横のパネルにドット絵の相棒「ジャーヴィス」を置いて、声で話しかけられるようにしました。動画の冒頭では「YouTubeのネタを考えているんですが、おすすめのトピックはありますか？」と声で聞いています。

Claude Codeの中に、声で話す相棒を住ませてみた！

新機能modsで作ったジャーヴィスに今日のネタを聞いたら、KLING 4の実写化検証を理由つきで即答。

手を止めずに相談できるのが、正直いちばん楽。

#ClaudeCode

— せなお| AIとITを使った仕事術 (@rutinelabo) 投稿を見る

 

するとジャーヴィスは「KLING 4の実写化検証です。海外のニュースで公開直後から非常に高い再生数を記録しています」と、ネタと理由をセットで答えてくれました。続けて中身を聞くと「アニメ5枚を他のAIと同じ指示で実写に変換して比較します」と、企画の形まで提案してくれます。

 

映画に出てくる音声のAIアシスタントをイメージした、完全に僕の趣味の作品です。それでも、手を止めずに声で相談できるのは想像以上に便利でした。声で頼んだ作業は、そのまま同じセッションのClaude Codeに渡る作りにしています。

 

使用量と今日のネタを1枚のパネルに｜自作パネル「司令席」でできること

 

ジャーヴィスがいるパネルには、毎日の作業で見たいものをまとめています。僕はこのパネルを「司令席」と呼んでいて、Claude・Codex・Geminiの使用量と、AIが自動で集めたYouTubeのネタから選んだ3つを、1枚で見られるようにしました。

Claude・Codex・Geminiの残り、1枚で見えるようにした。

modsでパネルを自作。今日のネタ3つも並んで、放っておくと相棒が寝る。

残りを見に行く手間が、正直ほぼ消えた。

#ClaudeCode #mods

— せなお| AIとITを使った仕事術 (@rutinelabo) 投稿を見る

 

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

 

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

 

ジャーヴィスは、僕のやることリストも把握しています。まだ終わっていない作業や、今日のYouTubeに投稿するものを踏まえて、声でやり取りできるようにしました。もともと声で動く仕組みは別に作っていたのですが、セッションごとに相棒がいたら最高だと思っていたところに、ちょうどmodsが出てきた形です。

 

複数のAIをドット絵で並べて見える化する考え方は、AIオフィスを自作した記事でも紹介しています。

 

AIオフィスを自作｜複数AIをドット絵で可視化しスマホ連携する方法

続きを見る

 

声のやり取りと仕組みを本人に聞く｜音声を文字にして考え、また声で返す

 

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

作った相棒に「どうやって話してるの？」と聞いてみた。

答えは、音声をテキスト化して処理し、また音声に変換。終了と言えば声のモードが切れる。

ちょっと人間っぽくて、作り込んだかいがあった。

#ClaudeCode

— せなお| AIとITを使った仕事術 (@rutinelabo) 投稿を見る

 

「終了して」と言えば、声のモードが切れます。パネルの声の段は「聞く・考える・話す」のどこにいるかが光るので、今ジャーヴィスが何をしているのかが画面でも分かります。より人間に近いAIエージェントを目指して、何度も作り込んだ部分です。

 

声の仕組み	使っているもの	特徴
会話（API）	Gemini LiveとGPT-Liveの音声モデル	相手が話している途中でこちらが話しても聞き取ってくれる
読み上げ（API）	Gemini 3.8 Flash TTS	自然な日本語で読み上げる
APIを使わない版	Macの中で動くWhisper（聞き取り）とmacOSの読み上げ	API料金はかからないが、やり取りのスムーズさは落ちる

 

APIを使う版は使った分の料金がかかりますが、こちらが話し出すと相手の話を止めて聞き取ってくれる「全二重（フルデュプレックス）」の会話ができて、やり取りがかなり自然です。最近はElevenLabsやFish Audioも良い声のモデルを出しているので、必要に応じて入れ替えていく予定です。

 

声でClaude Codeを動かす考え方は、声で動くAIを自作した記事でもまとめています。

 

Claude Code modsの作り方｜ファイルは3つ、作るのはClaudeに頼むだけ

 

modの中身は、基本的に3つのファイルです。名前と説明を書くplugin.json、読み込むファイルを指すhooks.json、本体のプログラムであるregister.tsxの3つで、ビルドの作業は要りません。拡張子の「.tsx」がTypeScriptで書かれたプログラムの印で、これをClaude Codeが読み込んで動かします。

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

 

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

 

step
1作りたいmodをClaude Codeに日本語で頼む

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

 

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

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

 

 

そのまま使える頼み方の例

たとえば、朝に開くと「今日のまとめ」が出るmodは、次の文で頼めます。ふだんの設定のままのClaude Codeにこの文だけを送ったところ、テスト付きのmodができあがりました。

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

 

自分用のmodを考えるとき、何をどう書けばいいか迷う方も多いと思います。解説資料には、欲しい機能を書き込むだけでClaude Codeに貼れる頼み方の型に入るプロンプトも載せました。コピー用の全文は、公式LINEで合言葉「司令席」と送ると受け取れます。

 

入れる前の安全チェック｜modsはサンドボックスの外で動く

 

便利な反面、modsには注意点があります。公式の説明でも、modは自分の権限で動くプログラムで、サンドボックス（外と切り離して安全に動かす仕組み）はないと書かれています。ファイルの読み書き、プログラムの起動、ネットへの通信、環境変数に置いたAPIキーの読み取り、送ったすべての依頼の確認まで、できてしまうということです。

 

そこで、人が作ったmodを入れる前には、次のコマンドで中身を確かめます。modが反応する出来事がhooks:の行に、Claude Codeに頼む操作（ファイルを読む、通信するなど）がcalls:の行に一覧で出ます。

claude plugin validate ./some-mod

 

出典：Claude Code Docs「Mods overview」（2026年10月時点・公式参照）

 

僕自身も、作ったパネルを別のAIに何度も点検させて、見つかった指摘はすべて直しました。配る側になる場合も、受け取る側になる場合も、validateで中身を見る習慣をつけておくと安心です。

 

作っていて分かった注意点｜画面のはみ出しとバグは普通に起きる

 

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

 

CLAUDE.mdのようにAIへのお願いを書くだけなら、こうしたバグは起きませんでした。modsは本物のプログラムを動かすので、バグやエラーが出るのは当たり前と考えて、使いながら直していくのがおすすめです。作っていて実際に踏んだ落とし穴は、次の3つです。

 

 

仕事での使いどころ｜毎回やること・毎回見ることを仕組みにする

 

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

 

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

 

反対に、1回きりの作業（普通に頼めば済む）や、外と切り離して動かしたい処理、claude -pやSDKだけで使う場合には向いていません。modsは「毎回やること・毎回見ること」を仕組みにするためのものです。

 

公式のサンプルとほかの人のmodも参考になる

 

何を作るか迷ったら、Anthropicが公開している見本から試すのが近道です。動画で触れた「文脈の残りが減ると天気が悪くなるアイコン」も、その1つです。

 

公式サンプル	できること
token-weather	文脈（コンテキスト）の埋まり具合を、入力欄の上に天気で表示する
blast-radius	rm -rfやforce pushのような危ないコマンドを止めて、影響を見せてから続けるか選ばせる
replay-theater	直前のターンでClaudeが加えた編集を、1つずつ再生する

出典：anthropics/claude-code-playground（2026年10月時点・公式参照）

 

公式アカウントのmodsの発表には、2026年10月18日時点で約2万のいいねが付いていました（@ClaudeDevsの投稿）。ボタン1つで編集してくれるmodなど、自分で作って公開している人も多いので、「Claude Code mods」で調べてみてください。気になるものは、validateで中身を確かめてから試すのがおすすめです。

 

まとめ｜みんな同じだった画面を、自分専用の仕事場にできる

 

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

 

 

Claude Codeを毎日使っている方は、自分好みにカスタマイズした方が作業は確実に楽になります。まずは「朝に今日のまとめを出す」のような小さなmodを1つ頼んで、Claude Codeの画面が自分専用に変わる感覚を試してみてください。

 

modsの解説資料と、自分用のmodを頼むプロンプトは、公式LINEで合言葉「司令席」と送ると受け取れます。

 

公式LINEでmodsの解説資料とプロンプトを受け取る

 

▶ YouTubeチャンネルで新しい検証動画を受け取る

▶ メンバーシップ（スタンダードAI ¥690/月）でジャーヴィスのパネル一式を受け取る

 

こちらの動画もおすすめ

 

ハーネスエンジニアリングとは｜Claude Codeでアプリ開発の質が変わる3つの仕組み

続きを見る