【図解たっぷり】AI搭載エディタ「Cursor」の使い方入門！～ 導入から基本操作まで ～

「このまま受託制作を続けて、3年後も生き残れるだろうか？」
AIの進化により、単なる制作業務の価値は暴落しつつあり悩んでいる。そんな人は多いと思います。しかし、悲観する必要はありません。 今こそ「作る側」から「教える側」へ回るチャンスです。

THE REAL STORY

億を稼ぐ
スクールの
『裏側』

※ 期間限定公開
ビジネスの設計図を
全て見せます。

Skillhub代表
吉田 光利

「実はこのSkillhubも、
僕１人で作りました。 0から作り上げて、生徒6万人まで育てたノウハウ公開します。 」

裏側を無料で覗く

AI時代を勝ち抜くための「億を稼ぐスクールビジネス」を、期間限定で公開しています。無料ですのでチェックしましょう。

（無料公開、限定100名、10月11日まで）

今すぐ受け取る（無料）

AIに作業を任せながらコードを書けるツールとして、Web制作やプログラミング界隈で話題のCursor。
Web制作の学習を始めたばかりの方や、コードエディタに馴染みがない方でもCursorを試せるように、インストール方法から基本的な機能・AIの使い方まで図解たっぷりで解説します。ぜひ導入して、話題になっている理由を体感してみてください。

• Cursorの基礎知識と導入方法
• Cursorとは？
• Cursor（IDE）の特徴は？
• Cursorの料金は？
• Cursorを導入してみよう
• Cursorのインストール方法は？
• Cursorの初回セットアップ
• Cursorを日本語化する方法は？
• Cursorの基本操作
• CursorでHTMLとCSSを書いてみよう
• HTMLを書いてみよう
• 便利機能 Emmet（エメット）とは
• CSSを書いてみよう
• 表示確認
• CursorのAI機能を使ってみよう
• CursorのAI機能はどう使う？
• AIにHTML+CSSを書いてもらう
• 補足：データ共有を拒否するには？

Cursorの基礎知識と導入方法

画像元：https://cursor.com/ja/home

Cursorとは？

Cursor（カーソル）は、AIエージェント（指示を出すと自分で考えて作業を進めてくれるAI）にコーディングを任せられるアプリです。
公式サイトでも「コーディングエージェント」と紹介されていて、「こんな機能を作って」とチャットで頼むと、AIがコードを書いたり、ファイルを修正したりしてくれます。

もともとCursorは、Microsoft社製の「Visual Studio Code（VS Code）」をベースにしたAI搭載のコードエディタとして登場しました。
2026年4月のアップデート（Cursor 3）からは、AIエージェントとのチャットを中心にした「Agents Window（エージェントウィンドウ）」が追加され、いまはこちらが最初に開く画面になっています。

• Agents Window：チャットでAIに作業を任せるのがメインの画面。複数のAIエージェントに、同時に別々の作業をさせることもできます。
• IDE（エディタ画面）：従来のコードエディタの画面。ファイルを開いて自分でコードを書きつつ、横のAIパネルでAIに相談できます。

2つの画面はいつでも切り替えられ、同時に開いておくこともできます。

この記事では、IDE（エディタ画面）を使って解説していきます。
AIに全部任せるのではなく、自分でもコードを見たり書いたりしながらAIの力を借りるほうが、「AIが何をしてくれたのか」がわかりやすく、Web制作を学ぶうえでも役立つためです。

Cursorは日本の有名企業でも導入されています

AIに作業を任せて効率よく開発できるツールとして、Cursorは世界的に注目されています。
2025年に「価格.com」や「食べログ」を運営する株式会社カカクコムさんが『Cursor』を全エンジニアに導入したことが発表され、日本でも注目を浴びるきっかけとなりました。フリーランスでお世話になっている人も多い会計ソフトの提供元マネーフォワードさんも、開発プロセス全体に『Cursor』を導入していることを発表されています。

Cursor（IDE）の特徴は？

