STUDIOのスマホ崩れを直したいとき

STUDIOで作ったサイトが、パソコンでは整っているのにスマホで見ると文字がはみ出す、画像が大きすぎる、横にスクロールしてしまう、という状態だと思います。STUDIOは、パソコン用とスマホ用など画面幅ごとに見た目を指定する仕組みです。そのため、パソコン用の見た目を直してもスマホ用には反映されないことがあります。編集画面の確認だけで終わらせず、公開後に実際のスマホで開き、はみ出しや押しにくい場所を見ます。

考えられる原因

1. 画面幅ごとに別の指定があることがあります

   STUDIOでは、パソコン、タブレット、スマホなど幅に応じて見た目を調整します。大きい画面で直した内容が、小さい画面でも同じように直るとは限りません。

2. 横幅が固定された要素がはみ出している可能性があります

   画像、ボタン、ボックスなどに広い幅が指定されていると、スマホ画面に収まりきらず横スクロールが出ることがあります。幅の指定を見直す必要があります。

3. 余白や重なりがスマホ幅に合っていないことがあります

   パソコンでは自然に見える余白でも、スマホでは大きすぎたり、文字やボタンが重なったりすることがあります。画面幅を変えながら確認します。

4. 画像や埋め込みが原因になることがあります

   大きな画像、地図、動画、外部フォームなどは、スマホ幅に合わせて縮まらない場合があります。埋め込み部分の幅や表示条件を確認します。

ご自身で確認できること

1. どのページのどこが崩れるか記録する

   トップページ、下層ページ、フォーム付近など、崩れている場所を分けます。スマホの機種やブラウザによって見え方が違うこともあるため、スクリーンショットを残します。

2. STUDIOの編集画面でスマホ幅を確認する

   STUDIOのエディタで画面幅を切り替え、スマホ表示の状態を確認します。パソコン幅だけを見て直すと、スマホ側の指定が残ることがあります。

3. はみ出している要素を探す

   横スクロールが出る場合は、画面の外へ出ている画像、ボックス、文字、埋め込みを探します。幅が固定されているものは、画面に合わせて縮む指定に見直します。

4. 並び順と余白をスマホ向けに整える

   横並びの要素は、スマホでは縦並びにした方が見やすいことがあります。余白、文字サイズ、ボタン間隔をスマホ幅で見ながら調整します。

5. 画像の見え方を調整する

   画像が切れる、余白が大きい、人物や商品が見えにくい場合は、画像の表示方法や比率を見直します。必要ならスマホ向けに別の画像を用意します。

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

   編集画面のプレビューだけでなく、公開後に実際のスマホで開きます。横スクロール、ボタンの押しやすさ、フォーム入力、表示速度を確認します。

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

すぐウェブでは、STUDIOのスマホ崩れの原因確認、はみ出し修正、余白や画像の調整、公開後の実機確認まで対応できます。

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

よくあるご質問

関連する症状

• Wixでレイアウトが崩れる・スマホ崩れの直し方
• スマホで見るとWordPressサイトの表示が崩れるときの直し方
• STUDIOに独自ドメインをつなぐ手順