Cursor Browserとは？IDE内蔵ブラウザでフロントエンド開発が変わる
室谷代表取締役今回はCursor Browserの話をしましょう。.AI（ドットエーアイ）のコミュニティでも「CursorのブラウザってChromeとは違うの？」って質問がすごく多いんですよね・・・
テキトー教師DotAI 認定講師講座でも毎回出ますね。結論から言うと、Cursor BrowserはChromeやSafariとは別物です。
CursorのIDE内に組み込まれた専用ブラウザで、開発中のWebアプリをリアルタイムにプレビューしながらAIエージェントと一緒にUI修正ができるんです。
CursorのIDE内に組み込まれた専用ブラウザで、開発中のWebアプリをリアルタイムにプレビューしながらAIエージェントと一緒にUI修正ができるんです。
室谷代表取締役MYUUUでもフロントエンドの微調整にめちゃくちゃ使ってます。これまではChromeでDevTools開いて、要素を確認して、エディタに戻って修正して・・・っていう往復があったじゃないですか。
それがCursor Browserだと同じウィンドウ内で完結するんですよ。
それがCursor Browserだと同じウィンドウ内で完結するんですよ。
テキトー教師DotAI 認定講師しかも2025年12月のCursor 2.2アップデートで「ビジュアルエディタ」が追加されて、もうコードを直接書かなくてもドラッグ&ドロップでUIを変更できるようになりましたからね。
室谷代表取締役これは正直革命的だと思ってます。じゃあ順番に見ていきましょう。
Cursor Browserの基本機能
テキトー教師DotAI 認定講師まず基本を整理しますね。Cursor Browserは、Cursorエディタの中に組み込まれたブラウザです。
普通のブラウザとの最大の違いは「AIエージェントがブラウザの中身を認識できる」という点です。
普通のブラウザとの最大の違いは「AIエージェントがブラウザの中身を認識できる」という点です。
室谷代表取締役つまりエージェントに「このボタンを赤くして」って言ったら、ブラウザに表示されている要素を特定して、対応するコードを自動で修正してくれるんですよね。
テキトー教師DotAI 認定講師その通りです。従来だと「どのファイルのどの行のどのCSSクラスを変えればいいのか」を自分で調べる必要がありましたけど、Cursor BrowserならUIとコードが直結しているので、目で見た要素をそのまま指定できます。
室谷代表取締役コミュニティのメンバーからも「デザイナーとのやり取りが激減した」っていう声がありますね。デザイナーが「ここの余白をもう少し狭く」って言ったら、Cursor Browserで該当箇所をクリックして指示するだけで済むので。
テキトー教師DotAI 認定講師主な機能をまとめるとこうなります。
- リアルタイムプレビュー: 開発中のWebアプリをIDE内でプレビュー。localhost上のアプリが即座に反映される
- Design Mode:
Cmd + Shift + Dで切り替え。UI要素を直接クリック・選択してAIに指示できる - ビジュアルエディタ: ドラッグ&ドロップ、プロパティ調整、カラーピッカーなど視覚的な編集ツール群
- Point and Prompt: UIの任意の場所をクリックして、テキストで変更内容を指示する機能
- エージェント連携: バックグラウンドでAIエージェントがコード変更を自動適用
室谷代表取締役ブラウザとエディタが一体化してるっていうのが本質で、これは単なる「便利機能」じゃなくて開発ワークフロー自体が変わる話なんですよね。
Web版Cursor（cursor.com/agents）との違い
テキトー教師DotAI 認定講師ここも混同しやすいポイントですよね。「Cursor Browser」と「Cursor Web版」は全く別物です。
室谷代表取締役そうなんですよ。整理すると:
- Cursor Browser: CursorデスクトップIDE内の組み込みブラウザ。フロントエンド開発のUI確認・編集用
- Cursor Web版: cursor.com/agentsからアクセスするクラウドエージェント。スマホやタブレットからもコーディング作業を依頼できる
テキトー教師DotAI 認定講師Cursor Web版は2025年6月にリリースされたもので、ブラウザからCursorのクラウドエージェントにタスクを投げられるサービスです。コードのプレビューとは目的が違います。
室谷代表取締役Web版はどちらかというと「外出先でバグ修正を依頼する」「移動中にPRを確認する」みたいな使い方ですね。PWA（Progressive Web App）としてiOSやAndroidにインストールもできます。
テキトー教師DotAI 認定講師講座でよくある混乱が「CursorをブラウザでWebアプリとして使いたい」っていうもので、これはWeb版の方の話ですね。一方「Cursorの中にブラウザがある」っていうのがCursor Browserの話です。
室谷代表取締役Slack連携もWeb版の方の機能ですね。タスクが完了したらSlackに通知が来て、Slackから「@Cursor」でエージェントを呼び出すこともできます。
Cursor Browserの使い方を徹底解説
室谷代表取締役じゃあ実際の使い方に入りましょう。まずCursor Browserをどうやって開くかですね。
テキトー教師DotAI 認定講師Cursorをインストールしていれば、特別な設定は不要です。AgentモードでWebアプリの開発をしているときに、エージェントが自動でブラウザパネルを開いてくれます。
手動で開く場合はコマンドパレットから「Open Browser」を選択するか、サイドバーのブラウザアイコンをクリックするだけです。
手動で開く場合はコマンドパレットから「Open Browser」を選択するか、サイドバーのブラウザアイコンをクリックするだけです。
室谷代表取締役localhostで動いているアプリなら自動検出してくれるので、
npm run dev とか next dev を実行してれば勝手にプレビューが出ますよね。Design Modeの使い方
テキトー教師DotAI 認定講師Design ModeはCursor Browserの中核機能です。これをオンにすると、ブラウザ上のUI要素を直接クリックして選択できるようになります。
室谷代表取締役ショートカットは
Cmd + Shift + D でトグルですね。テキトー教師DotAI 認定講師操作方法をまとめます。
| 操作 | ショートカット | 説明 |
|---|---|---|
| Design Modeの切り替え | Cmd + Shift + D | ブラウザ上のUI要素を選択可能にする |
| エリア選択 | Shift + ドラッグ | 範囲を指定して要素を選択 |
| 要素をチャットに追加 | Cmd + L | 選択した要素をAIチャットのコンテキストに追加 |
| 要素を入力欄に追加 | Alt + クリック | 選択した要素をプロンプト入力欄に追加 |
室谷代表取締役実務でよく使うのは
Alt + クリック ですね。気になる要素をクリックして「この余白を16pxにして」とか「このフォントサイズを大きくして」って指示するだけでエージェントが修正してくれます。テキトー教師DotAI 認定講師コミュニティのメンバーさんにも人気の機能です。「DevToolsでCSSを探すスキルがなくても、見た目から直せるのが嬉しい」っていう声が多いですね。
ビジュアルエディタの活用法
室谷代表取締役Cursor 2.2で追加されたビジュアルエディタは、Design Modeをさらに進化させた機能です。
テキトー教師DotAI 認定講師具体的にはこういうことができます。
室谷代表取締役まずドラッグ&ドロップ。ブラウザ上でUI要素を直接ドラッグして配置を変更できます。
ボタンの並び順を入れ替えたり、セクションの順序を変えたりするのが直感的にできるんです。エージェントが裏側でDOMツリーの変更に対応するコード修正を自動で行います。
ボタンの並び順を入れ替えたり、セクションの順序を変えたりするのが直感的にできるんです。エージェントが裏側でDOMツリーの変更に対応するコード修正を自動で行います。
テキトー教師DotAI 認定講師MYUUUさんではどう使ってます？
室谷代表取締役ランディングページ改修のときにめちゃくちゃ使いましたよ。「CTAボタンをもっと上に持ってきたい」っていうのを、ドラッグ一発で試せるんです。
気に入ったら「Apply」で確定。戻したければUndoで元通り。
気に入ったら「Apply」で確定。戻したければUndoで元通り。
テキトー教師DotAI 認定講師Reactのコンポーネントpropsもサイドバーで直接編集できますよね。たとえばボタンコンポーネントに
variant や size のpropsがあったら、ドロップダウンで切り替えて見た目を確認しながら決められます。室谷代表取締役カラーピッカーもあるんですよね。デザインシステムのカラートークンを使っている場合は、自分のトークン一覧から選べる。
テキトー教師DotAI 認定講師ここまでくると「コーディングなのかデザインなのか」の境界がどんどん曖昧になってきますよね。Cursor公式ブログでも「デザインとコードの統合」をビジョンとして掲げています。
Point and Promptで「指差し指示」する新しい開発体験
室谷代表取締役Point and Promptは個人的にCursor Browserの中で一番インパクトがある機能だと思ってます。
テキトー教師DotAI 認定講師どういう機能かというと、Cursor Browser上の任意の要素をクリックして、そこに対して「こう変えて」とテキストで指示できるんです。しかも複数箇所を同時に指定して、エージェントが並列で処理してくれる。
室谷代表取締役たとえばこういう使い方です。1つ目のボタンをクリックして「これを大きくして」、2つ目のテキストをクリックして「これを赤くして」、3つ目のセクションをクリックして「この2つの順序を入れ替えて」。
これを一気に指示すると、エージェントがそれぞれ並列で処理して、数秒後には全部反映されてるんですよ。
これを一気に指示すると、エージェントがそれぞれ並列で処理して、数秒後には全部反映されてるんですよ。
テキトー教師DotAI 認定講師従来のテキストベースのプロンプトだと「あのコンポーネントの、あの部分の」って説明するのが大変でしたけど、Point and Promptなら「これ」で済むんですよね。
室谷代表取締役非エンジニアのメンバーでもUI修正の指示が出せるっていうのが大きいです。プロダクトマネージャーとか、デザイナーが直接Cursorで「ここをこう変えて」って指示できる。
テキトー教師DotAI 認定講師この機能はCSSのクラス名とかコンポーネント構造を理解していなくても使えるのが強みですね。「見た目でわかるものを、見た目のまま指示する」という直感的な操作になっています。
Cursor Browser Automationでテスト・操作を自動化
室谷代表取締役次はブラウザ自動化の話をしましょう。Cursorのエージェントはブラウザを自動操作できるんですよね。
テキトー教師DotAI 認定講師はい。エージェントがCursor Browser上でクリック、入力、スクロールなどの操作を自動で行えます。
これを使うと、Webアプリのテストや繰り返し操作を自動化できます。
これを使うと、Webアプリのテストや繰り返し操作を自動化できます。
室谷代表取締役MYUUUだとフォーム入力のテストとか、ログインフローの確認とかに使ってますね。「このフォームに名前と電話番号を入れて送信して、確認画面が表示されるか確認して」っていう指示を出すだけで、エージェントが実際にブラウザを操作してくれます。
テキトー教師DotAI 認定講師Playwright連携もできるので、本格的なE2Eテストの作成にも使えますよね。
室谷代表取締役エージェントに「このページのログインフローをPlaywrightのテストコードとして書いて」って指示すると、実際にブラウザを操作しながらテストコードを生成してくれる。手動でセレクタを調べてテストを書くよりも圧倒的に速いです。
ブラウザ自動化の活用例
テキトー教師DotAI 認定講師具体的な活用シーンを挙げてみましょう。
- フォームテスト: 入力フォームに値を入れて送信、バリデーションの動作確認
- 認証フロー: ログイン・ログアウト・パスワードリセットのフロー確認
- レスポンシブ確認: 画面幅を変えながらレイアウト崩れがないか確認
- スクリーンショット取得: 特定の画面状態をキャプチャしてドキュメント用に保存
- データ入力: 開発用のダミーデータを大量に投入する作業の自動化
室谷代表取締役テスト自動化って従来はかなりコストが高かったじゃないですか。セレクタの指定、待機処理の設定、環境構築・・・それがCursorのエージェントなら「このフローをテストして」の一言でできるのはすごい効率化ですよね。
テキトー教師DotAI 認定講師講座の受講生さんでも、テスト経験がない人がエージェントの助けを借りてE2Eテストを導入できたケースがありますね。ハードルが一気に下がりました。
Cursorの料金プランとBrowser機能の利用条件
室谷代表取締役Cursor Browserを使うにはどのプランが必要なのか、ここも気になるポイントですよね。
テキトー教師DotAI 認定講師結論から言うと、Cursor Browserの基本的なプレビュー機能はどのプランでも使えます。ただしエージェント機能（AI指示でのコード修正、Point and Prompt、自動化）はAgentリクエストの上限に影響されます。
室谷代表取締役料金プランを整理しましょう。
| プラン | 月額 | Agentリクエスト | Browser利用 |
|---|---|---|---|
| Hobby（無料） | $0 | 制限付き | プレビューのみ実用的 |
| Pro | $20 | 拡張された上限 | Design Mode・ビジュアルエディタ利用可能 |
| Pro+ | $60 | Proの3倍 | フロントエンド開発のメイン利用に十分 |
| Ultra | $200 | Proの20倍 | ヘビーユースに対応。新機能への優先アクセス |
| Teams | $40/ユーザー | Proベース | チーム共有・RBAC・SSO付き |
テキトー教師DotAI 認定講師個人で使うならProから始めるのがおすすめですね。Hobbyだとエージェントリクエストがすぐ上限に達してしまうので、Design ModeやPoint and Promptをフル活用するにはProは必要です。
室谷代表取締役うちのエンジニアはPro+が多いですね。フロントエンド開発だとビジュアルエディタを頻繁に使うので、Agentリクエストの消費が結構大きいんですよ。
Pro+の3倍枠だと余裕を持って使えます。
Pro+の3倍枠だと余裕を持って使えます。
テキトー教師DotAI 認定講師Ultraは月200ドルなので、時給で計算してペイするかですね。フルタイムでCursorを使い倒す人なら元は取れると思いますけど、まずはProかPro+で使用量を把握してからの方がいいです。
室谷代表取締役ちなみにCloud Agents（クラウドエージェント）はProプラン以上で使えます。これはWeb版のcursor.com/agentsからアクセスするやつですね。
Cursor BrowserとChrome DevToolsの使い分け
室谷代表取締役よく聞かれるのが「Chrome DevToolsの代わりになるのか？」っていう質問なんですけど・・・
テキトー教師DotAI 認定講師正直に言うと、完全に置き換えるものではないですね。それぞれ得意分野が違います。
室谷代表取締役比較してみましょう。
| 観点 | Cursor Browser | Chrome DevTools |
|---|---|---|
| 主な用途 | AIと連携したUI編集・プレビュー | パフォーマンス分析・ネットワーク監視・デバッグ |
| コード修正 | AIエージェントが自動でソースコードを修正 | 一時的なCSS変更のみ（ソースは変わらない） |
| 操作方法 | Point and Prompt、ドラッグ&ドロップ | 手動でDOM操作、Console実行 |
| 学習コスト | 低い（直感的操作） | 高い（DevToolsの知識が必要） |
| デバッグ | 基本的なプレビュー確認 | ブレークポイント、メモリプロファイリング等が充実 |
| 拡張性 | MCP連携で外部ツールと統合可能 | Chrome拡張機能で拡張 |
テキトー教師DotAI 認定講師Cursor Browserは「AIにUIの修正を依頼する」のが得意で、Chrome DevToolsは「何が起きているかを深く調べる」のが得意です。
室谷代表取締役実務だと両方使いますね。Cursor Browserでサクッとレイアウト修正して、パフォーマンスに問題がありそうならChrome DevToolsでNetwork TabやPerformance Tabを見る、みたいな使い分けです。
テキトー教師DotAI 認定講師コミュニティでも「DevToolsが不要になるわけではないけど、触る頻度は確実に減った」っていう声が多いですね。特にCSSの調整はCursor Browserの方が圧倒的に速いです。
Cursor BrowserのMCP連携と拡張機能
室谷代表取締役CursorはMCP（Model Context Protocol）に対応していて、Cursor Browserの機能をさらに拡張できるんですよね。
テキトー教師DotAI 認定講師MCPを使うと、外部のツールやサービスをCursorのエージェントに統合できます。ブラウザ関連だと、たとえばChrome DevTools MCPを設定すれば、エージェントがChromeの操作やネットワークリクエストの分析もできるようになります。
室谷代表取締役うちではSupabase MCPとかGitHub MCPと組み合わせて、「この画面のバグを修正して、テストして、PRを作って」っていうワークフローを1つのAgentセッションで回してます。
テキトー教師DotAI 認定講師Cursor Browserのコンテキスト（今どの画面を見ているか）をMCPツールに渡せるのが面白いですよね。ブラウザの表示内容をベースに、データベースの操作や外部APIの呼び出しまで一気通貫で処理できる。
室谷代表取締役MCPのスキルやフックも組み合わせると、チーム独自のワークフローを作れるのが強みですね。たとえば「ブラウザでスクショ撮って、Slackに送って、チケットを作る」みたいなフローを自動化できます。
Cursor Browserのトラブルシューティング
室谷代表取締役使っていて困ることもあるので、よくあるトラブルと対処法もカバーしておきましょう。
テキトー教師DotAI 認定講師講座でも質問が多いポイントですね。
ブラウザが真っ白になる・表示されない
室谷代表取締役これは一番多いトラブルですね。localhostのポートが合っていないか、開発サーバーが起動していないケースがほとんどです。
テキトー教師DotAI 認定講師対処法としては:
- 開発サーバーが起動しているか確認する（
npm run devやnext devがターミナルで動いているか） - Cursor BrowserのURLバーに正しいURL（通常は
http://localhost:3000）が入っているか確認 - Cursorを再起動する（まれにブラウザパネルがフリーズすることがある）
Design Modeで要素が選択できない
室谷代表取締役iframeの中の要素や、Shadow DOM内の要素は選択しにくいことがありますね。
テキトー教師DotAI 認定講師Canvas要素やWebGL描画の中身も選択対象外です。HTML/CSSで構成されたUIが対象になります。
エージェントの修正が意図と違う
室谷代表取締役これはプロンプトの精度の問題が多いですね。「この部分を変えて」だけだと曖昧なので、「この部分の背景色を#04cbb7にして、テキストを白にして」みたいに具体的に指示した方が精度が上がります。
テキトー教師DotAI 認定講師Design Modeで要素を選択してから指示を出すと、エージェントが正しい要素を特定しやすくなります。テキストだけの指示よりも「ポイント＋テキスト」の組み合わせの方が確実ですね。
よくある質問（FAQ）
室谷代表取締役最後にFAQをまとめましょう。コミュニティやSNSでよく見かける質問ですね。
テキトー教師DotAI 認定講師順番に回答していきましょう。
Cursor BrowserはChrome拡張機能として使えますか？
室谷代表取締役いいえ、Cursor BrowserはCursorデスクトップアプリ内の機能なので、Chrome拡張ではありません。CursorをダウンロードしてインストールするとIDEの中に組み込まれています。
Cursorをブラウザだけで使いたい場合は？
テキトー教師DotAI 認定講師cursor.com/agentsにアクセスすれば、ブラウザからクラウドエージェントを利用できます。これはIDE内のCursor Browserとは別のサービスで、コーディングタスクをWebから依頼するものです。
PWAとしてスマホやタブレットにインストールすることもできます。
PWAとしてスマホやタブレットにインストールすることもできます。
Cursor BrowserはReact以外のフレームワークでも使えますか？
室谷代表取締役使えます。Vue、Svelte、Angular、Next.js、Nuxt・・・基本的にlocalhostで動くWebアプリなら何でもプレビューできます。
ビジュアルエディタのコンポーネントprops編集はReactが最も充実していますが、プレビューやDesign Mode、Point and Prompt自体はフレームワークに依存しません。
ビジュアルエディタのコンポーネントprops編集はReactが最も充実していますが、プレビューやDesign Mode、Point and Prompt自体はフレームワークに依存しません。
CursorのBrowser Automationは無料プランでも使えますか？
テキトー教師DotAI 認定講師ブラウザの自動操作はエージェント機能の一部なので、Agentリクエストの枠を消費します。無料のHobbyプランでもリクエスト枠の範囲内で利用できますが、実用的に使い込むにはProプラン以上が必要ですね。
Cursor BrowserでHTTPS（SSL）のサイトは確認できますか？
室谷代表取締役ローカルの開発サーバーがHTTPSで動いていれば確認できます。自己署名証明書の場合は警告が出ることがありますが、基本的にはChromeと同じ挙動です。
Cursor BrowserからConsole.logの出力は確認できますか？
テキトー教師DotAI 認定講師Cursor Browser上でもコンソールの出力は確認できます。ただしChrome DevToolsほど詳細なフィルタリングやネットワークタブはないので、複雑なデバッグにはChrome DevToolsとの併用がおすすめです。
まとめ
室谷代表取締役今回はCursor Browserについて徹底的に解説しました。振り返ると、これはただのプレビュー機能じゃなくて「AIとUIの間をつなぐインターフェース」なんですよね。
テキトー教師DotAI 認定講師ポイントをまとめると:
- Cursor BrowserはCursorのIDE内蔵ブラウザで、AIエージェントと連携したUI編集が可能
- Design Mode（
Cmd + Shift + D）でUI要素を直接選択してAIに指示できる - ビジュアルエディタでドラッグ&ドロップ、カラーピッカー、コンポーネントprops編集が可能
- Point and Promptで「指差し＋テキスト」の直感的なUI修正ができる
- Cursor Web版（cursor.com/agents）はブラウザからクラウドエージェントを利用する別サービス
- Browser Automationでテストや繰り返し操作の自動化も可能
- 料金はProプラン（$20/月）から本格利用が可能
室谷代表取締役Cursor Browserの公式ブログ記事「A visual editor for the Cursor Browser」も読んでおくといいですね。ビジュアルエディタの詳細が動画付きで紹介されています。
テキトー教師DotAI 認定講師室谷代表取締役フロントエンド開発のワークフローは今まさに大きく変わっている最中です。Cursor Browserはその中心にある機能なので、ぜひ試してみてください。
あわせて読みたい
- Cursor Skillsとは？使い方・SKILL.mdの書き方・Rules/Commandsとの違いを完全解説【2026年最新】
- cursor: not-allowedとは？効かない原因・Bootstrap・Tailwindでの使い方を完全解説【2026年最新】
- Cursor Agentとは？エージェントモードの仕組みと使い方を徹底解説【2026年最新】
- Cursor（カーソル）とは？読み方・意味・AIエディタとしての使い方を完全解説【2026年最新】
- Cursorでアプリ開発する方法【2026年最新】：Webアプリ・モバイル・デスクトップを全プラットフォーム解説
- RealWorld Cursor Editorとは？無料のWindowsカーソル作成ツールを徹底解説【2026年最新】
- DifyのDSL（YAML）とは？ファイルの作り方・使い方を完全解説
