スマートフォンで表示が崩れる｜作った画面と、見られる画面は違う

パソコンで見ると、きれいに整っています。ところがお客様に「見づらいです」と言われて、自分の端末で開いて驚きました。

作った画面と見られる画面は、違います。多くの方は、手のひらの中で見ているためです。

見られているのは小さい画面

まず、この前提から。サロンのサイトを見る方の多くは、手元の端末から見ています。パソコンで作り、パソコンで確認して、そのまま公開する。これが、崩れに気づかない原因です。ですから作りながら、小さい画面でも確認してください。

自分の端末で開く

これが、最も確実な確認になります。作成の途中で自分の端末を開いて、すべてのページを順に見てください。家族や友人の端末でも、見てもらいます。端末によって、見え方が違う場合があるためです。

横にずれる場合

これが、最も多い崩れになります。画面を左右に動かさないと全部が見えない状態で、こうなると読まれません。原因は、大きすぎる要素が入っていることです。写真、表、長い文字列。この三つを、疑ってください。

写真が原因のことが、多くあります。大きな写真をそのまま置くと、小さい画面の幅を超えてはみ出すためです。画面の幅に合わせる設定に、変えてください。作成サービスの場合、その設定が用意されています。

表は、料金の表で起きます。列が多い表は、小さい画面に収まらないためです。列を、減らしてください。メニューの名前と金額の二つで足りますし、時間を入れる場合でも三列までに収めます。

長い文字列も、見落とされる原因になります。途中で切れない長い文字列があると、はみ出すためです。サイトの場所をそのまま書いた場合や、英数字の長い連なりが該当します。短い言葉に置き換えて、案内の形にしてください。

文字が小さい場合

これでは、読まれません。パソコンで見て「ちょうどよい」大きさは、小さい画面では小さすぎるためです。本文は、指で拡大しなくても読める大きさにしてください。拡大しないと読めない場合、そこで離れられます。迷ったら、大きめにすることです。

行の間も、詰まっていると読みにくくなります。行と行の間が狭いと目が滑るため、少し広げてください。段落の間にも、空きを作ります。読みやすさは、文字の大きさと間隔で決まるためです。

押す場所が小さい場合

指で押す場所が小さいと、誤って別の場所を押します。ですから予約や電話の入口は、とくに大きくしてください。指の幅を想定して、隣の要素との間隔も空けます。

電話番号は、押すとかけられる形にしてください。文字として置いただけでは、押せないためです。小さい画面から見る方は、そこを押してかけます。この設定だけで、連絡が増える場合もあります。

上部の案内も、確認してください。小さい画面では、案内が折りたたまれる形になるためです。その操作が押せるか、開いた後に各ページへ移動できるか。ここが動かないと、他のページにたどり着けません。

動く仕掛けを減らす

これは、負担になります。自動で切り替わる写真や動く飾りは、小さい画面では読む妨げになるためです。通信の量も増えて、表示が遅くなります。無いほうが、読まれます。

表示が遅いと、崩れの前に離れられます。写真が重いと、表示に時間がかかるためです。しかも小さい画面では、通信の環境も様々になります。ですから撮った写真を、そのまま載せないでください。対処は、サロンのホームページが重い原因と直し方で整理しています。

横向きでも確認する

ここは、見落とされます。端末を横にすると、見え方が変わるためです。横にしても崩れないかを、確認してください。崩れる場合は、幅の指定が原因になります。

「幅を800にする」といった固定の指定をすると、小さい画面で収まらないためです。割合で指定する形に、してください。作成サービスでは多くの場合、自動で対応されます。自分で調整した部分が、原因になっていることもあります。

埋め込んだ地図が原因の場合

ここも、はみ出しやすい部分になります。地図を埋め込むと幅が固定される場合があり、そうなると小さい画面ではみ出すためです。幅を、割合で指定し直してください。うまくいかない場合は、地図への案内だけを置きます。

型を変えたときに崩れる

これは、原因が分かりやすい例になります。見た目の型を変えると、崩れる場合があるためです。変えた直後に、すべてのページを確認してください。崩れる場合は、前の型に戻します。なお型を頻繁に変えると、そのたびに同じ確認が要ります。

