今回はAI搭載のコードエディタ「Cursor」のバージョン「2.2」で追加された新機能「ビジュアルエディタ」をご紹介します。
目次
はじめに
CursorはAI搭載のコードエディタで、従来よりも効率的なコーディングを可能にする便利な開発ツールです。自然言語による高度な指示や精密なコード生成により、エンジニアの生産性を劇的に向上することができます。
Visual Studio Codeの設定や拡張機能を引き継げたり、MCPサーバー経由で外部のサービスやデータソースとの連携ができたり、柔軟なカスタマイズも可能です。詳しくは下記の記事にて解説しています。
2025年12月にリリースされたバージョン「2.2」では、新しい機能として、直感的な操作を可能にするビジュアルエディタが搭載され、さらに利便性が向上しています。
今回はCursorのビジュアルエディタの持つ機能や使い方を解説していきます。
Cursor Browserとは
Cursor BrowserはCursorに備わっている内部ブラウザで、AIエージェントを経由した自動テストやデバッグに利用できます。
例えば、クリックやフォーム入力などのブラウザ操作、デバッグのためのスクリーンショット撮影やコンソール出力取得などのアクションがチャットから指示できます。
Cursor Browserのビジュアルエディタとは
ビジュアルエディタの概要
ビジュアルエディタはCursor Browserに追加された新機能で、ブラウザのビューを介した直感的な操作によるWebアプリケーション開発を可能にします。
ビジュアルエディタでは、例えば次のようなことができます。
- デザインビューによるUIの配置変更
- コンポーネントのプロパティやスタイルをコントロールパネルから調整可能
- チャットを併用した変更指示
変更された内容はシームレスにコードに反映でき、少ない作業でWebアプリケーションを形にできます。また、コードを直接修正することもでき、柔軟に実装を進めることができます。
ビジュアルエディタ周辺の機能
ビジュアルエディタにはレイアウトやデザイン調整に役立つ下記のような機能が含まれています。
- ブラウザ
- 特定のWebページを表示する機能で、ビジュアルエディタのプレビュー画面に相当します。通常のブラウザと違って、要素をドラッグで移動することができます。
- 開発者ツール
- Google Chromeの開発者ツールと同様の機能を利用できます。要素の追跡や一時的なCSSの追記や修正が行えます。
- CSSインスペクタ
- HTML要素のレイアウトや装飾を変更できるUIを提供します。Webデザイン編集ツールのようにパネルから各プロパティを直接編集することができます。
Cursorのビジュアルエディタを使ってみよう
ここからは、ビジュアルエディタの使い方を紹介していきます。
Cursorのインストール
まずは、Cursorの公式サイトのメニュー［ダウンロード］からインストーラーをダウンロードしましょう。インストーラーを実行し、ウィザードに従って進めてインストールが完了したらCursorを起動しましょう。
次にアカウント登録を進めていきます。Cursorの公式サイトのメニュー［ログイン］からログインページに進み、「サインアップ」をクリックするとアカウント登録ページに進みます。
メールアドレスやGoogleアカウントにて登録できますので、画面の案内に従って進めていきましょう。
アカウント登録が完了したら、Cursorの初期画面から「Sign in」をクリックしてログインしましょう。
最初はFreeプランで登録されますので、Proプラン以上を使用したい場合は「Upgrade」からプラン変更の手続きを進めましょう。ただし、Proプラン以上は有料になりますので注意しましょう。
CursorでWebアプリケーション開発
まずは「Terminal」をクリックして、ターミナルウィンドウから次のコマンドを入力してWebアプリケーションを作りましょう。今回はNext.jsの公式のサンプルテンプレートからblog-starterサンプルを使用します。
npx create-next-app --example blog-starter cursor-exampleプロジェクトが作成できたら、下記のコマンドでテストサーバーを起動してブラウザで表示を確認しましょう。
cd cursor-example
npm run devCursor BrowserでWebページが表示されれば成功です。
ビジュアルエディタを使用したUIの編集
ドラッグ＆ドロップで再配置
ブラウザ上でHTML要素の移動を行ってみましょう。Cursor BrowserでCSSインスペクタを開きます。「Select element」のアイコンをクリックし、HTML要素をドラッグ＆ドロップで位置を入れ替えてみましょう。最後に［Apply］をクリックすると、変更内容がコードに適用されます。
HTML要素をクリックしてプロパティを調整
ブラウザ上でHTML要素をクリックすると、CSSインスペクタのパネルからプロパティを操作できるようになります。プロパティを変更すると、即座にブラウザに反映されて確認できます。下記では文字色の変更とフォントサイズの拡大を行っています。コードに適用するには［Apply］をクリックします。
HTML要素をクリックしてチャットで指示
チャット欄で変更を指示するときに、対象のHTML要素を特定して行うことができます。ブラウザ上でHTML要素をクリックすると、チャット欄にタグ名が付記されますので、それに続けて指示を入力しましょう。
次はコンポーネントのアニメーションを制御するプロパティを追加してみます。
プロパティを追加すると該当要素のプロパティがパネル上に追加されていることが確認できます。
さいごに
Cursor Browserに追加されたビジュアルエディタを使用することで、エンジニアはより直感的にUIを編集できるようになり、ますます利便性が高まりました。Cursorの活用により、コーディングだけに依らないWebアプリケーション開発が可能になっていますので、AIエージェントと協同する新たな開発スタイルを体験されたい方はぜひ導入を検討してみてください。
メシウスではさまざまなWebアプリケーションフレームワークと一緒に使えるJavaScriptライブラリを提供しています。
無償のトライアル版や、ブラウザ上で手軽に試せるデモアプリケーションも公開しているので、こちらも是非ご覧ください。