Cursor Annotateとは、プレビュー画面上の要素を直接クリックしたり枠で囲んだりして、視覚的にAIへコード修正を指示できるCursorのデザインモード機能です。Webアプリの画面崩れやボタン配置のズレを直したいとき、コード上の行番号やCSSクラス名を調べて文章で説明する作業に時間を取られていませんか。
従来のAIコーディングでは「どのファイルのどの要素か」を言葉で伝える必要がありました。Annotateを使うと、画面上で修正したい場所を指し示し、その場で文字を打ち直すだけでAIが該当コードを書き換えます。
本記事では、Cursor Annotateの仕組み、具体的な操作手順、料金プランごとの対応状況、フロントエンド開発で作業速度を上げる実践例まで整理してお伝えします。
Cursor Annotateとは？画面を見ながら直感指示できる仕組み
Cursor Annotateとは、Cursorの「Agents Window」に組み込まれたブラウザ上で、画面要素を直接触りながらAIエージェントに修正指示を出せる視覚的指示機能です。2026年10月下旬リリースのバージョン3.24.18以降で利用できます。
UI開発は空間的な配置を扱う作業です。文章だけで「ヘッダー右上のログインボタンの余白を少し広げて、色を濃い青に変えてください」と指示しても、AIが別の要素を誤認して修正するトラブルが頻発していました。Annotateはこの伝達ロスをなくします。
ユーザーがブラウザ上で要素をクリックするか枠線で囲むと、その場に指示カードが立ち上がります。
【従来の指示フロー】
画面を見る → 検証ツールでクラス名確認 → ファイル検索 → チャット欄に長い文章を入力 → AIが推測して修正
【Cursor Annotateの指示フロー】
プレビュー画面の要素をクリック → 指示カードに変更内容を入力（または描画・直接打替） → AIがピンポイント修正
画面上で指定した箇所のスクリーンショットとDOM構造情報が自動でCursorのエージェントに送信されます。AIは視覚情報とコード構造を突き合わせて処理するため、指示の食い違いが起きません。
編集部のおすすめ
AIで
エディタのAIを使いこなしたい人向けの講座と、コードなしで作れるツールです。
初月10ドルオフ（新規ユーザー）
Claude CodeやCursorへの指示を声で入力できる。日本語にも対応し、Mac・Windowsのどの入力欄でも使える（無料は1,000語まで）
AI音声・文字起こし ／ 最低料金 ¥0〜
Cursor Annotateが備える4つの主要機能
Cursor Annotateには、UIの修正指示を素早く完了させるための4つの入力方法が揃っています。マウス操作とキーボード入力、さらには音声入力を組み合わせて指示を出せます。
各機能の役割と操作内容を次の表にまとめました。
| 機能名 | 操作方 | 主な |
|---|---|---|
| 要素選択カード | 要素をクリック、またはドラッグで枠囲み | マージン調整、色変更、配置変更の指示出し |
| テキスト直接編集 | 画面上の文字列をダブルクリックして上書き | ボタン文言、見出しテキスト、ラベルの即時修正 |
| 図形・矢印描画 | ペンツールで画面上に矢印や囲み線を描画 | 「ここへ移動」「ここを揃える」といったレイアウト調整 |
| 音声入力 | 指示カード内のマイクアイコンを押して発声 | 手を止めずにニュアンスや詳細な条件を吹き込む指示 |
AI PICKS調べ: AIコーディングカテゴリの有料プラン中央値は月3,000円（n=109、2026-10-30時点）。料金統計レポートで見る
つまり、修正したい内容の種類に応じて最適な入力手段を画面上で選べる設計です。
ボタンの文言を変えたいときは、指示カードに「文言を変更して」と文章を書く必要すらありません。画面のテキストをそのまま打ち直すだけで、AIが対応するJSXやHTMLの文字列を特定して更新します。
複数の指示を画面上に溜めてから一括送信するバッチ指示機能も備わっています。画面全体を見渡しながら5箇所の修正点を配置し、1回の送信でまとめてコード反映させることが可能です。
画面指示がコードに反映される内部の仕組み
Annotateで指示を出した際、裏側でCursorエージェントがどのような処理を行っているかを把握しておくと、AIへの指示出しが格段に安定します。
指示カードを送信した瞬間、Cursorは単なる文章プロンプトではなく、次の3つのデータをパッケージ化してモデルに渡します。
- 指定領域のスクリーンショット: レンダリングされた画面の見た目そのもの
- 要素の構造情報（DOM・アクセシビリティツリー）: タグ名、属性、階層構造
- 計算済みCSSスタイル: 適用されている余白、フォントサイズ、色コード
AIモデルは画面の画像（視覚情報）とコード構造（テキスト情報）をマルチモーダルに照合します。例えば「このボタンを右の入力欄と高さを揃えて」という曖昧になりがちな指示でも、AIは2つの要素のy軸座標の差分を画面情報から把握します。
文章だけで指示していた時代にありがちだった「親要素のクラス名を誤認してレイアウト全体が崩れる」という失敗が激減します。
画面の見た目とソースコードの架け橋をCursor自身が自動生成してくれる点が、この機能の最大の強みです。
毎週月曜の朝に、今週のCursorのニュースとアップデートを先頭に、AI全体の主なニュースと新しく載ったツールをまとめて届けます。登録特典は「AIツール選定チェックリスト 2026」。
確認メールのボタンを押すと登録が完了します。配信はいつでも解除できます。
Cursor Annotateの使い方は？基本の操作ステップ
Cursor Annotateを使ったUI修正の具体的な手順を解説します。操作はすべてCursorエディタ内で完結します。
事前にプロジェクトのローカルサーバー（npm run dev など）を起動しておく必要があります。
# ターミナルで開発サーバーを起動
npm run dev
ステップ1: Agents WindowからDesign Modeを開く
Cursorの画面右上またはサイドバーから「Agents Window」を開きます。内蔵ブラウザのアドレスバーにローカルサーバーのURL（例: http://localhost:3000）を入力してプレビューを表示します。
ブラウザツールバーにある「Design Mode」のトグルスイッチ、またはペン先アイコンをオンに切り替えます。これで画面が注釈モードに移行します。
ステップ2: 修正したい要素をクリックまたはドラッグ選択
画面上で直したいボタンやテキストにマウスカーソルを合わせると、要素の周囲にハイライト枠が表示されます。
対象を1回クリックするか、複数要素を含めたい場合はマウスでドラッグして四角い枠線を作ります。選択した要素のすぐ横に「指示カード」がポップアップ表示されます。
ステップ3: 指示内容の入力（テキスト・描画・音声）
立ち上がったカードに対して、修正指示を与えます。
- 文言を変えたい場合: 要素上のテキストを直接クリックして新しい文章を打ち込みます。
- 色や配置を変えたい場合: カード内の入力欄に「文字色をbrand-blueに変更、上部余白を16pxに縮小」のように入力します。
- 位置関係を動かしたい場合: 描画ツールを選び、画面上に矢印を描いて「ここへ移動」と書き添えます。
ステップ4: 複数指示の蓄積と一括送信
画面の別の場所にも直したい点がある場合は、そのまま次の要素をクリックして指示カードを追加します。画面上にピン留めされた指示カードがたまっていきます。
全体の指定が終わったら、送信ボタン（または Cmd + Enter / Ctrl + Enter）を押します。
エージェントが各指示を順番に解析し、ファイルのコードを自動で書き換えてプレビューを自動リロードします。変更差分はエディタ上で確認でき、問題がなければそのまま受け入れ（Accept）を行います。
どのような場面で役立つ？効果的なユースケース3選
Cursor Annotateはフロントエンド開発のあらゆる場面で活用できますが、効果がはっきりと現れる利用シーンが3つ存在します。
日常的な開発業務で手戻りが発生しやすい作業ほど、この視覚指示が威力を発揮します。
1. デザインカンプとの細かな見た目合わせ
Figmaなどのデザインデータと実装画面を見比べながら、マージンやフォントサイズを1px単位で詰めていく作業です。
コードを見ながら「padding-top: 12px を 16px にして、gap-2 を gap-4 に変える」と手動で打ち直すのは単調で時間がかかります。Annotateを使えば、画面の隙間を指差して「ここを少し広げてカンプに合わせる」と指示するだけで完了します。
2. レスポンシブ表示の画面幅ごとの崩れ修正
画面サイズを変更した際に発生するテキストの折り返し崩れや、スマートフォン表示でのボタンのはみ出し修正です。
Cursor公式のドキュメント（2026年10月確認）でも触れられている通り、Design Mode内では異なる画面幅でのプレビュー切り替えが素早く行えます。モバイル幅で崩れている要素を直接タップして指示を出せるため、メディアクエリの調整が一瞬で終わります。
3. 非エンジニア（デザイナー・PM）からの修正反映
デザイナーやプロダクトマネージャーが画面レビューを行う際、修正箇所のスクリーンショットを撮ってSlackに貼り、文章で指示をまとめる作業が一般的でした。
Annotateの操作感は直感的であるため、デザイナーが画面上で直接ピンを立てて指示を入力し、エンジニアはその指示をエージェントに流し込むだけのワークフローが構築できます。
手作業によるコード箇所の特定が不要になるため、画面修正の往復時間が大幅に短縮されます。
従来のテキスト指示と何が違う？作業効率の比較
従来のチャット欄を使った文章指示と、Annotateを使った視覚的指示には明確な違いがあります。
作業プロセスごとの違いを次の表で比較します。
| 作業項目 | 従来の | Cursor |
|---|---|---|
| 対象コードの特定 | 開発者自身がファイル名や行番号を探して指定 | 画面要素をクリックするだけで自動特定 |
| 位置関係の指示 | 「上から2番目のカード内の左ボタン」等と記述 | 画面上の要素を直接クリックまたは矢印描画 |
| テキスト修正 | チャットに新旧の文字列を書き出して指示 | 画面上の文字を直接打ち直すだけ |
| 複数箇所の修正 | 長文プロンプトを書くか、1つずつ対話 | 画面上に指示カードを並べて1回で一括送信 |
| AIの誤認リスク | 似たようなクラス名や別コンポーネントを誤修正 | スクショとDOM情報が同時送信され誤認激減 |
つまり、人間がコードと画面を行き来して翻訳する負担をゼロにする仕組みです。
これまでAIエディタを使っていて「そこじゃない、その下のボタンを変えてほしいのに」と感じていた人にとって、直感通りの修正が得られる快適さは圧倒的です。
特に複雑なUIコンポーネントが入れ子になっているコードベースでは、探す時間そのものを丸ごと削れます。
Cursor Annotateの利用料金とプランごとの違いは？
Cursor Annotateを使うにあたって、追加の専用料金が発生するのか気になる方も多いはずです。
Cursorのプラン体系は「The X Subscription」の一部として提供されています。新規契約時のプラン構成とAnnotateの対応状況を整理します。
次の表は、現行プランの料金と機能対応をまとめたものです。
| プラン名 | 月額料金 | 年払い | 主な |
|---|---|---|---|
| Free | $0 | - | 基本機能の試用。制限付きで利用可能 |
| Plus | $8 | 約$6.7（年額$80） | Cursor自社モデルのみ。個人開発向け |
| Premium | $30 | $25（年額$300） | 他社モデル（クレジット制）や高度エージェント対応 |
| Super | $100 | 約$83.3（年額$1,000） | 大規模な利用枠、ヘビーユーザー向け |
| Ultra | $200 | 約$166.7（年額$2,000） | 最上位枠、チーム・業務利用向け |
つまり、Annotate機能自体に追加オプション費用はかかりません。
Cursorの基本機能（エージェント機能）の一部として動作するため、お使いのアカウント枠内で利用できます。ただし、背後でコードを生成・修正する処理はエージェント機能（AIモデルの呼び出し）を消費します。
Plusプラン（月額$8）はCursorの自社モデルのみに対応し、AutoやCloud Agents、他社モデルの利用が制限されます。より精度の高い外部モデル（Claude Sonnet 5.5やGPT-6系など）を組み合わせてAnnotateの修正を行いたい場合は、Premiumプラン（月額$30）以上が必要です。
旧プラン（Pro $20など）を契約中の方はそのまま継続利用が可能です。
ここまでの整理: Cursor Annotateの要点
- 正体: バージョン3.24.18以降で使える、プレビュー画面に注釈を打ってAIにコード修正させる新機能
- 操作: クリック、枠囲み、直接打ち直し、矢印描画、音声入力の4通り
- 裏側: スクリーンショットとDOM構造が自動送信されるため、場所の誤認が起きない
- 料金: 機能自体の追加費用はなし。エージェントの利用枠を消費する
修正精度を上げるプロンプト指示のコツ
Annotateを使えば場所の指定は自動化されますが、カードに入力する指示の質によってAIのアウトプット精度は変わります。
手戻りを減らして1回で理想のコードを出力させるためのコツを3つ紹介します。
1. 変更理由ではなく「変更後の状態」を書く
「見づらいので目立たせて」という抽象的な指示は、AIによって解釈がブレます。「背景色をプライマリカラー（青）にし、文字色を白に変更、太字にする」のように、変更後の状態を具体的に指定します。
2. デザインシステムやTailwindの既存クラスを明示する
Tailwind CSSやUIライブラリを使っている場合は、「余白を広げて」ではなく「p-4 を p-6 に変更」「ボタンコンポーネントを variant="outline" に変更」と書きます。
既存の設計ルールを壊さずにコードを書き換えてくれます。
3. 一度に広範囲の要素を巻き込みすぎない
画面全体を大きく囲んで「全体的にモダンにして」と指示すると、CSSが大幅に書き換わりデグレ（既存表示の破壊）が起きます。修正したいブロックごとに枠を分け、1カード1論点で指示を重ねる使い方が安全です。
Cursor Annotateの注意点とデメリットはある？
非常に快適なAnnotate機能ですが、実務で使う上で知っておくべき弱点や注意点も存在します。万能の魔法ではないため、制約を把握した上で使い分ける姿勢が求められます。
注意すべき点は主に次の3点です。
1. ローカルサーバーが起動していないと機能しない
AnnotateはAgents Windowの内蔵ブラウザにレンダリングされた画面に対して動作します。静的なHTMLファイルを開いているだけの場合や、開発サーバーがエラーで落ちている状態では要素の選択やDOM取得が正常に行えません。
2. 複雑なステート管理やバックエンド連携には不向き
Annotateが得意とするのは「見た目（UI・レイアウト・文言・スタイル）」の変更です。「このボタンを押したら別APIを叩いて非同期でデータをフェッチし、エラー時はリトライする」といった複雑なロジック修正を画面注釈だけで完結させるのは困難です。
ロジックの修正は、通常のエージェントチャットやComposerを併用するのが賢明です。
3. トークン消費と実行回数
画面スクリーンショットとDOM構造を送信するため、1回の指示で消費されるコンテキスト情報が通常のテキスト指示よりも大きくなります。プランの週次利用枠を早く消費しやすいため、些細な1行の修正であればエディタ上で手動修正したほうが早い場面もあります。
AI PICKS編集部の判定
Cursor Annotateに対する編集部の率直な見立ては、フロントエンド開発とプロトタイピングにおいて「手放せない神機能」という判定です。
Web画面を開発している最中に最も集中力を削がれるのは、「対象の要素がどのファイルのどのコンポーネントに書かれているかを探しに行く時間」です。クラス名でプロジェクト全体を検索し、目的の行にたどり着いてからチャットを開く一連の動作には、数分単位のロスが発生していました。
Annotateはこの探索コストを完全に消滅させます。画面上でクリックして直接文言を直す体験は、まるでブラウザの検証ツール（DevTools）で直接スタイルをいじっているかのような軽快さです。しかも、検証ツールと違って「修正結果がソースコードに自動で恒久保存される」わけですから、作業効率の跳ね上がり方は圧倒的です。
ただし、複雑な状態遷移やビジネスロジックの構築には向きません。あくまで「見た目の調整とUIの磨き込み」に特化した機能として割り切るのが正解です。
フロントエンドの微修正で毎日何十分も溶かしている開発者であれば、バージョン3.24.18へ今すぐアップデートして試す価値が十分にあります。
よくある質問（FAQ）
Q. Cursor Annotateは無料プラン（Free）でも使えますか？
利用可能です。ただし、Freeプランには月間のエージェント利用回数に上限があります。Annotateは裏側でエージェント機能を呼び出してコードを修正するため、利用枠を使い切ると翌月のリセットまで利用できなくなります。日常的にUI開発でフル活用したい場合は、Plusプラン（月額$8）やPremiumプラン（月額$30）の検討をおすすめします。
Q. 日本語で指示を出しても正しくコードを修正してくれますか？
問題なく修正してくれます。指示カードの入力欄に「ボタンの余白を少し狭くして、角を丸くしてください」といった日本語の文章を入力しても、AIエージェントが正確に意図を読み取ってCSSやJSXを書き換えます。画面上のテキストを直接上書きする場合も、日本語の入力に完全対応しています。
Q. 画面上の要素をクリックしても選択枠が出ないときはどうすればいいですか？
まず開発サーバーが正常に起動しているか確認してください。次に、Agents Window上部の「Design Mode」アイコンがオンになっているかを確かめます。それでも反応しない場合は、画面を一度リロード（再読み込み）するか、Cursorのバージョンが3.24.18以降になっているか「ヘルプ > バージョン情報」から確認してください。
Q. 既存のコードを壊さずに安全に修正を適用できますか？
変更内容はエディタ上で差分（Diff）として表示されるため、勝手にファイルが確定上書きされる心配はありません。AIが提案したコード変更を目視で確認し、問題があれば「Reject（破棄）」、問題がなければ「Accept（適用）」を選択できます。Gitでコミットを打った状態で作業を進めるとより安全です。
Q. スマホ表示（レスポンシブ）の画面でも注釈を付けられますか？
可能です。内蔵ブラウザの表示枠をドラッグして画面幅を狭めるか、レスポンシブ切り替え機能を使ってスマートフォンサイズに変更した状態で、そのまま要素選択や注釈の描画を行えます。モバイル表示特有のハンバーガーメニューやはみ出しの修正に重宝します。
Q. 音声入力で指示を出すにはどう操作しますか？
要素をクリックして開いた指示カード内にあるマイクアイコンをクリックします。ブラウザのマイクアクセスを許可した状態で話しかけると、音声がリアルタイムでテキスト化されて指示内容に入力されます。両手をキーボードから離して画面を指差しながら喋るだけで指示が完了します。
次に読むならこれ
Cursorの導入手順や基本ショートカット、日本語化の設定をまだ完了していない方は、Cursorの使い方・料金・日本語化を一気に解説｜AIエディタCursorの始め方ガイドを先に確認しておくと、エディタ全体の活用効率がさらに高まります。
また、手元PCの自動操作機能について詳しく知りたい場合は、Cursor Computer Useとは？PC操作でアプリ検証を自動化する使い方とアップデート情報もあわせてご覧ください。
あわせて見たいツール・カテゴリ
- ツール: Cursorの機能詳細・レビュー
- カテゴリ: AIコーディングツール一覧
- カテゴリ: AIデザイン・UI作成ツール一覧
- カテゴリ: AIエージェントツール一覧
- カテゴリ: AI生産性向上ツール一覧
- ランキング: 人気のAIコーディングツール比較ランキング
- コスト見直し: Cursorの料金が高いと感じたら｜コスト削減7手と代替の選び方 (2026年版)
- AI下書き活用: scratchpadとは？AIの下書き欄の使い方と3つの意味を整理 (2026年版)
参考にした一次情報
記事の事実関係は、次の公式ページで確認しています。仕様や料金は変わることがあるため、最新の内容は各ページで確かめてください。
- Cursor Docs「Design Mode」（公式）：Agents Windowのブラウザで Annotate を押し、要素・範囲・テキストを指して指示できます（2026年10月確認）
- Cursor「料金プラン」（公式）：Free $0、Plus $8、Premium $30、Super $100、Ultra $200の月額料金（2026年10月確認）
- Cursor Docs「Legacy Cursor plans」（公式）：Pro・Pro+・Ultraなど以前のプランは、これまでどおり使い続けられます（2026年10月確認）
- Cursorヘルプ「Pricing and plans」（公式）：PlusはCursorの自社モデルを固定設定で使い、Cloud Agentsや他社モデルは含みません（2026年10月確認）
