ChatGPTのWebサイトエディタ: Chromeで既存サイトを修正する

既存プロジェクトのWebサイトエディタとしてChatGPTを使うには、コーディングセッションをレンダリングされたページとそのソースフォルダの両方に接続します。次に、具体的な変更を依頼し、ファイル差分を確認してページを再読み込みします。Lizard Studioでは、Chromeで要素を選択して ChatGPT パネルに送ることができ、これはローカルのCodex CLIを通じて実行されます。

この実際のLizard Studioのスクリーンショットは、ブラウザーツールとChatGPT接続を示しています。これはインターフェースの説明用であり、以下のダウンロード可能な演習では別のローカルページを使用します。

私たちは Lizard Studio を開発しています。このガイドには、アプリフレームワークなしで再現できる小さなモバイルレイアウトのバグが含まれています。2026年9月14日時点で、ブラウザ内の例とリンク先の製品ドキュメントを確認しました。この例はCSSの修正を検証するものであり、エージェントの速度や成功率を検証するものではありません。

プロジェクトに合った編集ワークフローを選ぶ

ChatGPT内でサイトを作成してホスティングしたい場合は、ChatGPT Sites を検討してください。OpenAIは、プロンプトから開始する方法、または互換性のある既存のローカルプロジェクトから開始する方法を文書化しています。プロジェクトをそのワークフローに移行する前に、互換性を確認してください。ChatGPT Sites ドキュメント。

すでに保持したいリポジトリ、開発サーバー、リリースプロセスがある場合、このガイドではそれらを使います。Lizard Studioはブラウザを選択したローカルフォルダに接続します。基盤となるCodex CLIは、プロジェクト内のファイルを調査し、コードを編集し、コマンドを実行できます。Codex CLI ドキュメント。

スクリーンショットは問題の説明には使えますが、どのファイルがそのレイアウトを管理しているかは特定できません。有効な編集セッションでは、その両方を確認します。

ページとソースフォルダを接続する

ChatGPT セットアップ ガイド を完了してください: 拡張機能とローカルホストをインストールし、Codex CLIにサインインしてから、Lizard Studioで ChatGPT とプロジェクトフォルダを選択します。拡張機能とホストは無料ですが、プロバイダーアカウントの要件と利用制限は引き続き適用されます。

プロジェクトの開発サーバーを起動し、そのローカルURLをChromeで開きます。編集を依頼する前に、次のように聞いてください:

Report the current page URL and the project folder you can edit.
Find the source file for this page. Do not change it yet.

その回答を確認してください。デプロイ済みのページとローカルページは同じ見た目でも、異なるコードを読み込んでいる場合があります。セッションが別のフォルダを指している場合は、続行する前に修正してください。

この演習では、responsive-card.html を空のローカルフォルダにダウンロードします。ブラウザの「名前を付けてページを保存」コマンドを使ってHTMLのみを選ぶか、リンク先のソースファイルを保存してください。そのフォルダをローカルHTTPサーバーで配信します:

python3 -m http.server 8080

http://localhost:8080/responsive-card.html を開き、Lizard Studioでそのフォルダを選択します。この例ではプレーンなHTMLとCSSを使います。オプションのフォントは、単体でダウンロードした場合には sans-serif にフォールバックします。Open ボタンは動作しないサンプルコントロールです。

修正を依頼する前にモバイルのオーバーフローを再現する

レスポンシブプレビューまたはChrome DevToolsを使って、ビューポートを 390 CSS pixels 幅に設定します。カードには長いファイル名とOpenボタンが含まれています。ファイル名が行の利用可能な幅を超えるため、ページが横にスクロールします。

Selector でカードを選択します。添付した要素は、どのレンダリング済みコンテナに対応が必要かを特定するのに役立ちます。より大きな問題であれば、スクリーンショットに注釈を付けて、ファイル名とボタンの両方を指し示してください。

既存のStudioセッション内のインスペクタとツールバーです。これらのコントロールを使って自分のカードを調査してください。ここに表示されている値は、スクリーンショットで選択されている要素のものです。

エージェントには、確認可能な結果を伝えてください:

At a viewport width of 390px, the selected file card makes the
page scroll horizontally. Find the cause in responsive-card.html
and fix the source CSS.

Keep the full file name readable and the Open button visible.
Keep the colors, labels and desktop layout. Do not hide overflow
on the page or shrink the font to make the content fit.

Show the diff. Reload and check the page at 390px and 1280px.
Report the viewport width and the document scroll width at each.

最後の数行が重要です。overflowを隠すと、スクロールバーは消えても、コントロールの一部に手が届かないままになることがあります。目標には、読みやすい内容と操作可能なボタンの両方が含まれます。

