ウェブサイトの読み込み中であり、App ビューアーは正常に動作しています。少しお待ちください。2 分以上かかる場合は、Refresh アイコンをクリックするか、Console パネルでエラーを確認してください。

エージェントはビルド中に問題に遭遇することがあり、それが原因でウェブページのエラーが発生する場合があります。Resolve をクリックすると、エージェントが修復を行い、修正後はプレビューが通常の状態に戻ります。赤いメッセージは警告であり、深刻な事態ではありません。

バッジの削除には Pro 以上が必要です。右上のアバターをクリックし、Settings を選択してから、Plans & Billing に移動し、Pro または Max プランを選択してください。アップグレード後、公開済みページから Atoms バッジは自動的に削除されます。

1. Design Mode を開き、位置ずれしている、またはスタイルが正しくない要素を正確に選択します。
2. ページとブレークポイント、現在の問題、望ましい結果、そして変更してはいけない点を明確に伝えます。
3. padding、配置、幅、色、折り返し動作など、測定可能な指示を使ってください。見た目を合わせることが重要な場合は、参考画像を添付します。
4. 一度に 1 つの変更を適用し、その後デスクトップとモバイルのレイアウトに加え、読み込み中、空状態、hover、エラーなどの重要な状態を確認します。
5. 結果として別の箇所が壊れた場合は、最後に正常だったバージョンに戻り、対象をより狭くして再試行します。

1. 問題が App ビューアーのみに影響しているのか、Preview URL にも影響しているのか、公開済みサイトにも影響しているのかを確認します。
2. 一度 Refresh し、Preview を新しいタブで開き、Incognito ウィンドウでもテストします。
3. 現在のタスクまたはビルドがまだ実行中かどうかを確認します。完了するまで待ってから再試行してください。
4. Cloud & AI の残高不足やアプリの停止が明示的なメッセージで表示されている場合は、Settings → Cloud & AI を開いてその残高を確認してください。真っ白な画面だけを理由にチャージしないでください。
5. Cookie、トークン、秘密の値を共有しないようにしながら、Console または Network のエラーを記録してください。

画面が真っ白なままの場合は、Chat Link、完全な Viewer URL、時刻とタイムゾーン、影響を受ける環境、スクリーンショット、秘匿情報を除いたエラー詳細を添えてサポートに連絡してください。

1. App ビューアーのみなのか、Preview URL なのか、公開済みサイトなのか、どこに影響しているかを確認します。
2. 一度 Refresh し、Preview を新しいタブで開き、Incognito ウィンドウでもテストします。
3. 現在のタスクまたはビルドがまだ実行中かどうかを確認し、完了するまで待ちます。
4. 最後に正常に動作していたバージョンをテストします。それが動作する場合は、真っ白な画面を引き起こした最近の変更を比較してください。
5. 製品側で残高不足またはアプリ停止が明示的に報告された場合にのみ、Settings → Cloud & AI を開いてください。

問題が続く場合は、Chat Link、完全な Viewer URL、バージョン、時刻とタイムゾーン、影響を受ける環境、スクリーンショット、秘匿情報を除いた Console または Network のエラーを添えてサポートに連絡してください。

Preview と公開済みサイトは独立したチャネルです。保存やプレビューだけでは本番環境に変更は反映されません。

1. Publish パネルで Update をクリック — Publish パネルを開いて Update をクリックします。ステータスが Up to date と表示されるまで待ってください。
2. ライブサイトをハードリフレッシュ — Cmd+Shift+R（Mac）または Ctrl+F5（Windows）を押すか、Incognito ウィンドウで URL を開いてブラウザキャッシュの影響を除外します。
3. 公開済みバージョン番号を確認 — Publish パネルで、バージョンが Preview で見えているものと一致しているか確認します。異なる場合は、再度公開してください。
4. プラットフォームの Prod サブドメインをテスト — カスタムドメインを使用している場合は、デフォルトの Prod URL も別途開いてください。Prod サブドメインは更新されているのにカスタムドメインが更新されていない場合、問題は DNS または CDN キャッシュです。

問題が解決しない場合は、Preview URL、Prod URL、比較用の並列スクリーンショット、そして Publish または Update をクリックした時刻を共有してください。

エージェントがレイアウトやスタイルを変更すると、小さい画面でのレスポンシブ動作を意図せず壊してしまうことがあります。

1. まずモバイル幅でプレビュー — App ビューアーのツールバーにあるデバイス切り替えを使ってモバイル表示にし、公開前に結果を確認してください。
2. モバイル表示で Design Mode を使う — デバイス切り替えをモバイルに設定した状態で Design Mode に切り替えます。崩れている要素をクリックすると、その画面サイズでそのコンポーネントだけを対象にできます。
3. 明示的なレスポンシブ制約を伝える — モバイルレイアウトをどうしたいかを正確にエージェントへ伝えてください。例: "画面幅が 768px 未満では、カードを 1 列に積み重ね、padding を 16px にしてください。"
4. 既存のメディアクエリを保持するよう依頼する — デスクトップ向けの変更を依頼するときは、"既存のレスポンシブまたはモバイルスタイルは変更しないでください。" を追加してください。

問題が続く場合は、Chat Link、崩れたモバイルレイアウトのスクリーンショット、期待するレイアウトの参考画像を共有してください。

