CLAUDE.mdとは何ですか？

CLAUDE.mdはプロジェクトのルートに置くAI向けの指示書ファイルです。サイトの設計方針・コーディング規約・SEO要件などを記述しておくと、Claude Codeが毎回自動的に読み込んで作業に反映してくれます。

静的HTMLサイトでAdSense収益は得られますか？

得られます。静的HTMLはサーバーコストがほぼゼロのためAdSense収益がそのまま利益になりやすいです。審査通過にはコンテンツの充実・プライバシーポリシー・ナビゲーション整備が必要です。

Claude Codeで無料Webツールを量産した話 — 1日1ツールの開発ワークフローを全公開

「プログラミングができなくてもWebサービスが作れる時代が来た」——そんな言葉を聞いたことがあるかもしれません。この記事では、実際にAIコーディングツール Claude Code を使って無料ブラウザツール群「0-TOOLs」を作り続けている経験から、具体的な開発ワークフローと工夫点を全公開します。

コードを書く量を最小化しながら、SEO・AdSense・スマホ対応まで一気通貫でAIに任せる方法です。

Claude Codeとは何か

Claude Code は、Anthropic社が提供する AI コーディングアシスタントです。ターミナル（コマンドライン）上で動作し、自然言語で指示を与えるとファイルの読み書き・コード生成・修正を自律的に行ってくれます。

GitHub Copilot や Cursor が「補完・提案」中心であるのに対し、Claude Code は「丸ごとやってもらう」スタイルに向いています。

ツール	主な使い方	向いているシーン
GitHub Copilot	コード補完・提案	既存コードベースへの追記
Cursor	エディタ統合型AI	既存プロジェクトの改修
Claude Code	自律的なファイル操作・生成	ゼロからのページ・機能作成

0-TOOLs の場合、「〇〇ツールを作って」と一言指示するだけで、HTML・CSS・JS・ブログ記事・sitemap 更新まで自動でやってもらっています。

なぜ静的HTMLサイトなのか

サーバーレス・インストール不要の「ブラウザ完結型ツール」を選んだ理由は明快です。

ランニングコストがほぼゼロ：GitHub Pages や Cloudflare Pages で無料ホスティングできる
セキュリティリスクが低い：データベースやサーバーが不要なのでサーバーサイド攻撃を受けない
AIが得意な構造：HTML/CSS/JS は LLM（大規模言語モデル）の学習データが豊富で生成精度が高い
AdSense との相性が良い：ページ表示速度が速く Core Web Vitals で高評価を得やすい

ポイント静的サイトはサーバーコストがほぼゼロのため、AdSense収益がそのまま利益になりやすい構造です。スケールしても追加コストがかかりません。

CLAUDE.md — AIへの指示書が鍵

Claude Code を使いこなす最大のコツは、CLAUDE.md というファイルをプロジェクトのルートに置くことです。これはAIが自動的に読み込む「プロジェクト憲法」のようなもので、毎回の会話で指示を繰り返す手間がなくなります。

0-TOOLs の CLAUDE.md には以下を記述しています：

サイトの概要・URL・収益モデル
ツール公開の標準ワークフロー（A〜Eの手順）
SEO 要件（JSON-LD・OGタグ・canonical など）
AdSense 申請対応要件
スマホ特化のコーディング規約（タップターゲット・フォントサイズ等）
GA4 測定IDなどサイト固有の設定値

この指示書を一度書いておけば、「BMIツールを作りたい」と一言入力するだけで：

1
ツール本体（index.html / style.css / main.js）を生成
2
トップページにツールカードを追加
3
関連ツールのフッターに相互リンクを追加
4
ブログ記事を自動生成
5
sitemap.xml を更新

これらすべてをAIが自律的に実行してくれます。

実践メモ CLAUDE.md は最初から完璧にしようとしなくてOKです。ツールを作るたびに「このルールも追加して」と指示してアップデートしていくのが現実的な運用です。

1日1ツールのリリースワークフロー

実際の一連の流れはこうです。所要時間は慣れれば 30〜60分 程度です。

