Claude Codeで小さなウェブツールを作る

小さなブラウザツールを1段落で説明し、Claude Codeに1つのHTMLファイルとして作らせます。このサイトのすべての無料ツールは、この方法で作られています。

エージェントが仕上げられる範囲を選ぶ。

うまくいくツールは、意図的に小さく作られています——1つの仕事だけ、ブラウザ内で完結、アカウント不要、バックエンドなし、何もアップロードしない。テキスト差分ツールパターンジェネレーター、電卓のようなものを思い浮かべてください。その範囲なら1つのHTMLファイルに収まり、エージェントが1つのループの中でビルド、テスト、修正まで完結でき、ホスティングもどこでも無料です。

必要なもの。

  • Claude Code——Claude Proプラン(年払いで月額$17、月払いで$20)に含まれます。ターミナル、Claudeデスクトップアプリ、ブラウザのいずれでも動作します。
  • 空のフォルダとテスト用のブラウザ。
  • 1段落の意図——ステップ2のブリーフを参照してください。

アイデアから公開まで6ステップ。

  1. Claude Codeをインストールし、Claudeアカウントでサインインしてから、空のフォルダで開きます。
  2. ブリーフを書きます——ツールが何をするか、誰のためのものか、そして制約——index.html1つ、CSSとJavaScriptはインライン、すべての計算はブラウザ内で行い、サーバーには何も送らない、というように。
  3. 最初のバージョンをエージェントに作らせ、ブラウザでファイルを開いて初見の人のように使ってみます。
  4. 問題を平易な言葉で報告します——エージェントがファイルを直接修正するので、「Safariでコピー ボタンが反応しない」で十分な指示になります。
  5. 無料のResponsive Previewツールで、3つの幅でレイアウトを確認します。
  6. どこかの無料の静的ホストにファイルを公開する前に、まずLaunch Checklist Promptを実行してください——公開前チェックガイドにやり方があります。

実際にかかる費用。

小さなツール1つの費用は、開発予算ではなくサブスクリプション代です。このサイト全体——無料のツールとページすべて——には、AI利用料としておよそ$565〜$825という総額を示す公開のビルドログがあります(リリースノート参照)。ツール1つはそのごく一部です。Claude Proには年払いで月額$17のClaude Codeが含まれます——このClaude紹介リンクから始められます。

小さなツールが向かない場合。

アカウント、決済、保存されるユーザーデータ、その他機密性のあるものは、ブラウザ内完結モデルを破綻させます——そうしたものには本物のバックエンドと本格的なエンジニアリングが必要です。そして、実際に必要なのがツールではなくランディングページなら、Carrdテンプレートの方が近道です。