Wix Studioでスマホ表示が崩れたら、何を確認し修正を依頼するか

パソコンでは整っているのに、スマートフォンでは見出しが重なる。文章を差し替えたら、ボタンが下の画像にかぶってしまった。Wix Studioで表示の崩れに気づいたとき、まず何を確認すればよいでしょうか。

見えている要素を動かして直す前に、どのページを、どんな画面幅で、どの状態で見たときに起きるのかを記録してください。症状を再現できれば、自社で確認する範囲と、制作会社に調査を依頼する範囲を整理できます。

※この記事はWix Studioで作成されたサイトを対象としています。従来のWixエディタなどでは設定方法が異なります。

この記事の要点

• 表示を直す前に、公開URL・端末・画面幅・症状を記録し、問題を再現できる状態にします。

• 文字を小さくして収める前に、文章量と周囲の要素・レスポンシブ設定を確認します。

• 修正後は問題が起きたスマホだけでなく、ほかの画面幅とパソコンでも表示・操作を確認します。

Wix Studioのスマホ表示崩れは、まず公開ページで記録する

編集画面だけの問題なのか、公開ページでも起きているのかを分けます。公開URLをスマートフォンで開き、問題が見える状態のスクリーンショットを残しましょう。編集画面と公開ページの内容が同じかも確認します。確認のためだけに、準備中の変更をまとめて公開する必要はありません。

◆ 確認する内容

• 問題が起きるページのURLと、ページ内の位置

• 端末名・ブラウザ・縦向きか横向きか

• 文字の重なり、横にはみ出す画像、押せないボタンなどの症状

• 文章や画像の変更など、直前に行った作業と発生に気づいた日

例えば「サービスページの料金見出しが、スマホの縦向きで次の文章と重なる」と記録します。これは伝え方の例です。特定の顧客サイトで起きた事例ではありません。

「スマホなら同じ表示」と考えず、画面幅を変えて確認する

Wix Studioのブレイクポイントは、画面幅の範囲に応じてデザインを調整する仕組みです。同じスマートフォンでも、閲覧時の幅が変われば文字の折り返しや配置も変わります。

1台だけで確認を終えず、縦向き・横向きや別の画面幅で症状が変わるかを見ます。編集権限がある場合は、エディタで該当ページの編集サイズを変え、問題が起きた幅付近も確認してください。ボタンの押しやすさなどは、公開ページの実機確認も合わせて行います。

ブレイクポイントを増やせば解決するとは限りません。まず現在の設定と、問題が起きる幅を照合することをおすすめします。

Wix公式： ブレイクポイント全体をデザインする

文字が重なるときは、文章量と要素の設定を確認する

文章の追加後に崩れたなら、まずどの文章を変更したかを確認します。長くなった文章の折り返しに対し、周囲の要素がどう配置されているかを見てください。文字を小さくして見た目を収める前に、読めるサイズを保てるかを考えます。

Wixの公式資料では、小さな画面でテキストが必要以上に小さくなる場合の確認事項として、レスポンシブ動作とフォントサイズの最大・最小設定を案内しています。これは小さすぎる文字への確認方法であり、すべての重なりを解消する操作ではありません。

位置がずれる場合は、ドッキングや余白も確認候補です。症状だけで原因を決めず、文字・画像・ボタンを含む周囲の構造を確認します。設定が分からなければ、記録した症状を制作会社に渡してください。

Wix公式： レスポンシブの問題のトラブルシューティング

モバイルの修正でも、ほかの画面への影響を確かめる

Wix Studioでは、大きなブレイクポイントのデザイン変更が小さなブレイクポイントに及ぶ仕組みがあります。一方、内容の変更や要素の削除、別の親要素へ移動するなどの構造変更は、すべてのブレイクポイントに影響する場合があります。

「スマホ表示を直しているから、パソコンには影響しない」と判断しないでください。特に要素の削除や組み替えを伴う作業は、変更対象と影響範囲を理解してから進めます。

自社で調整する場合は、変更した項目を記録し、ひとつの変更ごとにパソコン・タブレット・スマートフォンの表示を確認します。複数の設定を一度に変えると、どの変更が効いたのかを追いにくくなります。

修正依頼では「直してほしい範囲」と「触らない範囲」を伝える

「スマホをきれいにしてください」だけでは、修正対象が曖昧です。問題のURLとスクリーンショットに加え、どこまで変更してよいかを整理して伝えましょう。

◆ 伝える内容

• 対象ページと修正したい箇所。ほかのページでも同じ症状があるか

• 期待する状態。例：文字が重ならず、相談ボタンが押せること

• 維持したいもの。文章・画像・パソコンのデザインなど

• 希望時期と社内の確認担当者

• 修正後に確認してほしい画面幅・端末と、公開を行う担当者

調査の結果、個別の位置調整ではなく、周囲の構造の見直しが必要になることも考えられます。見積もりでは、調査・修正・確認の範囲を分けて確認すると、作業内容を比較しやすくなります。

最初からパスワードを送る必要はありません。調査や作業にアクセスが必要になったら、担当者と必要な権限を確認し、共同管理者として招待する方法を相談してください。

関連記事： Wixサイトの担当者が変わるとき、何を引き継ぐべきか

修正完了は、見た目と操作を公開ページで確認して判断する

修正した箇所が整っただけでなく、隣の文章やほかの画面幅に影響が出ていないかを確認します。社内で公開を承認した後は、実際の公開ページでも点検してください。

◆ 点検する内容

• 元の症状が起きた端末・画面幅で、問題が解消している

• 別の幅やパソコンで、文字・画像・余白に新しい崩れがない

• メニューが開き、相談ボタンが正しいページへ移動する

• 文字を読めるサイズで表示でき、必要な情報が隠れていない

エディタと公開ページの見え方が違う場合には、編集サイズや要素の設定などを確認する公式資料があります。スクリーンショットで症状を共有し、公開ページでの確認を依頼内容に含めてください。

Wix公式： エディタとライブサイトでの表示が異なる場合のトラブルシューティング

表示の問題から、必要な改善の範囲を整理する

表示崩れを直すために、必ず全面リニューアルが必要になるわけではありません。まず対象のページと症状を確認し、部分修正で対応できるのか、共通の構造から見直す必要があるのかを整理しましょう。

WixerDesignでは、Wix・Wix Studioのサイト制作・改善・運用について相談を受け付けています。現在のサイトURL、困っている表示、修正したい範囲をお知らせください。対応できる範囲と進め方を確認します。

初回オンライン相談は状況と進め方を整理する場です。詳細なサイト分析や改善設計、技術的な調査・作業は、内容に応じて別途のご提案となります。

相談先： Wixサイトの改善・運用について相談する

関連記事： Wixサイト診断で見つかった改善ポイントを実例で解説

Wix Studioの機能に関する記述は、2026年10月9日に確認した日本語の公式資料に基づいています。