はじめに｜AI課金で月3万、それでも黒字なのか
支出明細を見て、少しドキッとしました。
Cursor Pro $20、Claude Pro $20、ChatGPT Plus $20、Midjourney $10。
合計で月70ドル。日本円にして約1万円。安いランチ20回分です。
それでも「月70ドル払う価値があるのか」を本気で検証した結果、結論はあっさり「払う価値がある」でした。むしろ早く払えばよかった、というのが率直な感想です。
ここではその試行錯誤の記録を、実際のコマンドや所要時間の実数値とセットで残しておきます。
これからAIツール導入を検討しているフリーランスのWebコーダー、Web制作会社の発注担当者、副業でコーディング案件を受け始めた方の判断材料になれば嬉しいです。
目次
- AI導入で変わった3つの数値
- ツール別レビュー（Cursor / Claude Code / v0 / Figma AI / GitHub Copilot）
- 実例｜Claude Code に下請け案件のコーディングルールを覚えさせた話
- 失敗談｜AIに任せて事故った3つのケース
- 月のコスト試算と費用対効果
- これから始める人向け｜1万円以内のおすすめセット
- まとめ｜AIは道具、設計は人間
1. AI導入で変わった3つの数値
数字で語れるところは数字で語ります。
① 1案件あたりの平均稼働時間が 22% 短縮
PC5/SP5程度のコーポレートサイトコーディング案件で、AI導入前は平均22時間、導入後は17時間。
1案件あたり5時間の短縮は大きい。月4本受けると20時間浮く計算で、これは新規案件1本ぶんの余白になります。
② タイポ・凡ミス系の差し戻しがほぼゼロに
CursorのTab補完と、Claude Codeの/lint系チェック。
hrefのタイポ、classの不整合、srcsetの抜けといった「見直せば気付くミス」が事前に潰せるようになりました。月1〜2回出ていた差し戻しが、最近は1件以下に落ち着いています。
③ クライアントへの返信レスポンスが 30〜60分早くなる
仕様確認のメール文や、トラブル発生時の状況報告をChatGPTで叩き台にする。
文章を整える時間が体感1/3になりました。数値化は難しいですが、ストレス軽減の効果は一番大きい部分です。
2. ツール別レビュー｜Cursor / Claude Code / v0 / Figma AI / GitHub Copilot
使い込んだ中で、Webコーダーが本当に効果を実感できたツールを5つに絞って紹介します。
① Cursor Pro（月）｜エディタ自体をAI化する第一選択
VS Code のフォーク版。
Tab補完とComposer（複数ファイル横断編集）の速度が頭ひとつ抜けています。Claude Sonnet 4.6 / GPT-4o / o3 などのモデルを使い分けられる点も大きい。
# プロジェクトルートで /init でルール初期化
# .cursor/rules/ にプロジェクト固有のルールを置ける
率直な感想として、「VS Codeに戻れない」依存度がもっとも高いツールでした。
逆に言うと、慣れてしまうと月20ドルの出費が当然になります。
メリット: Tab補完の速度が思考に近い
デメリット: 慣れるまで2週間ほどかかる。最初は「邪魔」と感じる人もいる
② Claude Code（Anthropic 公式 CLI / Claude Pro /月）｜長文コード読解の本命
ターミナルで動くAnthropic公式のCLIツール。
/init でプロジェクトに CLAUDE.md を生成し、.claude/skills/ に独自ルール（コーディング規約・案件固有のクセ）を置けるのが最大の特徴です。
# よく使うコマンド例
claude /init # CLAUDE.md とプロジェクト構造を初期化
claude /agents # サブエージェント一覧
claude /memory # 永続メモリの操作
claude # 対話モード起動。/help で全コマンド表示
特に効くのがレガシー案件の引き継ぎ。
WordPress テーマ全部を貼り付けて「この案件のコーディング規約を読み解いて .claude/skills/ に整理して」と頼むと、半日仕事が30分で済みます。
メリット: 長文コードベースの読解は Cursor より明確に強い。Sonnet 4.6 / Opus 4.7 をモデル選択できる
デメリット: ターミナル UI なので Cursor から完全乗り換えではなく併用になる
③ v0 by Vercel（無料〜/月）｜LPのたたき台を10分で
「ヘッダーとヒーローと特徴3つの LP を React+Tailwind で作って」と日本語で頼めば、デザインが決まったReactコンポーネントが10分で出てきます。
デザイン提案を待っている時間が惜しい時の救世主。
そのまま使える品質ではないですが、「白紙から始めるよりは確実に速い」たたき台用途として完成度が高い。
LovableやBolt.newも似たコンセプトですが、現状ではv0が一番安定して使えました。
メリット: ゼロから組むより確実に速い
デメリット: 出力されたコードのスタイル統一は手作業が必要。Tailwind 前提
④ Figma AI / Figma Make（Figma Pro 月）｜デザイナー連携の摩擦軽減
Figmaに組み込まれたAI機能。
ワイヤーから画面の自動生成、コピーライティングの叩き台、Auto Layoutの自動調整など。Webコーダー視点だと、Figma → コード変換の精度が上がったのが地味に効きます。
Code Connect でデザインシステムをコード側と紐づけられるようになって、「デザイナーが上げてくれた Figma を Cursor に渡せばだいたい組める」状態に近づいてきました。
メリット: Figma → コードの摩擦が確実に減る
デメリット: デザイナー側の Auto Layout 整備が前提。整っていない Figma だと効果半減
⑤ GitHub Copilot（月〜）｜既存IDE派の保険
すでに VS Code / JetBrains で慣れた環境を変えたくない人の選択肢。
Cursorと機能はかなり被りますが、コード補完の速度が安定しているので、「Cursorは試したけど合わなかった」勢の代替として検討価値あり。
GitHub Pro と組み合わせると Copilot Chat が使えるので、Issue 起票や PR レビューの叩き台用途でも使えます。
メリット: 既存環境を変えずに導入できる
デメリット: Cursor の Composer のような複数ファイル横断編集は弱い
3. 実例｜Claude Code に下請け案件のコーディングルールを覚えさせた話
ここからは1事例の深掘り。
普段、ある制作会社経由で下請け案件を受けているのですが、案件ごとに「クラス命名は FLOCSS」「JS は ES6 で書いて Gulp で ES5 にトランスパイル」「CSS は SCSS の _ 始まりで部分ファイル」など、ローカルルールが結構あります。
これを Claude Code の .claude/skills/project-rules.md に書き出して「このプロジェクトでコードを書くときは必ずこのルールに従って」とやらせた結果、3案件目から差し戻しがゼロに。
# 設定ファイルの構造
案件root/
├── CLAUDE.md # 案件全体のメタ情報
└── .claude/
└── skills/
├── project-rules.md # コーディング規約
└── design-notes.md # デザイン関連の落とし穴集
@.claude/skills/project-rules.md を CLAUDE.md に書いておけば自動読み込み。
これで毎回プロンプトに規約を貼る手間がなくなり、「ルールうっかり忘れ」のミスが構造的に消えます。
実コーディング規約の wiki（5万字超）を Claude Code に丸ごと食わせて運用していますが、Sonnet 4.6 は問題なく扱えます。Opus 4.7 だと精度がさらに上がりますが、コスト的には Sonnet で十分です。
4. 失敗談｜AIに任せて事故った3つのケース
AI万能論の記事は他にいくらでもあるので、ここでは実際に事故った話を3つ。
失敗① npm ライブラリの提案に存在しないものが混じる
「mqpacker というメディアクエリ最適化プラグインを Gulp に追加して」と頼んだら、AI がメンテ放棄されて npm から削除済みのバージョンを提案してきました。
npm install で警告は出たが致命エラーは出ず、ビルドは通る。本番環境にデプロイしてから「あ、これメンテ止まってる」と気付くケース。
→ 対策：依存追加の際は最終更新日とダウンロード数を必ず手動で確認
失敗② コピペで取り込んだコードに jQuery 依存が混入
「このスライダーをそのまま組み込んで」と AI が出してきたコードに、jQuery 依存の箇所が混在。
当時の案件は Vanilla JS 縛りで、CIでビルドが通った後、ステージング検証で気付いて慌てて書き直し。
→ 対策：プロジェクトルートの CLAUDE.md に「使用ライブラリ」「依存禁止」セクションを必ず置く
失敗③ 改行コードが LF と CRLF で混ざる
Windows 環境でAIが生成したコードを取り込んだ際、.editorconfig を置いていなかった案件で改行コードが混在。Git のdiff が見づらくなって PR レビューに余計な手間がかかりました。
→ 対策：.editorconfig と .gitattributes をプロジェクト雛形に入れておく
5. 月のコスト試算と費用対効果
| 項目 | 月額 | 効果 |
|---|---|---|
| Cursor Pro | $20 | エディタの体感速度1.5倍 |
| Claude Pro | $20 | 長文コード読解・案件規約の自動化 |
| ChatGPT Plus | $20 | メール叩き台・状況報告の文章化 |
| Midjourney | $10 | LP用画像生成（任意） |
| 合計 | $70（約1万円） | 案件あたり 5時間の短縮 |
時給換算で考えると、月20時間の節約 ≒ 新規案件1本ぶんの余白。Web制作の単価が時給5,000円とすれば、回収できる額はおよそ10万円。
1万円の投資で10万円戻ってくる計算なので、検討する価値は十分にあります。
6. これから始める人向け｜1万円以内のおすすめセット
すべてを一気に課金するのは躊躇する、という人向けに、優先度順で紹介します。
- Cursor Pro（$20）：これだけで作業速度の体感が変わります
- Claude Pro（$20）：レガシー案件の引き継ぎが楽になる
- ChatGPT Plus（$20）：メール文・状況報告の叩き台用
最初の2ヶ月は ① だけ、3ヶ月目から ② 追加、半年目で ③ も検討、というステップが現実的。
Midjourney は「画像が必要な案件があれば」程度の優先度で十分です。
7. まとめ｜AIは道具、設計は人間
AIツールを使い倒してみて、確実に言えることが2つあります。
ひとつ。コードを書くスピードは確かに上がる。
もうひとつ。設計の質はまだ人間の役目。
要件をどう分解するか、どのライブラリを採用するか、どこで手を抜いてどこで丁寧にやるか。
ここはAIが提案してくれますが、最終判断は依然として人間の仕事です。
「AIが書いたから大丈夫」と任せ切ると、必ずどこかで事故が起きます。
逆に「AIに書かせて、自分が監督する」体制を作れば、生産性は確実に上がります。
月70ドルは安い投資だな、と思っています。
コメント