Cursor Annotateとは？Design ModeでUIを指してAIに指示する新機能

Cursor（カーソル）の「Annotate（アノテート）」は、Cursorが2026年6月に発表したDesign Modeの新機能で、実行中のアプリのUI要素をクリックしたり、ページに描き込んだり、音声で説明したりして、AIエージェントに視覚的なプロンプトを渡せる仕組みです。

室谷代表取締役

CursorがDesign ModeにAnnotateを追加したんですよね。これ、地味に見えてUI修正のワークフローをかなり変える機能だと思います。

テキトー教師DotAI 認定講師

単に「注釈が付けられるようになりました」という話じゃないんですよ。文章で「このボタンの余白を詰めて」と説明する代わりに、実際の画面を指して指示できる。

UI作業って本質的に空間的なんですよね。

Cursor Annotateとは？何が発表されたのか

室谷代表取締役

まず整理すると、AnnotateはCursorのAgents Window内ブラウザで動くDesign Modeの中で使う機能です。ブラウザでCmd+Shift+Dを押すと起動する、と公式が案内しています。

テキトー教師DotAI 認定講師

発表はCursorの公式Xアカウントからで、内容は「要素を編集し、ページに描き込み、異なるスクリーンサイズでデザインをレビューできる」というものでした。公式ブログは2026年6月5日付で、著者はErik Nilsson氏、Ian Huang氏、Ryo Lu氏の3名です。

室谷代表取締役

ここで大事なのは、Design Mode自体は以前から存在していたということなんですよね。今回のアップデートで要素選択の精度が上がって、音声入力や描画と音声の併用が加わった。

つまり「新規機能の追加」というより「既存のDesign Modeの大幅な強化」なんです。

テキトー教師DotAI 認定講師

公式ブログも「Design Mode, which we're updating today」と書いていて、アップデートだと明言しています。旧方式ではブラウザツールバーのペンアイコンから起動する形で、注記はチャットに直接送られ、Batch editsやページ上のテキスト直接編集は使えませんでした。

室谷代表取締役

そのあたりの進化の流れは、Cursorでデザインを革新する：ビジュアルエディタとデザインモードの活用術でも整理されているので、背景を知りたい人はそちらもどうぞ。

Cursor Annotateでできること——要素指定・範囲描画・テキスト編集・CSS編集

テキトー教師DotAI 認定講師

公式ドキュメントに沿って、Annotateでできることを整理するとこうです。

• 要素の選択: ページ上の任意の要素をクリックすると選択されて注記が開き、変更内容を入力できる。クリック前にArrow Up／Arrow Downで親要素・子要素へハイライトを移動できる
• 複数要素の選択: Shiftを押しながらクリックで同じ注記に複数要素を追加。要素間の関係性に依存する変更に向く
• 範囲の指定: ページ上をドラッグして領域を囲み、変更を記述。Shiftで一軸に固定、Altで中心からボックスを描ける
• 描画ツール: 範囲指定中はDraw、Ellipse、Rectangle、Arrowが使える。混雑したセクションを丸で囲んだり、該当箇所を指したりできる。Ctrl+Zで取り消し
• テキストの直接編集: テキスト要素をダブルクリックしてページ上で編集。Enterで保存、Escで取り消し。テキスト編集は常にSend待ちになる
• CSSプロパティの編集: 単一要素の注記で「Edit CSS properties」をクリックするとCSSインスペクタが開き、プロパティを絞り込んで値を変更できる。CSS編集も注記と一緒に送られる
• 音声入力: 注記にテキストかCSS編集があるとDictateボタンが表示され、話した内容を注記にできる

室谷代表取締役

音声と描画の併用ができるのが面白いですよね。指で丸を描きながら「この辺の余白が詰まりすぎ」と喋るだけで、両方の情報がエージェントに渡るわけです。

テキトー教師DotAI 認定講師

講座でも受講生さんが「文章でUIの修正を説明するのが一番難しい」と言うんですよ。それを「指す」に変えるのがAnnotateの本質ですね。

Cursor Annotateの使い方・始め方——Cmd+Shift+Dから注記送信までの手順

室谷代表取締役

起動手順を確認しておきましょう。Design ModeはAgents Window内のブラウザにあり、ブラウザツールバーのAnnotateをクリックするか、ブラウザにフォーカスしてCtrl+Shift+Dを押します。

コマンドパレットでは同じ操作が「Toggle Design Mode」として並んでいます。

テキトー教師DotAI 認定講師

発表ツイートではCmd+Shift+D、ドキュメントではCtrl+Shift+Dと表記されている点は押さえておきたいですね。初めて開くまではAnnotateボタンに短いデモ付きの「Try Annotate」プレビューが表示され、5件以上注記を残すとアイコンだけの表示になります。

