Wixのスマホ表示が崩れる原因は？画像切れ・文字重なり・余白を直す方法
更新日：10月2日
Wixでホームページを作っていると、
「パソコンではきれいなのに、スマホで見ると崩れている」
ということがあります。
たとえば、
画像の端が切れている
文字が重なって読みにくい
見出しが途中で改行される
大きな余白ができている
ボタンの位置がずれている
PCでは見えるのにスマホではパーツが表示されない
といった症状です。
WixではPCとスマートフォンで画面幅が大きく異なるため、PC版で問題なく見えていても、スマホでは調整が必要になる場合があります。
Wix公式でも、モバイル表示ではパーツの位置、不要な余白、非表示などのレイアウト問題が起こる場合があると案内されています。
この記事では、Wixのスマホ表示でよく起こる症状をひとつずつ分けて、原因と確認方法を紹介します。
PCでは正常なのに、スマホだけ崩れるのはなぜ？
一番大きな理由は、画面の横幅が違うからです。
パソコンでは横幅に余裕があるため、
画像｜文章｜ボタン
のような横並びでも自然に見えます。
しかしスマホでは表示できる幅が狭いため、
画像
↓
見出し
↓
文章
↓
ボタン
のように縦方向へ並べた方が見やすいケースがあります。
また、PCでは1行だった文章がスマホでは2〜3行になるだけでも、その下にある画像やボタンの位置に影響することがあります。
Wix Editorでは、デスクトップ版のコンテンツをもとにモバイル表示が作られるため、スマホ側で配置を確認することが重要です。
症状1：スマホで画像が切れる
よくあるのが、
「PCでは全部見えているのに、スマホでは画像の左右や上下が切れている」
というケースです。
これは必ずしも画像自体に問題があるわけではありません。
主な原因は、
画像を表示する枠と、元画像の縦横比が合っていないこと
です。
たとえば横長の写真を、スマホで縦長に近い枠へ表示すると、一部が自動的に切り取られる場合があります。
特に、
人物の顔
商品
店舗写真
ファーストビューの背景画像
では注意が必要です。
Wixではモバイル用の背景画像について、PCとは画面の形が異なるため、クロップや表示設定の調整が必要になる場合があります。
確認するポイント
まず、
画像サイズそのものを小さくする前に、表示方法を確認してください。
見るポイントは、
画像の縦横比
トリミング位置
焦点位置
画像を入れている枠のサイズ
スマホ側の表示幅
です。
症状2：文字が重なる・ずれる
次に多いのが文字です。
例えば、
PCでは
Wixホームページ制作
と1行で表示されていた見出しが、スマホでは
Wixホームページ
制作
と2行になることがあります。
これだけでも、テキストボックスの高さが変わります。
その結果、
下の画像に重なる
ボタンに近づきすぎる
次の文章と重なる
セクション全体のバランスが崩れる
といったことがあります。
文字が重なったときに確認すること
まず文字サイズを極端に小さくするのではなく、
テキストボックスの幅
を確認します。
また、文章量が多い場合は、
ひとつの巨大なテキストボックスに全部入れる
よりも、
見出し本文補足
などに分けた方がレイアウトを調整しやすくなることもあります。
症状3：スマホだけ大きな余白ができる
スマホで見たとき、
「何もない白いスペースが大きく空いている」
というケースもあります。
特に、
画像の下
セクションとセクションの間
ページ下部
フッターの上
に起きやすいです。
原因は単純な余白設定だけとは限りません。
たとえば、
パーツの高さ
セクションの高さ
ページ全体の高さ
非表示パーツ
コンテナ
マージン・パディング
などが関係している場合があります。
余白を直すときの注意
見た目だけを見て、
とにかく上に詰める
のはおすすめしません。
なぜその余白ができているかを確認してから直した方が安全です。
特にページ下部の空白は、ページ自体の高さが大きくなっているだけの場合もあります。
症状4：ボタンがずれる・押しにくい
スマホでは、
ボタンが画面からはみ出す
ボタン内の文字が2行になる
ボタン同士が近すぎる
ボタンが小さすぎる
問い合わせボタンが見つけにくい
といった問題も起きます。
特に事業用ホームページでは、問い合わせ・予約ボタンは重要です。
デザインだけでなく、
指で押しやすいか
文章を読んだあとにすぐ押せる位置にあるか
まで確認してみてください。
PCで横長に作ったボタンを、そのままスマホに持ってくるより、スマホの横幅に合わせて調整した方が自然な場合があります。
症状5：PCでは表示されているパーツがスマホでは消えている
Wixではスマホ表示で、
特定のパーツが非表示になっている
場合があります。
「PCにはあるのにスマホでは見当たらない」というときは、削除されたとは限りません。
まずモバイルエディタ側で、そのパーツが非表示になっていないか確認してください。
特に、
ボタン
装飾画像
テキスト
ギャラリー
などが見つからないときは確認してみてください。
症状6：編集画面では正常なのに、実際のスマホでは崩れている
これは少し分かりにくいケースです。
Wixのモバイル編集画面では正常なのに、実際のiPhoneやAndroidで見ると、
文字が改行される。
位置が少しずれる。
パーツ同士が重なる。
ということがあります。
そのため、公開後は必ず一度、
実際のスマートフォンで確認
するのがおすすめです。
Wix Editorの場合に確認する場所
通常のWix Editorを利用している場合は、PC版だけでなくモバイルエディタを確認します。
特に、
文字
画像
ボタン
余白
表示順
非表示パーツ
を見ます。
Wix Studioの場合に確認する場所
Wix Studioでは少し考え方が違います。
スマホだけ崩れる場合は、
ブレイクポイント
コンテナ
スタック
ドッキング
マージン
パディング
要素の幅
レスポンシブ動作
などを確認します。
スマホ表示が崩れたときは、この順番で確認
いろいろな部分を一度に触るより、順番に確認した方が原因を見つけやすくなります。
私なら、
1. 実際のスマホで公開サイトを見る
↓
2. 崩れているページを特定する
↓
3. 文字を確認
↓
4. 画像を確認
↓
5. セクションやコンテナを確認
↓
6. 余白を確認
↓
7. ボタン・フォームを操作する
という順番で見ます。
特に重要なのは、
「見た目」だけではなく「操作できるか」
まで確認することです。
スマホ表示だけなら、サイト全体を作り直す必要はないこともあります
スマホ表示が崩れていると、
「全部リニューアルしなければいけないのでは？」
と思うかもしれません。
ただし、
PC版は問題ない。
文章や写真は使える。
サービス内容も変わっていない。
という場合は、スマホ側の調整だけで改善できるケースもあります。
例えば、
画像の位置
文字サイズ
余白
ボタン
表示順
だけ整えることもできます。
サイト全体を作り直す前に、今あるページを活かして直せるか確認するのがおすすめです。
自分で直せない場合は、スマホ版だけでも相談できます
何度調整しても、
「ひとつ直すと別の場所が崩れる」
「どこを触ればいいか分からない」
ということもあります。
SANTELUMINAでは、
Wix・Wix Studioサイトのスマホ表示や部分修正
にも対応しています。
PC版をそのまま残しながら、
スマホ表示
文字
画像
余白
ボタン
問い合わせ導線
など、必要な部分だけ確認することも可能です。
Wix全体のレイアウト崩れはこちら
今回の記事では、
スマホだけに起きる症状
を中心に紹介しました。
PC・スマホを含めて、
「そもそもWixのレイアウトがなぜ崩れるのか」
を詳しく知りたい場合はこちらをご覧ください。
よくある質問
Wixでスマホだけ画像が切れるのはなぜですか？
スマホとPCでは画面の縦横比が異なるためです。画像を表示する枠と元画像の比率が合っていない場合、一部がクロップされることがあります。画像サイズだけでなく、トリミング・焦点位置・表示方法も確認してください。
Wixでスマホだけ文字が重なるのはなぜですか？
画面幅が狭くなることで文章が改行され、テキストボックスの高さや周囲のパーツとの位置関係が変わることがあります。文字サイズだけでなく、テキストボックスの幅も確認してください。
Wixのスマホ版だけ修正できますか？
サイトの構造によりますが、PC版を残したままスマホ表示を中心に修正できるケースがあります。サイト全体のリニューアルが必ず必要というわけではありません。
Wix Studioでスマホだけ崩れる場合はどうすればいいですか？
モバイルのブレイクポイントを確認し、コンテナ、スタック、ドッキング、マージン・パディングなどを確認します。Wix Studioではブレイクポイントごとにデザインを調整できます。
Wixのスマホ表示で困っている方へ
Wixのスマホ表示が崩れている場合、
原因はひとつとは限りません。
画像切れ、文字の重なり、余白、ボタン、非表示パーツ
など、症状を分けて確認することが大切です。
まずは公開中のホームページを実際のスマートフォンで開き、
「どのページの、どの部分がおかしいのか」
を確認してみてください。
サイト全体を作り直さなくても、スマホ表示だけを整えることで改善できるケースもあります。
SANTELUMINAでは、Wix・Wix Studioの部分修正にも対応しています。
現在のサイトURLと、
「スマホで見ると画像が切れる」「文字が重なる」「全体的に見づらい」
など、気になっていることをひとつお知らせいただければ確認できます。
コメント