AIを使ったコーディングも、どのツールをどの場面で使うかで、作業の快適さがかなり変わってきます。
コーディングにClaudeを使っていますが、どのAIをどう使うかは本当に人それぞれだと思います。私の場合は、ブラウザ版のclaude.aiとCursorの拡張機能（サイドバー）のClaude Codeを使い分けながら制作しています。
今回はその使い分けと、それぞれを使ってみた実感をまとめてみます。
私のweb制作フロー
静的サイトを制作するときの基本的な流れはこんな感じです。
- ブラウザ版のclaude.aiでコーディングルール・構成・デザイン方針を伝えながら、
index.html/css/jsを生成 - Cursorで制作フォルダを開き、生成したファイルを元に修正・仕上げ
- 下層ページ（about、contactなど）はCursorの拡張機能のClaude Code（サイドバー）で
index.htmlを参照しながら作成
ブラウザ版のclaude.aiを使う理由
最初のHTML/CSS/JSの生成には、ブラウザ版を使っています。理由はシンプルで、会話ですり合わせながら作りやすいから。
「このセクションはこういう構成で」といった細かい指定を、会話しながら詰めていけるのが個人的にやりやすいです。最初のたたき台を作るときの、イメージの言語化に向いている気がします。
また、生成結果をその場である程度確認できるのも地味に助かります。アーティファクト表示でHTMLをその場でプレビューできたり、コードの全体像を見ながら修正の指示を出せるのは、チャット形式ならではの良さだと思っています。
生成スピードも、体感的にはブラウザ版のほうが少し速い印象があります。
ちなみに、デスクトップ版のClaude appは使っていません。ブラウザ版と機能的な差はほぼないので、普段からブラウザで開いているというだけで、特に深い理由はないです。
Cursor拡張機能のClaude Codeを使う場面
たたき台ができたら、Cursorに移動して調整していきます。下層ページの作成にはCursorサイドバーのClaude Code（cursorの拡張機能）を使っています。
index.htmlを参照してページを作れる
「このindex.htmlを参考に、aboutページを作って」と指示するだけで、構成・クラス名・コーディングルールを踏まえた上でページを生成してくれます。毎回ファイルを送り直す必要がなく、プロジェクトフォルダ内のファイルを自動で参照してくれるのが本当に楽です。
ヘッダー・フッターを変えたいとき
静的サイトで複数ページある場合、ヘッダーやフッターを変更しようとすると全ページを直す必要がありますよね。
ブラウザ版だと自分でファイルを全部送信して、一つ一つ修正指示を出す必要があります。
Cursorの拡張機能のClaude Codeは、TOPページを修正すると「下層ページも同じ修正をしますか？」と自動で提案してくれます。 サイト全体を見て気を利かせてくれるこの動き、本当に助かります。
ファイル・画像・URLを送れる
Cursorのサイドバー（Claude統合機能）は、ファイル・画像・URLをチャットに添付できます。
- デザインモックアップを見せながら実装相談
- エラー画面のスクリーンショットを共有してデバッグ
- 参考サイトのURLを渡してデザインの方向性を伝える
こういった作業がエディタを離れずにできるのは、作業の流れが途切れなくていいです。
ターミナル版のClaude Codeについて
補足として、ターミナル版（CLI）のClaude Codeについても触れておきます。以前は「ターミナルには画像を送れない」と思っていたのですが、実はドラッグ&ドロップやファイルパス指定で画像を渡すことは可能です。ただし、Macでは比較的スムーズでも、環境によって動作が安定しないことがあります。
Cursorのサイドバーから直接使えるようになってからは、ターミナルを直接開くことはほぼなくなりました。拡張機能のほうが画像もファイルも手軽に扱えるので、実用面では今の使い方のほうが自分には合っています。
ブラウザ版とCursor拡張機能、印象の違い
使い続けて感じる違いも正直に書いておきます。
ブラウザ版のclaude.aiは、デザインも含めたページ全体の方向性まで踏まえて提案してくれる印象があります。「こういうサイトにしたい」という大きな話をするときに向いている感じ。
Cursor拡張機能のClaude Codeは、指示したことをちゃんとやってくれる、コーディングに特化した動きをします。指示したこと以外はやらないし、関連するコーディング上の提案はしてくれる。制作の後半、修正・調整フェーズにはこちらのほうが向いていると思います。
まとめ：フェーズによって使い分けるのがおすすめ
どちらが優れているというより、向き不向きがあるというのが正直な感想です。最初の制作はブラウザ版でじっくり会話しながら作って、後半はCursorでサクサク仕上げる、という流れが今のところしっくりきています。
| フェーズ | 使うツール |
|---|---|
| 初期生成・デザイン方針のすり合わせ | ブラウザ版 claude.ai |
| 下層ページ制作・修正・仕上げ | Cursor拡張機能 Claude Code |
| 画像・ファイルを使った相談 | Cursor拡張機能 Claude Code |
CodexなどのAIコーディングツールも良いとは思っていて、今後使うかもしれません。ただ、今はClaude用にコーディングルールのテンプレートと制作フローを作って運用しているので、しばらくはこのままでいこうと思っています。
参考になれば幸いです。