Wixのスマホ表示が崩れるときの直し方｜モバイル編集の手順

Wixの編集画面では、きれいに並んでいる。
写真も、見出しも、予約のボタンも。

ところが自分のスマホで開くと、見出しが写真に重なっている。
ボタンは画面の右端で、半分だけ切れている。

指で画面を広げて、また戻して、そのままスマホを置いたこと、ありませんか？

この記事は、Wixでお店や教室のホームページを運営している方に向けて書きました。

Wixのスマホ表示が崩れる・見にくいときに、どこを開いて何を直すかを、手順の順番でまとめています。
最後に、よく聞かれる疑問をQ&Aにしたので、ぜひ最後までご覧ください。

Wixのスマホ表示は、モバイルエディタで別に整える

最初に、Wixのスマホ表示の仕組み。
ここを知っておくと、直す場所に迷わなくなります。

Wixは、パソコン用に作ったページをもとに、スマホ用の並びを自動で作っています。

その自動の並びを手で直す場所が「モバイルエディタ」
エディタの上にある「モバイル」のアイコンから、いつでも開けます。

公式ヘルプで押さえておきたいのは、次の3つ。

モバイルエディタで変えたデザイン（文字の大きさ・背景・位置）は、パソコン版に影響しない
モバイルエディタで足したパーツは、スマホにだけ出る
パソコン版で足した文字や画像は、スマホ版にも自動で入る

つまり、直す順番は「パソコン版を仕上げる → モバイルエディタで整える」。

スマホを先に整えても、あとでパソコン版にパーツを足すと、また並びがずれることがあるんです。

なお、新しい「Wix Harmony エディタ」や「Wix Studio」で作ったサイトは、画面の名前と手順が少し違います。
その場合は、公式ヘルプの「Wix Harmony エディタ：モバイル用にサイトを調整する」を見てくださいね。

Wixそのものの向き・不向きは「Wixはやめた方がいい!?10年使って感じた使いにくい理由」にまとめています。

スマホで崩れる・見にくいときに見る5か所

「崩れる」と一口に言っても、見え方で原因が違います。

自分のスマホの画面と見比べてみてください。

スマホでの見え方	よくある原因	直す場所
ページ全体が小さく縮んで見える	スマホ用の表示（モバイル最適化）が使われていない	モバイルエディタで「モバイル最適化」がオンになっているか
見出しや文字が、写真やほかの文字に重なる	パソコン版で文字を足したあと、スマホ版の文字の枠がそのまま	モバイルエディタで、その文字の枠の大きさと文字サイズ
画面の端で切れる・横にずれる	パーツがスマホ版の枠（グリッド線）の外にはみ出している	モバイルエディタの「ツール」でグリッド線を出し、内側へ戻す
パソコンにあるボタンや文章が、スマホにない	スマホ版で非表示になっている	左側の「モバイル上で非表示」
文字が小さくて読みにくい	自動で縮められた大きさのまま	モバイルエディタで文字サイズを上げる（パソコン版は変わらない）

いちばん見落としやすいのは、4つ目。

パソコン版のパーツは、置き場所が足りないとスマホでは自動で隠れることがあります。
崩れて見えるのではなく、静かに消えているので、気づきにくいんです。

Wixのモバイル編集は6つの手順

表で見当がついたら、直す作業。

Wixのモバイル編集は、次の順番。

パソコンでWixのエディタを開き、上の「モバイル」のアイコンを押す
右上の「ツール」で、グリッド線・ルーラーなどにチェックを入れる
崩れているパーツを1つ選び、位置と大きさを直す（文字なら文字サイズも）
消えているパーツは、左側の「モバイル上で非表示」を開き、右の「表示」のアイコンで戻す
保存して、「プレビュー」から「QR」のアイコンを押し、自分のスマホで読み取って開く
問題がなければ、公開する

いらないパーツは「非表示」にする

スマホでは長すぎる説明や、大きすぎる飾りの画像。
モバイルエディタでそのパーツを選び、「非表示にする」のアイコンを押すと、スマホにだけ出なくなります。

ここで1つ注意。

モバイルエディタで消したパーツは、スマホで非表示になるだけで、パソコン版には残ります。
完全に消したいときは、パソコン版のエディタで消してくださいね。

パーツが多くて選べないとき

重なったパーツは、クリックしても狙ったものが選べないことがあります。

そんなときは、キーボードの「Ctrl」＋「M」（Macは「Cmd」＋「M」）。
ページの上のパーツを、順番に選んでいけます。

崩れていないのに、スマホの最初の画面で止まる

ここからは、表示の直し方の外にある話。

表示がきれいに整っていても、スマホで予約の手前で止まることがあります。

ぼくはここ最近60件あまり、お店のホームページを実際にスマホで開いて、ボタンを押して記録してきました。
その中の1件。

ある美容サロン

スマホでトップを開くと、写真とロゴの1画面だけで、下へはスクロールできない作りでした。
崩れているところは、1つもなかったんです。

ただ、画面に予約・電話・LINEのボタンがなく、予約サイトに着くまで、右上のメニューから3回押す必要があった。

きれいに整っているのに、予約の入口は小さなメニューのアイコンの奥。

表示が崩れていないかと、予約まで迷わず進めるかは、別の確認なんです。

Wixでは、スマホにだけ出すものを、モバイルエディタで足せます。

モバイルツールの「モバイルアクションバー」：画面の下に出続けるボタン（電話・メールなど）を、スマホにだけ置ける
モバイルで追加したパーツ：スマホの最初の画面にだけ、予約のボタンを置ける（パソコン版には出ない）

置き場所の目安は、スマホでトップを開いて、指を1回も動かさずに見える範囲。

お客さんの親指が最初に届く場所に、予約か問い合わせの入口を1つ。

Wixで予約・問い合わせを受けるサイト全体の作り方は、「Wixで予約・問い合わせを受けるホームページの作り方」で順番にまとめています。

Wixのスマホ表示でよくある疑問（Q&A）

パソコン版を直したら、スマホが崩れた

パソコン版で足した文字や画像は、スマホ版にも自動で入ります。

入った場所が合っていないと、重なりや、はみ出しになる。

パソコン版を直したあとは、モバイルエディタも開いて、同じページを見ておくと安心ですね。

スマホ版を直したら、パソコン版も変わる？

モバイルエディタで変えた文字の大きさ・位置・背景は、パソコン版に影響しません。

モバイルで足したパーツも、パソコン版には出ない。

スマホだけ、安心して触って大丈夫です。

iPadで見ると、パソコン版が出る

Wixの公式ヘルプでは、スマホにはモバイル版、タブレットにはパソコン版を表示すると案内されています。

iPadでパソコン版が出るのは、崩れではなく仕様。

スマホを横にすると、表示がおかしい

Wixのサイトは、スマホでは縦向きでの表示に対応している、と公式ヘルプにあります。

横向きでの見え方は、直す対象から外してかまいません。

直して公開したのに、スマホでは前のまま

まず、エディタで「公開」まで押したかを確かめる。

それでも前のままなら、スマホのブラウザのキャッシュ（保存された古いページ）が残っていることがあります。

ブラウザの履歴とキャッシュを消してから、もう一度開いてみてください。

どこが崩れているのか、自分では分からない

いちばん多いのが、この悩みかもしれません。

編集画面では見慣れすぎていて、おかしい所が目に入らなくなるんです。

スマホで見て、どこを確かめればいいかを1枚にまとめた無料のチェックリストがあります。

予約の手前で止まりやすい場所を、上から順に見ていけます。