Cursor Design Mode Annotateの使い方：画面を指定してUIのコードを修正する
Cursor Design Mode Annotateなら、動作中のWebページからコーディングエージェントに変更を指示できます。必要なバージョン、要素や領域の選択、描画、テキストとCSSの編集、音声入力、Batch editsの使い分けを紹介します。エージェントが受け取る要素情報とスクリーンショット、その限界、変更後の確認手順も説明します。
目次
Cursor Design Mode Annotateでは、動作中のWebページ上で変更箇所を指定し、要素情報とスクリーンショット付きでコーディングエージェントに修正を依頼できます。Cursor 3.24.18以降でAgents Window内のブラウザーを開き、Annotateを選ぶか、Cmd/Ctrl + Shift + Dを押します。関連する変更が複数ある場合は、Batch editsを有効にしてメモをまとめて送信します。
この方法は、画面のどこに問題があるかは分かっていても、それを制御するReactコンポーネント、CSSルール、テンプレートが分からない場合に役立ちます。経験のある開発者にとっても、画面上の指摘をソースコードに直接結び付ける手段になります。ただし、エージェントは依頼内容を解釈し、適切なコード変更を行う必要があります。作業後はコードの差分と、ブラウザーに表示されるページの両方を確認してください。
Annotateはどこにありますか？ペンのアイコンしか見えない理由は？
Annotateは、CursorのAgents Window内にあるブラウザーのツールバーに表示されます。使用中のバージョンと画面によって、表示される操作ボタンが異なります。
次の手順で開きます。
- Cursorでプロジェクトを開き、Agents Windowを開きます。
- エージェントのセッションを開始するか、既存のセッションを開きます。続いて、動作中のアプリを表示しているブラウザーを開きます。
- ブラウザーのツールバーでAnnotateをクリックします。ブラウザーにフォーカスを移し、macOSでは
Cmd + Shift + D、WindowsとLinuxではCtrl + Shift + Dを押しても開けます。 - コマンドパレットを使う場合は、Toggle Design Modeを検索します。
- ページ上部のヒント行を確認します。その場で使えるクリックやドラッグなどの操作が表示されます。
Design Modeの公式ドキュメントでは、AnnotateはCursor 3.24.18以降で利用できると説明されています。
Design Modeという名前のペンアイコンが表示される場合は、まずバージョンを確認してください。以前のバージョンでは、新しいAnnotateボタンの代わりにこの操作ボタンを使います。ドキュメントに記載されたAnnotateの画面を使うには、Cursorを更新します。
ツールバーの見た目が異なる理由は、ほかにもあります。Design Modeを初めて開くまでは、ボタンにTry Annotateという短いデモのプレビューが表示されます。メモを5件より多く作成した後は、ボタンがアイコンのみの表示になります。
Design Modeを終了するには、ヒント行の終了ボタンをクリックするか、同じショートカットをもう一度押すか、Escを押します。Escは、まず描画中の線、テキスト編集中の操作、または開いているメモを取り消します。それらの操作が閉じられた後で、Design Modeを終了します。
Cursorの公開ドキュメントには、Annotateを利用できるサブスクリプションプランや、全アカウントへの提供日程が明記されていません。バージョンの条件を満たしているだけで、すべてのアカウントが利用できるとは考えないでください。
要素の選択、図形の描画、CSSの編集はどう使いますか？
変更するコンポーネントが分かっている場合は、その要素を選択します。余白、位置関係、複数の部品の配置が問題になっている場合は、領域を囲んで指定します。
1つまたは複数の要素を選択する
動作中のアプリで要素をクリックすると、その要素が選択され、メモが開きます。メモに変更内容を記入します。
例えば、ヘッダーが混み合っているSaaSのダッシュボードを考えます。検索欄の隣に、フィルターボタンが一列に並んでいるとします。検索欄を選択して、次のように指示します。
入力欄の高さと内側の余白を増やしてください。入力欄の文字を、フィルターボタンに対して上下方向に揃えてください。現在の配色は維持してください。
選択した要素によって、エージェントは変更対象を把握できます。メモの文章では、その対象をどのような状態にしたいかを伝えます。
関連する複数の要素を1つのメモに含めるには、Shiftを押しながら各要素をクリックします。例えば、検索欄とフィルターボタンを選択します。そのうえで、同じベースラインに揃え、高さを統一するよう依頼します。
複数選択は、要素同士の関係を保ちながら変更する必要がある場合に使います。独立した変更や、それぞれ異なる指示が必要な変更は、別々のメモにすると内容が明確になります。
領域を指定してページ上に描画する
ページ上をドラッグすると、変更したい領域を指定できます。その後、変更内容を書き、必要な図形や印を追加します。
ヒント行には、次の4つの描画ツールがあります。
- Draw: 自由な形を描くか、注目してほしい場所をなぞります。
- Ellipse: 要素や要素のまとまりを楕円で囲みます。
- Rectangle: ページの一部分を長方形で囲みます。
- Arrow: 変更したい箇所を矢印で示します。
ドラッグ中にShiftを押すと、動きを1つの軸に制限できます。中心から長方形を描くには、macOSではOption、WindowsとLinuxではAltを押しながら操作します。描画を取り消すには、Cmd/Ctrl + Zを押します。
例えば、概要カードとグラフが近すぎるダッシュボードを修正するとします。カードとグラフの境界付近を長方形で囲み、次のメモを追加します。
概要カードとグラフの間に、上下方向の余白を24px追加してください。グラフの現在の寸法を維持し、画面幅に応じて配置が変わる動作も保ってください。
図形は、問題がある場所を示します。文章では、求める変更と維持すべき条件を伝えます。場所だけでなく、サイズや動作の制約も書くことで依頼が具体的になります。
表示されているテキストを直接編集する
テキスト要素をダブルクリックすると、その場で内容を変更できます。編集を保存するにはReturnまたはEnterを押し、元に戻すにはEscを押します。
例えば、ブラウザー上で見出しの「Usage Overview」を「API Usage」に置き換えます。置き換えたい文字列を、別の文章で説明する必要はありません。
ただし、テキスト編集はBatch editsが無効でも、必ずSendを押すまで送信待ちになります。ページ上で編集を保存しただけでは、エージェントに送られません。
この編集は、ソースコードへの変更提案として扱ってください。ブラウザーだけを恒久的に変更する操作ではありません。Cursorは編集内容をメモとともに送り、エージェントが元のプロジェクトを更新できるようにします。
インスペクターでCSSプロパティを変更する
1つの要素を対象としたメモでEdit CSS propertiesを選ぶと、その要素のCSSインスペクターが開きます。プロパティの一覧を絞り込み、値を変更して、メモとともに送信します。
内側の余白、文字サイズ、displayの動作、位置指定などを調整する場合に便利です。変更をすべて文章で説明する代わりに、プロパティの値を直接指定できます。
エージェントが変更を適用した後は、ページを確認します。指定したCSSの値は、既存のスタイル、レイアウトのルール、画面幅に応じた動作に影響する可能性があります。コードの差分も確認し、正しいコンポーネントが変更され、無関係な修正が混ざっていないことを確かめます。
音声でメモを入力する
メモにテキストまたはCSSの変更が含まれると、音声入力が使えるようになります。Dictateをクリックするか、話している間ボタンを押し続けます。
音声による指示は、描画と組み合わせられます。例えば、宣伝用バナーを囲み、文章を短くするよう伝えます。さらに、ボタンを右揃えにし、モバイル画面では要素を縦に並べるよう指示できます。
送信前に、入力されたメモを読み直します。図形は対象の場所を示し、音声から入力された文章は求める結果を説明します。同じコンポーネントに複数の変更を依頼する場合は、特に指示を明確にしてください。
Batch editsはいつ有効にしますか？
関連する変更をいくつか集めてから実装を依頼する場合は、Batch editsを有効にします。要素や領域のメモをすぐに送信し、結果を見て次の変更を決めたい場合は、無効のままにします。
このスイッチは、最初は無効です。設定によって要素や領域のメモの送信方法が変わります。ただし、ページ上でのテキスト編集は、どちらの設定でもSendを押すまで送信待ちになります。
| 動作 | Batch editsが無効 | Batch editsが有効 |
|---|---|---|
| 要素や領域のメモ | 個別に送信します | 番号付きのピンとして集めます |
| 要素や領域のメモの送信 | メモ内でReturnまたはEnterを押すと、すぐに送信します | ツールバーのSendをクリックして、送信待ちのメモをまとめて送ります |
| メッセージのまとめ方 | メモをそれぞれ別に送信します | 送信待ちのメモを1つのメッセージにまとめます |
| ページ上のテキスト編集 | Sendを押すまで待機します | Sendを押すまで待機します |
| 送信待ちのメモの確認 | 未送信のテキスト編集がある場合は、Sendの一覧で確認できます | Sendの隣にある一覧で、集めたメモを確認します |
| 送信待ちのメモの削除 | Clear Allで削除します。送信済みのメモはこの操作では削除できません | Clear Allで送信待ちのメモを削除します |
すぐに送られるメモと、送信待ちになるテキスト編集を区別してください。Batch editsが無効なら、要素や領域のメモはReturnまたはEnterですぐに送れます。一方、テキスト編集は送信するまで待機します。未送信のテキスト編集がある場合も、Sendの一覧から確認したり、Clear Allで削除したりできます。
Batch editsを有効にすると、ツールバーのAnnotateが、送信待ちの件数を表示するSendボタンに変わります。番号付きピンを確認してから送信できます。送信待ちのメモをすべて送ると、Design Modeも終了します。
メモを送らずにDesign Modeを終了した場合は、Sendボタンがツールバーに残ります。送信または削除するまで、そのボタンから未送信の内容を扱えます。
料金ページを修正する具体例
例えば、料金ページの次の3つの問題を直すとします。
- メインの見出しが、縦方向のスペースを取りすぎています。
- 主な行動を促すボタンの位置が、価格表示と揃っていません。
- 比較表が、小さな画面で窮屈に見えます。
Batch editsを有効にし、問題ごとにメモを作成します。
見出しはテキストを選択し、情報の重要度が見た目で伝わる状態を保ちながら、サイズを小さくするよう依頼します。ボタンは価格表示と一緒に選択し、両者の位置関係を伝えます。比較表は該当する領域を囲み、画面幅に応じてどう配置を変えたいか説明します。
送信前に番号付きピンを確認します。それぞれのメモが、意図した要素や領域を指していることを確かめます。その後、まとめて1つのメッセージとして送ります。
この方法は、変更が1つのまとまった作業を構成する場合に適しています。エージェントはメモを一緒に確認し、変更同士の関係を考慮できます。ただし、一括送信したからといって、すべての指示が正しく実装されるわけではありません。
次の変更が、大きな途中結果に依存する場合は、最初のメモを個別に送ります。更新されたページを確認してから、次の変更を決めます。例えば、まずページ全体の配置を変更し、その後で各コンポーネントの間隔を細かく調整します。
メモ内やテキスト編集中にCmd/Ctrl + Lを押すと、内容をチャットの入力欄へ移せます。すぐに送信したり、Send用に保留したりする代わりの操作です。Option/Altを押しながら要素をクリックすると、その要素を直接チャットの入力欄へ追加できます。メモが開いている場合は、同じ操作でそのメモに要素を追加します。
エージェントには実際にどの情報が渡りますか？
送信したメモには、指示文、構造化された要素情報、切り抜かれたスクリーンショットが含まれます。対応するReact、Vue、Svelteアプリでは、コンポーネント情報も加わります。これらは、エージェントが対応するソースコードを探す手掛かりになります。
Cursorのドキュメントには、選択した要素ごとに次の情報を渡すと記載されています。
| 情報 | Cursorが渡す内容 | 用途 |
|---|---|---|
| HTMLタグ | 要素のタグ名 | 要素の種類を識別します |
| 属性 | 要素のid、クラス、属性 | 対象をほかの要素と区別します |
| セレクターのパス | CSSセレクター形式のパス | 描画されたページ上で要素を探す手掛かりになります |
| 表示テキスト | 表示されているテキストの先頭200文字 | 選択した要素と、その内容を結び付けます |
| 寸法と位置 | 要素のサイズと座標上の位置 | 要素の場所と大きさを伝えます |
| 計算済みスタイル | 文字色、背景色、フォントサイズ、フォントファミリー、display、position | 実際に適用されている表示上の情報を伝えます |
| コンポーネント情報 | React、Vue、Svelteでのコンポーネント名とコンポーネントスタック | 描画された要素とソースコードを結び付ける手掛かりになります |
| スクリーンショット | 選択した要素、または描画付きの指定領域を切り抜いた画像 | 依頼した変更の視覚的な状況を示します |
これは「ヘッダーをもっと良くして」という指示より具体的です。エージェントには、対象、表示に使われている値、画面上の内容、画像が渡ります。文章だけでは説明しづらい場所や見た目を補足できます。
ただし、渡されるのは限られた時点の情報です。ドキュメントは、DOM全体、スタイルシート全体、すべての祖先要素の計算済みスタイルを渡すとは約束していません。アプリの全状態や、ページ全体のスクリーンショットも保証されていません。記載されたフレームワークではコンポーネントスタックが含まれますが、どのプロジェクトでも正しいソースファイルを特定できるとは限りません。
例えば、ボタンを選択すると、エージェントはその種類、クラス、寸法、テキスト、計算済みスタイルを受け取ります。スクリーンショットは、価格表示の隣にどのように配置されているかを理解する手掛かりになります。Reactアプリなら、コンポーネント情報によって、画面上のボタンとそのコンポーネントスタックを結び付けられる場合があります。
VueとSvelteについても、同じ種類のコンポーネント情報が記載されています。これらのアプリでも、コンポーネント名とコンポーネントスタックが含まれます。ただし、フレームワークやプロジェクトが異なっても、ソースコードの発見結果が同じになるとは保証されていません。
エージェントは引き続き、リポジトリを調べ、周辺の実装を理解し、変更方法を決める必要があります。完了後は、コードの差分と動作中のページを確認します。
Cursorは、Annotateのスクリーンショットや要素情報について、トークンコストの計算式を公開ドキュメントで示していません。各メモのコストが一定だと考えないでください。一括送信すればモデルの総使用量が必ず減る、とも限りません。Batch editsはメモの送り方を変える機能であり、実際のコストはエージェントの処理とモデルの使用量に左右されます。
エージェントによる変更をどう確認しますか？
Annotateで依頼を具体的にした後は、プロジェクトの実装と、ブラウザーでの表示結果を確認します。指示が明確でも、実装の確認は別に必要です。
メモの送信後は、次の順で確認します。
- エージェントが該当する変更を終えるまで待ちます。
- コードの差分を確認します。無関係な修正、誤ったセレクター、既存のコンポーネント規約から外れる変更がないか調べます。
- 開発サーバーがホットリロードに対応している場合は、反映後のページを確認します。
- アプリで重要なビューポートサイズごとに、レイアウトをもう一度確認します。
- 必要に応じて操作とアクセシビリティを試します。キーボードのフォーカスや、文字の読みやすさも確認します。
Cursorの2026年10月28日の発表では、異なる画面サイズでデザインを確認できることに触れています。ただし、公開されているDesign Modeの説明には、レスポンシブ表示を自動で検証する仕組みが示されていません。使用中の環境に、文書化された自動確認の方法がない限り、画面サイズごとの確認を別の工程として行ってください。
より広い範囲のUI開発では、Inspo MCPでデザインの参考例やスクリーンショットをコーディングエージェントに渡す方法も役立ちます。こちらは別の課題を解決します。Annotateが動作中の画面の「どこを変えるか」を示すのに対し、参考例は「どのような見た目を目指すか」を伝えます。
開発全体の進め方から選びたい場合は、2026年のCursorとCodexの比較を参照してください。開発の進め方、料金、オンデマンド利用を比較しています。