IDEとしてのCursorには、以下のような強みがあります。

• AIチャットが組み込まれており、モデルも選択可能
  コードの横でAIに質問でき、修正や改善をそのまま反映可能。
  複数のモデルに対応しているため、ChatGPTやClaude、Geminiなど目的にあったAIを選択できます。

• ファイルやプロジェクト全体を理解した回答
  ただの補完ではなく、フォルダ内のコード全体を参照して「この関数はこっちに移動した方がいい」など具体的な提案をしてくれます。
  途中参加のプロジェクトなど「この関数はどこで定義しているんだ?!」という場面でも、めちゃくちゃ頼りになります。

• 自然言語でリファクタリングや修正ができる
  「変数名をわかりやすくして」「この処理を関数化して」とチャットで指示すると、自動でコードを書き換えてくれます。
  また、コードエディタがベースなので、ドラッグで範囲指定して「ここのコード」というように指示もしやすいです。

• VS Codeと操作感が近い
  VS Codeがベースなので、VS Codeと操作性が近く、拡張機能も共通して使えます。

Cursorの料金は？

Cursorの料金体系

CursorではAIの使用量に応じた「クレジット制」が採用されています。
「月〇〇回」のように単純な回数ではなく、使用するAIと要求する作業によって使用できる回数が変わってきます。

Cursor モデルと呼ばれているAI（Grok、Composer系統）を使う場合はかなりコスパが良く、そこも人気を集めているポイント。軽めの作業であればCursor モデルでも十分に優秀です。

詳しくは公式ドキュメントのモデルと料金をご確認ください。

Cursorの個人向けプラン

個人向けプランとしては、主に以下の4プランが用意されています（2026年9月時点）。

• Hobby：無料（クレジットカード登録不要）
• Pro：月20ドル
• Pro Plus：月60ドル
• Ultra：月200ドル

※ Hobbyプラン（無料版）は使用量のほか、使用できるAIモデル、AIリクエスト（チャットボックスを使ってAIにコード生成やリファクタリングをさせる）、Tabと呼ばれる自動補完機能の使用量に制限があります。

なお、どのプランでも既定のエージェントの使用量を超過時した際には、追加課金やプラン変更を促すメッセージが表示されます。
勝手に有料版に移行する、課金される、ということはないのでご安心を。

Cursorを導入してみよう

Cursorのインストール方法は？

Cursorの公式サイトを開いて、デスクトップアプリのインストール用ファイルをダウンロードします。
デスクトップアプリはWindows・Mac・Linuxに対応していて、Agents WindowとIDEのどちらもこのアプリ1つで使えます。

公式サイトがOSなどを判定し、最適なバージョンを用意してくれます。
基本的にはそのまま「Download」ボタンを押せばOKです（※下図はWindowsの場合）。

https://cursor.com/ja/download

ご自身のOSと違う、ダウンロードファイルを自分で選びたい方はスクロールダウンすると自分で選択することも可能です。

ダウンロードができたら、インストールを進めていきましょう。
最初の画面は使用許諾契約書に「同意する」で進めます。

セットアップするための詳細を聞かれるので、変更したい点があれば登録します。
よくわからない場合は、デフォルトのまま「次へ」で進めていっても大丈夫。インストールを実行します。

インストールが完了したら、とりあえずCursorを起動してみましょう。

Cursorの初回セットアップ

初めてCursorを起動した場合は、ログインや初期設定が必要になります。

1. ログインしてエディタを起動

はじめて使う方は Sign Up から Cursor に登録してログインしてください。
Cursorを使ったことがある方は Log In から Cursor デスクトップアプリにログインでOKです。

ログインすると、最初に下図のようなAgents Windowが開きます。
「Cursorとは？」で紹介した、チャットメインでAIに作業を任せる画面です。

今回はこちらではなく、IDE（エディタ画面）を使っていきます。
チャットパネルの右上IDEもしくはEditor Windowという矢印表記から開けます。

