【図解たっぷり】AI搭載エディタ「Cursor」の使い方入門！～ 導入から基本操作まで ～
AI先生があなたの学習をサポートします。今なら無料のWeb/AI制作7講座が受講できます。 （限定100名、8月24日まで）
» 今すぐ無料講座をチェックする
AI搭載エディタとしてWeb制作やプログラミング界隈で話題のCursor。
Web制作の学習を始めたばかりの方や、コードエディタに馴染みがない方でもCursorを試せるように、インストール方法から基本的な機能・AIの使い方まで図解たっぷりで解説します。ぜひ導入して、話題になっている理由を体感してみてください。
Cursorの基礎知識と導入方法
Cursorとは？
Cursor（カーソル）は、AIを活用したコーディング・プログラミング用コードエディタです。
Microsoft社製の「Visual Studio Code（VS Code）」をベースに開発されているため、VS codeと操作性が近い・拡張機能が共通して使えるなどのメリットがあります。
Cursorの大きな特徴は、最初から「AI機能を使用したコーディング」を前提に作られている点。 VS CodeでもCopilotとの連携などができますが、Cursorではワンタッチで使用するAIやモデルの切り替えが可能。以下のような独自の強みがあります。
AIチャットが組み込まれており、モデルも選択可能
コードの横でAIに質問でき、修正や改善をそのまま反映可能。
複数のモデルに対応しているため、ChatGPTやClaude、geminiなど目的にあったAIを選択できます。ファイルやプロジェクト全体を理解した回答
ただの補完ではなく、フォルダ内のコード全体を参照して「この関数はこっちに移動した方がいい」など具体的な提案をしてくれます。 途中参加のプロジェクトなど「この関数はどこで定義しているんだ?!」という場面でも、めちゃくちゃ頼りになります。自然言語でリファクタリングや修正ができる
「変数名をわかりやすくして」「この処理を関数化して」とチャットで指示すると、自動でコードを書き換えてくれます。 また、コードエディタがベースなので、ドラッグで範囲指定して「ここのコード」というように指示もしやすいです。
AIアシスタントが協力し効率よく作業ができる高機能コードエディタとして、Cursorは世界的に注目されています。「価格.com」や「食べログ」を運営する株式会社カカクコムさんも、AIエディタ「Cursor」を全エンジニアに導入したと発表していますよ。
Cursorの料金は？
個人向けプランとしては、主に以下の3プランが用意されています。
- Hobby：無料
- Pro：月20ドル（※年払い選択で20%オフ）
- Ultra：月200ドル
Hobbyプラン（無料版）は、AIリクエスト（チャットボックスを使ってAIにコード生成やリファクタリングをさせる）と、Tabと呼ばれる自動補完機能の使用量に制限があります。
なお、どのプランでも既定のエージェントの使用量を超過時した際には、追加課金やプラン変更を促すメッセージが表示されます。勝手に有料版に移行する、課金される、ということはないのでご安心を。試しに使ってみる、そこまでAIに作業をやらせない…という場合は、とりあえず無料のHobbyプランで使用してみるのが良いでしょう。
有料版はどのくらい使えるの？
Cursorではエージェントの使用量に応じた「クレジット制」が採用されることが発表されています。 「月〇〇回」のように単純な回数ではなく、AIエージェントに要求する作業によって使用できる回数が変わってきます。
詳しくは公式ドキュメントのhttps://docs.cursor.com/en/account/pricingをご確認ください。
Cursorを導入してみよう
Cursorのインストール方法は？
Cursorの公式サイトを開いて、インストール用のファイルをダウンロードします。
OSなどを判定し、最適のバージョンを用意してくれます（※下図はWindowsの場合）。
基本的にはそのまま、白い「ダウンロード」ボタンを押せばOK。
ご自身のOSと違う、ダウンロードファイルを自分で選びたい方は「すべてのダウンロード」から選択することも可能です。
ダウンロードができたら、インストールを進めていきましょう。
最初の画面は使用許諾契約書に「同意する」で進めます。
セットアップするための詳細を聞かれるので、変更したい点があれば登録します。
よくわからない場合は、デフォルトのまま「次へ」で進めていっても大丈夫。インストールを実行します。
インストールが完了したら、とりあえずCursorを起動してみましょう。
Cursorの初回セットアップ
初めてCursorを起動すると、6つの設定を聞かれます。 全体的に黒いし、英語だし、登録しないと使えないの？と一瞬不安になりますが、スキップしちゃって大丈夫です。
1. ログインするか
Sign Up もしくは Log In でログインしても良いですし、ログインせず試してみたいという方は下部の Skip and continue を押してください。
2. VS codeの設定を使うか
次に、初回起動の場合は以下のような画面が開きます。
これは、VS Codeの設定をCursorにインポートするかの確認です。
インポートしたい方は上の Import from VS code ボタンをクリック、不要という方は下の Skip and continue を押してください。
後からでも設定できますので、よくわからない・考え中という方もSkipしておきましょう。
3. カラーテーマはどれが良いか？
最後の画面はテーマ（Cursorの配色）の設定です。
これも後から変えられますので、3つの候補の中で適当に選んで Continue を押してください。
4. キーボードショートカットの設定
キーボードショートカットの設定です。
基本的にはそのまま Continue で良いでしょう。
5. データ共有の確認
あなたがCursorを使用して書くコードを、Cursorが学習し使用しても良いか…というような内容が書かれています。 最初はデータ共有がオンになっているので、オフにしたいときは Settings → Privacy（設定 → プライバシー）で設定してね、という内容です。
下部のチェックボックスにチェックを入れないと進めないので、チェックを入れて Continue。
ちなみにチェックする内容は、意訳すると「学習しても良いし、しないで欲しい場合は自分でoffに設定します」というものです。
6. AI言語とターミナルコマンド設定
いよいよ最後です。
- Language for AI：AIが応答するときの言語です。autoのまま、もしくは確実に日本語で返してほしかったらJapaneseを選択します。
- Open from Terminal：ターミナル操作でCursorを立ち上げる際のコマンド設定。必要ない・よくわからない場合は触らなくてOK。
設定出来たら Continue をクリックしてセットアップを終了します。
Cursorのホーム画面が開きました。
Cursorの日本語化
※英語のままで良い方はスキップしてください。
2. 言語パッケージを入手する
Cursorの日本語化には日本語表記用の言語パッケージ（拡張機能）をインストールする必要があります。 VS codeと同じものを使用するので「VS codeは日本語化している、VS codeの設定をImportした」という方はスキップして大丈夫です。
では、拡張機能から日本語版パッケージを入手してみましょう。
以下のショートカットキーを使って、拡張機能を開きます。
- Windows：Ctrl + Shift + X
- Mac：Command + Shift + X
拡張機能の検索バーが表示されるので、Japanese Language pack と入力します。
上のほうにある❝Japanese Language Pack for VS Code❞をクリックして、Installボタンを押しましょう。
1. Cursorを日本語化する
言語パッケージがインストール出来たら、表示言語の設定を変更しましょう。 以下のショートカットキー、もしくは上部メニューのViewからコマンドパレットを開きます。
- Windows：Ctrl + Shift + P
- Mac：Command + Shift + P
コマンドパレットが表示されたら、Configure Display Languageと入力。
下に表示されるConfigure Display Languageを選択します。
変更可能な言語の一覧が表示されますので、日本語を選択してください。
「日本語に切り替えるには（Cursorの）再起動が必要だよ」という表示が出ます。
Restartを選択して、再起動させましょう。
少し待つと、日本語表示に変更された状態でCursorが起動します。
Cursorの基本操作
Cursorの使い方も、基本的には VS code や他のコードエディタとほぼ同じです。
ただ、そのため紹介・解説などされることがないんですよね。
以下ではこれからコーディングの勉強をしてみたい、コードエディタ自体使い慣れてないんだけど…という方向けに基本操作を紹介します。
Cursorでのフォルダの開き方
何はともあれ、これからコードを書いていくためにファイルを開きたいですよね。 実際の制作にしろ、学習にしろ、必要なファイル一式はフォルダにまとます。ですので、まず最初にするのは「フォルダを開く」です。
Cursorのホーム画面は親切で、「フォルダを開く」ための要素が各所に配置されています。
（前回行った作業があれば、起動した段階でそのフォルダやファイルが開いた状態になります）
メニューのファイルから開いても、開きたいフォルダを直接CursorにドラッグアンドドロップしてもOK。
Cursorでのファイルの作成方法
サイドバーのフォルダ名あたりにカーソルを動かすと「新しいファイル」というアイコンが表示されます。
そのアイコンをクリックして作成するのがもっともわかりやすい方法です。
上部メニューのファイル > 新しいテキストファイル からでも作成できます。
メニューにも書かれている、ショートカットキーも使えますよ。
- Windows：Ctrl + N
- Mac：Command + N
新しいテキストファイル から作成した場合は、作成段階ではまだファイル自体はフォルダ内に作られていません。なにかを記述したら「名前を付けて保存」してください。
このあたりの操作は、ショートカットキーを使うのがおすすめです。
CursorでHTMLとCSSを書いてみよう
Cursorでお試しのHTMLを書いてみましょう。
HTMLを書いてみよう
ファイルの開き方で作った text.html にHTML5のひな型を書いてみます。
コードエディタ特有の便利機能があるので、使ってみましょう。
やり方は超がつくほどかんたんです。
-
!と入力する - Tabキーを押す（薄い色で候補のコードが表示される）
- もう一度 Tab キーを押す（確定される）
- lang属性を日本語（ja）に変える
便利機能 Emmet（エメット）とは
Emmetとは、簡単な記載でHTMLやCSSを補完入力できるツールです。
先ほどの ! 入力 → Tabキーで展開のように、決められた書き方を使ってTabキーを押すとコードとして展開してくれます。
記法をいくつか覚えると作業が格段に楽になります。
全て覚えなくても大丈夫です！チートシートを見ながら、よく使いそうな物から使ってみましょう。
CSSを書いてみよう
次は、style.cssファイルを作成して、HTMLから読み込んでみましょう。
ファイルの新規作成はCursorでのファイルの作成方法を参考に、お好みの方法でどうぞ。
お試しなので簡単に body の背景色を設定してみましょう。
boくらいまで打つと、薄いテキスト（Cursorではゴーストテキストと呼ぶ）で補完する候補が出てきます。慣れないとちょっと見にくいですが、以下のように考えてコードの記述を進めましょう。
- Tabキー：表示されている候補の採用
- Enterキー：改行
下アニメーションでは、ゴーストテキストでbackground-color:の候補が出たので、そのまま採用しました。テストとしてはわかりにくい色なので、派手な色（#F00）に変えておきます。
なお、候補が出ない場合もbackなど数文字入力すると、候補が出てくると思います。
そして、test.htmlを開いて</head>タグのすぐ上あたりでCSSを読み込ませます。
ゴーストテキストが表示されればそのままTabキーで採用しても、自分でlinkと打ってTabキーでEmmet展開してもOK。
あっという間にstyle.cssを読み込ませることができました。 忘れずにHTML,CSS両方のファイルを上書き保存してください。
表示確認
書いたファイルがHTMLとして動くか、CSSが読めているか、チェックしてみましょう。
画面が白ではなく、色が入っていたら正しくできています。
このファイルを使って、いよいよCursorのAI機能を試してみます！
CursorのAI機能を使ってみよう
CursorのAI機能はどう使う？
CursorのAI機能はいくつかありますが、まずはAIパネルを使ってみましょう。
AIパネルは、右上、歯車アイコンの隣にあるアイコンをクリックすると開けます。
デフォルト設定なら以下のショートカットキーも使えます。
- Windows：Ctrl + L
- Mac：Command + L
ただですね、ログインをしないとチャットのメッセージ送信ができません。
下図のようになっている方は「Log in」となっているボタンをクリックして、ログインを行う必要があります。
「Log in」をクリックすると、ブラウザで以下のような画面が開きます。
Eメールアドレスを登録してサインアップしても、Googleなどと連携させても、どちらでも大丈夫です。
サインアップとログインが完了すると、以下のような画面になります。
Cursorに戻ると、AIパネルの表示が変わっているはずです。
ちなみにですが、メッセージ送信ボックスの下部 Auto となっている部分で、使用するAIのモデルを選ぶことができます。
とりあえず使用する、モデルよくわからん…という場合は Auto のままにしておくことがおすすめです。
■ 無料で使いたいんだけど、料金が怖い
Cursorではプランによってモデルごとに制限回数がありますが、Cursor公式ドキュメントでは以下のように説明されています。
使用制限に達したらエラーメッセージが出る（自分で課金設定をしない限りは勝手に課金されない）のでご安心ください。
制限に達したらどうなりますか？
月間使用制限に達すると、明示的に通知され、3つのオプションを含むメッセージが表示されます：リクエストの品質や速度が低下することはありません。ユーザーが使用制限に達した際は、常に明確なエラーメッセージが表示されます。 引用元：Cursor – モデルと料金
- Autoに切り替える
- 使用量課金を有効にして同じモデルを継続使用する（API価格で課金）
- より高いサブスクリプション階層にアップグレードする
なお、上記ページでは月間使用制限に達したときの対処として「Autoに切り替える」が掲載されていますが、2025年9月15日からAutoでのリクエストも使用量に加算されることが発表されています。Proプラン以上を検討されている方も、料金体系について確認してみてください。
AIにHTML+CSSを書いてもらう
料金の不安も払しょくされたところで、Cursorの目玉機能AIコーディングをやってみましょう。
test.htmlとstyle.cssを使って試してみます。
ざっくりと、以下の指示を送ってみました。
このページに３つ横並びのカードを配置したい。
あと、ページ全体の背景色も薄いグレーに変更して。
おぉ！書いてくれましたね。
素晴らしいのは1つのファイルだけではなく、関連するファイルを認識してそれぞれ調整してくれることです。
更新箇所が示されているので、確認して採用してみましょう。
test.htmlとstyle.cssを上書き保存してブラウザで見てみると…できてる！
もちろんCursorはコードエディターですので、自分でCSSを書いたり、AIが作成したコードを手直ししてもOK。
また、「ドロップシャドウを濃いめに」や「カードに画像をいれたい」など、AIにより細かく指示していくことで改善も行うことができます。
おまけ：データ共有を拒否するには？
初回セットアップの「5. データ共有の確認」で、Cursorにデータ共有をしたくないときは自分で設定するというチェックを入れました。
データが共有されるってちょっと怖いな…という方は以下の手順で設定できます（※ログイン済の場合のみ）。
- 左上にある歯車のアイコン（Settings）を開く
- 画面をスクロールダウンして、最下部あたりにある Privacy を探す
- 選択肢を Share Deta から Private Mode に変える
まずは無料で7講座から始めましょう！
募集人数には制限があります。サインアップはお早めに。
8月24日まで