Lizard Studio と Claude in Chrome の比較

ウェブサイトの横にチャットを表示し、要素セレクター、注釈、デザイン計測を使ってローカルのコーディングエージェントに情報を渡したいなら、Lizard Studio を選んでください。Anthropic の公式ブラウザー拡張機能と、Claude Code への文書化された接続が必要なら、Claude in Chrome を選んでください。どちらもページを調査してデバッグを支援できます。選ぶ基準は、その作業の周辺で必要なインターフェースとツールです。

私たちは Lizard Studio を開発しています。この比較は、Lizard Studio のソース と Anthropic の Chrome ドキュメント に基づいており、2026年9月14日時点で確認しました。これは文書化された機能とサンプルタスクの比較であり、速度ベンチマークでも、私たちがあらゆるバージョンやプランをテストしたという主張でもありません。

ライブページの横に表示された Lizard Studio。インスペクターには選択した要素のスタイルが表示され、サイドパネルにはリクエストが表示されています。このスクリーンショットでは ChatGPT 接続を使用しています。

どの構成が自分の作業に合うか？

公式連携だけですでにタスクをカバーできるなら、別の拡張機能は不要かもしれません。ページ上での選択、計測、注釈によってリクエストをより正確にできるなら、Lizard Studio を試してください。無料の拡張機能をインストール し、セットアップガイド を使ってプロジェクトを接続してください。

ブラウザーとコードの接続を比較する

表の根拠となる情報は、Lizard Studio のツール一覧 と Claude in Chrome の公式機能 を読んで確認してください。競合製品のデザイン操作について中身のない主張をするのは誤解を招きます。この表では、文書化されていない操作を、その製品がそのタスクを解決できない証拠として扱っていません。

例 1: 2 つのボタンの間隔を修正する

カード内の 2 つのボタンがほとんど接しているとします。その行では 24px の gap が必要で、カード間の間隔はそのまま維持したいとします。結果は簡単に検証できます。行の計算済み gap が 24px に等しくなり、diff がその行を管理しているソースルールを変更していなければなりません。

Lizard Studio では、ローカルページを開き、行を選択して現在の gap を測定します。選択内容と、ソースを変更するリクエストを送信します。エージェントは添付された要素を調査し、CSS やコンポーネントを見つけて、編集案を提示できます。diff を確認し、更新してからもう一度測定してください。

「1 selection」チップはページ要素をリクエストに添付します。この切り抜きでは ChatGPT で明るさのリクエストを表示しています。ボタンの例では、あなた自身の間隔のリクエストと選択したエージェントを使ってください。

どの Claude Code ブラウザー構成でも、同じ対象と期待結果をエージェントに伝えてください。行をどのように特定するか、ツールが提案されたファイル編集をどう表示するか、その後にページをどう確認するかを確認してください。これらの手順によって、そのインターフェースが別のものより自分に合っているかどうかが決まります。

小さなテストには、ダウンロード可能な spacing exercise を使ってください。これはレイアウトルールを切り出しているため、アカウント、データベース、大規模アプリケーションなしで結果を確認できます。どちらのツールが複雑なコンポーネントシステムでどう動作するかを予測するものではありません。

例 2: 複数の要素にまたがる視覚的な問題を説明する

レスポンシブな見出しによって、最初の画面より下にボタンが押し出されることがあります。見出しだけを選択すると、ボタンやその親レイアウトが含まれないことがあります。Lizard Studio では、annotation で意図する領域を示せ、レスポンシブプレビューで影響を受ける幅を説明しやすくなります。

リクエストには意図する動作を含めてください。どの要素を一緒に残すべきか、何が折り返されてよいか、どのコンテンツを見えたままにすべきかです。スクリーンショットは 1 つの状態を記録するだけです。エージェントは広い変更を提案する前に、レイアウトルールも調査し、別の幅でもテストすべきです。

どちらの製品でも、コンポーネント境界でソースを確認してください。共有クラスへの変更は、このページを直して別のページを壊すことがあります。ルールがどこで使われているかをエージェントに特定させ、意図に合うなら、影響を受けるコンポーネントに編集を限定するよう求めてください。

有用な評価では、リクエスト、diff、そして 2 つのビューポートサイズを記録します。最初に見た許容できそうなスクリーンショットだけでツールを判断しません。

例 3: 見た目は正しいのに何も起きないボタンをデバッグする

デザインツールバーだけでは、壊れたリクエストやイベントハンドラーの説明にはなりません。クリックを再現し、console と network の状態を調べ、その挙動をプロジェクトファイルまで追跡するようエージェントに依頼してください。

Lizard Studio は、そのタスク向けのブラウザーツールをデザインツールと一緒に提供します。公式の Claude Code 連携でもライブデバッグが文書化されているため、このタスクだけを理由に Lizard Studio を選ぶことはできません。

期待する動作は具体的にしてください。ボタンは有効なフォームを送信し、成功メッセージを表示し、ページを既知の状態のままにすべきです。修正後は、成功パスと最初に発生したエラーの両方をテストしてください。console が静かなだけでは、ワークフローが機能していることはわかりません。

