【重要】10/21 PHPの重大な脆弱性が修正されました。自社サイトへの影響を無料で確認します →
現在の納期:24時間以内LINELINEで今すぐ相談する
MEMBER会員登録で全メニュー10%OFF/登録・注文履歴の管理は無料無料で会員登録 →

TROUBLE GUIDE

Wixでレイアウトが崩れる・スマホ崩れの直し方

いまパソコンでは整って見えるのに、スマホで文字や画像が重なる、ボタンがずれる、横に長くスクロールする状態です。Wixはパソコン用のエディタとスマホ用のモバイルエディタで見え方を別に調整する仕組みのため、パソコン側を直してもスマホ側が直らないことがあります。逆に、スマホ側で動かしてもパソコン側は変わらないことがあります。Wixで作ったこと自体が失敗とは限らず、画面ごとの配置を見直すと直ることが多いです。

この作業を頼む場合¥11,000税込・作業1回分/月額なしメニューを見る

考えられる原因

  1. パソコン用とスマホ用の編集画面が分かれている

    Wixはパソコン用のエディタと、スマホ用のモバイルエディタで表示を調整します。パソコン側で画像や文字を直しても、スマホ側の配置がそのまま残ることがあります。

  2. ドラッグ&ドロップで要素が重なっている

    Wixは文字、画像、ボタンを自由に置けるため、細かく調整しやすい反面、少しの移動で要素が重なったり、余白が詰まったりすることがあります。スマホでは画面幅が狭いため目立ちやすくなります。

  3. 画面の外にはみ出した要素がある

    スマホで横に長くスクロールしてしまう場合、画像、線、ボタン、装飾パーツなどが画面の外にはみ出している可能性があります。見た目では小さな要素でも、横スクロールの原因になることがあります。

  4. 自動最適化で手動調整が戻っている

    モバイルエディタの「モバイルレイアウトを最適化」を押すと直ることがありますが、手で整えた位置や余白が戻ることもあります。押した後は、全体を確認し直す必要があります。

ご自身で確認できること

  1. 実機で崩れている場所を控える

    まず公開中のサイトをスマホ実機で開き、どのページのどの部分が崩れているかを控えます。編集画面のプレビューだけで判断すると、実際のスマホ表示と違うことがあります。

  2. エディタからモバイルエディタに切り替える

    Wixのエディタを開き、画面上部のスマホ表示に切り替えてモバイルエディタを表示します。パソコン側だけを直してもスマホ側が変わらないことがあるため、必ずモバイルエディタで確認します。

  3. 重なりと余白を上から順に直す

    ページの上から順に、文字、画像、ボタンの重なりを確認します。要素を少しずつ動かし、読める余白を確保します。スマホ側で要素を動かしても、通常はパソコン側の配置は変わりません。

  4. 横スクロールの原因を内側に戻す

    スマホで左右に動いてしまう場合は、画面の端からはみ出している要素を探します。画像、線、装飾、横長のボタンなどを選択し、スマホ画面の内側に収まる位置へ戻します。

  5. 必要な場合だけモバイルレイアウトを最適化する

    全体が大きく崩れている場合は、「モバイルレイアウトを最適化」を使うと整うことがあります。ただし手で調整した箇所が戻ることがあるため、押した後は各セクションを見直します。

  6. 公開してスマホ実機で確認する

    修正後は保存だけで終わらせず、公開してからスマホ実機で確認します。編集画面のプレビューと公開後の見え方が違うことがあるため、実際のURLを開いて確認するのが大切です。

やってしまいがちですが、避けてください
  • パソコン用のエディタだけで直ったと判断しないでください。Wixではスマホ側が別調整になっていることがあります。
  • 「モバイルレイアウトを最適化」を何度も押して進めないでください。手で整えた配置が戻ることがあります。
  • 崩れているページをすぐ削除したり、同じ内容で作り直したりしないでください。原因箇所を直すほうが早い場合があります。
  • 見た目の崩れを直す目的でドメイン解除やサイト全体の作り直しをしないでください。表示設定とは別の問題です。

直らない場合は、代行します

すぐウェブでは、Wixのモバイルエディタで重なり、はみ出し、横スクロールを確認し、公開後の実機表示まで整えます。

表示の料金は作業1回分です。月額や継続のご契約はありません。納期はご依頼から24時間以内の対応を目指しています。営業のお電話は行っていません。

よくあるご質問

パソコンではきれいなのに、スマホだけ崩れるのはなぜですか?

Wixではパソコン用のエディタとスマホ用のモバイルエディタで表示が分かれているためです。パソコン側の修正がスマホ側にそのまま反映されないことがあります。

スマホ側で要素を動かすと、パソコン側も変わりますか?

通常、スマホ側の配置調整はパソコン側に影響しないことが多いです。ただし要素そのものの削除や内容変更は影響する場合があるため、操作前に確認します。

スマホで横にスクロールしてしまいます。

画面の外にはみ出した画像、線、ボタン、装飾パーツなどが原因の可能性があります。モバイルエディタで端からはみ出した要素を探して内側に戻します。

プレビューでは問題ないのに、公開後のスマホで崩れます。

プレビューと実機の表示が違うことがあります。修正後は必ず公開し、スマホの実機で実際のURLを開いて確認します。ブラウザのキャッシュも影響する場合があります。

原因がはっきりしない場合は、URLを入れるだけの無料診断で状態を確認できます(約1分・登録不要)。

無料でサイトを診断する症状を伝えて相談する

この症状、いくらで直る?

状況を文章で送ると、AIが該当メニューと金額をその場で出します(無料・10秒)。

関連する症状

相談・
申込み