「ここのボタン、もうちょい右に寄せて、色も淡くして」——この指示を、文章ではなく画面上を指してそのまま伝えられるようになったら、UI修正の体感はだいぶ変わります。Cursor 3.7系で追加された Design Mode は、まさにそれを Canvas 上で実現する機能です。私もこの2週間ほど、自分の Astro 製ポートフォリオの調整で使い倒してみました。最初は「結局スクショ貼るのと同じでは?」と疑っていたんですが、使ってみると別物でした。この記事では、Design Mode の具体的な使い方と、私が回り道した落とし穴を共有します。
結論:Design Modeは「文章で説明しづらいUI修正」を一気に短縮する
先に結論から。Design Mode の真価は、「言語化コストが高いUI調整」を Canvas 上のポインティングで置き換えられる点にあります。
色合い、余白、要素の位置関係、フォントウェイト。こういう「見た方が早い」修正は、テキストプロンプトで書くと長くなりがちです。私の体感だと、これまで5〜6行のプロンプトで説明していた修正が、Design Mode だと「ここをこう」の2クリック+一言で済むようになりました。
ただし万能ではありません。後半で書きますが、ロジック改修や複数ファイルにまたがる構造変更には向きません。**「見た目の微調整専用の高速レーン」**くらいの位置付けで考えるのが、たぶん一番フィットします。
Cursor Design Modeとは何か:Canvasで直接UIを指す機能
2026年6月5日に Cursor 公式ブログで発表された Design Mode は、Canvas という編集サーフェス上で UI 要素を選択・注釈付けして、エージェントに編集指示を渡す仕組みです。公式の表現を私なりに噛み砕くと、ブラウザの DevTools で要素を inspect するときの操作感で、AI に編集を頼める機能です。
従来は「ヘッダーの中の右側のナビの、3番目のリンクの hover 色を…」と冗長な文章を書く必要がありました。Design Mode を有効にすると、その要素を直接クリックして矢印を引き、コメントを添えるだけで済みます。Cursor 側はその位置情報とコンポーネント階層を読み取り、該当する JSX/TSX を編集します。
従来のスクショ貼り付けとの違い
スクショを Cursor のチャットに貼って指示する方法は前からありました。ただ、スクショは画像として認識されるだけで、AI 側は「どの DOM 要素か」を推論で当てる必要があります。Design Mode は Canvas 上で実行されているプレビューと結びついているので、要素特定の精度が段違いでした。先週、CSSグリッドの3列レイアウトで「2番目のカードだけ高さがズレてる」というバグを直したとき、スクショ指示だと別カードを編集されることがあったんですが、Design Mode では一発で目的のコンポーネントに当ててくれました。
Design Modeを有効にする手順:3分でセットアップ
ここからは実際の手順です。Cursor 3.7 以降が前提なので、まずバージョンを確認してください。Cursor → About で確認できます。
1. Canvas を開く
コマンドパレット(Cmd+Shift+P / Ctrl+Shift+P)から Open Canvas を実行します。私は最初これを Agents Window と混同していたんですが、別物です。Canvas はエージェントの作業結果やUIプレビューを表示する専用サーフェスです。
2. ローカル開発サーバーを Canvas にプレビュー
npm run dev などで開発サーバーを立ち上げた状態で、Canvas 内の URL バーに http://localhost:3000 を入力します。Next.js でも Astro でも Vite でも、ブラウザでプレビューできるものなら大体動きました。
3. Design Mode に切り替え
Canvas 右上のツールバーに「Design」というトグルがあります。これをオンにすると、プレビュー上で要素をクリック・矩形選択できるようになります。
4. 要素を指して、コメントを書く
調整したい要素をクリック → 吹き出しが出るので、修正内容を書きます。「padding を 16px に」「この hover アニメーションを取り除いて」のような具体指示が通りやすかったです。
5. Apply with Agent を押す
コメントをまとめて確定すると、エージェントが該当の JSX/CSS を書き換えてくれます。差分は通常の Composer と同じく diff ビューで確認できるので、Apply 前にチェックを入れてください。
Design Modeが効くシーン3選:実際に効果を感じた使い道
2週間使ってみて、特に効いたのは次の3つでした。
1. レスポンシブの微調整
ブレークポイント周りのレイアウト崩れ。Canvas 内で幅をドラッグして縮めながら、崩れた要素を直接指せるので「どの幅で何が壊れているか」を伝える手間が消えます。私はこれで Tailwind の md: プレフィックス調整がだいぶ楽になりました。
2. デザイナーからの赤入れの反映 Figma で赤ペンが入った PNG を受け取って、それを Canvas に並べて「この通りに寄せて」と指す運用が便利です。完璧ではないですが、最初の8割はこれで詰められます。
3. アクセシビリティの調整 コントラスト不足の文字や、フォーカスリングが見えないボタンなど、「見たら一発でわかるけどコードからは判断しづらい」改善が早いです。
逆に、コンポーネントの分割やステート設計の見直しには使わない方がいいです。Design Mode はあくまで見た目に近いレイヤーへの修正に最適化されているので、ロジックを大きく動かすと意図しないリファクタが入ってクレジットを溶かしました。
落とし穴3つ:私が無駄にしたクレジットと時間
正直に書きます。最初の数日で私が踏んだ地雷を共有しておきます。
Auto モードでも意外とクレジットを消費する
Design Mode での編集は、内部的に Composer 2.5 + 画像認識ぽい処理が走るらしく、テキストプロンプトより1リクエストあたりのトークン消費が体感で多めでした。Auto モードだとクレジット非消費ですが、手動で Opus 系を選んでいると一気に減ります。Cursor 公式 changelog によると Bugbot は Composer 2.5 で約22%安くなったとあるものの、Design Mode の編集自体は画像入力の分が乗るので、安易に Max Mode を併用しない方が無難です。
コンポーネントが深くネストしていると当て損なう
<Card><CardHeader><Title /></CardHeader></Card> のような深い構造だと、クリック位置によって意図と違う階層を選んでしまうことがありました。対策は、コメントに「Titleコンポーネント側を編集して」と明示的に階層名を添えることです。これで採用率がぐっと上がりました。
Canvas プレビューと本物のブラウザで挙動が違うことがある
CSP やサードパーティ Cookie が絡む画面は、Canvas 内プレビューで一部機能が動きません。私の場合、Auth 関連の画面で window.location を使うコードがエラーになり、Design Mode の対象として開けませんでした。こういう画面は素直に普通のチャット+スクショで対応した方が早いです。
Composerやチャットとの使い分け方
2週間運用して固まった、私の使い分けはこんな感じです。
- 見た目の微調整 → Design Mode(色、余白、配置、アニメーション)
- 新規コンポーネント作成 → Composer(複数ファイルにまたがる作成・編集)
- 挙動のデバッグ → 通常チャット + Bugbot(ロジックや状態のバグ)
- 大規模リファクタ → Agents Window で並列(別 worktree で安全に)
Design Mode は守備範囲を狭く取った方が、結果的にスピードが出ます。万能ツールとして使おうとすると、たぶん期待を裏切られます。私もそれで一度ハマりました。
まとめ:今日からやる3つのアクション
最後に、この記事を読み終えたあなたが今日試せるアクションを3つ。
- Cursor を 3.7 以降にアップデートして、コマンドパレットから
Open Canvasを起動してみる - 手元の小さなUI修正タスク(例:ボタンの余白、見出しの色)を1つだけ Design Mode で完結させてみる
- Auto モード固定で試す(最初からクレジット消費の検証をしないと、月末に泣くことになります)
私の体感では、Design Mode は「UI修正の体験そのものをデザインし直した」機能です。すべての作業を置き換えるものではないですが、見た目調整に費やしていた時間の1/3くらいは確実に削れている気がします。あとは、あなたのコードベースで実際に手を動かして、自分のワークフローに組み込めるかを確かめてみてください。
参考リンク
- Cursor Blog — Direct agents with visual prompts in Design Mode — Design Mode 公式アナウンス(2026年6月5日)
- Cursor Changelog — Canvas / Design Mode を含むリリースノート
- Cursor Pricing — Pro/Pro+/Ultra の料金とクレジット仕様
- Releasebot — Cursor Updates June 2026 — Design Mode と Context Explorer の機能解説まとめ