Portfolioはじめに
AIコーディングツールには、Claude CodeやCursor、GitHub Copilotなど、さまざまな選択肢があります。それぞれに特徴があり、「どれを使えばいいのかわからない」と感じる方も多いでしょう。
この記事では、私が実際に使っているClaude CodeとCursorの使い分けについて、非エンジニア視点でお伝えします。正解はひとつではありませんが、参考になれば幸いです。
Claude CodeとCursorの違い
| 項目 | Claude Code | Cursor |
|---|---|---|
| 動作環境 | ターミナル（CLI） | デスクトップアプリ（GUI） |
| 操作方法 | テキストベースの指示 | 視覚的な操作 + AI補完 |
| プロジェクト把握 | 全体を見渡しやすい | 開いているファイル中心 |
| 向いている作業 | 複数ファイルにまたがる変更 | 1ファイル内の編集、新規作成 |
どちらが優れているというわけではなく、得意な場面が異なります。
小規模なページやLPの場合
HTMLを中心としたシンプルなページ、たとえば1枚もののランディングページ（LP）やペライチのサイトを作る場合は、Cursorを使っています。
Cursorが向いている理由
- 視覚的にわかりやすい: ファイルツリーが見えるので、どこに何があるか把握しやすい
- 即座にプレビュー: 拡張機能でリアルタイムプレビューができる
- HTMLの補完が優秀: タグの入力補助やAI補完がスムーズ
「このセクションの見出しを変えて」「ボタンの色を青に」といった細かい修正は、Cursorで直接ファイルを開いて指示を出すのが手軽です。
規模が大きくなったら
複数のファイルにまたがるプロジェクト、たとえばNext.jsで作るサイトや、APIを使った機能を追加したい場合は、ターミナル上でClaude Codeを起動して作業しています。
Claude Codeが向いている理由
- プロジェクト全体を把握: 複数のファイルの関連性を理解しながら変更できる
- 連携した修正: 「このコンポーネントを変えたら、使っている他のファイルも直して」という指示が通りやすい
- 設定ファイルの変更: package.jsonやtsconfig.jsonなど、設定ファイルの修正も一緒に提案してくれる
「新しいページを追加して、ナビゲーションにもリンクを追加して」といった、複数箇所に影響する変更はClaude Codeのほうがスムーズです。
実際の使い分け例
ケース1: 会社紹介のLPを作る
使用ツール: Cursor
理由:
- 1ページで完結する
- HTMLとCSSが中心
- 画像の配置など視覚的な調整が多い
ケース2: お問い合わせフォーム付きのサイト
使用ツール: Claude Code
理由:
- フォーム送信のAPIルートが必要
- バリデーション処理を追加したい
- 複数ファイルにまたがる実装
ケース3: 既存サイトの文言修正
使用ツール: どちらでもOK
ポイント:
- 1箇所だけならCursorでサッと修正
- 複数ページにまたがるならClaude Codeで一括
両方を組み合わせる
実際には、両方を組み合わせて使うことも多いです。
プロジェクトの基本構造、ルーティング、共通コンポーネントなど
各ページの見た目、テキスト修正、スタイル調整など
API連携、新機能の実装など
最初から完璧に使い分けようとせず、「やりやすいほうを使う」くらいの気持ちで始めるのがおすすめです。
設定や環境構築がわからないとき
ツールの設定方法や環境構築でつまずいたときは、Claude Code自体に聞くこともできます。
「Cursorのインストール方法を教えて」「Node.jsの環境構築手順をファイルに書き出して」といった指示を出せば、手順をテキストで出力してくれます。それを見ながら進めれば、自分で調べる手間が省けます。
もちろん、ChatGPTや他のAIチャットサービスに聞くのも有効です。複数のAIを使い分けるのも、ひとつの工夫だと思います。
まとめ
- 小規模・HTMLメイン → Cursorで視覚的に作業
- 複数ファイル・機能追加 → Claude Codeでプロジェクト全体を把握しながら作業
- 迷ったら両方試す → やりやすいほうを選ぶ
使い分けに正解はありません。自分のやりやすい方法を見つけていくのが、AIコーディングを楽しむコツだと思います。