Cursorが「ブラウザ向けビジュアルエディタ」を発表。ドラッグ＆ドロップ、クリック指示、即時コード反映でWeb開発を加速。

2025年12月11日(木)の最新AIニュース、Cursorの新機能「Browser向けビジュアルエディタ」についてです。今回の最新ニュース、ポイントは以下の通りです。

【Cursor ビジュアルエディタ】とは？—発表日と概要、できること

参考：https://cursor.com/ja/blog/browser-visual-editor

2025年12月11日(木)、CursorはBrowser（内蔵ブラウザ）向けの新「ビジュアルエディタ」を公開しました。Webアプリの実行画面・コード・編集ツールを同一ウィンドウで扱い、要素のドラッグ＆ドロップによるレイアウト編集、クリックした要素への自然言語指示、そしてエージェントによる裏側コードの自動更新を特徴とします。

これにより、デザイン（見た目）と実装（コード）の往復作業が短縮され、変更は数秒で反映されます。発表はCursor公式ブログで示され、詳細機能として「ドラッグ＆ドロップで再配置」「コンポーネント状態の直接テスト」「ビジュアルコントロールでのプロパティ調整」「クリックして指示」「抽象レベルの引き上げ」が説明されています。

【Cursor ビジュアルエディタ】の主機能—ドラッグ＆ドロップ／クリック指示／即時反映

ドラッグ＆ドロップで再配置：DOM（Document Object Model。ブラウザが解釈したページ構造）上のレンダリング要素を直接ドラッグして位置や構造を操作できます。思考の流れを止めずにUIを並べ替え、エージェントに適用を指示すると関連コンポーネントが特定され、裏側のコードが更新されます。

クリックして指示：任意要素をクリックし、「大きくする」「色を赤に」「順番を入れ替える」といった自然言語の指示を入力できます。エージェントは並列実行され、数秒で画面へ反映されます。

propsの可視化とバリアント切替—React中心のUI開発を加速

モダンなWebアプリで広く使われるReactでは、コンポーネントはprops（プロパティ）によって状態や見た目を切り替えます。ビジュアルエディタのサイドバーでこれらpropsを一覧し、バリアント（状態のバリエーション）を切り替えながら即時にUIを検証できます。これにより、コード編集と画面確認の反復を減らします。

スタイル調整のビジュアルコントロール—グリッド／Flexbox／タイポグラフィを直感操作

スタイル調整用のビジュアルコントロールには、スライダーやカラーパレット、組織のデザインシステムやカラートークンが利用可能です。グリッド・Flexbox（柔軟なレイアウト手法）・タイポグラフィを微調整でき、リアルタイムのカラーピッカーで選択結果を即確認できます。

【Cursor ビジュアルエディタ】がもたらす価値—“実装手順”から“意図の表現”へ

Cursorは本機能を、「デザインとコードを横断して作業を統合し、実現したいことを明確に表現できることで、実装が細かな手順に縛られないよう支援する」取り組みと位置づけています。つまり、開発者は「どう作るか」より「何を実現するか」に集中でき、思考とコードをダイレクトにつなぐ新しい制作体験を目指しています。この方向性は、同社のWebエージェント構想やCursor 2.2のアップデートとも連動している旨が示されています。

※この記事の作成の一部にはAIが活用されています。より正確な情報収集のためにご自身でも調査し、情報の取捨選択をすることを推奨いたします。