CursorでHTMLプレビューする基本の方法
CursorでHTMLプレビューする3つの方法
Live Preview拡張機能
- Go Liveボタンでブラウザ起動
- 変更保存で自動リロード
- 静的なHTML向け
- React/Vueは別途ホットリロード設定
内蔵ブラウザ
- 右クリック→Open in Browser
- エディタ内でブラウザタブ
- Agentがブラウザ操作可能
- コンソールログ閲覧可能
- Glassレイアウトで表示されない問題
Live Preview拡張機能でリアルタイムプレビュー
室谷代表取締役まずはシンプルに、Live Preview拡張機能を使う方法。フォーラムでも質問がよく上がってましたけど、これ、素のHTMLとJSなら一番手軽なんですよね。
テキトー教師DotAI 認定講師そうですね。拡張機能を入れて、HTMLファイルを開いて右下の「Go Live」みたいなボタンを押すだけでブラウザが立ち上がる。
更改を保存するたびに自動でリロードされるんで、ストレスがない。
更改を保存するたびに自動でリロードされるんで、ストレスがない。
室谷代表取締役ただ、ReactとかVueみたいなフレームワークの場合はホットリロードの設定が別に必要になる。そこは注意ですね。
テキトー教師DotAI 認定講師そうそう。でも静的なHTMLのプロトタイプをパパッと見たいだけなら、これで十分です。
内蔵ブラウザを使ってプレビューする手順
テキトー教師DotAI 認定講師もう一つの方法が、Cursorの内蔵ブラウザを使うやり方。右クリックメニューから「Open in Browser」を選ぶと、エディタ内でブラウザタブが開きます。
室谷代表取締役エージェントにもブラウザ操作を任せられるんで、結構便利っすね。ドキュメントにもあるけど、Agentがブラウザを制御してテストまでできる。
テキトー教師DotAI 認定講師内蔵ブラウザはちゃんとコンソールログも見れるし、デバッグにも使える。ただ、ファイルを直接開く方法はまだ改善の余地があるみたいで、フォーラムでも「GlassレイアウトでHTMLを開いたときにプレビューが表示されない」って要望が出てました。
室谷代表取締役そこは今後のアップデートに期待ですね。今はLive Preview拡張機能と使い分けるのが現実的かな。
コマンドパレットから素早くプレビューを開く
テキトー教師DotAI 認定講師コマンドパレットでもプレビューを開けます。Ctrl+Shift+Pで「Open in Browser」と打てば、今開いてるHTMLファイルがブラウザで表示される。
室谷代表取締役ショートカット覚えると早い。エディタから手を離さずに確認できるのは地味に効く。
テキトー教師DotAI 認定講師はい。でもデフォルトのショートカットは割り当てられてないんで、自分でキーバインドを設定するのがおすすめです。
室谷代表取締役現場だと「Ctrl+K Ctrl+B」とか、よく使うコマンドはすぐ手に馴染ませるって感じですね。
ビジュアルエディタで直感的にデザインを調整
ドラッグ＆ドロップでレイアウトを変更
室谷代表取締役Cursor Browserのビジュアルエディタ、ドラッグ＆ドロップでDOMツリー上の要素を直接動かせるんですよね。これ、デザインのプロトタイピングが一気に変わりました。
テキトー教師DotAI 認定講師たしかに。最初は「わざわざGUIでやらなくてもコード書けばいいのでは」って思う人もいるんですけど、実際に使うと発想の切り替えがなくなって結構効率的です。
室谷代表取締役時給換算で考えると、コンテキストスイッチのコストってバカにならないんですよ。ドラッグでレイアウト変えて、そのまま「適用して」ってエージェントに投げるだけでコードまで更新される。
これ開発時間、体感で3割くらい削れてます。
これ開発時間、体感で3割くらい削れてます。
テキトー教師DotAI 認定講師なるほど。「cursor html preview」を探してる人は、こういうビジュアルな操作を期待してるんでしょうね。
見たまま編集できるのは理想です。
見たまま編集できるのは理想です。
コンポーネントの状態を直接テスト
室谷代表取締役さらにReactのコンポーネントpropsをサイドバーで直接いじれるのも地味に効く。非同期の状態とかローディングとか、わざわざコードでモックしなくてもビジュアルで操作できる。
テキトー教師DotAI 認定講師これ、現場でよく聞くのが「状態管理が複雑でテストが大変」って悩みなんですよ。それをコードを書かずにチェックできるのは初心者にも心強い。
室谷代表取締役ただ、この機能はReactにかなり依存してる部分もあるので、Vueとか他のフレームワークはどうフォローするかは気になるところです。
テキトー教師DotAI 認定講師そこは今後のアップデート次第でしょうね。でも現時点でもかなり強力です。
クリックして変更を指示：Point and Prompt
室谷代表取締役で、これが本命なんですが、UIの要素をクリックして「これを大きくして」「赤にして」って自然言語で指示すると、エージェントが並行してコードを変えてくれる。これ、もう「コーディング」というより「意図の伝達」ですよ。
テキトー教師DotAI 認定講師僕の周りでも「cursor html コーディングってどうやるの？」って聞かれることがあって、その答えとしてこのPoint and Promptを紹介すると一発で理解してくれます。言葉で伝えて直せるって、ほんと魔法みたいです。
室谷代表取締役経営者的には、非エンジニアのデザイナーがこれで簡単に調整できるようになると、開発者の負荷が減るのが大きい。時給の高いエンジニアが細かいスタイル調整に時間を取られなくなる。
テキトー教師DotAI 認定講師そう、まさに役割分担が変わる感じですね。コードを書かない人でもUIの微調整はできるようになる。
静的HTMLファイルのプレビューと注意点
まとめ
静的HTMLファイルのプレビュー方法まとめ
- 右クリック→Open in BrowserでCursor内蔵ブラウザでプレビュー可能
- GlassレイアウトではOpen in Browserが利用不可
- 回避策: Classicレイアウトでプレビュー後に戻すか、Live Preview拡張を使用
- file://直接開く: 簡単なHTML+CSS確認に適するが、JSモジュールやFetch不可
- Live Server: 複雑な動作確認に適するが、サーバー起動が必要
- 目的に応じてfile://とLive Serverを使い分ける
ローカルファイルをブラウザタブで開く方法
室谷代表取締役静的HTMLのプレビューって、シリコンバレーのチームだと当たり前にブラウザタブにポンって開くんですよね。でもCursorでやろうとすると、右クリック→Open in Browserのルートしかない。
テキトー教師DotAI 認定講師そうなんですよ。初めて触る人は「エディタ内でプレビューできないの？」って戸惑います。
ただ、Open in Browserで開けば、Cursorの内蔵ブラウザが立ち上がってちゃんとレンダリングされるので、まずはそこから試してほしいですね。
ただ、Open in Browserで開けば、Cursorの内蔵ブラウザが立ち上がってちゃんとレンダリングされるので、まずはそこから試してほしいですね。
室谷代表取締役ただ、毎回右クリックって手間ですよね。僕の現場だと、ショートカットキーを割り当ててる人もいます。
Glassレイアウトでのプレビュー問題と解決策
テキトー教師DotAI 認定講師ここがハマりどころで、Glassレイアウト（Agentsウィンドウ）だと、ファイルをクリックするとソースコードが開いちゃうんです。右クリックのOpen in BrowserもGlassのファイルツリーにはない。
室谷代表取締役それはUXとして惜しいですね。フォーラムでも「GlassでHTMLをプレビューしたい」って要望が上がってて、開発側も「追加したい」って言ってる。
テキトー教師DotAI 認定講師現状の回避策としては、Classicレイアウトで一度Open in BrowserしてからGlassに戻るか、Live Preview拡張を使う。ただ、Live Previewはサーバー起動が必要で、ちょっとオーバーキルなことも。
室谷代表取締役そう、そこなんですよね。単なるモックアップ確認のためにサーバー立てるのはコスト対効果が悪い。
ファイル://プロトコルとLive Serverの使い分け
室谷代表取締役結局、ローカルファイルをfile://で直接開くか、Live Serverで[http://経由にするか。file://だとJavaScriptのモジュールやFetchが動かないことが多い。
](http://%E7%B5%8C%E7%94%B1%E3%81%AB%E3%81%99%E3%82%8B%E3%81%8B%E3%80%82file://%E3%81%A0%E3%81%A8JavaScript%E3%81%AE%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E3%82%84Fetch%E3%81%8C%E5%8B%95%E3%81%8B%E3%81%AA%E3%81%84%E3%81%93%E3%81%A8%E3%81%8C%E5%A4%9A%E3%81%84%E3%80%82)
](http://%E7%B5%8C%E7%94%B1%E3%81%AB%E3%81%99%E3%82%8B%E3%81%8B%E3%80%82file://%E3%81%A0%E3%81%A8JavaScript%E3%81%AE%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E3%82%84Fetch%E3%81%8C%E5%8B%95%E3%81%8B%E3%81%AA%E3%81%84%E3%81%93%E3%81%A8%E3%81%8C%E5%A4%9A%E3%81%84%E3%80%82)
テキトー教師DotAI 認定講師現場でよく聞くのは「CSSが反映されない」「画像が表示されない」ってトラブル。file://の制限ですね。
簡単なHTML+CSSの確認ならfile://で十分ですが、API叩いたりするならLive Serverが安全。
簡単なHTML+CSSの確認ならfile://で十分ですが、API叩いたりするならLive Serverが安全。
室谷代表取締役CursorのBrowserタブはサーバーを検出して勝手にポートを合わせてくれるから、開発サーバーが走ってれば自動で繋がる。その辺は賢い。
テキトー教師DotAI 認定講師まずは動作確認の目的を明確にして、file://で済むならそれで。複雑になってきたらLive Serverを導入する、という使い分けが現実的です。
プレビュー機能を使った効率的な開発フロー
プレビュー機能を使った効率的な開発フロー
リアルタイムプレビュー
保存→Alt+Tab→F5の3秒が1日50回なら月に数時間のロス削減
デバッグテクニック
ビジュアルエディタのサイドバーでコンポーネントのpropsを直接変更可能、デバッグ時間が体感3割減
チーム共有
ビジュアルエディタの「ポイント＆プロンプト」機能で非エンジニアも視覚的に変更要求可能、コミュニケーションコスト激減
リアルタイムプレビューでコーディング速度を向上
テキトー教師DotAI 認定講師現場でよく聞くのは「コード書いても即座に結果が見えないと不安になる」という声です。ブラウザリロードの手間が意外とストレスになるんですよね。
室谷代表取締役確かに。MYUUU のチームでも、Live Preview 拡張入れてからフィードバックループが明らかに速くなりました。
時給換算すると、保存→Alt+Tab→F5 の3秒が1日50回なら月に数時間のロスですよ。
時給換算すると、保存→Alt+Tab→F5 の3秒が1日50回なら月に数時間のロスですよ。
テキトー教師DotAI 認定講師それにビジュアルエディタが出てからは、ドラッグ＆ドロップで直接レイアウト変えられるので、デザイン調整がコード編集から完全に独立しました。HTML コーディング中でもすぐに確認できる。
デバッグにプレビューを活用するテクニック
テキトー教師DotAI 認定講師デバッグで便利なのが、ビジュアルエディタのサイドバーでコンポーネントの props を直接いじれることです。React の state を変えながら挙動を確認できるので、原因特定が早い。
室谷代表取締役あれは効く。従来だと DevTools 開いて State タブ探して…という手間があったけど、今はブラウザ上でクリック→プロパティ変更が一発。
ROI で言うと、デバッグ時間が体感3割減ってます。
ROI で言うと、デバッグ時間が体感3割減ってます。
テキトー教師DotAI 認定講師最初に戸惑うのが「どのツールを使えばいいか」ですが、基本は Cursor 内蔵ブラウザで十分。静的 HTML なら Live Preview、動的サイトなら Browser タブ＋エージェントで十分カバーできます。
チームでのプレビュー共有とフィードバックループ
室谷代表取締役チーム開発で効くのは、ビジュアルエディタの「ポイント＆プロンプト」機能。UI 上で「このボタンをもう少し右に」とクリック指示すると、エージェントがコードを直してくれる。
レビューがコードレビューではなく視覚的な変更要求で完結する。
レビューがコードレビューではなく視覚的な変更要求で完結する。
テキトー教師DotAI 認定講師実際、非エンジニアのデザイナーやプロダクトマネージャーが Cursor のブラウザ見ながら「ここ変えて」と言えるので、コミュニケーションコストが激減しますね。
室谷代表取締役ただ、プレビューを共有するときは開発サーバーを立ち上げっぱなしにする必要がある。そこはドキュメントにある通り、Agent が自動でポートを検出してくれるので、意識しなくて済むようになってます。
プレビューが表示されない時のトラブルシューティング
プレビュー表示されない時のトラブルシューティング
- 011. 拡張機能が有効か確認Cursorの拡張機能タブで有効化を確認
- 022. 拡張機能の競合を解消一旦全部無効にし、必要なものだけ有効にする
- 033. ファイルの関連付けを確認.htmlファイルが拡張機能で開くように設定
- 044. ブラウザのキャッシュをクリアシークレットウィンドウで開いてみる
- 055. ポート競合を調査ターミナルで`lsof -i :ポート番号`を実行
- 066. エージェントに起動コマンドを明示「npm run dev」など実行、またはLive Preview拡張機能を使用
- 077. ワークスペース設定でプレビューコマンドを定義.vscode/settings.jsonに`"livePreview.serverRoot": "./dist"`を記述
拡張機能が動作しない場合の確認ポイント
テキトー教師DotAI 認定講師初めて触る人からよく聞かれるのが、拡張機能をインストールしたのにプレビューが表示されない、というケースです。まずは拡張機能が有効になっているか、Cursorの拡張機能タブから確認してもらうのが第一歩ですね。
室谷代表取締役あとは拡張機能同士の競合も地味に効く。複数のプレビュー系拡張機能を入れてるとどれが優先されるか分からなくなる。
現場では「一旦全部無効にして、必要なやつだけ有効にする」で直るケースが大半です。
現場では「一旦全部無効にして、必要なやつだけ有効にする」で直るケースが大半です。
テキトー教師DotAI 認定講師そうなんですよ。あとはファイルの関連付けが正しいかもポイントです。
.htmlファイルがエディタではなく拡張機能で開くように設定されていないと、プレビューではなくソースコードがそのまま表示されます。
.htmlファイルがエディタではなく拡張機能で開くように設定されていないと、プレビューではなくソースコードがそのまま表示されます。
ブラウザのキャッシュやポート競合の問題
テキトー教師DotAI 認定講師プレビューサーバーが立ち上がっているのに真っ白、みたいな時は大抵ブラウザのキャッシュかポート競合が原因です。開発中に何度もリロードしてるとキャッシュが古いままで、新しいHTMLが反映されないんですよね。
室谷代表取締役ポート競合は地味にハマる。他の開発サーバーと同じポートを使おうとするとエラーになるけど、Cursorの内蔵ブラウザは静かに失敗することもある。
時給換算すると、こういう調査に30分以上取られるのは結構なロスですよ。
時給換算すると、こういう調査に30分以上取られるのは結構なロスですよ。
テキトー教師DotAI 認定講師対策としては、ターミナルで
lsof -i :ポート番号で使用中プロセスを確認するか、Cursorの設定でプレビューポートを明示的に指定する方法があります。キャッシュはシークレットウィンドウで開いてみると切り分けが早いです。エージェントが自動でサーバーを起動しない場合の対処
室谷代表取締役Cursorのエージェントは開発サーバーを自動検出するように最適化されてるんですが、たまに認識しないことがある。これは、エージェントが別のポートを推測してしまって、実際のサーバーと食い違うパターンが多いです。
テキトー教師DotAI 認定講師そういう時は、エージェントに「npm run devを実行して」とか明示的に起動コマンドを教えると直ります。静的HTMLの場合は、Live Preview拡張機能の方が最初からサーバーを自動起動してくれるので、そちらを使う手もあります。
室谷代表取締役もう一つ、ワークスペースの設定で独自のプレビューコマンドを定義する方法もある。.vscode/settings.jsonに
これ、チームで共有する時に効きますね。
"livePreview.serverRoot": "./dist"みたいに書いておけば、エージェントに頼らずとも毎回同じ環境でプレビューが立ち上がる。これ、チームで共有する時に効きますね。
他エディターとのプレビュー機能比較
プレビュー機能比較
VS Code Live Server
- ファイル保存でブラウザ自動リロード
- プレビューは見るだけで操作不可
Windsurf
- ビジュアルプレビューベータを提供中
VS CodeのLive Serverとの違い
テキトー教師DotAI 認定講師VS CodeでHTMLをプレビューするといえばLive Serverですよね。ファイル保存するたびにブラウザが自動リロードされる、あの仕組み。
室谷代表取締役あれ、シンプルで良いんですけど、あくまで「ファイルをブラウザで開いてるだけ」なんですよね。Cursor のビジュアルエディタはもっと深いところまで操作できる。
テキトー教師DotAI 認定講師たしかに。Live Serverだとプレビューは見えるけど、そこで要素をドラッグして並び替えたり、スタイルをスライダーで調整したりはできませんから。
室谷代表取締役そう。Cursor はプレビュー上で直接クリックして「これを大きくして」って指示すると、エージェントがコードを書き換えてくれる。
Live Server の単なるリロードとは次元が違うんですよね。
Live Server の単なるリロードとは次元が違うんですよね。
Windsurfのビジュアルプレビューとの比較
テキトー教師DotAI 認定講師Windsurf も最近ビジュアルプレビューのベータを出してますよね。フォーラムでも「Cursor にはいつ来るんだ」って声がありました。
室谷代表取締役はい。ただ Cursor のビジュアルエディタは 2025年12月に正式リリースされていて、ドラッグ＆ドロップによるレイアウト変更や、コンポーネントの props をサイドバーで直接編集できるところが強みです。
テキトー教師DotAI 認定講師現場でよく聞くのは「デザイン修正をコードでやるのに時間がかかる」という声。Cursor ならプレビュー上で見た目を調整して、それをそのままコードに反映できる。
室谷代表取締役その辺りの「抽象レベルを一段引き上げる」っていうのが公式の言葉ですが、まさにそこ。デザインとコードの間のコンテキストスイッチが減るのは、ROI で考えても大きいですよね。
Cursor独自のプレビュー機能の強み
テキトー教師DotAI 認定講師最後に、Cursor ならではのポイントをまとめると、エージェントとの連携が一番の差別化要因ですね。
室谷代表取締役そうです。ブラウザツールがエージェントと統合されていて、プレビューを見ながら「このボタンの色を変えて」と指示すれば、コードが自動で更新される。
しかもセッションが永続化されるから、認証情報や LocalStorage も保持されたまま。
しかもセッションが永続化されるから、認証情報や LocalStorage も保持されたまま。
テキトー教師DotAI 認定講師あと、静的HTMLファイルのプレビューに関しても、今は右クリックからブラウザで開けるけど、将来的には Glass レイアウトで自動プレビュー表示みたいな改善も検討されているらしいです。
室谷代表取締役そういう UX の細かい部分まで詰めていくのが、Cursor のエディタとしての完成度を高めてる要因だと思います。他エディターの単なるプレビュー機能とは一線を画してますね。
よくある質問
Q1. CursorのプレビューとLive Server拡張機能の違いは？
テキトー教師DotAI 認定講師現場でよく聞く質問ですね。Cursorのプレビューはエディタ内で完結しますが、Live Serverはブラウザで自動リロードしてくれます。
室谷代表取締役そう。用途で使い分ける感じです。
静的HTMLの軽い確認ならCursor内で十分。本格的な開発ならLive Serverの方がリロードが速い。
静的HTMLの軽い確認ならCursor内で十分。本格的な開発ならLive Serverの方がリロードが速い。
テキトー教師DotAI 認定講師ただ、Live Serverを入れると環境が増えるので、初心者はまずCursorのプレビューで慣れるのがいいですよ。
Q2. プレビュー画面を複数のデバイスで確認する方法は？
室谷代表取締役外部デバイスで確認したいですよね。Cursorのプレビューはローカルサーバー機能と組み合わせると可能です。
テキトー教師DotAI 認定講師具体的には、ターミナルで
python -m http.serverして、スマホから同じWi-Fi経由でアクセスします。CursorのプレビューURLを共有するわけではないので注意。室谷代表取締役ただ、スマホで確認するならレスポンシブモードを使う方が手軽です。プレビュー画面の左上にデバイス切り替えがあります。
Q3. 動的なコンテンツ（PHPなど）もプレビューできる？
テキトー教師DotAI 認定講師残念ながら、Cursorのプレビューは静的なHTML/CSS/JSしか処理できません。PHPの実行は別途サーバーが必要です。
室谷代表取締役でも、PHPファイルでもHTML部分のプレビューはできます。サーバーサイドの処理は無視されるので、静的な確認には使えます。
テキトー教師DotAI 認定講師ただ、動作確認にはXAMPPやDockerでサーバーを立てるのが確実です。
Q4. Reactなどのフレームワークを使っている場合のプレビュー注意点は？
室谷代表取締役ReactやVueの場合、ビルド後の
distフォルダをプレビューするなら問題ないんですけど、開発中のホットリロードは効きません。テキトー教師DotAI 認定講師実はそうなんですよ。
プレビューボタンはあくまでファイルベースなので。
npm run devで立ち上げた開発サーバーをCursorのプレビューで開くには、URLを直接指定する必要があります。プレビューボタンはあくまでファイルベースなので。
室谷代表取締役そういう意味では、フレームワークを使うならVSCodeの拡張機能と大差ないです。でも、ちょっとしたコンポーネントの確認には十分。
Q5. プレビュー機能でブラウザのデベロッパーツールを使うには？
テキトー教師DotAI 認定講師Cursorのプレビューはエディタ内の簡易ビューアなので、デベロッパーツールは使えません。要素の詳しい調査はブラウザで開く必要があります。
室谷代表取締役とはいえ、右クリックで「ブラウザで開く」ができるので、ワンクリックで切り替えられます。そこからデベロッパーツールを使う流れが定番ですね。
テキトー教師DotAI 認定講師最初に戸惑うのは、Cursor内で完結しないことかもしれませんが、慣れればスムーズです。
まとめ
室谷代表取締役CursorのHTMLプレビュー、結局は「手軽さ」に尽きますね。拡張機能なしでパッと確認できるのは、小さな修正や学習時にはかなり効く。
テキトー教師DotAI 認定講師たしかに。本格的な開発なら拡張機能や外部サーバーと併用するのが現実的ですが、最初の一歩としては十分すぎる機能です。
室谷代表取締役MYUUUの現場では、デザイナーとの受け渡しで「これ見て」ってプレビューURLを送るのに使ってます。ローカルサーバー立てなくて済むので楽なんですよね。
テキトー教師DotAI 認定講師次にやるなら、プレビュー中のホットリロードをどう実現するか、あとVSCodeからの移行時に知っておくと便利な小技をまとめると良いかもしれません。
室谷代表取締役そうですね。まずは今回の基本を押さえて、足りない部分は拡張機能で補う。
そのバランスが大事です。
そのバランスが大事です。
