--- title: "Cursor Design Modeとは？画面を見ながらUIを直せる公式機能の使い方【Cursor 3対応】" url: "https://www.issoh.co.jp/tech/details/8766/" published: 2025-09-10 updated: 2026-09-27 categories: ["開発"] publisher: "株式会社一創" --- # Cursor Design Modeとは？画面を見ながらUIを直せる公式機能の使い方【Cursor 3対応】 「Cursor デザインモード」で検索すると、内容の違う2つの情報が混在します。ひとつは2026年4月2日のCursor 3で追加された**公式のDesign Mode**で、動いているアプリ画面の上で要素をクリックしたり描いたり話しかけたりすると、AIエージェントがその通りにコードを直す**ビジュアルUI編集機能**です。もうひとつは、Agentチャットに「design-mode」と打ち込むと環境構築を自動化する、コミュニティ発のCursor Rules（非公式）です。本記事は前者の公式Design Modeを主役に、有効化の手順、裏側の仕組み、旧「design-mode」コマンドとの違い、そして業務で使うべき場面と避けるべき場面まで整理します。 ## まとめ：Cursor Design Modeの要点 - **正体**：Cursor 3（2026年4月2日リリース）から使える公式機能。動作中の画面を見ながらUIを直接編集し、AIエージェントがコードへ反映する。 - **有効化**：Agents Window（コマンドパレット `Cmd+Shift+P` から開ける）内のブラウザで `Cmd+Shift+D`。 - **操作**：要素をクリック／複数選択／フレームに描画／音声で指示 →「Apply」でエージェントがコードを更新。 - **推奨環境**：Cursorブラウザと、独自モデルComposer 2（2026年3月19日リリース）以降。公式はComposer 2.5を推奨。 - **旧「design-mode」とは別物**：あちらは「design-mode」と入力して環境構築を自動化する非公式のCursor Rules。名前が同じだけで仕組みが違う。 以下で、公式Design Modeの中身と使い方、旧義との違い、導入判断を順に見ていきます。 ## Cursor Design Modeとは：Cursor 3で追加されたビジュアルUI編集機能 Cursor Design Modeは、ブラウザで動いているアプリの見た目を起点に、AIエージェントへ変更を指示する機能です。従来のようにコードやチャットへ文章で説明するのではなく、実際の画面上で「この要素をこう変えたい」と示すと、エージェントが対応するコードを書き換えます。デザイン意図とコードの間にあった翻訳作業を、画面操作に置き換えるのが狙いです。 ### まず整理：同じ名前の「2つのDesign Mode」 混乱の原因は、無関係な2つの仕組みが同じ「Design Mode」を名乗っている点にあります。区別の軸は「公式機能か」「何を操作するか」です。 | 区分 | 公式Design Mode | 旧「design-mode」 | | ---- | ------------------ | --------------------- | | 提供元 | Cursor公式（Cursor 3） | コミュニティ（非公式） | | 正体 | ビジュアルUI編集機能 | Cursor Rules（自動化ルール） | | 起動 | Cmd+Shift+D | チャットに「design-mode」と入力 | | 主な用途 | 画面を見ながらUIを直す | ローカル環境構築を自動化 | 本記事は上段の公式Design Modeを解説します。下段の環境自動化については後述の「旧『Cursor Design Mode』との違い」で扱います。 ### 公式Design Modeでできること：クリック・描画・音声でUIを指示 公式Design Modeは、動作中の画面に対して次の4通りの指示ができます。いずれも最後に「Apply」を押すと、その意図がコード変更へ変換されます。 - **要素のクリック選択**：直したいボタンや見出しをクリックして対象を確定する。 - **複数選択**：複数の要素を同時に参照し、要素どうしの関係（間隔や整列）を示す。 - **描画**：静止させた画面フレームの上に丸や線を描き、変更したい範囲を指定する。 - **音声での指示**：変更内容を声で説明する。 テキストだけで「3番目のカードの余白を詰めて」と伝えるより、その要素を指して指示するほうが誤解が減ります。見た目の調整を、言語化の手間なしにエージェントへ渡せるのがこの機能の価値です。 ### いつ使えるようになったか：Cursor 3（2026年4月2日）から Design Modeは、エージェント中心のインターフェースへ刷新されたCursor 3の一部として2026年4月2日に登場しました。Cursor 3は複数のAIエージェントを並行実行できるAgents Windowを追加したバージョンで、Design ModeはこのAgents Window内のブラウザで動作します。UI作業には独自モデルのComposer 2.5が公式に推奨されており、2026年6月に更新された公式のDesign Mode解説でもこのモデルが案内されています。バージョンや推奨モデルは更新が速いため、最新の対応状況は公式のchangelogで確認してください。 ## Cursor Design Modeの使い方：有効化からApplyまでの手順 公式Design Modeは、Agents Windowのブラウザで動いているアプリに対して有効化します。手コーディングに戻さず、画面操作からコード反映まで一連で進められます。 ### 有効化の手順：Agents Windowを開いてCmd+Shift+D 1. 編集対象のアプリをローカルで起動する（例：`npm run dev`）。 2. コマンドパレット（`Cmd+Shift+P`）からAgents Windowを開く。 3. Agents Window内のブラウザで対象アプリを表示し、`Cmd+Shift+D`でDesign Modeを有効化する。 Design Modeはブラウザ上のアプリを対象にするため、事前にアプリが動いている状態にしておく必要があります。キーボードショートカットが効かない場合は、Agents Window内のブラウザにフォーカスがあるかを確認してください。 ### 編集フロー：指示してApplyでコードへ反映 有効化したら、直したい要素をクリック（または複数選択・描画・音声）で指定し、変更内容を伝えます。ここまではあくまで「指示」で、コードはまだ変わりません。内容を確認して「Apply」を押すと、エージェントが実行され、指示に沿ってコードが書き換えられます。生成された差分は通常のコードレビューと同じように確認し、問題なければコミットします。 ### 裏側の仕組み：エージェントへ何が渡るか 要素を選ぶと、Design Modeはその要素の識別情報をまとめてエージェントへ渡します。具体的には、xpath、対応するコンポーネント、属性、算出済みCSS、React内部（fiber tree）のprops、そして空間的な位置関係を伝えるスクリーンショットです。単に「赤いボタン」と言葉で渡すのではなく、コード上のどの要素かを特定できる手がかりを添えるため、エージェントが変更箇所を見つけやすくなります。 ### 推奨環境：CursorブラウザとComposer 2以降 Design ModeはCursorブラウザ（Agents Window内蔵ブラウザ）上で動作します。モデルは、UI作業の速度と精度の面からComposer 2.5が公式に推奨されます。Composerは2026年3月19日リリースのComposer 2がCursor初の自社コアモデルで、その後継の2.5がDesign Modeで案内される最新モデルです。Composerの性能や料金の詳細は[Composer 2とは？Cursor独自モデルの性能・料金・競合比較](/tech/details/11469/)で整理しています。 ## 旧「Cursor Design Mode」（環境構築の自動化）との違い 公式機能が登場する前から、日本語圏では「Cursor Design Mode」という別の仕組みが紹介されてきました。こちらはローカル環境構築を自動化する**Cursor Rules**で、公式機能ではありません。使い方は、Agentチャットに「design-mode」と入力するだけ。すると、gitでの最新コード取得やブランチ作成、Dockerアプリやローカルサーバーの起動、既存プロセスの停止、デザインコンテキストの読み込みといった準備作業が自動で走ります。狙いは、ローカル環境の構築に不慣れなデザイナーが、環境準備でつまずかずにUI調整へ集中できるようにすることです。 公式Design Modeが「画面上でUIを直す」機能なのに対し、旧「design-mode」は「開発環境を整える」自動化ルールで、目的も仕組みも別物です。「design-mode」と入力して動くのは後者、`Cmd+Shift+D`で開くのは前者、と押さえると混同しません。Cursor Rulesそのものの書き方や導入効果は[Cursor Rulesとは何か？](/tech/details/8227/)で解説しています。 ## Cursorそのものの基礎：VSCodeベースのAIコードエディタ Design Modeの前提として、Cursor本体を押さえておきます。Cursorは、MicrosoftのVisual Studio Code（VSCode）をベースに、AIによるコード補完・生成・チャットを統合したコードエディタです。VSCodeの拡張機能や設定を引き継げるため、VSCodeユーザーは操作感を大きく変えずに移行できます。 ### Cursorの概要：VSCode由来のUIにAIを統合 Cursorの画面は、左のエクスプローラー、中央のエディタ、右のAIチャットという3領域が基本構成です。エディタでコードを書きながら、右のチャットにコードの疑問を投げれば、その場で回答やコード修正の提案が得られます。コードを選んで`Cmd+K`でAIに直接修正・生成させるインライン編集、`Cmd+Shift+P`のコマンドパレットからの機能呼び出しなど、VSCodeの操作体系を踏襲しています（ショートカットはmacOS表記。WindowsではCmdをCtrlに読み替えます）。 ### AgentモードとAskモードの使い分け CursorのAIチャットには、コードを自動で修正するAgentモードと、説明に徹するAskモードがあります。実際にファイルを書き換えてほしいときはAgent、仕組みを理解したいだけのときはAsk、と目的で切り替えます。Design ModeのApplyもエージェント実行なので、Agentモードの挙動を理解しておくと、生成された変更の読み方がつかみやすくなります。Cursorの基本機能を体系的に見たい場合は[Cursor Proの主な機能と開発効率を高めるツール群の紹介](/tech/details/7816/)もあわせて参照してください。 ## Design Modeを業務で使う際の判断：向く場面・避けるべき場面 Design Modeは万能ではありません。最大の弱点は、画面上の要素とコード上の実体を結びつける「ソースマッピング」が難しい点です。エージェントが変更箇所を推定し損なうと、意図した要素とは別の場所を直したり、同じ要素を重複して生成したりすることがあります。次のように場面を分けて使うのが現実的です。 - **向く場面**：余白・色・整列・文言といった見た目の微調整。要素とコードの対応が素直で、変更が局所的なケース。 - **避けるべき場面**：状態やロジックが絡む変更、同じコンポーネントが多数再利用されていて対応先が一意に決まらない画面、生成結果を人手で検証できない本番直結の作業。 Applyの結果は必ずコードレビューし、重複生成や別要素への誤適用がないかを確認します。source mappingが外れやすい複雑な画面では、Design Modeで方向性を素早く出し、確定はエディタでの手コーディングに戻す、という併用が安全です。「画面で指示できるから全部これで直す」のではなく、局所的なUI調整の入口として使うのが、いまのDesign Modeの妥当な立ち位置です。 ## よくある質問 ### Cursor Design Modeは無料で使えますか？ Design ModeはComposer系モデルによるエージェント実行を伴うため、モデルを利用できるプランが前提になります。無料枠の範囲や必要なプランは変更されることがあるので、最新の提供条件は公式で確認してください。 ### 旧「design-mode」コマンドとの違いは何ですか？ 公式Design Mode（`Cmd+Shift+D`）は画面上でUIを直す編集機能、旧「design-mode」はチャットに「design-mode」と入力して環境構築を自動化する非公式のCursor Rulesです。名前が同じだけで、目的も操作も別物です。 ### どのCursorバージョンから使えますか？ Agents Windowを備えたCursor 3（2026年4月2日リリース）以降で利用できます。推奨モデルはComposer 2（2026年3月19日リリース）以降で、公式はComposer 2.5を案内しています。 ### 「Cursorのダークモード変更」とは違いますか？ 別物です。ダークモード（配色テーマ）の切り替えはエディタの外観設定で、Design Mode（UI編集機能）とは無関係です。テーマを変えたいだけなら、コマンドパレットの配色テーマ設定から切り替えます。 ### Design Modeで直した内容はそのまま本番に反映されますか？ いいえ。Applyで生成されるのはコードの変更差分です。通常の開発と同じくレビューしてコミットする必要があり、Design Modeが直接デプロイするわけではありません。 ## 関連記事 - [Composer 2とは？Cursor独自モデルの性能・料金・競合比較【2026年最新】](/tech/details/11469/) - [Cursor Rulesとは何か？AI開発の新常識となる基本概念とその現場導入でのメリットを徹底解説](/tech/details/8227/) - [Cursor 2.4とは？AI搭載コードエディタ最新バージョンの概要と特徴を徹底解説](/tech/details/10747/) - [CursorとWindsurfの概要・特徴を徹底比較した総まとめ](/tech/details/6477/) - [Cursor Proの主な機能と開発効率を高めるツール群の紹介](/tech/details/7816/) --- 出典: [Cursor Design Modeとは？画面を見ながらUIを直せる公式機能の使い方【Cursor 3対応】]()（株式会社一創）