ローカルのテストアプリや、自分で管理しているテストアカウントから始めてください。エージェントに実行させたい操作に合った権限モードを選び、変更を残す前に結果を確認してください。

ライブページの変更と永続的な編集の違い

DOM ノードを変更したりインラインスタイルを追加したりすると、提案されたデザインをすぐに表示できます。その変更は通常、ブラウザーが元のページを再読み込みすると消えます。ローカルプロジェクト内のコンポーネントやスタイルシートを編集すると、開発サーバーが配信しているソースが変更されます。

この違いは、どのインターフェースを選んでも当てはまります。結果を残したいならソース編集を依頼してください。git diff を確認し、ページを更新して、対象を再度調査してください。結果が消えるなら、エージェントが DOM を編集したのか、配信中のプロジェクト外のファイルを編集したのか、別のスタイルシートに上書きされるルールを編集したのかを確認してください。

Lizard Studio が永続的なソース変更を行うには、正しいローカルフォルダーが必要です。公開ウェブサイトを調査しても、そのサイトのソースリポジトリへのアクセス権は得られません。ローカル編集を行っても変更は公開されません。デプロイは別の操作のままです。

アカウント、セットアップ、データ

Lizard Studio では Lizard ログインは必要ありません。Chrome 拡張機能とローカル host をインストールし、選択したエージェントを自分のアカウントで接続します。host と拡張機能は無料です。モデルへのアクセスと利用料金は AI プロバイダーが管理します。「無料の拡張機能」はモデルを無制限に使えるという意味ではありません。

公式連携については、インストール前に Anthropic の現在の前提条件 を読んでください。アカウントや認証の要件は変わる可能性があるため、古いセットアップ動画に頼るのではなく、そのページで利用条件を確認してください。

Lizard Studio host はローカルで動作し、選択したエージェントを通じてリクエストを送信します。Lizard Studio はチャットサーバーを運用せず、telemetry も収集しません。クラウドモデルには、そのエージェントが送信する内容が引き続き渡されます。プロジェクトにデータ制限がある場合は、Lizard Studio のプライバシーポリシー とプロバイダーの条件を確認してください。

どちらの構成でも、ローカル実行とリモートモデル処理の違いを明確に保ってください。その境界に依存するタスクに使う前に、セッションがどのプロジェクトフォルダー、タブ、アカウントにアクセスできるかを確認してください。

自分のプロジェクトで比較する方法

繰り返しできる小さな変更を使ってください。両方の製品が対応している範囲では、開始コード、リクエスト、エージェントモデル、受け入れ基準を同じに保ってください。モデルやアカウントが異なる場合は、その違いを記録してください。結果には、インターフェースよりもその違いのほうが大きく影響する可能性があります。

次の観察結果を記録してください:

1. 長い説明なしで正しい要素を指定できたか？
2. エージェントは意図したソースファイルを編集したか？
3. diff を調べて理解できたか？
4. 結果は再読み込み後も残ったか？
5. 2 つ目のビューポート幅でも動作したか？
6. ツールは確認を求めたか、それとも無関係なコードを変更したか？

視覚的な問題と挙動バグでも繰り返してください。失敗した試行もメモに残してください。1 回の成功はワークフローを学ぶには有用ですが、あるツールがより速い、またはより信頼できると主張するには不十分です。

デスクトップやエディターのインターフェースとも比較したい場合は、Claude Code GUI ガイド を使ってください。これは、どこで作業するか、どう変更を確認するかによって選択肢を分けています。

よくある質問

Lizard Studio は Anthropic の公式拡張機能ですか？

いいえ。Lizard Studio は Dragon Labs LLC が提供しています。Claude in Chrome は Anthropic の拡張機能です。Lizard Studio は自分の Claude Code インストールに接続し、Codex CLI を通じて ChatGPT もサポートします。

どちらも Claude Code がウェブサイトをデバッグするのに役立ちますか？

はい。どちらもブラウザー調査とデバッグのワークフローを文書化しています。Lizard Studio は、それらのツールをチャットのサイドパネルとデザインツールバーに組み合わせています。片方だけがページを見られるという主張ではなく、自分が使うセットアップと操作に基づいて選んでください。

Lizard Studio を使うには Claude Code から切り替える必要がありますか？

いいえ。既存の Claude Code インストール、アカウント、プロジェクトフォルダーを接続してください。そのエージェントをインストールしていれば、別のチャットに ChatGPT を選ぶこともできます。Codex CLI 接続については Lizard Studio での ChatGPT を参照してください。

両方の拡張機能を使えますか？

この比較では、あらゆる拡張機能バージョンの組み合わせが同時に有効なときの挙動までは確立していません。評価するには、一度に 1 つのブラウザーワークフローを実行し、どのツールがセッションとページコンテキストを管理しているかを確認してください。

どこから始めればよいですか？

公式の Claude ブラウザー接続が欲しいなら、Anthropic のガイド に従ってください。チャットの横で要素を選択して計測したいなら、Lizard Studio セットアップガイド に従い、1 つソース編集を試してください。