スマートフォンで表示が崩れる｜作った画面と、見られる画面は違う
最終更新: 2026年7月29日
Summary
サロンのホームページがスマートフォンで崩れる場合の原因と直し方を整理します。横にずれる原因となる写真・表・長い文字列、文字の大きさと行間、押す場所の大きさ、電話番号を押せる形にする設定、埋め込んだ地図、固定の幅、更新のたびの確認手順を扱います。
パソコンで見ると、きれいに整っています。お客様に「見づらいです」と言われて、自分の端末で開いて驚きました。
作った画面と、見られる画面は違います。多くの方は、手のひらの中で見ています。
見られているのは小さい画面
まず、この前提です。
サロンのサイトを見る方の多くは、手元の端末から見ています。
パソコンで作り、パソコンで確認して、そのまま公開する。
これが、崩れに気づかない原因です。
作りながら、小さい画面でも確認してください。
自分の端末で開く
最も確実な確認です。
作成の途中で、自分の端末で開いてください。
すべてのページを、順に見てください。
家族や友人の端末でも、見てもらってください。
端末によって、見え方が違う場合があります。
| 確認する場所 | 見るもの |
|---|---|
| 文字 | 小さすぎないか |
| 押す場所 | 指で押せる大きさか |
| 写真 | はみ出していないか |
| 表 | 横にずれていないか |
横にずれる場合
最も多い崩れです。
画面を左右に動かさないと、全部が見えない状態。
これが起きていると、読まれません。
原因は、大きすぎる要素が入っていることです。
写真、表、長い文字列。この三つを疑ってください。
写真が原因の場合
多くはこれです。
大きな写真を、そのまま置いている場合があります。
小さい画面の幅を超えると、はみ出します。
画面の幅に合わせる設定に、変えてください。
作成サービスの場合、その設定が用意されています。
表が原因の場合
料金の表で起きます。
列が多い表は、小さい画面に収まりません。
列を減らしてください。
メニューの名前と、金額。この二つで足ります。
時間を入れる場合、三列までにしてください。
長い文字列が原因の場合
見落とされます。
途中で切れない長い文字列があると、はみ出します。
サイトの場所をそのまま書いた場合。
英数字の長い連なりも、同じです。
短い言葉に置き換えて、案内の形にしてください。
文字が小さい場合
読まれません。
パソコンで見て「ちょうどよい」大きさは、小さい画面では小さすぎます。
本文は、指で拡大しなくても読める大きさにしてください。
拡大しないと読めない場合、そこで離れられます。
大きめにしてください。
行の間が詰まっている場合
読みにくくなります。
行と行の間が狭いと、目が滑ります。
少し広げてください。
段落の間にも、空きを作ってください。
読みやすさは、文字の大きさと間隔で決まります。
押す場所が小さい場合
押せません。
指で押す場所が小さいと、誤って別の場所を押します。
予約や電話の入口は、特に大きくしてください。
指の幅を想定してください。
隣の要素と、間隔を空けてください。
電話番号を押せるようにする
見落とされます。
電話番号を、押すとかけられる形にしてください。
文字として置いただけでは、押せません。
小さい画面から見る方は、押してかけます。
この設定だけで、連絡が増える場合があります。
上部の案内が使えない場合
移動できなくなります。
小さい画面では、案内が折りたたまれる形になります。
その操作が、押せるか確認してください。
開いた後、各ページに移動できるか確認してください。
ここが動かないと、他のページを見られません。
動く仕掛けを減らす
負担になります。
自動で切り替わる写真や、動く飾り。
小さい画面では、読む妨げになります。
通信の量も増え、表示が遅くなります。
無いほうが、読まれます。
表示が遅い場合
崩れの前に、離れられます。
写真が重いと、表示に時間がかかります。
小さい画面では、通信の環境も様々です。
撮った写真をそのまま載せないでください。
対処は、サロンのホームページが重い原因と直し方で整理しています。
横向きでも確認する
見落とされます。
端末を横にすると、見え方が変わります。
横にしても崩れないか、確認してください。
崩れる場合、幅の指定が原因です。
固定の幅を、使わないでください。
固定の幅を使わない
崩れの根本の原因です。
「幅を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分で終わります。
出典
本記事は2026年7月時点の一般的な情報の整理です。表示の崩れの原因と対処は、利用中のサービスや使っている型によって変わります。設定の手順は、必ず提供元の説明でご確認ください。VANNAの料金・機能・キャンペーン条件は変更される場合があります。