CSSの変更を確認する

このフィクスチャでは、.file-info はflexアイテムです。デフォルトの最小サイズと長いファイル名によって、行が狭いカードに収まりません。小さな修正を1つ加えることで、そのアイテムを縮小可能にし、必要な場所でファイル名を折り返せるようになります:

.file-info {
  flex: 1;
  min-width: 0;
}

.file-name {
  margin: 0;
  color: #e9edf4;
  overflow-wrap: anywhere;
}

これはこのサンプルに対する答えであり、Webサイト上のすべての要素に追加すべきルールではありません。別のプロジェクトでは、固定幅、grid track、または画像がオーバーフローの原因かもしれません。修正を適用する前に、どのルールが原因かを特定するようエージェントに依頼してください。

ソース差分を読んでください。ファイル名、ボタンラベル、色は維持されているはずです。この演習を通すために、ページへ overflow-x: hidden を追加したり、名前を短くしたり、共有タイポグラフィを変更したりしてはいけません。

再読み込み後に結果を確認する

390pxでは、完全な名前がカード内の自分の領域で折り返されるはずです。Openボタンはカード内に収まったままである必要があります。1280pxでは、デスクトップの行が引き続き正しく見えることを確認してください。

この読み取り専用チェックはブラウザコンソールで実行することも、エージェントに同じ値を報告させることもできます:

({
  viewportWidth: document.documentElement.clientWidth,
  scrollWidth: document.documentElement.scrollWidth,
  hasHorizontalOverflow:
    document.documentElement.scrollWidth >
    document.documentElement.clientWidth
})

修正済みのフィクスチャは、両方の幅で hasHorizontalOverflow: false を報告するはずです。カード自体も確認してください。document widthの確認だけでは、すべての要素が読みやすいままであることは証明できません。

もう一度再読み込みしてください。バグが再発する場合は、エージェントがサーバーから配信されているファイルを編集したことを確認してください。ライブDOMにだけ適用された変更は、ブラウザがソースを再度読み込むと通常は消えます。

私たちは、390pxと1280pxで元のフィクスチャと修正済みフィクスチャを確認しました。これにはdocument overflow、ボタンの境界、変更されていないテキストが含まれます。リンク先の開始ファイルと上記のCSSを使って、同じ確認を繰り返せます。エージェント間の統制された比較は実施していません。

これらの測定は、サイトのGeist fontが読み込まれたChromiumを使用しています。ダウンロードしたコピーではフォールバックフォントが使われ、元の幅が異なる場合があります。同じ受け入れ基準を確認してください。

例から自分のWebサイトへ移る

1つの問題を選び、影響を受けるroute、viewport、期待する結果を明記してください。Reactアプリでは、修正箇所がcomponent、CSS module、またはutility classにあるかもしれません。実際のプロジェクトへのアクセスをセッションに与え、そのソースを特定するよう依頼してください。

ローカルで確認した後は、通常そのプロジェクトで必要なチェックを実行してください。共有カードは複数のrouteに表示される可能性があるため、コミット前に別の使用箇所も確認してください。変更の準備ができたら、通常のリリースプロセスを通じて公開します。ローカルファイルを編集しても、それだけではデプロイ済みサイトは更新されません。

まだブラウザーツールを選んでいる場合は、開発者向け ChatGPT Chrome 拡張機能 を読んでください。各ドキュメントで説明されているワークフローに沿って、公式拡張機能とLizard Studioを比較しています。

よくある質問

ChatGPTは既存のWebサイトを編集できますか?

はい。選択したツールがプロジェクトまたはそのエディタにアクセスできる場合は可能です。このガイドでは、Lizard StudioのCodex CLI接続を通じてローカルのソースフォルダを使用します。ChatGPT Sitesについては、既存プロジェクトがそのサポート対象ワークフローに適合するか確認してください。

スクリーンショットからCSSを修正できますか?

スクリーンショットは目に見える問題の説明に役立ちます。セッションには、ソースとレンダリング結果の両方を調査する手段も与えてください。オーバーフローについては、ビューポート幅と、どのコンテンツを読みやすいままにする必要があるかを指定してください。

Lizard Studioは公式のChatGPT拡張機能ですか?

いいえ。Lizard Studioは独立したオープンソースの拡張機能です。OpenAIには別の公式拡張機能があります。詳しくは developer comparison を参照してください。

ローカルでの編集はライブWebサイトを変更しますか?

そのサイトのリリースプロセスを通じて変更済みのソースを公開した後にのみ変更されます。ローカルの結果をテストし、差分を確認し、リリース後にデプロイ済みrouteを検証してください。