Claude Codeの.claude/rules/が何をするフォルダで、CLAUDE.mdとどう違うのかを、トップページを生成させて確かめます。
この記事でわかること
.claude/rules/とは何か（役割と置き場所）CLAUDE.mdとの違いと使い分けpathsで「特定のファイルを触るときだけ効くルール」を作る方法
先に結論だけ： rules は機能としては CLAUDE.md と同じように効きます。ポイントは3つです。
- rulesはトピックごとにファイル分割できる
- rulesは
CLAUDE.mdに直接書いたときと同等の効果が得られる（CLAUDE.mdが無くても効く） - だから
CLAUDE.md（方針・索引）と rules（領域別ルール）は役割を分けて書ける
この記事は連載「AIにコードを書かせる前に知っておきたい設定ファイル」の第3回です。第1回（CLAUDE.mdとは？効いた・効かなかった3パターンで検証）／第2回（settings.jsonって何？確認ダイアログを減らすまでの実録）も公開しています。
rulesとは
.claude/rules/ は、ルールをトピック別の Markdown ファイルに分割して置く場所です。CLAUDE.md が「プロジェクト全体の指示書」なら、rules はそれを章立てで分けたルール集にあたります。
公式ドキュメントによると、paths frontmatter を付けないファイルはセッション開始時に読み込まれます。つまり CLAUDE.md に書かなくても、rules に置けばそのまま効きます。ここが今回の肝です。
置き場所は2か所です。
./.claude/rules/ # プロジェクト用（Git管理に含める）
~/.claude/rules/ # 個人用（全プロジェクト共通）
CLAUDE.md との違い
| 観点 | CLAUDE.md | .claude/rules/*.md |
|---|---|---|
| 役割 | 開始時に読む基本の指示書 | トピック別に分けた詳細ルール |
| 向く内容 | プロジェクトの方針 | 領域別・長めのルール |
| 読み込み | 開始時に自動 | paths なしなら開始時、ありなら対象操作時 |
目安は「全体方針は CLAUDE.md、トピック別の詳細は .claude/rules/ に分割」です。CLAUDE.md から @.claude/rules/xxx.md で索引として繋ぐこともできます。
実験：rules を「なし → 1枚 → 複数」と増やす
同じプロンプトで、.claude/rules/ の中身だけを変えて3回作らせます。②③とも CLAUDE.md は置かず、rules だけで検証します。第1回同様、各ステップは新しいセッションで実行します。
用意するルールは2ファイルです。
# .claude/rules/frontend.md（コード規約）
htmlとjsとcssはそれぞれ別で記述すること
cssのセレクタはスネークケースで記述すること
# .claude/rules/theme.md（デザイン規約・③で追加）
赤色をベースカラーとしてください。
プロンプトは出力フォルダ名だけ変えて揃えます。
{フォルダ名}配下に、かっこいいIT企業のトップページを作成してください。
名前は架空の名称であるN_U_X_4としてください。
①rulesなし
.claude/rules/ を置かずに実行。index.html 1枚に HTML・CSS・JS が同居しました。これが基準です。
図1：rulesなし。生成物は index.html 1枚。
②rules 1枚（CLAUDE.mdと同等の効果）
.claude/rules/frontend.md だけを置いて実行。3ファイルに分離し、セレクタもスネークケースになりました。配色は指定していないので、既定の青系で仕上がります。
図2：rules 1枚。frontend.md だけで3ファイル分離・スネークケース。CLAUDE.md は無し。
図3：②の見た目。配色は指定していないため、既定の青系。
今回用意した2行のルールが、CLAUDE.md ではなく .claude/rules/ に置いただけで効きました。ルールは CLAUDE.md でも rules でも同じように効き、CLAUDE.md が無くても構いません。
③rules 複数（トピック別に分割）
frontend.md に加え、配色ルールを別ファイル theme.md（赤色をベースに）として置きます。
図4：.claude/rules/ に frontend.md（構成）と theme.md（配色）を分けて配置。
実行すると、両方のルールが同時に効きました。3ファイル分離はそのまま、ベースカラーが②の青系から赤系に変わっています。
図5：③の見た目。theme.md が効き、②の青系（図3）から赤系へ変わった。
rules は関心ごとにファイルを分けても、それぞれ独立して効くわけです。
3ステップのまとめ
| 観点 | ①なし | ②rules1枚 | ③rules複数 |
|---|---|---|---|
| ファイル構成 | 1枚 | 3ファイル | 3ファイル |
| セレクタ | ケバブケース | スネークケース | スネークケース |
| 配色 | なし | なし | 赤系ベース |
| 効いたルール | － | frontend.md | frontend.md＋theme.md |
rules は出力を変える魔法ではなく、ルールを整理し、役割分担するための仕組みです。
paths で適用範囲を絞る
ここまでのルールは paths を付けず、常に読み込ませていました。次は、paths で「特定のファイルを触るときだけ効くルール」を試します。
.claude/rules/js.md に、JS ファイル限定のルールを置きます。
---
paths:
- "**/*.js"
---
JSファイルの先頭に必ず `// NUX_RULE_OK` という行を記述すること
この状態で with-paths-rule 配下にトップページを作らせると、結果が分かれました。
図6：script.js の先頭に // NUX_RULE_OK が入った（＝JS には効いた）。
図7：style.css には入っていない（＝対象外なので効かない）。
paths: "**/*.js" のとおり、ルールは JS を触るときだけ 適用され、CSS には及んでいません。「フロントエンド全体の約束（frontend.md）」と「JS だけの約束（js.md）」を分けて持てる、というのが paths の使いどころです。
補足：
pathsの解釈は Claude Code のバージョンによって挙動が分かれることがあります。範囲が効くか確かめたいときは、今回のように対象ファイルと対象外ファイルで結果を見比べるのが確実です。
まとめ
.claude/rules/はルールをトピック別ファイルに分割する場所。pathsなしなら開始時に読まれる- rules は
CLAUDE.md直書きと同等の効果。CLAUDE.mdが無くても rules 単体で効く - rules は複数ファイルに分けても、それぞれ独立して効く（構成＝frontend.md／配色＝theme.md）
- だから
CLAUDE.md（方針・索引）と rules（領域別ルール）は役割を分けて書ける pathsを付ければ、特定のファイルを触るときだけ効くルールにできる（例：JS だけの約束）
CLAUDE.md が長くなってきたら、まず1トピックだけ .claude/rules/ に切り出してみてください。
次のステップ
検証に使ったルールとコードは xpendev/claude-md-html — rules-md で公開しています。手元で確かめてみてください。
連載ナビ
コメント