　　↓
エディタのウインドウが開きました。

上図と表示が違う、Import from VS codeなどのボタンが表示されている場合は、以下の手順でエディタのセットアップを行ってください。バージョンにより多少項目・順序が変わりますが、基本的には画面に従って進めれば問題ありません。

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を日本語化する方法は？

Cursor IDE はVSCodeの拡張機能を使うと、メニューの大部分を日本語化できます。
英語のままで良い方はスキップしてください。

1. 言語パッケージを入手する

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ボタンを押しましょう。

2. 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を書いてみよう

ファイルの作成方法で作った test.html にHTML5のひな型を書いてみます。
コードエディタ特有の便利機能があるので、使ってみましょう。 やり方は超がつくほどかんたんです。

1. ! と入力する
2. Tabキーを押す（薄い色で候補のコードが表示される）
3. もう一度 Tab キーを押す（確定される）
4. lang属性を日本語（ja）に変える

便利機能 Emmet（エメット）とは

Emmetとは、簡単な記載でHTMLやCSSを補完入力できるツールです。
先ほどの ! 入力 → Tabキーで展開のように、決められた書き方を使ってTabキーを押すとコードとして展開してくれます。

記法をいくつか覚えると作業が格段に楽になります。
全て覚えなくても大丈夫です！チートシートを見ながら、よく使いそうな物から使ってみましょう。

Emmetチートシート

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

上図の赤枠で囲った部分がAIチャットのパネルです。
入力欄の下、青枠で囲った部分では、AIの「モード」と、使用するAIのモデルを選ぶことができます。

■ チャットの「モード」ってなに？

モードは、AIにどこまで作業を任せるかを決める設定です。
左側のボタン（上図では Ask）をクリックすると、選べるモードの一覧が開きます。

それぞれのモードは、ざっくり以下のような役割です。

• Agent：コードを書く・ファイルを修正するなど、実際の作業までAIにお任せするモード。迷ったらこれでOK
• Plan：いきなり作業せず、まず「どう作るか」の計画を立ててくれるモード。計画を確認してからAIに作業させられます
• Debug：原因がわかりにくいエラー（バグ）を、調べながら直してくれるモード
• Multitask：複数の作業を、AIに同時に並行して進めてもらうモード
• Ask：質問に答えるだけのモード。コードを読んで説明はしてくれますが、ファイルは書き換えません

最初は「AIに作業してほしいときはAgent、質問だけしたいときはAsk」の2つを覚えておけば大丈夫です。
「このコードってどういう意味？」とAskで聞けば、ファイルを勝手に書き換えられる心配なく質問できるので、学習中の方にもおすすめですよ。

なお、AIのモデルに関しては、執筆時（2026/09）では無料版だとロックのアイコンが表示されていて選択できませんでした。有料プランなど選択可能な場合は、モード選択と同じくプルダウンで使用するAIのモデルを選ぶことができます。
※ 選択肢は随時更新されています。デモと違っていても全く問題はありません。

■ 無料で使いたいんだけど、料金が怖い

Cursorではプランごとに毎月使えるAIの量が決まっています。
使用量の上限に達すると、自分で「追加課金を有効にする」か「上のプランにアップグレードする」かを選ぶ形になり、勝手に課金されることはありませんのでご安心ください。

公式ドキュメントでは、上限に達したときの選択肢として以下の2つが案内されています。

1. オンデマンド利用（使った分だけ後払いで課金）を追加して、そのまま使い続ける
2. 使用量が多く含まれている、上のプランにアップグレードする

また、バージョンアップによってIDEウィンドウの下部でも使用量が確認できるようになりました。
気になる方は、時々こちらも確認してみてください。

AIにHTML+CSSを書いてもらう

Cursorの目玉機能、AIコーディングをやってみましょう。
先ほど作ったtest.htmlとstyle.cssを使って、真っ赤な背景だけのページを、自己紹介カードのページに変身させてみます。

プロンプト（AIへの指示）を送る

