生成AIに「レスポンシブにして」と頼むだけでは崩れが直らない理由

「レスポンシブにして」と一言添えれば、生成AIは画面幅に合わせて自動でいい感じに調整してくれる——そう期待して、実際に試してがっかりした方もいるのではないでしょうか。

この一言はAIにとって解釈の幅が広すぎる指示です。何をもって「対応できている」とするかが人によって違うように、AIにとってもあいまいなまま処理せざるを得ません。この記事では、あいまいな指示で起きやすいすれ違いと、代わりに伝えるとよい具体的な指示を紹介します。

「レスポンシブ」はゴールであって、手段ではない

レスポンシブ対応とは「画面幅が変わっても読みやすい状態を保つこと」というゴールの名前であり、そのための手段（折り返しの指定、幅の書き方、文字サイズの調整幅など）はいくつも存在します。AIに「レスポンシブにして」とだけ頼むと、そのどれを・どの程度使うかはAI任せになります。

結果として、狭い画面では一応それらしく表示されるものの、パソコンとスマートフォンの中間くらいの幅——タブレットや、横向きにしたスマートフォンの幅——では確認が甘くなり、崩れが残ったままになりがちです。

具体的に伝えるとよい5つの指示

「レスポンシブにして」の代わりに、次のような具体的な指示を添えると、AIの出力が安定しやすくなります。

• 「横に複数並べる行には、折り返してよいことを明示して」
• 「幅は計算式（calc）ではなく、単純な割合（%）で指定して」
• 「横並びの中身には、縮んでよいか固定でよいかを個別に指定して」
• 「一番狭い画面幅（375px程度）でも、文字や画像がはみ出さないようにして」
• 「パソコンとスマートフォンの中間の幅でも一度確認して」

確認してもらう幅も、こちらから指定する

AIに崩れの確認まで頼むなら、確認してほしい画面幅も具体的に伝えるとより確実です。「375px・541px・840px・1280pxの4つの幅で、はみ出しがないか確認して」のように数値で伝えると、AIも見落としなく点検してくれます。

この4つの幅はStudioの区切りにもとづくものですが、近い幅を区切りに使っているノーコードツールも多く、確認しておいて無駄になりにくいポイントです。

まとめ：あいまいな指示は、あいまいな結果を生む

「レスポンシブにして」という指示自体は間違いではありませんが、それだけでは足りません。折り返し・幅の書き方・伸縮の指定・確認する幅、この4点を具体的に伝えることで、AIとの一往復で済む確率がぐっと上がります。

崩れやすい典型パターンについてはAIが生成したサイトが『画面を少し狭くすると崩れる』典型パターンと直し方でも詳しく扱っているので、あわせて確認してみてください。