レイアウトが崩れた場合の相談方法（AI活用シリーズ）

この記事は、2026年5月12日にChatGPTによって提案・作成されたものです。

AIの進化は目まぐるしいので、数ヶ月後には、この記事は「古い」情報になっている可能性があります。最新情報は各サービスの公式サイトもあわせてご確認ください。

「崩れました！」だけでは、AIには状況が分かりにくいことがあります

テンプレートを編集したあとにブラウザでプレビューしてみると、「あれ、レイアウトが崩れた…」となることがあります。そんなとき、AIに相談すれば原因探しの手助けをしてもらえますが、「崩れました！直してください」だけでは、さすがに情報が足りません。

AIにとって大事なのは、「どのページの」「どの部分が」「いつ」「どんなふうに」崩れているかです。初心者の方は、難しく考えず、まずはブラウザで見たままの状態をそのまま言葉にして伝えるだけでも十分です。

「無料版」をご利用の場合、レイアウト崩れの修正は少し難しいかもしれません。２〜３回やってみて改善されなければ、新しいスレでやり直し、そこでも２〜３回やって改善されない場合は、AI活用をやめて当サイトのサポート掲示板から質問して下さい。

まずは、見たまま伝えればOKです

レイアウトの崩れを相談するときは、最初からHTMLやCSSの知識が必要というわけではありません。まずは、ブラウザで見えている状態を、そのまま説明するところから始めれば大丈夫です。

どのページで起きているか
どの部分が崩れているか
PCなのかスマホなのか
どう崩れているか

たとえば、「トップページのメイン画像の下にある3つのボックスが、スマホ表示のときだけ横にはみ出しています」のように伝えると、AIも状況をかなりイメージしやすくなります。

初心者向けの、伝え方の基本

初心者の方は、次の4つを順番に伝えるだけで十分です。

どのページか
どの部分か
いつ崩れるか
どう崩れているか

実際には、次のような聞き方がおすすめです。

「トップページのメイン画像の下にある3つのボックスが、スマホ表示のときだけ横にはみ出しています。PCでは問題ありません。原因と直し方を、初心者にも分かるように教えてください。」

このくらい具体的に書いておくと、AIはかなり答えやすくなります。

困りやすい聞き方の例

反対に、次のような聞き方だと、AIは原因を絞り込みにくくなります。

崩れました。直してください
スマホで変です
なんかおかしいです
AIに言われた通りにしたら崩れました

これらの言い方では、どこがどう崩れているのかが分からないため、AIも一般的な答えしか返せなくなりがちです。結果として、何度もやり取りが必要になり、余計に時間がかかってしまうことがあります。

スクリーンショットがあると、さらに伝わりやすくなります

HTMLやCSSがよく分からない場合は、崩れている画面のスクリーンショットを見せるだけでもかなり助かります。特に、スマホ表示の崩れは、言葉だけでは伝わりにくいことがあるため、画像があると状況を共有しやすくなります。

もし可能なら、次のような形で伝えるとスムーズです。

「スマホ表示でこの部分が横にはみ出しています。スクリーンショットを添付します。どこが原因か、初心者向けに教えてください。」

少し分かる人は、HTMLやCSSも一緒に見せるとさらに確実です

HTMLやCSSが少し分かる方は、崩れていそうな部分のコードも一緒に貼ると、原因を特定しやすくなります。特に、直前に変更した場所が分かる場合は、その部分を一緒に伝えるのが効果的です。

該当しそうなHTML
関係ありそうなCSS
直前に変更したコード
変更前は正常だったかどうか

たとえば、次のような伝え方です。

「トップページのメイン画像の下にある3つのボックスが、スマホ表示のときだけ横にはみ出しています。PCでは問題ありません。直前に style.css の .box-list の部分を変更しました。該当するHTMLとCSSを貼るので、原因と直し方を教えてください。」

ここまで伝えられると、AIはかなり原因を絞りやすくなります。

変更前後の情報もあると役立ちます

もし「変更する前は正常だった」「この修正をしたあとに崩れた」という流れが分かっているなら、その情報もとても役立ちます。レイアウト崩れは、直前の変更がきっかけになっていることが多いためです。

たとえば、「変更前は正常でした」「このCSSを追加したあとから崩れました」と添えるだけでも、AIが見るポイントをかなり絞れます。

AIに相談するときのおすすめの形

レイアウト崩れを相談するときは、次のような形をそのまま使っても大丈夫です。

「トップページの○○部分が、スマホ表示のときだけ崩れています。PCでは問題ありません。崩れ方は、横にはみ出している状態です。直前に変更した部分があれば、そのHTMLやCSSも貼ります。原因と直し方を、初心者にも分かるように教えてください。」

このように聞けば、初心者の方でもかなり相談しやすくなります。

まとめ

レイアウトが崩れたときは、「崩れました！」だけではなく、「どこが」「いつ」「どう崩れたか」を伝えるのがコツです。

初心者の方は、まずブラウザで見たままの状態を言葉にして伝えれば十分です。スクリーンショットがあればさらに分かりやすくなります。

HTMLやCSSが少し分かる方は、該当するコードや直前に変更した部分も一緒に見せると、AIがより正確に原因を探しやすくなります。

レイアウト崩れはあわてやすいですが、情報を整理して伝えるだけで、AIはかなり頼れる相談相手になります。

Template Party コメント（2025.05.12時点）
私は（※記事執筆時点）ClaudeのCoworkを使って直接作業をしてもらっていますが、不具合修正もかなり正確に修正してくれるようになってきました。例えば崩れたフォルダごと投げても見つけてくれます。質問対象以外にもおかしな点があれば「ここもおかしいので修正しておいたよ」と気を回してくれるAIもいます。
使うスレッド（や、AI各種）により、性格も若干違う場合があって、気の利くAIもいれば、そうでもないAIもいます。「なんかソリが合わないな」と感じたら思い切って新しいスレッドで心機一転やり直すとすぐ解決する場合もありますよ。

レイアウトが崩れた場合の相談方法