AIサイト構築のレスポンシブデザインがスマートフォンでずれるのはなぜですか？

パソコンでは整って見えるページが、スマートフォンでは横スクロールしたり、画像がテキストに重なったり、問い合わせボタンが画面外にはみ出したりする場合、通常は「AIがレスポンシブ対応できない」ことが原因ではありません。生成されたレイアウトに固定幅やデスクトップ向けの配置、小さな画面に適さないコンテンツサイズが残っている可能性があります。AIによるWebサイト構築のレスポンシブデザインは初期調整に役立ちますが、画像の差し替え、文言の追加、プラグインの埋め込み後も、元のルールがそのまま機能するとは限りません。

対応する際は、まずページ全体が横に広がっているのか、一部のモジュールだけずれているのか、読み込み後に位置が変わるのかを見極めてから、該当するコンテナ、ブレークポイント、リソースを確認します。いきなりすべてのフォントを小さくしたり、はみ出しを非表示にしたりしないでください。問題を覆い隠すだけで、商品情報やメニュー、フォームが正常に使えなくなり、モバイルからの問い合わせに影響するおそれがあります。

まず確認：問題はプレビューだけですか、それとも公開ページにもありますか？

公開済みのページをスマートフォンのブラウザーで開き、エディターのモバイルプレビューと比較します。プレビュー領域はエディターの拡大縮小の影響を受けることがあるため、実機での確認に代わるものではありません。問題が発生するページと言語バージョン、画面の向き、またページを開いたときにずれるのか、画像の読み込み後やメニューを開いた後にずれるのかを記録してください。

• すべてのページで横スクロールする：まずヘッダー、フッター、共通コンテナ、ビューポートの設定を確認します。
• 特定のブロックだけに問題がある：そのモジュールの幅、余白、配置、内部コンテンツを確認します。
• 最初は正常だが、しばらくするとずれる：画像サイズ、フォントの置き換え、非同期で読み込まれるコンポーネントを重点的に調べます。

変更前にページを複製するか、バージョン記録を残し、一度に変更する設定の種類は一つにします。エディターでは正常で公開ページに問題がある場合は、公開済みであることを確認してキャッシュを更新してください。スタイルの問題が続く場合、キャッシュの削除を繰り返しても解決にはなりません。

ページ全体が横に広がる場合は、画面からはみ出している要素を探す

開発者ツールでスマートフォンのビューポートに切り替え、最外層のコンテナと問題のあるモジュールの境界を一つずつ確認します。よくある原因は、コンテナに固定ピクセル幅が設定されていることや、最小幅がデスクトップ向けのままになっていることです。埋め込まれた表、動画、地図にも独自の幅が設定されている場合があり、親コンテナを縮小しても内部コンテンツがはみ出すことがあります。

Webサイト構築エディターでは、メインコンテナを利用可能な幅に応じて伸縮する設定にし、デスクトップでは最大幅でレイアウトを制限し、スマートフォンでは左右に適度な余白を確保します。子モジュールも確認してください。左右の内側余白と固定幅が重なると、画面からはみ出すことがあります。カスタムスタイルを使う場合はボックスモデルを確認し、幅に加えて枠線や内側余白が追加されないようにします。

スマートフォンでページ全体が縮小されたパソコン用ページのように見える場合は、レイアウトビューポートがデバイスの幅と一致するよう、正しい viewport が設定されているか確認します。ユーザーによる拡大縮小を無効にしたり、横方向のはみ出しを全体的に非表示にして問題を覆い隠したりしないでください。切り取られたボタンは、クリックできないままです。

カードやボタンが詰まる場合は、ブレークポイントとレイアウト方式が合っていない可能性が高い

ブレークポイントは単純に「パソコン」と「スマートフォン」を分けるものではなく、コンテンツの配置を切り替えるタイミングを決めるものです。幅の狭い画面でも商品カードを3列のままにすると、タイトルが何行にも折り返されます。ナビゲーション項目が多い場合は、画面がスマートフォン用のブレークポイントに達する前から窮屈になることもあります。