画像が壊れて見える、プレースホルダーアイコンが表示される、または読み込みに失敗する場合:

1. 画像ファイルパスを確認 — Files セクションを開き、コード内で参照されているパスに画像ファイルが存在することを確認してください。エージェントが編集中にファイルを移動または名前変更した可能性があります。
2. ファイルサイズと形式を確認 — 非常に大きな画像や未対応の形式は読み込みに失敗することがあります。画像を圧縮するか、PNG、JPG、または WebP に変換してください。
3. Cloud ストレージを確認 — Settings > Cloud & AI に移動し、利用可能なストレージ容量があることを確認してください。
4. ハードリフレッシュ — Cmd+Shift+R（Mac）または Ctrl+F5（Windows）を押して、キャッシュされた画像参照をクリアします。

問題が続く場合は、Chat Link、表示されない画像の URL、壊れた状態のスクリーンショットを共有してください。

エージェントが無関係な要素を変更したり、ページの他の部分にリグレッションを発生させたりした場合:

1. ロールバック — History に移動し、最後に安定していたバージョンからリミックスします。これによりコードを保持したままチャットコンテキストがリセットされます。
2. Design Mode で対象を限定 — Design Mode に切り替え、特定の要素を直接クリックします。これにより、エージェントの編集範囲がそのコンポーネントに固定されます。
3. 明示的な制約を追加 — 変更してはいけない内容を明確に伝えてください。例: "ヘッダーの背景色だけを #1A365D に変更してください。ナビゲーションバー、フッター、その他のコンポーネントは変更しないでください。"
4. 1 プロンプトにつき 1 変更 — 1 つ変更し、結果を確認してから次に進みます。

エージェントが繰り返し他の要素を壊す場合は、安定版からリミックスし、対象を厳密に絞った指示でやり直してください。

Preview パネルにビルドエラー、赤いエラーバナー、または不足しているパッケージに関するメッセージが表示される場合:

1. Resolve ボタンを使う — App ビューアーに問題の報告通知が表示された場合は、Resolve をクリックすると、AI が特定されたすべてのエラーを自動で分析・修正します。Resolve ボタンが表示されない場合は、Console パネルから正確なエラーメッセージをコピーし、"このビルドエラーを修正してください: [error message]。" としてエージェントに貼り付けてください。
2. 最近の変更を確認 — 特定の編集後にエラーが発生した場合は、History に移動し、最後に正常だったバージョンと比較して、どの変更が問題を引き起こしたかを特定します。
3. 最後に正常だったバージョンからリミックス — エラーの解決が難しい場合は、最後に成功したチェックポイントからリミックスし、変更を段階的に再適用してください。
4. パッケージ互換性を確認 — エラーが特定のパッケージを参照している場合は、エージェントに "[package name] が現在のプロジェクト構成と互換性があるか確認し、バージョン競合があれば修正してください。" と依頼してください。

注: エラーメッセージがプラットフォームコンポーネント（App ビューアー、startup script、Publish、deploy record）やサードパーティパッケージの内部ファイル（例: @vue/compiler-core、vite）を参照している場合、これはエージェントの問題ではなくプラットフォームの問題である可能性があります。完全なエラーメッセージを添えてサポートに連絡してください。

問題が続く場合は、完全なエラーメッセージ、Chat Link、エラーのスクリーンショットを共有してください。

エージェントが変更完了を確認しているのに、見た目が変わっていない場合:

1. ハードリフレッシュ — Cmd+Shift+R（Mac）または Ctrl+F5（Windows）を押してください。CSS の変更はブラウザにキャッシュされていることがよくあります。
2. CSS の詳細度競合を確認 — エージェントが追加したスタイルが既存ルールに上書きされている可能性があります。エージェントに "依頼したスタイルが別の CSS ルールで上書きされていないか確認し、必要なら詳細度を修正してください。" と依頼してください。
3. Design Mode で確認 — Design Mode に切り替えて要素をクリックします。左側のビジュアルエディターには現在適用されている色、spacing、タイポグラフィ、レイアウトプロパティが表示されるため、依頼した変更が適用されているか確認できます。
4. 正しいファイルを確認 — グローバルスタイルシートとコンポーネント単位のスタイルの両方があるプロジェクトでは、エージェントが誤ったファイルを編集した可能性があります。"どこに変更を適用しましたか？ ファイルパスと行番号を見せてください。" と尋ねてください。

問題が続く場合は、Chat Link、変化していない要素のスクリーンショット、依頼した正確なスタイル値を共有してください。

Design Mode は視覚的なレイアウトを使って対象コンポーネントを判断します。ネストされた要素や重なった要素があると、誤った選択が起こることがあります。

1. 拡大する — クリックする前に対象領域を拡大してください。近接してネストされたコンポーネントを区別しやすくなります。
2. 補助としてテキストで説明する — 何度クリックしても間違った要素が選ばれる場合は、代わりにチャットで説明してください。例: "右カラムの価格カード内にある 2 番目のボタンを選択してください。"
3. ファイルパスで指定する — どのファイルにそのコンポーネントがあるかわかっている場合は、エージェントに直接伝えてください。"src/components/PricingCard.tsx の 42 行目にある要素を編集してください。"

選択の問題が続く場合は、目的の要素を示したスクリーンショットと Chat Link を共有してください。