Cursor 使い方
マニュアル

Cursor のダウンロードと初回設定

Cursor（カーソル）は、AI が付いた「プログラムを書くためのメモ帳」です。 Word で文章を書くように、ここでアプリの設計・修正ができます。

① 公式サイトからダウンロード

下のボタンから、MacBook・Mac デスクトップ・Windows PC 用の Cursor を入手します。iPad 向けは後述の「iPad で使う方法」を参照してください。

MacBook へのインストール手順

MacBook Air / Pro をお使いの方は、次の順番どおり進めてください（Intel Mac も同じ手順です）。

1. Safari で cursor.com/download を開く
   Download for macOS をクリック。Apple Silicon（M1/M2/M3/M4）でも Intel でも同じファイルです。
2. Cursor.dmg を開いてインストール
   ダウンロードフォルダの Cursor.dmg をダブルクリック → Cursor アイコンを アプリケーション フォルダへドラッグ → Launchpad または Dock から起動。
3. 初回のみ「開発元を確認できません」と出た場合
   システム設定 → プライバシーとセキュリティ →「このまま開く」をクリック（MacBook 標準の安全確認です）。

iPad（最新 iPadOS）で使う方法

Cursor の本体アプリは Mac / Windows 専用です（2026年6月時点、公式 iPad 版はありません）。 ただし iPad でも、このマニュアル・GitHub・Supabase の確認は問題なく使えます。

Windows / Mac 共通：初回設定

📺 画面イメージ：Cursor の基本レイアウト

Cursor — プロジェクト名

📁 app

📁 public

📄 package.json

📄 .env.local

// 左：ファイル一覧
// 中央：コード（プログラム）
"hello" → console.log("こんにちは");

💬 AI チャット（右側または下）

ここに日本語で指示を書きます。例：「ログイン画面を追加して」

Supabase（スパベース）の登録と接続

Supabaseは、データを保存する「クラウド上の金庫（データベース）」です。 顧客名・売上・予約情報などを、インターネット経由で安全に保管できます。

① アカウント作成（ダウンロード不要・ブラウザでOK）

1. GitHub アカウントでサインアップ（推奨）
   「Continue with GitHub」を押すと、GitHub と連携できます（第4章参照）。
   メールアドレスでも登録可能です。
2. 新しいプロジェクトを作成
   ダッシュボードで 「New Project」 → プロジェクト名（例：caesar-reach-prod）→ リージョンは Tokyo（東京） を選ぶ → データベースのパスワードをメモ帳に控える。
3. 接続情報（API キー）をコピー
   左メニュー 「Project Settings」→「API」 を開き、次の2つをコピーします。

   • Project URL（例：https://xxxxx.supabase.co）
   • anon public キー（長い文字列）
4. Cursor のプロジェクトに設定ファイルを作る
   プロジェクトのルート（一番上のフォルダ）に .env.local というファイルを作り、次のように書きます。

   # Supabase 接続設定（値は Supabase の画面からコピー） NEXT_PUBLIC_SUPABASE_URL=https://あなたのプロジェクト.supabase.co NEXT_PUBLIC_SUPABASE_ANON_KEY=ここにanonキーを貼り付け SUPABASE_SERVICE_ROLE_KEY=ここにservice_roleキー（サーバー専用・外部に出さない）

   Cursor の AI チャットに「Supabase の接続設定を .env.local に追加して」と伝えても自動で作ってもらえます。

Vercel でのデプロイと有料プランの理由

Vercel（ヴァーセル）は、作ったアプリをインターネット上に「公開」するサービスです。 「デプロイ」＝「世界中からアクセスできる状態にする」ことです。

基本の流れ

1. Vercel に登録
   https://vercel.com/signup から GitHub アカウントでログイン。
2. GitHub のリポジトリを連携
   「Add New Project」→ GitHub のリポジトリを選ぶ → 「Deploy」を押す。数分で URL が発行されます（例：https://caesarcopy-19.vercel.app）。
3. 環境変数を Vercel に登録
   Vercel のプロジェクト → Settings → Environment Variables で、.env.local と同じ Supabase キーなどを登録します。これをしないと本番で動きません。

有料プラン（Pro）を契約した方がいい理由

GitHub — ブランチ・コマンド・Cursor への日本語指示

GitHub（ギットハブ）は、プログラムの「変更履歴を保存するクラウドの金庫」です。 コマンドを覚えなくても、Cursor チャットに「今のブランチでコミットしてプッシュして統合して」と日本語で頼めます。

方法A：GitHub Desktop（初心者向け・おすすめ）

黒い画面（ターミナル）を使わず、ボタンだけで操作できます。

📺 画面イメージ：GitHub Desktop の基本操作（Commit → Push）

GitHub Desktop

左：変更ファイル
☑ page.tsx
☑ styles.css

Summary（必須）

顧客一覧ページを修正

Commit to main

Push origin ↑

1. GitHub Desktop をインストール → ログイン
   GitHub アカウント（会社用メール推奨）でサインインします。
2. 「Clone a repository」でプロジェクトを取得
   File → Clone repository → 会社のリポジトリを選ぶ → 保存場所（例：書類フォルダ）を決める。
3. Cursor で同じフォルダを開く
   Cursor の File → Open Folder で、Clone したフォルダを選びます。
4. 作業後 → Commit → Push
   変更が GitHub Desktop に表示されたら Summary を書いて Commit → Push origin。

ブランチ（branch）とは — 作業の「枝分かれ」

ブランチは、本番（main）を壊さずに、別ラインで作業するための「枝」です。 例：ログイン機能だけを feature/login という枝で作り、完成したら本流に統合（マージ）します。

今どのブランチにいるか確認する

ターミナル（Cursor の Terminal → New Terminal）で次を入力します。