室谷代表取締役

終了はヒント行の終了ボタン、ショートカットの再押下、Escのいずれか。Escはまず描画ストロークやテキスト編集、開いている注記をキャンセルし、何も開いていなければ終了するという挙動なんですよね。

テキトー教師DotAI 認定講師

送信の仕方はこうです。

• Batch editsオフ（初期状態）: 要素または範囲の注記でEnterを押すと即座にエージェントへ送信。ボタン表示は「Send note」
• Batch editsオン: 注記がページ上に番号付きピンとして溜まり、ツールバーのAnnotateが件数付きのSendボタンに変わる。1クリックで保留中の注記をすべて1メッセージとして送信
• テキスト編集: スイッチの状態にかかわらず常にSend待ち
• Ctrl+L: 注記やテキスト編集の内容を送信せずチャット入力欄に移せる
• Alt+クリック: 注記を開かずに要素をチャット入力欄へ直接追加。注記を開いている状態でAlt+クリックするとその注記に追加

室谷代表取締役

保留中の注記はSendの横のリストで確認でき、Clear Allで全部消せます。保留を残したまま終了しても、送信かクリアをするまでSendがツールバーに残るのは地味に助かりますね。

テキトー教師DotAI 認定講師

キーボードショートカットも一通り揃っています。Design Modeの切り替えがCtrl+Shift+D、注記への要素追加がShift+クリック、親子要素のハイライト移動がArrow Up／Down、範囲指定がドラッグ、ページ上のテキスト編集がダブルクリック、送信または保存がEnter、チャット入力欄への追加がCtrl+L、要素のチャット入力欄への追加がAlt+クリック、描画の取り消しがCtrl+Z、キャンセルまたは終了がEscです。

エージェントに何が伝わる？Annotateが送る情報と精度の仕組み

室谷代表取締役

ここが一番知りたいところだと思うんですよ。注記を送ったとき、エージェントには何が渡るのか。

公式ドキュメントによると、テキストと2種類のコンテキストです。

テキトー教師DotAI 認定講師

整理するとこうです。

• 要素の詳細: 選択した各要素について、タグ、id、クラス、属性、CSS形式のセレクタパス、表示テキストの先頭200文字、要素のサイズと位置
• 計算済みスタイル6種: color、background color、font size、font family、display、position
• コンポーネント情報: React、Vue、Svelteのアプリではコンポーネント名とコンポーネントスタックも含まれ、エージェントがソースを特定できる
• スクリーンショット: 注記を保存するとき、要素または描き込みを入れた範囲に切り取ったスクリーンショットが送られる

室谷代表取締役

公式ブログではもう少し踏み込んで、要素の識別情報としてxpath、コンポーネント、属性、計算済みスタイル、fiberツリーのpropsが入り、空間的な文脈としてスクリーンショット（レイアウト、周辺要素、正確なページ状態）が入ると説明しています。

テキトー教師DotAI 認定講師

つまりピクセル画像だけを渡しているわけじゃないんですよ。「どの要素か」という構造情報と「どう見えているか」という視覚情報の両方を渡している。

だからエージェントは該当コードを特定しやすいわけですね。

室谷代表取締役

描画の場合はビューポートのフリーズしたフレームの上に注記が乗るので、エージェントは自分が反応したまさにそのページ状態を見られる、と公式ブログが説明しています。これは再現性の面でも効きますよね。

テキトー教師DotAI 認定講師

エージェントの仕組み全般についてはCursorエージェントモード完全ガイド：機能・使い方・トラブル解決も参考になります。

Batch editsとCanvas——複数注記をまとめて送るワークフロー活用術

室谷代表取締役

公式ブログが強調しているのが「フロー状態」なんですよね。UIを直していると、コンポーネントを調整したら周りの余白が気になり、次は別のコンポーネントを揃えたくなる。

この連鎖を、前の編集が終わるのを待たずに次々送れるのが強みだと。

テキトー教師DotAI 認定講師

ドキュメントにも「Work in flow」という節があって、ある要素を指して変更を説明し、ページの別の場所へ移って、最初の注記が終わる前に次の注記を送れると書かれています。エージェントが作業中に送られた注記は、通常のフォローアップと同じように扱われるそうです。

室谷代表取締役

まとめて送りたいときはBatch editsをオンにする。1ラウンド分の注記を溜めてから一括送信できるわけです。

開発サーバーがホットリロードするなら、エージェントが終わるそばから変更が実行中のアプリに現れると。

テキトー教師DotAI 認定講師

公式ブログは「複数のサブエージェントの管理もしやすくなる」と述べています。このフローには高速でUI作業に強いモデルが向いていて、CursorはComposer 2.5を推奨しています。

室谷代表取締役

