0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

claudecodeを利用して新規プロダクトを作成するときのtips

Last updated at Posted at 2025-10-17

先月からAIエージェント(Claude Code)を使ってプロダクト開発に挑戦してます。やってみて気づいたことが結構あるので、ノウハウをまとめて共有します。

Tips1: Serena MCPを使え

正直、Claude Codeでコード書いてもらってると、トークン消費がヤバいです。

そこで Serena MCP の出番です。これ使うと:

  • 私の意図をより正確に理解してくれる
  • トークン使用量が大幅に減る(マジでマスト級)

/serena コマンドをカスタムコマンド化して常時使うのを強くおすすめします。

設定方法は下の記事を参考にしてください。

📚 参考:Zenn - Serena MCPの活用方法

Tips2: Playwright MCPで実物を見ろ

UI実装をClaude Codeに頼んで、テストも実行してもらって、「よし完成!」って思ったら、自分で見たときにデザイン変だったりしませんか?

なぜか?

  • デフォルトだとHTMLの構造情報しか見れない
  • 実際のレンダリング結果が見えない
  • だから微妙な崩れに気づかない

Playwright MCPなら解決

  • Claude Codeが実際のブラウザ動かせる
  • スクリーンショット撮れるから目で見て確認できる
  • 変なデザインは事前に防げる

ただ、WSL2環境だと私の環境では画面がおかしくなってしまってます。解決方法知ってる人がいたらコメントで教えてもらえると嬉しいです。

WSL2でのレンダリング問題

📚 参考:Note - Playwright MCPの活用

Tips3: ドキュメント先に作れ

実装に走ると、完成したときに「あ、これ想定と違う...」みたいなことになります。手戻りでトークン溶けます。マジで。

だからまず要件定義書を作ってもらえ

自分が作りたいものをテキストにまとめて、最初にAIに要件定義書として整理させる。これだけで:

  • AIとの認識ズレが事前に消える
  • 実装段階での手戻りが激減する
  • トークンの無駄が減る

私の場合、このアプローチを使ってます:

フェーズ やること
1 要件定義
2 競合調査(やるか判定)
3 設計・モック
4 メイン機能実装 + テスト
5 その他細かい実装 + テスト
6 リリース

最初はウォーターフォール寄りで進めて、実装に入ったらアジャイル混ぜる感じです。

Tips4: 定期的に片付けろ

Claude Codeはマジで優秀で、ドキュメント・コードを大量に生成し続けます。これ自体はいいですが、放置するとカオスになります。

ファイルが増えすぎると:

  • 人間が全体を把握できなくなる
  • 重複したドキュメントがたまる
  • 不要なコードが蓄積される
  • 結局何が重要なのか分からなくなる

定期的に整理しましょう

  1. ファイル集約

    • 関連ドキュメント合わせる
    • 不要ファイル削除
  2. 重要な情報は1箇所に

    • 進捗状況
    • TODO リスト
    • ユーザー要望
    • このあたり1つのドキュメントにまとめる
  3. やり方

    • Claude Codeに「整理してください」と言う
    • 週1回とか定期的にやる
    • 整理方針を具体的に指示する

これやるだけでもプロジェクトの見通しが全然違います。

重要な話:プランはMaxにしろ

最初はPro(月$20)で試してたんです。でも限界きました。

Proの何がダメか

  • 1並列プロセスのみ → すぐトークンおしまい
  • 複数タスク同時に走らせられない
  • プロダクト開発には無理

Max(月$100)に変えたら世界変わった

  • トークンが 5倍
  • 2~3並列で処理できる(Sonnet 4.5)

今の運用

役割 やること
プロセス1 フロント UI実装・修正
プロセス2 バック API実装・修正
プロセス3 その他 整理・補助

これで本当に開発スピード変わります。

本音: 最上位プラン使いたいですが、Claude Codeから収益ないのでまだ抑えてます。笑


まとめ

このTips実践すると、Claude Codeでの開発がマジで効率化します。

何か質問あったり、もっと詳しく知りたいことあったらコメントください。 追加記事も作ります。

次回は、実際にこれらのTipを使ってどう開発してるかをまとめる予定です。お楽しみに!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?