ブランチの名前の付け方（社内ルール）

名前がバラバラだと統合ミスが起きます。次の形式を使ってください。

方法C：Cursor チャットに日本語で頼む（コマンド不要）

黒い画面のコマンドを覚えなくても大丈夫です。 Cursor の AI チャット（Cmd + L / Ctrl + L）に日本語でそのまま書けば、 今開いているフォルダ・今のブランチを見て操作してくれます。

そのままコピペして使える指示文（用途別）

各例文のワンクリックコピー版 → Git プロンプト集

方法B：コマンド（Cursor 内ターミナル）

Cursor のメニュー 「Terminal」→「New Terminal」 で黒い画面を開き、以下を入力します。

Python・JavaScript・Node.js とは？

プログラムには「言語」があります。料理で言うと、和食・洋食・中華のような違いです。 全部覚える必要はありません。「どの言語がどこで使われているか」だけ把握すれば十分です。

プロジェクト名をつけた方がいい理由

Cursor でフォルダを開くとき、わかりやすい名前をつけておくと、後から迷子になりません。

良い名前の例

名前をつけるメリット

• Cursor の AI が文脈を理解しやすい — チャット履歴もプロジェクトごとに分かれる
• GitHub・Vercel・Supabase で同じ名前にすると、どれがどれか迷わない
• 複数案件を並行しても、フォルダ名で即座に区別できる
• 引き継ぎが楽 — 後任の人が「このフォルダが本番」とすぐわかる

API キーの説明と取得方法

API（エーピーアイ）は、サービス同士をつなぐ「合言葉（鍵）」です。 API キーはその合言葉の文字列で、他人に見せてはいけません。

まず押さえる5つの API（よく使う）

📂 他の API も見る（折りたたみ一覧）

プロジェクトによって使う API は異なります。該当するカテゴリをタップ（クリック）して開いてください。

設定の基本ルール

1. キーは .env.local に書く（コードに直接書かない）
   OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxx NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
2. .env.local は GitHub に上げない
   通常 .gitignore に含まれているので自動で除外されます。万が一 push した場合は、すぐキーを再発行（ローテーション）してください。
3. 本番（Vercel）にも同じキーを Environment Variables で登録
   ローカルと本番で別キーを使うと管理が楽です（本番用・開発用を分ける）。

作るものの計画 — 3社長会議・100点精査・フェーズ分割

いきなり Cursor で作り始めると、途中で方向がブレます。
社長推奨の流れ：①ブループリント → ②3社長会議 → ③100点精査 → ④フェーズ分割 → ⑤Cursor で実装

Step 1：ChatGPT にブループリントを渡す

作りたいものの概要・参考 URL・競合サービスを ChatGPT に貼り付け、次のプロンプトを使います。

Step 2：3社の社長で会議させる（AI シミュレーション）

作りたい会社・サービスの内容を、性格の違う3人の社長にレビューさせます。 1人だけだと甘い評価になりがちなので、3人で議論させるのがポイントです。

Step 3：100点満点で精査させる

会議のあと、計画を100点満点の採点表で評価させます。 80点未満なら Cursor で作り始めないのが安全です。

Step 4：フェーズに分けて Cursor で実装

1. 80点以上になったら、フェーズ1だけ Cursor に指示
   ChatGPT が出したフェーズ1の内容をそのまま Cursor チャットに貼る。
   例：「フェーズ1：ログイン画面と Supabase 認証だけ実装して。他は触らないで。」
2. 動作確認 → GitHub に push → 次フェーズへ
   1フェーズずつ GitHub に push。動いたら次へ。一度に全部やるとエラーが増えます。
3. フェーズ完了ごとに ChatGPT で振り返り
   「フェーズ1が完了しました。100点採点で現状を評価し、フェーズ2に進む前の見落としがないか確認して」

エラーが出たとき — スクショを Cursor に貼る

エラーは誰でも出ます。大切なのは 「エラー画面をそのまま AI に見せる」ことです。 説明が下手でも、スクショ1枚で9割解決します。

スクショの撮り方

Cursor チャットへの貼り付け方

1. エラーが出ている画面をスクショ
   赤文字のエラーメッセージと、その上下のコードが写るように撮ってください。
2. Cursor の AI チャットを開く
   右側のチャット欄、または Cmd + L（Mac）/ Ctrl + L（Windows）で開きます。
3. 画像を貼り付け
   Mac：チャット欄をクリック → Command + V
   Windows：チャット欄をクリック → Ctrl + V または 画像をドラッグ＆ドロップ
   または入力欄の 📎（クリップ）アイコン から画像を選びます。
4. こう書いて送る（コピペ OK）
   エラー報告テンプレート

   このエラーが出ました。原因と修正方法を教えてください。
   
   【やろうとしていたこと】例：ログイン画面を開いた
   【期待した結果】例：ログイン画面が表示される
   【実際の結果】例：真っ白な画面 / 赤いエラー
   【スクショ】添付画像を参照
   
   修正後、どこを確認すれば成功かも教えてください。

📺 画面イメージ：スクショを Cursor チャットに貼る

Cursor — AI Chat

Error: Module not found: Can't resolve '@/components/Login'

📷 スクリーンショット.png（添付済み）

このエラーが出ました。原因と修正方法を教えてください。
やろうとしていたこと：ログイン画面を開いた

送信 ↑

エラー対応の注意点

• 1つずつ直す — エラーが10個出ても、一番上の1つから
• 直したら保存して再実行 — ファイル保存（Cmd+S / Ctrl+S）を忘れずに
• 同じエラーが繰り返す → スクショ＋「前回の修正後も同じエラーです」と書く
• API キーをスクショに写さない — .env ファイルは画面に映さない
• わからなければ人に聞く — 30分以上同じエラーなら、スクショ付きで担当者へ