【2026年7月】Claude Codeのビルトインブラウザ機能｜フロントエンド開発のプレビューループを自動化する手順
※本記事にはPR・広告リンクが含まれます。
フロントエンドの修正のたびに「ブラウザでスクリーンショットを撮って、Claudeに貼り付けて説明する」を繰り返していませんか。2026年7月のアップデートで、Claude Codeデスクトップに内蔵ブラウザが加わり、この往復作業がまるごと不要になりました。この記事では、Webエンジニアがすぐ試せる起動手順・設定ファイル・実務プロンプト・競合比較を、2026-07-18時点の公式情報にもとづいて整理します。
Claude Codeデスクトップのブラウザ機能でできること【2026-07-18 時点】
結論から言うと、この機能の価値は「AIが自分でUIを見て、自分で直す」点にあります。従来はスクリーンショットを撮ってチャットに貼る手間が必須でしたが、その工程が消えます。外部サイト閲覧まで含む完全なタブ式ブラウザが追加されたのは Week 28（2026年7月6〜10日）、バージョン v2.1.202〜v2.1.206 でのことです（Claude Code What’s New、確認日 2026-07-18）。
海外メディアはこの体験を「Write. Run. Observe. Correct. Repeat.（書く・実行する・観察する・修正する・繰り返す）」と表現しています（出典: Kingy AI、2026-07-13掲載）。人間が間に入らず、AI単体でフィードバックループが回るのが本質です。
localhostプレビュー：dev serverの起動から自動確認まで
内蔵ブラウザは、起動中のローカルアプリ（localhost）をペイン内に直接表示できます。Claudeがコードを編集すると、そのままプレビューを開いて描画結果を確認します。手元のターミナルとブラウザを行き来する必要がありません。
外部サイト閲覧：公式ドキュメントやデザインを同一ペインで参照
もう一つの柱が外部サイトの閲覧です。localhostの実行中アプリと、公式リファレンスやデザインファイルなどの外部ドキュメントを、同じタブ式ペインに並べて表示できます。「ドキュメントを見ながら実装を直す」がツール内で完結します。
利用条件・プランと料金
まず自分が使えるかを確認しましょう。必要要件と対応プランは以下の通りです（出典: MLQ.ai、確認日 2026-07-18）。
| 項目 | 内容 |
|---|---|
| 必要バージョン | Claude Desktop v1.2581.0 以降 |
| 対応プラン | Pro・Max（追加費用なし、通常アップデートに含まれる） |
| 更新方法 | メニューの Claude → Check for Updates |
| 確認日 | 2026-07-18 |
Team・Enterpriseプランでの利用可否は、確認日時点で公式ドキュメントに明確な記載が見つかりませんでした。料金は変動する可能性があるため、最新の金額はAnthropic公式サイトで確認してください。
ビルトインブラウザの基本的な設定と起動手順
ブラウザペインを開く
ブラウザペインはショートカット一発で開けます。macOSは Cmd+Shift+B、Windowsは Ctrl+Shift+B です。ショートカットを忘れても Views メニューから開けます（出典: Claude Code Desktop Docs、確認日 2026-07-18）。
dev serverを設定する（.claude/launch.json）
dev serverの起動設定は .claude/launch.json で管理します。Claudeがプロジェクト構成を検出して自動生成しますが、手動でも編集できます。runtimeExecutable・runtimeArgs・port・autoPort・autoVerify といったフィールドを持ちます（出典: Dan Avila / Medium、確認日 2026-07-18）。
たとえば yarn dev をポート3000で起動し、auto-verifyを有効にする設定は次のようになります。
{
"runtimeExecutable": "yarn",
"runtimeArgs": ["dev"],
"port": 3000,
"autoPort": true,
"autoVerify": true
}autoVerify: true を指定すると、Claudeがファイルを編集するたびにブラウザで自動検証ループ（スクリーンショット撮影 → DOM検査 → 問題修正）が実行されます。詳しくは後述の「実務ワークフロー例」セクションを参照してください。autoPort: true は、port で指定したポートが他のプロセスに使われていた場合に、空きポートを自動で選択するフォールバック設定です。"port": 3000, "autoPort": true と両方設定すると、3000番ポートが空いていれば3000番を優先し、塞がっていれば別の空きポートが自動選択されます。
注意点が2つあります。1つ目は、.claude/launch.json はデフォルトで .gitignore に含まれないこと。これはチームでdev server設定を共有するための意図的な仕様です。2つ目に、その裏返しとして env フィールドにAPIキーなどの秘密情報を書いてはいけません（出典: claudefa.st Settings Reference、確認日 2026-07-18）。
セッション永続化を設定する（Persist sessions）
「Persist sessions」を有効にすると、cookiesとlocalStorageがdev serverの再起動をまたいで保持されます。開発中に毎回ログインし直す手間がなくなり、認証が必要な画面のテストが快適になります（出典: Claude Code Desktop Docs、確認日 2026-07-18）。
有効化の手順は公式ドキュメントの「Preview your app」セクションに記載されています。このセクションで具体的なトグルの場所や設定フィールドを確認してから操作してください。
実務ワークフロー例とプロンプトテンプレート
ここからは、そのままコピーして使える自然言語プロンプトを紹介します。いずれもClaudeが「ブラウザを開く→操作する→問題を直す」まで一気に実行します。
フォームバリデーションの確認と修正
localhost:3000/login を開いて、空のメールアドレスと短すぎるパスワードで
フォーム送信を試みて。エラーメッセージが正しく表示されなければ修正して。コンソールエラーの自動検出・修正
localhost:3000/dashboard を開いてページ読み込み時のコンソールエラーを
確認して。エラーがあればソースファイルを特定して修正して。レスポンシブ表示の検証
localhost:3000 をモバイル幅（375px）で確認して。ナビゲーションメニューが
正しく折りたたまれているか確認し、崩れていれば修正して。これらが自動で回る背景には auto-verify があります。auto-verifyはデフォルトで有効で、Claudeがファイルを編集するたびに次のループを実行します（出典: Builder.io、確認日 2026-07-18）。
編集 → dev server起動 → スクリーンショット撮影 → DOM検査 → 問題検出 → 追加修正 → 再検証
このループを止めたい場合は、.claude/launch.json に "autoVerify": false を追記する方法と、Settings → Claude Code のトグルで切り替える方法のどちらでも停止できます。設定ファイルでプロジェクト単位に一元管理したい場合は launch.json、その場で手早く切り替えたい場合は Settings トグルを使ってください。
ビルトインブラウザ vs Chrome拡張 vs 競合ツールの比較
似た機能が各ツールに存在するため、違いを整理します。GitHub Copilotのブラウザツールは2026-07-01にGA化され、「GA化と同時にデフォルト有効になった」とされています（出典: GitHub Changelog、確認日 2026-07-18）。
| 項目 | Claude Code ビルトインブラウザ | Claude in Chrome 拡張 | Cursor ブラウザツール | GitHub Copilot ブラウザツール |
|---|---|---|---|---|
| 対象 | localhost + 外部サイト | ログイン済みのページ | localhost + 外部サイト | VS Code内・外部サイト |
| プロファイル | 独立クリーンプロファイル | 個人ブラウザと共有 | ワークスペース永続 | VS Code内分離 |
| auto-verify | デフォルト有効 | なし | 手動起動 | エージェント連携 |
| GA時期 | 2026-07-10 | 2026-06（全プランGA） | 利用可能（時期不明） | 2026-07-01 |
| 設定ファイル | .claude/launch.json | なし | MCP（Model Context Protocol）設定 | VS Code設定 |
ビルトインブラウザとChrome拡張の使い分け
同じClaudeでも、この2つは用途が違います。判断基準はシンプルです。
- ビルトインブラウザ：ビルド・テスト・公開ドキュメントの参照。ログイン不要な作業向き。
- Claude in Chrome拡張：Notion・GitHub・Figmaなど、自分がログイン済みの外部サービスを操作したいとき向き。
ビルトインブラウザはサンドボックス化された独立プロファイルを使うため、個人ブラウザの保存済みログインや履歴は持ち込まれません。だからこそ、ログイン状態を活かしたい操作にはChrome拡張が向いています。
セキュリティと制限事項・注意点
サンドボックスプロファイルという設計は、安全性のためのものです。購入手続き・アカウント作成・CAPTCHA迂回といった操作を、AIが勝手に進めない前提になっています。
外部サイトでのwrite操作（クリック・タイピング・フォーム送信など）は、全権限モードでも安全性分類器がレビューします。危険と判断された場合は権限プロンプト（Allow once / Always allow / Deny）が表示されます（出典: Claude Code Desktop Docs、確認日 2026-07-18）。
個人で利用する場合は、上記の権限プロンプト（Allow once / Always allow / Deny）で操作ごとに許可範囲を管理するのが基本です。組織でClaudeを一括管理する場合は、Enterprise向けのポリシー管理機能（managed settings）として browserExternalPageTools や disableBrowserExternalNavigation が用意されています。個人ユーザーはこの設定を意識する必要はありません。
繰り返しになりますが、.claude/launch.json の env フィールドに秘密情報を書かないでください。このファイルはチーム共有前提でコミット対象になりやすいため、漏洩リスクに直結します。
おすすめ商品
記事に関連するおすすめ商品をご紹介します。
まとめ
Claude Codeの内蔵ブラウザは、「フロントエンドを直すたびにスクリーンショットを撮ってAIに貼っていた人」にこそ効きます。編集から検証までをAIが自走するため、コンテキストスイッチの回数が目に見えて減ります。まずは次のステップから始めてみてください。
- Claude → Check for Updates で v1.2581.0以降へ更新する
- Cmd+Shift+B / Ctrl+Shift+B でブラウザペインを開く
.claude/launch.jsonを確認し、必要ならyarn devなどにカスタマイズする- 本記事のプロンプト例で、フォーム検証やレスポンシブ確認を試す
- 設定が固まったら
.claude/launch.jsonをリポジトリにコミットしてチームと共有する
仕様変更の速い領域なので、最終的な手順は必ず公式ドキュメントで最新情報を確認してください。今日の修正1回から、プレビューループの自動化を体験してみましょう。