1
アイデア出し（5分） 「次に作るツール」を決める。検索ボリュームがあって競合が弱いニッチなツールを狙う。Google サジェストや「関連する検索キーワード」が参考になる。
2
Claude Codeに指示（1分） 「〇〇ツールを作りたい」と入力するだけ。CLAUDE.md を読み込んだAIが自律的に全ファイルを生成・更新していく。
3
動作確認・修正（15〜30分） ブラウザで実際に触って不具合を確認。「ボタンが小さい」「計算結果が出ない」など自然言語で修正を依頼する。
4
GitHubにプッシュ（5分） git add → commit → push で完了。GitHub Pages や Cloudflare Pages を使っていれば自動デプロイされる。

GitHubで管理する理由

静的サイトの管理に GitHub を使う理由は3つあります。

無料ホスティング：GitHub Pages を使えばカスタムドメインでも月額0円で公開できる
バージョン管理：AIが生成したコードで問題が起きても git reset で即座に戻せる
作業履歴が残る：「何日にどのツールを作ったか」がコミット履歴として自動的に記録される

AIがコードを大量生成するからこそ、変更履歴の管理はより重要になります。「AIが何かを壊した」ときに慌てないためにも、こまめなコミットが習慣になります。

実際どれくらい作れるか・かかるコストは

0-TOOLs では以下のペースでツールを公開しています（2026年5月時点）：

項目	実績・目安
公開ツール数	18ツール以上
ブログ記事数	18記事以上
1ツールの作業時間	30〜60分
Claude API コスト（目安）	1ツールあたり数十円〜数百円

コスト感 Claude.aiのProプラン（月$20）があればAPIキーなしで利用開始できます。ヘビーに使う場合はMaxプランや従量課金のAPIキーへの切り替えも選択肢です。まずProプランから試してみるのがおすすめです。

AIコーディングの限界と向き合い方

AIで何でもできるわけではありません。実際にぶつかった壁と対策を共有します。

動作確認は必ず自分でやる
AIはコードが「正しそう」なものを生成しますが、実際にブラウザで動かすと想定外の挙動になることがあります。特にスマホでのタッチ操作・ファイル入力まわりは要チェックです。
指示が曖昧だと出力も曖昧になる
「良い感じにして」より「ボタンの高さを最低48pxにして、フォントサイズを16pxにして」のほうが期待通りの結果になります。
長い会話になるほど精度が落ちることがある
1ツールごとに会話をリセット（新しいセッション）したほうがコンテキスト汚染を防げます。
著作権・ライセンスの確認
外部ライブラリを使う場合はライセンスを必ず確認。AIが提案したライブラリが商用利用に制限があるケースもあります。

よくある質問

Q. プログラミング未経験でもClaude Codeは使えますか？

基本的な操作はできますが、生成されたコードを確認・修正するための最低限のHTML/CSS/JS知識があると作業効率が大きく上がります。「コードが読める」レベルから実践的に使い始められます。

Q. Claude Codeは有料ですか？

Claude.aiのProプラン（月$20）またはMaxプランのサブスクリプションがあれば、APIキーなしで使用量上限の範囲内で利用できます。上限を超えたい場合や外部連携したい場合は、Anthropic APIキー（従量課金）を別途取得する方法もあります。

Q. GitHub Pagesは商用サイトに使えますか？

GitHub Pagesの利用規約では商用利用は禁止されていませんが、「主な目的が商用サービスの提供」であることは想定されていません。トラフィックが増えてきたらCloudflare PagesやNetlifyへの移行を検討するのが現実的です。

Q. AdSense収益はいつ頃から発生しますか？

AdSense審査通過後、検索流入が安定し始める3〜6ヶ月後から少額の収益が発生し始めるケースが多いです。ツール数・記事数・SEO対策の積み上げが鍵になります。

まとめ

Claude Code は「丸ごとやってもらう」AIコーディングツール。静的サイトとの相性が特に良い
CLAUDE.md（AI向け指示書）を整備すれば、毎回の指示を最小化してツールをサクサク量産できる
ワークフローはシンプル：指示 → 生成 → 動作確認 → GitHub プッシュの4ステップ
1ツールあたりの作業時間は30〜60分、APIコストは数十〜数百円が目安
AIが生成したコードは必ず自分で動作確認する。バージョン管理（Git）は必須

このサイト自体が「Claude Codeで作り続けているサイト」です。実際にツールを使ってみて、どんな仕組みで動いているか想像しながら使ってもらえたら嬉しいです。