更新のたびの確認も、続けてください。長い文章を入れたときや大きい写真を入れたときに、崩れる場合があるためです。更新のたびに小さい画面で確認することで、30秒で終わります。

色の濃さを確認する

これも、読めなくなる原因になります。薄い色の文字を白い背景に置くと、読めないためです。屋外では画面がさらに見づらくなるため、濃い文字を明るい背景に置いてください。配慮の考え方は、サロンのサイトを読めない人を減らすで整理しています。

写真の上に文字を重ねる見せ方も、注意が要ります。写真の明るさによって、文字が読めなくなるためです。小さい画面では、とくに読みにくくなります。重ねる場合は、文字の背後に濃い色を敷いてください。

重要な情報を上に置く

小さい画面では、一度に見える範囲が限られます。営業時間、電話番号、予約の入口。これらを、上のほうに置いてください。下まで送らないと分からない状態にすると、そこまで見てもらえないためです。

入力の欄も、確認してください。小さすぎると打ちにくくなるため、欄の高さは指で押せる大きさにします。そのうえで実際に、自分で入力してみてください。打ちにくい場合、そこで離れられます。

別の端末でも見てもらう

端末によって、差が出ます。自分の端末だけでは、分からない崩れがあるためです。家族や友人の端末でも、開いてもらってください。古い端末では、崩れる場合もあります。2台で確認できれば、多くは見つかります。

確認する順番

これが、効率的な手順になります。トップの画面から順に、全ページを開く。上から下まで、指で送る。横にずれないかを、見る。そして予約と電話の入口を、実際に押す。この四つで、多くの崩れは見つかります。

直せない場合

ここは、判断が要ります。自分で直せない崩れがある場合は、型を標準のものに戻してください。見た目より、読めることを優先するためです。崩れたまま公開しているより、地味でも整っているほうが良い状態になります。

通信が遅い場所でも確認する

店の中は多くの場合、通信の環境が良い場所です。ですからそこで確認すると、遅さに気づけません。

移動中や屋外で、開いてみてください。表示に何秒かかるか、写真が出るまでに待たされないか。来店を検討している方は、外出先で見ているためです。電波の弱い場所で開けないサイトは、その時点で見られません。

予約の入口まで通してみる

各ページの見た目だけを確認して、終わりにしないでください。実際に予約の操作を、最後まで通すことです。

日付を選ぶ画面が小さい画面で使えるか、メニューを選べるか、名前と連絡先を入力できるか、確認の画面まで進めるか。途中で押せない場所があると、そこで諦められます。テストの予約を入れて、後から消す形で構いません。自分で通していない導線は、動いている保証がないためです。

VANNAでできること

VANNAでは、公開されるページが小さい画面に合わせて表示される形で作られています。写真の大きさも自動で調整されるため、はみ出す状態になりません。カレンダー予約はMaxプランの機能で、来店前のメールリマインドは全プランで使えます。

一方で他社の作成サービスやWordPressで作ったページの崩れを直す機能はありません。他社の調整は、別に行うことになります。この点は把握しておいてください。

料金はPro月額3,300円、Max月額5,500円、Max+月額11,000円で、いずれも税込です。初期費用は0円、予約や販売に対するVANNA側の手数料も0円です。現在はプレオープン期間として、2026年7月31日までの申し込みで2か月無料、以降の申し込みは1か月無料です。条件は変更される場合があるため、最新の内容はVANNA公式 料金でご確認ください。

今日やる一つ

自分の端末で、自分のサイトを開いてください。上から下まで、全ページを送ります。横にずれる箇所があれば、そこが直すべき場所です。3分で、終わります。

よくある質問

なぜ崩れに気づかないのですか

パソコンで作り、パソコンで確認して公開するからです。見る方の多くは、手元の端末から見ています。

どう確認しますか

作成の途中で、自分の端末で全ページを開いてください。家族や友人の端末でも見てもらってください。端末によって見え方が違う場合があります。

横にずれます

