10人規模のコンサルタント会社を経営しているあなたは、半年前から自社サービスページをClaude Codeで作り始めた。最初はうまくいっていた。でも気づくと、毎回「ボタンはオレンジで、角丸で、フォントはこのサイズで」と同じ指示を繰り返している。先週直したはずのデザインが、今日また違う色で出てくる。ページを追加するたびに細かい調整の往復が発生し、肝心のコンテンツを考える時間が削られていく。
同じ悩みを持つ個人事業主や中小企業の担当者は多い。士業の事務所、フリーランスのマーケター、小規模なEC事業者——ウェブサイトを自分で管理している人なら誰でも経験するパターンだ。
このループを断ち切る方法がある。Claude Codeに「ルールブック」を読ませておくことで、デザインの細かい判断を毎回説明しなくても、一貫したウェブページが自動で完成するようになる。この記事では、CLAUDE.md（クロードマークダウン。プロジェクトの設計書として機能するテキストファイル）を使って、ウェブサイトのパーツ制作を半自動化する実践手順を紹介する。
図: Claude Codeでウェブ制作を自動化する全体像（画像生成待ち）
ルールブックを一度書けば、以後の指示が10分の1になる
Claude Codeで作業するとき、プロジェクトのフォルダにCLAUDE.mdというファイルを置いておくと、Claude Codeは毎回その内容を読んだ状態で仕事を始める。
CLAUDE.md（クロードマークダウン）とは、プロジェクトごとの「申し送りノート」や「スタイルガイド」のようなもの。一度書いておけば、新しい作業のたびにClaude Codeが自動的に読み込み、そのルールに従って動いてくれる。
「ボタンの色はオレンジ、角丸8px、フォントは14px」という指示をCLAUDE.mdに書いておけば、次回から「お問い合わせボタンを作って」と言うだけで、その通りのボタンが出てくる。毎回説明する手間が消える。
実際にどんなことを書くのか。個人で税理士事務所を運営している田中さん（仮名・50代）の事例を見てみよう。田中さんは月に2〜3回、サービスページやブログ記事のレイアウトを自分でClaude Codeを使って更新している。
# ウェブサイトの設計ルール
## デザイン
- メインカラー: オレンジ (#D97706)
- フォント: Noto Sans JP、本文14px、見出し20px
- ボタン: 角丸8px、内側の余白は上下12px・左右24px
- セクション間の余白: 64px以上
- 背景色: 白 (#FFFFFF) または薄いグレー (#F9FAFB)
## 読者への伝え方
- 読者は税務相談を考えている中小企業の経営者（非エンジニア）
- 専門用語（減価償却、節税策など）は初登場時に1行で解説する
- 一人称は「私」または「田中税理士事務所」
- 断定より「〜が便利です」「〜という選択肢があります」の表現を使う
## ページ構成の型
- トップ: ヒーロー → 選ばれる理由3つ → サービス一覧 → 料金表 → お客様の声 → CTA
- サービスページ: 課題提示 → 解決策 → 料金 → よくある質問
- ブログ: 呼びかけ → 問題提起 → 解決策3ステップ → まとめ
## 変更の進め方
- 大きな構成変更の前に、変更内容を確認してから作業を進めること
- テキストと連絡先情報は明示的に依頼されない限り変更しない
このファイルを置いておくだけで、「サービスページに料金表を追加して」と言ったときに、デザインも文章スタイルも全部CLAUDE.mdに沿ったものが自動で出てくる。田中さんの場合、このファイルを作ってから更新作業の所要時間が平均65%短縮した。
「動くパーツ」と「静的なパーツ」の判断をClaude Codeに任せる
ウェブページには2種類のパーツがある。
1つ目は、クリックしたり入力したりする「動くパーツ」。具体的にはお問い合わせフォーム、アコーディオン式のFAQ（クリックで開閉する質問一覧）、タブ切り替えメニュー、カウントアップするアニメーションなどがこれにあたる。
2つ目は、ただ表示するだけの「静的なパーツ」。テキスト、料金表、会社概要、ロゴ画像などは表示するだけで十分なので、余計な仕組みは必要ない。
この分類は技術的には重要で、間違えるとページの読み込みが遅くなったり、スマートフォンで操作がもたつくことがある。しかし非エンジニアが毎回この判断をするのは現実的でない。
Claude Codeは、CLAUDE.mdに「動くパーツはなるべく少なくして、表示専用のパーツをデフォルトにする」というルールを書いておくだけで、自動判断してくれる。
たとえば「サービス一覧ページを作って。各サービスをタブで切り替えられるようにして、気に入ったサービスの問い合わせボタンを押すとフォームが開くようにしたい」と指示すると、Claude Codeは次のように内部判断する。
- サービスの内容テキスト → 静的なパーツ（表示するだけ）
- タブの切り替えUI → 動くパーツ（クリックに反応する）
- お問い合わせフォーム → 動くパーツ（入力・送信が必要）
- ページ全体の骨格 → 静的なパーツ（構造を組むだけ）
この判断が自動になるので、あなたは「どの技術をどう使うか」ではなく「何を表示したいか、どんな操作ができてほしいか」だけ考えていればよい。ウェブ制作の技術的なレイヤーをClaude Codeに任せて、あなたはコンテンツと目的に集中できる。
図: ルールを登録してページを作るまでの流れ（画像生成待ち）
コマンド1つでページパーツをまとめて作る
Claude Codeには「スラッシュコマンド（特定の作業をひとまとめにして実行するショートカット命令）」という機能がある。自分でよく使う作業手順を登録しておくと、コマンド1つで「作成→確認→修正」まで自動完了できる。
.claude/commands/new-section.mdというファイルに以下を書いて保存しておく（.claude/commands/フォルダがなければ作成する）。
---
description: ウェブサイトの新しいセクションを作る
---
作成するセクション名: $ARGUMENTS
以下をすべて実行してください:
1. CLAUDE.mdのデザインルールに従ってセクションを作成する
2. スマートフォン（320px幅）からPC（1440px幅）まで対応する
3. 作成後に表示確認を行い、崩れがあれば自動修正する
4. 完成したら変更内容を日本語で報告する
これを保存しておけば、Claude Codeに/new-section 料金表と打つだけで、料金表のセクションが設計書通りのデザインで生成され、スマートフォン表示の確認と修正まで自動で行われる。
同様に、よく使う作業のコマンドをいくつか登録しておくと便利だ。
/new-section お客様の声→ 実績・レビューセクションを自動生成/new-section よくある質問→ アコーディオン式FAQを自動生成/new-section 料金プラン比較→ 横並びの料金表を自動生成
自分で作るなら1〜2時間かかる作業が、10〜15分で終わる。しかも毎回デザインが統一される。月に4〜5回ページ更新をしている事業者なら、月間で6〜8時間の節約になる計算だ。
既存ページの「気になる部分」をまとめて直す
1年前に作ったページが使いにくくなってきた、スマートフォンで崩れている箇所がある、という状況は珍しくない。こうした修正作業もClaude Codeに任せられる。
効果的な依頼方法は「変えていい範囲」と「変えてはいけない範囲」を明示することだ。
悪い例:「トップページをよくしてください」
これでは範囲が広すぎて、テキストや構成まで変更される可能性がある。連絡先電話番号が変わっていたというケースも起きうる。
良い例:「トップページを見て、スマートフォン表示で崩れている部分だけ直してください。ページの構成、テキスト、色、連絡先情報は変えないでください」
この「制約の明示」が、安全に任せるコツだ。CLAUDE.mdに「大規模な変更をする前に、変更範囲を確認してから作業を進めること」と書いておくと、Claude Codeが自発的に「こういう変更を予定しています、進めますか?」と確認するようになる。これが安全装置として機能する。
リファクタリング（整理・改善。既存のコードをより整った形に書き直す作業）を依頼する際は、修正後に必ず表示確認を依頼するとよい。「修正が終わったら、PC表示とスマートフォン表示の両方で見た目を確認して、問題がなければ完了と報告してください」と添えるだけで、確認工程が自動化される。
図: Claude Code活用前後の比較（画像生成待ち）
よくある失敗3パターンと対処法
パターン1: 毎回デザインが微妙に違う
原因は、CLAUDE.mdのルールが曖昧なこと。「オレンジ系のカラーで」という指示だと、毎回違うオレンジが使われる。#D97706のように具体的なカラーコード（色を16進数で表した番号）で指定すると、完全に一致したデザインになる。
余白の指定も「広めに」ではなく「セクション間は64px以上」と数字で書く。フォントサイズも「読みやすいサイズ」ではなく「本文14px、見出し20px」と明示する。数字で書けるルールは全部数字で書くのが基本だ。
パターン2: 想定外の部分まで変更された
Claude Codeは指示された作業の「周辺」も改善しようとすることがある。お問い合わせフォームを修正していたら、ページタイトルのテキストまで書き換えられていた——という事例がある。
対処法は2つ。1つ目は依頼時に「Aを修正して、Bは変えないで」と範囲を毎回明示すること。2つ目はCLAUDE.mdに「明示的に依頼されていない箇所は変更しない」と書いておくこと。この一文があるだけで、Claudeの挙動が大きく変わる。
パターン3: 似たようなパーツが増えて収拾がつかなくなった
「お客様の声」「事例紹介」「メディア掲載実績」など、構造が似ているセクションが別々のコードで作られているケース。最初は問題ないが、デザインを変更するたびに全部のセクションを個別修正しなければならなくなる。
CLAUDE.mdに「同じ構造のパーツが3カ所以上出てきたら、共通部品としてまとめること」と書いておくと、Claudeが自然に整理してくれる。後から「全セクションのカードデザインを変えて」と言っても、1カ所修正すれば全部に反映される状態が保てる。
実際の効果：週8時間の制作時間がどう変わるか
CLAUDE.mdとスラッシュコマンドを活用し始めた個人事業主・中小企業担当者の実績として、次のような変化が見えてくる。
週1回ペースでウェブサイトを更新している場合:
- 新しいサービスページ追加: 4〜5時間 → 1〜2時間
- モバイル表示の崩れ修正: 2〜3時間 → 20〜30分
- デザイン調整の往復（修正→確認→再修正）: 週2〜3時間 → ほぼゼロ
- ブログ記事のレイアウト適用: 30分 → 5分
合計すると、週8時間程度かかっていたウェブ制作関連作業が、2〜3時間程度に収まるケースが多い。浮いた時間を商品企画やお客様対応に使えるのが最大のメリットだ。
ただし前提として、Claude Codeはターミナル（コンピュータへの文字入力画面）から操作する必要がある場面がある。完全なノーコードではないため、初期設定に数時間の学習投資は必要だ。それを踏まえても、月次で見れば十分に元が取れる選択肢といえる。
まず試すこと：自分のブランドカラーと読者の説明を書く
Claude CodeとCLAUDE.mdの組み合わせが解決するのは、「ウェブ制作の技術的な判断を毎回自分でしなければならない」という問題だ。
ルールを一度書いておけば、以後は「何を伝えたいか」「誰に届けたいか」という本質的な部分に集中できる。技術的な判断はClaude Codeに委ねて、あなたはビジネスの内容に集中する——そういう働き方の選択肢として、まず試してみてほしい。
最初の一歩として、この記事に示したCLAUDE.mdのテンプレートをコピーして、2カ所だけ書き換えてみる。
- メインカラーの16進数コード（自社のブランドカラー）
- 読者の説明（「税務相談を考えている中小企業の経営者」の部分を自分の顧客像に）
この2カ所を書き換えるだけで、次回からClaude Codeが自分のブランドに合ったウェブページを作り始める。残りの細かいルールは、実際に使いながら少しずつ追加していけばよい。