あと見落としがちなのがCanvasとの関係です。2026年6月4日のchangelogで、Canvas内にもDesign Modeが追加されているんですよね。

ダッシュボードやレポート、内部ツールといったインタラクティブな成果物を、ブラウザと同じように要素選択と注記で編集できると。

テキトー教師DotAI 認定講師

ただしCanvasタブは旧来のペンアイコンのDesign Mode切り替えを残していて、そこでは注記がチャットに直接送られ、Batch editsは適用されず、その場でのテキスト編集も使えないという違いがあります。同じDesign Modeでも場所によって挙動が違う点は注意ですね。

室谷代表取締役

モデル選択やAutoモードの挙動はCursor Autoモード完全解説：料金・モデル選択・設定方法までで詳しく解説しています。UI作業のリズムに合うモデルを選ぶという観点でも参考になるはずです。

料金と提供範囲——日本でいつから使える？対応バージョンとプラン

室谷代表取締役

対応バージョンはCursor 3.24.18以降です。それより前のバージョンでは、ブラウザツールバーにDesign Modeと書かれたペンアイコンが表示される旧方式になります。

テキトー教師DotAI 認定講師

料金については、CursorはThe X Subscriptionに統合されていて、Freeが$0、Plusが$8/月、Premiumが$30/月、Superが$100/月、Ultraが$200/月、Teamsが$30・$100・$200の席単位、Enterpriseが個別見積もりという構成です。年払いはPlusが$80/年、Premiumが$300/年、Superが$1,000/年、Ultraが$2,000/年で、価格は税抜きです。

室谷代表取締役

公式ドキュメントにはAnnotateが特定プラン限定だという記述は見当たりません。現時点では、どのプランで使えるかの細かい線引きは明らかにされていない、という扱いが正確ですね。

Premium以上ではCloud agentsやautomationsなどが使えるという差分は料金ページにあります。

テキトー教師DotAI 認定講師

日本での提供開始時期についても、公式の発表には地域別のスケジュールは書かれていません。現時点では明らかにされていない、と正直に伝えるのがいいと思います。

室谷代表取締役

なお、CursorをThe X Subscription以前に契約していた人はレガシープランがそのまま継続します。Pro $20/月はPremium相当、Pro+ $60/月はSuper相当、Ultra $200/月はUltra相当という対応表がヘルプページにあります。

乗り換えは任意です。

テキトー教師DotAI 認定講師

プライバシー面が気になる人はCursor Privacy Modeの完全ガイド【2026年最新】：3つのモード・設定方法・Legacy版との違いを徹底解説も確認しておくといいですね。

よくある質問

室谷代表取締役

最後に、よく聞かれそうな点をまとめておきます。

テキトー教師DotAI 認定講師

まず「AnnotateとCursor Blameはどう違うのか」。今回の発表資料にはCursor Blameに関する記述は含まれていません。

Annotateは実行中アプリのUIを指して修正指示を出す機能で、Blameとは目的が異なる別の機能という位置づけですが、両者の比較について公式の説明は現時点では明らかにされていません。

室谷代表取締役

「無料プランでも使えるのか」も気になりますよね。公式ドキュメントにプラン制限の記載はなく、現時点では明らかにされていません。

対応バージョンはCursor 3.24.18以降です。

テキトー教師DotAI 認定講師

「音声入力は必須ですか」というのもよく聞きます。必須ではありません。

注記にテキストかCSS編集があるとDictateボタンが表示される仕組みで、タイプでも描画でも要素クリックでも指示できます。

室谷代表取締役

「Batch editsをオンにすると何が変わるのか」。オフならEnterで即送信、オンなら番号付きピンとして溜まり、件数付きSendボタンで一括送信されます。

テキスト編集だけは設定にかかわらず常にSend待ちです。

テキトー教師DotAI 認定講師

「React以外でも精度は出るのか」。ドキュメントではReact、Vue、Svelteでコンポーネント名とコンポーネントスタックが含まれると明記されています。

それ以外のフレームワークでの扱いは現時点では明らかにされていません。

室谷代表取締役

「どんなモデルが向いているのか」。公式ブログはUI作業に強く高速なComposer 2.5を推奨しています。

UIの修正を連続で投げるワークフローなので、速度と精度のバランスが効いてくるんでしょうね。

テキトー教師DotAI 認定講師

まとめると、Annotateは「文章で説明する」から「指して伝える」への転換点なんですよ。要素の構造情報とスクリーンショットの両方が渡るから、エージェントが迷いにくい。

講座でも、まずは小さな余白調整から試してみてくださいと伝えたいですね。

室谷代表取締役

そうですね。まずはCmd+Shift+Dを押して、Try Annotateのデモを一度触ってみる。

それだけで「これは別物だ」と体感できると思います。