最も多い崩れです。大きすぎる要素が入っています。写真、表、長い文字列。この三つを疑ってください。

写真がはみ出します

大きな写真をそのまま置いている場合です。画面の幅に合わせる設定に変えてください。作成サービスには、その設定が用意されています。

表が収まりません

列を減らしてください。メニューの名前と金額の二つで足ります。時間を入れる場合、三列までに。

長い文字列が原因になりますか

途中で切れない長い文字列は、はみ出します。サイトの場所をそのまま書いた場合など。短い言葉に置き換え、案内の形にしてください。

文字の大きさは

パソコンで「ちょうどよい」大きさは、小さい画面では小さすぎます。拡大しなくても読める大きさにしてください。

行の間隔は

狭いと目が滑ります。少し広げ、段落の間にも空きを作ってください。読みやすさは、大きさと間隔で決まります。

押す場所の大きさは

小さいと誤って別の場所を押します。予約や電話の入口は特に大きくし、隣の要素と間隔を空けてください。

電話番号はどうしますか

押すとかけられる形にしてください。文字として置いただけでは押せません。この設定だけで、連絡が増える場合があります。

上部の案内が動きません

小さい画面では折りたたまれます。その操作が押せるか、開いた後に各ページへ移動できるかを確認してください。

動く仕掛けは必要ですか

読む妨げになり、通信の量も増えます。無いほうが読まれます。

表示が遅いです

写真が重いと時間がかかります。撮った写真をそのまま載せないでください。崩れの前に、離れられます。

横向きでも確認しますか

端末を横にすると見え方が変わります。崩れる場合、幅の指定が原因です。

固定の幅とは何ですか

「幅を800にする」といった指定です。小さい画面で収まりません。割合で指定する形にしてください。

地図がはみ出します

埋め込むと幅が固定される場合があります。割合で指定し直すか、うまくいかない場合は地図への案内だけを置いてください。

型を変えたら崩れました

変えた直後に、すべてのページを確認してください。崩れる場合、前の型に戻してください。頻繁に変えないでください。

更新のたびに確認しますか

長い文章や大きい写真を入れたときに崩れる場合があります。30秒で終わります。

文字の色は関係ありますか

薄い色の文字は、屋外で読めなくなります。濃い文字を、明るい背景に置いてください。

写真の上に文字を置いてよいですか

写真の明るさによって読めなくなります。重ねる場合、文字の背後に濃い色を敷いてください。

何を上に置きますか

営業時間、電話番号、予約の入口。小さい画面では一度に見える範囲が限られます。下まで送らないと分からない状態にしないでください。

入力の欄も確認しますか

小さすぎると打ちにくくなります。指で押せる高さにし、実際に自分で入力してみてください。

何台で確認しますか

2台で確認できれば、多くは見つかります。古い端末では崩れる場合があります。

確認の手順は

全ページを開く、上から下まで送る、横にずれないか見る、予約と電話の入口を押す。この四つです。

自分で直せません

型を標準のものに戻してください。見た目より、読めることを優先してください。

崩れたままでもよいですか

読まれません。地味でも整っているほうが、良い状態です。

今日は何をしますか

自分の端末でサイトを開き、全ページを上から下まで送ってください。横にずれる箇所が、直すべき場所です。3分で終わります。

通信が遅い場所でも見られますか

店の中は通信の環境が良い場所です。移動中や屋外で開いて、表示に何秒かかるかを確認してください。来店を検討している方は、外出先で見ています。

予約の操作も確認しますか

見た目だけで終わらせず、日付の選択から確認の画面まで、実際に通してください。途中で押せない場所があると、そこで諦められます。テストの予約を入れて、後から消す形で構いません。

出典

• デジタル庁 ウェブアクセシビリティ導入ガイドブック
• デジタル庁 サービスデザイン
• 中小企業庁 経営サポート
• VANNA公式 機能

本記事は2026年7月時点の一般的な情報の整理です。表示の崩れの原因と対処は、利用中のサービスや使っている型によって変わります。設定の手順は、必ず提供元の説明でご確認ください。VANNAの料金・機能・キャンペーン条件は変更される場合があります。