AIにファイルを書き換えてもらうので、モードは Agent を選んでおきましょう。
AIパネルに、以下の指示を送ってみました。

`test.html`と`style.css`を使って、自己紹介カードを1枚作ってください。
丸いアイコン画像の枠、名前、ひとことの自己紹介、SNSへのリンクボタンを入れて、カードは画面の中央に配置してください。

ページ全体の背景は赤をやめて、やさしい色のグラデーションに変えてください。

初心者にも読めるように、できるだけシンプルなコードで書いてください。

送信すると、AIがtest.htmlとstyle.cssの中身を確認し、コードを書きはじめます。

AIの操作を許可する

AIが作業している途中で、チャットパネルに「Run」「Skip」というボタンが表示されることがあります。

これは、AIがパソコン上でコマンド（パソコンへの命令）を実行してもいいかの確認です。

• Run：実行を許可する
• Skip：実行せずに先へ進める

今回は「作ったページを確認するためのサーバーを起動する」「確認が終わったのでサーバーを止める」といった内容でした。
ボタンの上に、何をするためのコマンドなのか（Start local HTTP server for preview など）が書かれているので、内容を見て Run を押せばOKです。

表示を確認する

Runを許可すると、AIがローカルサーバー（自分のパソコンの中だけで動く、確認用の簡易サーバー）を立ち上げて、Cursorの中のタブで完成したページを表示してくれます。
ブラウザに切り替えなくても、その場で仕上がりを確認できるのは便利ですね。

CursorのAIも自分でチェックをしてくれます。
終わると、チャットパネルに報告メッセージが表示されます。

※ AIがリンクボタンの動作を確かめるために、、上アニメーションのGitHubなどリンク先のページを開くことがあります。そのままタブを閉じて大丈夫です。

真っ赤なだけだったページが、あっという間に自己紹介カードになりました！
指示どおり、style.cssで指定していた赤い背景も、やさしいグラデーションに書き換わっています。
今回は、アイコン用の画像ファイル（icon.svg）まで用意してくれました。

コードを確認して採用する

仕上がりに問題がなければ、最後にAIが書いたコードを採用しましょう。

チャットパネルの下部には、変更したファイルの一覧が表示されます。
エディタでファイルを見ると、AIが変更した箇所が色付きで表示されています（緑が追加、赤が削除された部分）。 変更箇所が複数ある場合は、「2 of 3」のような矢印で順番に確認できます。

AIが書いたコードを採用するかを、それぞれ選択できます。

• Keep：その変更を採用する
• Undo：その変更を取り消して、元に戻す

ファイル上部のKeep Fileなら、そのファイルの変更を全て採用。
チャットパネル下部の Keep All を押すと、すべての変更をまとめて採用できます。

もちろんCursorのIDEはコードエディタですので、自分で名前や自己紹介の文章を書き換えたり、AIが作成したコードを手直ししてもOK。
また、「アイコンに自分の画像を入れたい」「ボタンにマウスを乗せたら色が変わるようにして」など、AIに続けて指示していくことで、どんどん自分好みに仕上げていくこともできます。

「このコードは何？」と聞きたいときは、askモードに切り替えるのもおすすめです。

補足：データ共有を拒否するには？

初回セットアップの「5. データ共有の確認」で、Cursorにデータ共有をしたくないときは自分で設定するというチェックを入れました。
データが共有されるってちょっと怖いな…という方は以下の手順で設定できます（※ログイン済の場合のみ）。

1. 左上にある歯車のアイコン（Settings）を開く
2. 画面をスクロールダウンして、最下部あたりにある Privacy を探す
3. 選択肢を Share Data から Private Mode に変える

吉田 光利

Skillhub代表 & Edbase代表

教育者&起業家です。今は教育テック系のSkillhubとEdbase（エドベース）という会社をやっています。強みはビジネス構築からデザイン、プログラミング、サーバー構築までひと通できることです。著書に「起業のWeb技術」日本実業出版社があります。