Wixのレイアウトが崩れる原因と直し方｜スマホ表示・画像切れも解説
更新日：10月15日
Wixでホームページを制作していると、「PCでは正常なのにスマホで崩れる」「画像が途中で切れる」「文字が重なる」「余白が大きくなる」といった問題が起こることがあります。
Wixのレイアウト崩れは、文字や画像の配置だけでなく、セクションの高さや表示設定など、複数の原因が関係している場合があります。
実際にSANTELUMINAにも、Wixサイトのスマホ表示やレイアウト調整についてご相談が寄せられています。
この記事では、Wixのレイアウトが崩れる主な原因と、文字・画像・余白などの症状別の直し方をわかりやすく解説します。Wix EditorとWix Studio、それぞれの確認ポイントも紹介します。
Wixのレイアウトが崩れる主な原因
Wixのレイアウトが崩れる原因は、ひとつとは限りません。
特に多いのは、PC版だけを見ながら制作している、テキストボックスの幅が狭い、画像の表示方法が画面サイズに合っていない、セクションやコンテナの高さに問題がある、といったケースです。
また、Wix EditorとWix Studioではレイアウトを調整する仕組みも異なります。
そのため、
「編集画面では正常に見える＝すべてのスマートフォンでも正常」
とは限りません。
公開後は実際のスマートフォンでも確認しておくことが大切です。
パソコンでは問題ないのにスマホで崩れる理由
特に多いのが、
「PCではきれいなのに、スマホで見るとおかしい」
というケースです。
パソコンとスマートフォンでは、表示できる横幅が大きく違います。
PCでは、
画像｜文章｜ボタン
のように横並びで問題なくても、スマホでは同じ配置をそのまま使うと窮屈になります。
スマートフォンでは、
画像↓見出し↓文章↓ボタン
のように縦方向に整理した方が読みやすいケースもあります。
また、PCでは1行だった見出しがスマホでは2〜3行になると、その下にある画像やボタンの位置にも影響します。
つまり、PC版を完成させるだけではなく、スマホではどの順番・大きさなら読みやすいかを別に確認することが重要です。
症状1：文字が重なる・位置がずれる
Wixのレイアウト崩れでよくあるのが、文字に関する問題です。
たとえば、
「パソコンでは1行だった見出しが、スマホでは3行になった」
だけでも、テキストボックスの高さが変わります。
その結果、その下にある画像やボタンと重なったり、不自然な位置にずれたりすることがあります。
まず確認したいのは文字サイズだけではなく、テキストボックスの横幅です。
スマホで文字がずれる場合は、
文字を無理に小さくする
のではなく、
テキストを入れる幅・行数・周囲のパーツとの距離を確認する
という順番がおすすめです。
「入る文字サイズ」ではなく、読みやすい文字サイズを基準にしてください。
症状2：Wixで画像が切れる・大きさがおかしい
画像が途中で切れて見える場合、画像データそのものが壊れているとは限りません。
画像を入れている枠の縦横比と、元画像の縦横比が合っていないことで、一部がクロップされていることがあります。
通常の画像についても、
「PCではちょうどよいのに、スマホでは人物の顔が切れる」
「商品の端が見えない」
「画像だけ異常に大きく見える」
という場合は、単純に画像を小さくするだけではなく、表示枠・縦横比・トリミング位置を確認してみてください。
特に人物写真や商品写真では、重要な部分がスマホで切れていないか実機で確認しておくと安心です。
症状3：スマホだけ大きな余白ができる
自分でWixサイトを作った場合、意外と難しいのが「余白」です。
たとえば、
文章が終わったあと、次の内容まで異常に空いている。
画像の下だけ大きなスペースがある。
ページ下部に何もない空白が続いている。
といった状態です。
原因は単純な「余白設定」だけではありません。
セクション自体の高さ、コンテナの高さ、パーツの位置などによって、見た目以上のスペースが確保されている場合があります。
そのため、
空いている場所だけを無理やり詰める
のではなく、
「この余白は何が高さを確保しているのか」
を確認することが大切です。
症状4：ボタンがはみ出す・位置がおかしい
問い合わせや予約ボタンが、
画面からはみ出している。
文字が途中で改行されている。
画像や文章と近すぎる。
ページによって幅がバラバラ。
という状態もよくあります。
特に問い合わせや予約が目的のホームページでは、ボタンは単なるデザインパーツではありません。
サイトを見た人が、
サービス内容を見る
↓
料金や特徴を確認する
↓
問い合わせる
という流れを作る重要な部分です。
PCでは横長の大きなボタンでも、スマホでは画面幅に合わせてサイズや余白を調整した方が使いやすくなる場合があります。
また、
「問い合わせボタンがページ上部にしかない」
という状態では、最後まで読んだ人が再びページ上部まで戻らなければなりません。
サービス内容や料金を説明した後など、問い合わせを検討しやすい場所にもボタンを配置すると、サイト全体の流れが分かりやすくなります。
症状5：ひとつ直すと別の場所まで崩れる
Wixを自分で修正していて、
「文字を動かしたら画像までずれた」
「PCを直したらスマホがおかしくなった」
「余白を消したら別のセクションがおかしくなった」
ということもあります。
この場合、ひとつのパーツの位置だけではなく、そのパーツがどのセクション・コンテナの中に入っているかを確認してみてください。
特にWix Studioでは、パーツ単体だけではなく、
親コンテナスタック幅余白レスポンシブ動作ブレイクポイント
などが組み合わさってレイアウトされています。
目の前のズレだけを直し続けると、別の画面幅で再び崩れることがあります。
大切なのは、
「今使っているスマホ1台できれいにする」ことではなく、「画面幅が多少変わっても崩れにくくする」ことです。
Wix EditorとWix Studioでは確認するポイントが違います
Wixを直すときは、まず自分のサイトがどのエディタで作られているかを確認しておくと分かりやすくなります。
Wix Editorの場合
デスクトップサイトの内容をもとにモバイルサイトが作られ、モバイルエディタで配置やサイズを調整できます。
そのため、PC版が正常でもスマホ側では改めて、
文字画像余白表示順ボタン
などを確認する必要があります。
Wix Studioの場合
Wix Studioでは、画面幅に応じたブレイクポイントやレスポンシブ設定を使います。
単純にパーツを「この位置へ動かす」だけではなく、
・コンテナ
・スタック
・幅
・ドッキング
・余白
などを確認することで、複数の画面サイズでも崩れにくい構成にできます。
どちらの場合でも、PC版だけを見て公開しないことが大切です。
レイアウトが崩れたときは、この順番で確認する
いろいろな場所を同時に触ると、何を変更したことで直ったのか分からなくなります。
私なら、
まず公開サイトをスマホで確認 → 問題のあるページを特定 → 文字 → 画像 → セクションやコンテナ → 余白 → ボタン → 他の画面サイズ
という順番で確認します。
特に最初に見るのは、
トップページの最初の画面サービス内容料金問い合わせ・予約ボタン問い合わせフォーム
です。
装飾が数pxずれていることよりも、
サービス内容が読めない
料金が見つからない
問い合わせボタンが押せない
という問題の方が、事業用ホームページでは優先度が高いからです。
実際のスマートフォンで確認することも大切です
Wixの編集画面だけで確認して、そのまま公開して終わりにしていませんか？
ブラウザや端末によって表示のされ方が異なる場合があるため、公開後は実際のスマートフォンでも一度確認してみてください。
確認するときは、
「デザインがきれいか」
だけではなく、
サービス内容を読む料金を見る問い合わせボタンを押すフォームまで進む
ところまで実際に操作してみるのがおすすめです。
訪問者と同じ流れで使ってみると、編集画面だけでは気づかなかった問題が見つかることがあります。
レイアウトが崩れていても、全部作り直す必要はありません
レイアウトが崩れているからといって、サイト全体をリニューアルする必要があるとは限りません。
すでに文章や写真、サービス内容が揃っているのであれば、
スマホ表示だけ整える。
トップページだけ修正する。
文字・画像・余白だけ調整する。
問い合わせボタンの位置を変える。
といった部分修正で改善できる場合もあります。
現在のサイトで使える部分は残し、必要なところだけ直した方が費用も作業量も抑えられるケースがあります。
SANTELUMINAでも、Wixサイト全体の制作だけではなく、1ページ・スマホ表示・レイアウト・文字や画像の調整といった部分修正に対応しています。
スマホ表示だけが崩れている場合はこちら
PC版には特に問題がなく、
「スマホだけ文字が重なる」
「スマホだけ画像がおかしい」
「スマホだけ余白が大きい」
という場合は、スマホ表示に絞って確認した方が分かりやすいことがあります。
自分で直すのが難しい場合は、部分修正だけでも依頼できます
Wixは自分で編集できることが大きなメリットですが、
「あと少しだけ整えたいのに、その少しが難しい」
ということもあります。
特に、
どこを触っても別の場所が崩れる。
複数ページで同じ問題がある。
PCとスマホの両方を整えたい。
Wix Studioのレスポンシブ設定が分からない。
問い合わせ導線まで含めて見直したい。
という場合は、必要なところだけプロへ依頼する方法もあります。
SANTELUMINAでは、自分で制作したWixサイトや、すでに公開しているサイト、途中まで制作したサイトでもご相談いただけます。
専門用語で修正内容を説明する必要はありません。
サイトURLと「スマホで見ると何となく見づらい」など、気になっていることをひとつお知らせいただければ確認できます。
よくある質問
WixでPCは正常なのにスマホだけ崩れるのはなぜですか？
PCとスマートフォンでは画面幅が大きく異なるためです。PCで1行だった文字がスマホでは複数行になったり、画像やボタンが狭い画面に収まらなくなったりすることがあります。PC版だけでなく、スマホ表示もページごとに確認してください。
Wixで画像が切れる場合はどうすればいいですか？
画像の表示枠と元画像の縦横比が合っていない可能性があります。画像サイズだけではなく、トリミング・焦点位置・表示方法を確認してみてください。プロギャラリーの場合は「フィット」や画像比率の設定で改善できるケースがあります。
Wix Studioでもレイアウトは崩れますか？
Wix Studioはレスポンシブなレイアウトを作りやすい仕組みになっていますが、幅・コンテナ・スタック・ブレイクポイントなどの設定によっては、特定の画面幅で意図しない表示になることがあります。複数の画面幅で確認することが大切です。
スマホ版だけプロに修正してもらうことはできますか？
サイトの構造によりますが、スマホ表示を中心に部分的に修正できるケースがあります。PC版まで含めた全面リニューアルが必ず必要というわけではありません。
Wixのレイアウト崩れ・スマホ表示の修正でお困りの方へ
SANTELUMINAでは、Wix・Wix Studioで制作されたホームページの部分修正や、スマートフォン表示の調整に対応しています。
「PC版はそのままでスマホだけ整えたい」「文字や画像の位置を直したい」「自分で制作したサイトを仕上げてほしい」といったご相談も可能です。
サイト全体を作り直すのではなく、現在のホームページを活かしながら、必要な部分だけ改善できる場合もあります。
現在のサイトURLと気になっている箇所をお知らせいただければ、対応可能な内容を確認いたします。
コメント