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