AIによって生成されたランディングページ（LP）は、デスクトップの大画面プレビューでは非常に美しく見えることがほとんどです。グリッドは整い、タイポグラフィは洗練され、余白も十分に確保されています。しかし、同じページを375pxのスマートフォン画面で開いた瞬間、体験は一変します。巨大な見出しがファーストビュー全体を占領し、説明テキストが画面右側に突き抜けてページ全体が左右にガタつき、横並びだったCTAボタンが不格好に重なり合います。
多くの開発者が陥りがちなのが、HTMLファイル全体をプロンプトに貼り直し、「スマホ対応のレスポンシブデザインに直して」と指示してしまうパターンです。しかし、これによって状況はさらに悪化します。全体再生成を実行すると、調整済みだったデスクトップ版のブレークポイントが消え、セマンティックなHTML構造が書き換えられ、カスタム計測属性が消失します。最悪の場合、AIは横スクロールを隠すために overflow-x: hidden を安易に追加し、テキストの語尾を物理的に切り落としてしまいます。
AI生成LPのモバイル崩れを修復するために、すべてをゼロからやり直す必要はありません。狭い画面でコードが破綻する技術的メカニズムさえ把握すれば、修正はきわめて局所的かつ迅速に行えます。
AI生成LPがスマートフォン画面で破綻する技術的理由
AIモデルは「見た目のそれらしさ」に基づいてコードを生成するため、モバイル実機のタッチ操作や厳格なビューポート幅の制約を考慮しきれません。360px〜390pxの画面幅に圧縮された際、発生する崩れのほぼすべては以下の4つのパターンに集約されます：
| モバイル表示の不具合 | 根本的な技術的原因 | 正しいエンジニアリング修正策 |
|---|---|---|
| 横スクロール汚染（ページが左右にガタつく） | 段落やカード、画像コンテナに width: 420px などの絶対ピクセル幅がハードコードされ、375pxの画面幅を超えている。 |
固定幅の解除： width: auto; max-width: 100% または流動的なパーセント指定に置き換える。 |
| 見出しがファーストビューを圧迫 | デスクトップ基準の巨大なフォントサイズ（50px以上）と広い行高がそのまま適用されている。 | フォントサイズを縮小（34px〜38px）し、行高（line-height: 1.08〜1.15）を引き締め、見出しを2〜3行内に収める。 |
| インラインタグによる不自然な改行 | 見出しが複数のスタイル付き <span> に分割され、それぞれの設定が競合して単語の途中で改行される。 |
複数のspanをひとつの見出し単位として扱い、アクセント色を保ちながら文字サイズと折り返し設定を統一する。 |
| overflowハックによる文字欠け | AIが幅のバグを隠蔽するため、親要素に overflow: hidden を付与している。 |
overflowによるごまかしを削除し、はみ出している子要素のボックスモデルを根本から修正する。 |
MDNのoverflow仕様でも明記されている通り、overflow: hidden で要素を無理やりクリップすることはレスポンシブ化ではありません。真のレスポンシブとは、すべての要素が親コンテナの境界に自然に収まる状態を指します。
影響範囲を最小化する原則（Minimal Blast Radius）
ソフトウェア開発におけるブラスト半径（Blast Radius）とは、1箇所を修正した際に意図せず破損する可能性のある正常なコードの範囲を指します。AIが生成したページがすでに85%完成しているなら、目指すべきは問題のある15%だけを修正し、残りの85%を完全に保護することです。
全体プロンプトに頼るのではなく、既存のHTMLファイルをそのまま精修キャンバスに読み込み、現在のDOMを確固たるベースラインとして扱います：
既存コードをベースにすることで、AIモデルによるハルシネーション（幻覚）を完全に防止できます。ブランドカラーを再説明したり、長文テキストを再入力したり、グリッドを組み直す必要はありません。
ファーストビューの修復：文字階層とコンテナ幅の解除
モバイルLPのファーストビューは、ユーザーが読み進めるか離脱するかを一瞬で決定づけます。見出しが画面の70%を占有し、価値提案やボタンが画面外に押し出されていては、訴求メッセージが伝わりません。
実例として375pxのモバイルキャンバスを検証したところ、2つの明確なボトルネックが発見されました：見出しが分割されたタグにより4行にもわたって広がり、説明文には width: 420px の固定幅が指定されていたため右側に大きくはみ出していました。
副作用を出さずに修復する最大のポイントは、関連するテキスト要素をひとつのグループとしてマークし、まとめて調整を指示することです。単一の単語やspanだけを選択すると、AIは全体のバランスを把握できません。見出しと説明文を一括でマークすることで、文脈を保ったまま最適化できます：
プロンプトを作成する際は、以下の3原則を遵守します：
- 複数要素の役割を統一宣言する： 見出しが複数の
<span>で構成されている場合、それらがひとつの見出しであることを明記し、統一した行高と文字サイズを適用させます。 - 固定幅を明示的に解除する： テキストコンテナの固定幅を
width: auto; max-width: 100%に置換するよう明確に指示します。 - 非選択要素の保護条項を明記する： 「ナビゲーション、ボタン、全体レイアウトは一切変更せず、overflow:hidden も追加しないでください」と明示します。
ベクターアセット（SVG）と補足テキストの原位置調整
AI生成ページには洗練されたインラインSVGイラストが含まれていることがよくあります。多くの開発者がやってしまいがちな失敗は、SVGを削除してビットマップ画像（PNGやJPG）に置き換えてしまうことです。これはファイルサイズを肥大化させ、Retinaディスプレイで画質がぼやける原因になります。
インラインSVGはDOMツリーの一部であるため、ベクターの輪郭や構造を壊すことなく、内部のカラーパレットやキャプションテキストだけをピンポイントで微調整できます：
SVG内部の冷たいグレーを温かみのあるテラコッタやフォレストグリーンに変更することで、イラストは汎用素材感を脱し、ブランド独自の意匠へと生まれ変わります：
局所AI精修とビジュアルDOM編集のハイブリッド連携
自然言語によるAI指示は複合的なスタイルの調和には優れていますが、ミリ単位の空間微調整には向いていません。AIに「ボタンを4px下にずらしてリンク先を変更して」と指示するのは非効率で、予期せぬスタイルの崩れを招きます。
最適なワークフローは役割分担です：複雑なスタイルの整流化は限定AIに任せ、最終的な仕上げや属性の紐付けはビジュアルエディタで直接行います：
- 確定済みセクションのロック機能： ファーストビューの調整が完了したら、その要素をロックします。これにより、後続のコンテンツ編集時に誤ったドラッグでレイアウトが崩れる事故を防げます。
- レスポンシブ比較表の挿入： 料金プランや機能比較表を追加する場合、セマンティックな
<table>を挿入し、外側にoverflow-x: autoのラッパーを配置します。スマホユーザーは表の中身だけを快適に横スクロールでき、ページ全体のズレは発生しません。 - コンバージョンリンクとUTM属性の紐付け： CTAボタンのリンク設定をAI任せにしてはいけません。エディタ上でボタンを選択し、正確な遷移先URLと計測パラメータ（
utm_source、utm_campaign等）を直接入力します。 - クリーンなHTMLコードの書き出し： すべての調整を終えたら、標準規格に準拠したクリーンなHTMLを出力します。独自のランタイムスクリプトは一切含まれないため、任意のホスティング環境やCMSへ即時デプロイ可能です。
本番公開前のモバイルLP検証チェックリスト
ページを公開する前に、以下の6つのチェック基準を必ず確認してください：
- Viewportメタタグの確認： ドキュメントの
<head>内に<meta name="viewport" content="width=device-width, initial-scale=1.0">が正しく設定されていること。 - 横スクロール汚染の完全排除： 実機またはDevToolsで画面を横にドラッグし、Y軸の垂直スクロールのみに固定されていることを確認する。
- overflowによる誤魔化しの排除：
bodyや親コンテナに安易なoverflow-x: hiddenが指定されていないこと。コンテンツがフレキシブルに収まっていることを確認する。 - タップターゲット基準の達成： 主要なボタンやリンクが最低でも 44 × 44px のタップ領域を確保し、誤タップを防ぐ適切なマージンが設けられていること。
- 自然なテキスト改行： 見出しや説明文が不自然な単語単位で途切れることなく、自然な文脈で折り返されていること。
- スタンドアロン環境での単体検証： 出力されたHTMLファイルをエディタ外の独立したモバイルブラウザで直接開き、フォントやアイコン、ボタンの動作を確認する。
よくある質問（FAQ）：AI生成HTMLのモバイル修復
フォントサイズを小さくしても横スクロールが解消されないのはなぜですか？
フォントサイズは文字の大きさしか変えられず、コンテナ自体のボックスモデルを変更できないためです。段落や親コンテナに width: 420px などの固定幅が指定されている場合、文字を10pxに縮小してもコンテナが375pxの画面を突き抜けてしまいます。必ずコンテナの幅指定を解除してください。
エディタのプレビュー倍率を下げるのはレスポンシブテストと同じですか？
同じではありません。キャンバスの縮小表示はピクセルの表示倍率（Zoom）を変えているだけであり、CSSのメディアクエリやFlexboxの折り返し判定を再計算しません。実際のレイアウトピクセル幅（375pxや390px）で直接検証する必要があります。
モバイルHTMLを修正する際、デスクトップ表示を壊さないようにするには？
複数ブレークポイントを含む単一ファイルの場合、モバイルファーストの基準スタイルまたは指定のモバイルメディアクエリ内のみを編集対象とし、md: や lg: などのデスクトップ用ルールを維持するよう指示します。独立したモバイルLPの場合は、モバイル専用のルートコンテナにスタイルを適用します。
AI精修でインラインSVGの色や文字を変更できますか？
可能です。インラインSVGは標準的なDOMツリーの一部であるため、AIは内部の fill や stroke、キャプションテキストを直接編集できます。指示プロンプトで「ベクターの輪郭やviewBox比率は維持し、外部ビットマップ画像に置き換えないこと」を明記してください。
AI生成LPのモバイル表示を美しく整えたいですか？ HtmlDrag AI精修を開く。既存のHTMLを読み込み、最小限の編集でスマートなスマホ対応を実現しましょう。