幅の広いビューポートから少しずつ狭め、最初に重なりが発生する位置を確認して、その範囲のレイアウトルールを調整します。商品一覧は段階的に2列または1列にし、左右に並んだ画像とテキストは上下に配置します。ボタンのグループは、ボタンの文字を小さくするのではなく、折り返しを許可する必要があります。

エディターの「ドラッグによる配置」は、絶対配置に対応している場合があります。部分的な装飾には適していますが、言語や画面サイズによって変化する本文の配置には適しません。タイトルが長くなるとボタンが隠れる場合は、まずテキストとボタンを通常のドキュメントフローに戻し、フレックスまたはグリッドレイアウトで配置を制御してから、固定高さの制限がないか確認します。

画像の変形とテキストの切れは、それぞれ別に対処する

画像のサイズとトリミング

コンテンツ画像は通常、コンテナの幅に収まるようにし、元の縦横比を保つ必要があります。幅が画面に応じて縮小する一方で高さが固定されていると、画像が引き伸ばされて変形することがあります。商品画像全体を表示する必要がある場合は、画像全体が収まる表示方法を選びます。横長のバナーを領域いっぱいに表示する場合はトリミングできますが、スマートフォンで被写体が切れないように焦点位置を調整してください。

背景画像自体には、コンテナの高さを確保する機能はありません。デスクトップ用の横長バナーをそのままスマートフォンに適用すると、テキストが詰まったり、大きな余白ができたりするため、高さと背景位置を個別に調整する必要があります。画像の縦横比をあらかじめ確保するか、サイズを明示しておくと、読み込み後に下のコンテンツが突然押し下げられるのを防ぐことにもつながります。

多言語と長いテキスト

翻訳後のタイトル、製品型番、メールアドレスは、原文より長くなることがあります。テキストの折り返しが許可されているか、フレックスレイアウト内のテキスト要素が最小幅によって制限されていないかを確認します。長いリンクや連続した文字列には、適切な改行ルールを設定してください。見出し一つを整えるために、ブロック全体に固定高さを設定してはいけません。

表は独立した横スクロール用コンテナに入れ、ページ全体が横スクロールしないようにします。重要なパラメーターは縦方向に並べる方法もありますが、名称と数値の対応を保ち、見た目を整えるためだけに列を非表示にしないでください。

フローティングボタンやサードパーティ製コンポーネントは、展開後の状態も確認する

オンラインチャットの入口、フローティング問い合わせボタン、Cookie通知バーが、スマートフォン画面の下部で互いに重なることがあります。テストでは初期表示だけでなく、メニューを開き、チャットウィンドウを展開し、入力欄をタップして、ソフトウェアキーボードが表示された後も送信ボタンにアクセスできるか確認します。

調整は、まずコンポーネントのサイズと位置を変更し、次に重なり順を確認します。重なり順を上げるだけでは、チャットウィンドウがメニューを覆う可能性があります。画面下部に固定する操作バーは、デバイスのセーフエリアも考慮する必要があります。サードパーティ製フォームや動画が固定サイズでしか利用できない場合は、モバイル向けの設定を探し、必要に応じて埋め込み方法を変更します。

修正後は、実際の閲覧手順に沿って再確認する

少なくとも、幅の狭い画面、幅の広いスマートフォン画面、横向きの画面で確認し、異なるブラウザーを搭載した実機でも検証します。まずページを更新して読み込み中の動作を確認し、次にトップページから商品ページへ移動し、メニューを開き、フォームに入力して送信するまで試します。コンテンツが切れていないこと、ボタンをクリックできること、意図しない横スクロールがないことを確認してください。

多言語ページでは、タイトルが長いものやパラメーターが多い商品を選んで再確認し、デフォルト言語だけを検証して終わらせないでください。テンプレートで固定されたスタイル、自動生成後に上書きされたカスタムコード、または調整できない埋め込みコンポーネントがずれの原因である場合は、ページURL、デバイス環境、発生手順、スクリーンショットを保守担当者に共有し、変更範囲を明確にします。局所的な修正によって他のページに問題が生じるのを防ぐためです。