美容室のホームページのスマホ対応は、画面の幅に収まれば十分、というものではありません。見出しの改行や写真の切り取り、予約ボタンの押しやすさで、使いやすさが変わります。美容室のホームページのスマホ対応を、SOWAのPC・スマホの表示例と、公開前のチェック項目で確認していきます。
スマホでも、見せたい髪型をきちんと見せる
SOWAは、スマホでは写真や文章を縦に並べるなど、画面の幅に合わせて表示を変えます。
横長のPC用写真だけでは伝えにくい場合は、スマホ用の写真を指定できます。
同じページを端末ごとに作り直す必要はありません。
文章は共通で管理しながら、写真をそれぞれの画面に合わせられます。
横長の写真を、そのまま小さくすると見えにくい
店内まで広く写した横長の写真は、PCでは雰囲気が伝わります。
ところがスマホの縦長画面では、人物が小さくなったり、髪の端が切れたりすることがあります。
PCには空間が分かる横長写真、スマホには顔や髪を見せやすい縦長写真を選ぶ。
画像を分けると、どちらでも見せたい部分を残しやすくなります。
PCとスマホ、両方の表示を確かめる
画像は端末ごとの欄から指定する
トップページの画像は「外観 → カスタマイズ → SOWA 設定」で、LPの画像は「LPブロック編集」で設定します。
LPには「PC用の写真」と「スマホ用の写真（任意）」の欄があります。
関連する手順：サロンのLPの作り方｜SOWAで写真・料金・予約ボタンを編集する
関連する手順：美容室のホームページの作り方｜準備・費用・予約設定を順に解説
スマホ用を空欄にするとPC用の写真を表示します。
まず共通の写真で確認し、顔や髪が切れる場合に、スマホ用を用意する使い方もできます。
写真だけでなく、文字とボタンも見る
下の画像は、デモのLPをスマホ幅390pxで表示したものです。
縦長の写真に切り替わり、写真の下には予約への入口が表示されています。
入力した見出しが途中で不自然に折れていないか、メニューボタンを押せるか、予約先まで進めるかを実機でも確認します。
長い説明文は短い段落に分けると、スマホで追いやすくなります。
美容室のホームページのスマホ対応で見る三つの場所
トップ画像、メニューと料金、予約ボタンを順番に確認します。デザインを整えたPCの画面だけでは、スマホで文字がどこまで折り返されるか、写真のどの部分が見えるかが分かりません。初めてのお客様が普段使う画面を想定して見直します。
関連する手順：美容室のホームページデザイン｜おしゃれな参考例と7つの確認点
「スマホ対応」とは、ただページが小さくなることではありません。横に並んだ情報を縦へ並べたり、写真の見せ方を調整したりして、読める形にすることです。自動で配置が変わっても、入れた文章や画像がちょうどよく見えるかは、店舗側で確認する必要があります。
写真の切り取りで迷うときの選び方
人物や髪が画面の端にある写真は、縦長の枠にすると必要な部分が外れる場合があります。画像全体を小さくする方法と、枠いっぱいに表示して一部を切り取る方法では見え方が違います。SOWAで設定できる表示位置も確認し、写真の中心と見せたい部分を合わせます。
PC用には店内の空間が伝わる横長写真、スマホ用には髪型や人物が見やすい写真を用意する方法があります。同じ場面でも、少し引いて撮ると切り取りの余裕を作れます。画像の大きさだけを増やしても構図の問題は解決しないため、まず何を見せたいかを決めます。
写真へ文字を重ねる場合は、文字の後ろに顔や細かな背景が来ていないかも確認します。読みにくければ、写真を替える、文字を短くする、文字を写真の外へ置くなどの調整を考えます。PCで見えた文字がスマホでも同じように読めるとは限りません。
見出しの不自然な改行を減らす
見出しの最後に「す。」「こと。」だけが残ると、内容が読み取りにくくなることがあります。手動の改行を増やして一つの機種だけに合わせるより、見出しそのものを短くしたり、意味が分かる単位へ言い換えたりする方法から考えます。
例えば「毎日の髪のお手入れに関するご相談を承っています」という長い見出しなら、「毎日のお手入れを相談する」と短くし、詳しい内容は本文へ移せます。これは表現の例で、予約ボタンや相談窓口の実際の対応に合わせて使います。
本文では一段落に話題を詰め込まず、説明の区切りで段落を分けます。画面幅に合わせるためだけに一文字ずつ改行を入れると、別の端末では読みにくくなります。スマホを縦にした状態で、拡大せず読めるかを確認してください。
料金表と固定ボタンの確認
横に列が多い料金表は、スマホでは情報が押しつぶされやすくなります。メニュー名、料金、条件を読む順番が分かるかを見ます。横へスクロールする表なら、その操作が分かる表示にし、重要な条件を表の外にも補足します。
固定ボタンを使う場合は、画面の下までスクロールして、最後の文章や問い合わせの送信ボタンを覆っていないか確認します。ボタンの見た目だけでなく、押した後にどこへ進むのか、戻ってきたときに読む位置が分かるかまで操作してみます。
| 確認場所 | 見ること |
|---|---|
| 最初の画面 | 写真とお店の特徴が分かるか |
| メニュー | 金額と条件を拡大せず読めるか |
| 見出し | 一文字だけの行や不自然な空白がないか |
| 予約案内 | 押す場所と行き先が分かるか |
| ページ末尾 | 固定表示で本文が隠れないか |
公開後の確認を更新作業に含める
写真や料金を変えたときは、同じ確認を短く行います。PCのプレビューで整っていても、実際のスマホで再読み込みして確かめると、画像の切り取りやブラウザの表示の違いに気づけます。複数の幅で見て、特定の画面だけに合わせすぎないようにします。
表示が変わらない場合は、保存が完了したか、正しいURLを見ているかを先に確認します。以前の画像が残って見えるときは、キャッシュの影響も考えます。画像を何度も上書きする前に、変更した場所と公開表示の対応を整理しましょう。
スマホで確認するときの具体的な操作順
最初はページを開いた直後の画面を見ます。店名と主な案内が分かるか、写真を見る前に長い説明が続いていないかを確認してください。次にメニューを開き、料金と施術内容を探します。途中で画面を拡大しなければ読めない箇所や、横にずれる表があれば、文字の大きさや表の構成を見直します。
続いて予約ボタンを押します。下部に固定する案内がある場合は、そのボタン自体の見やすさだけでなく、本文や送信ボタンを隠していないかも確認します。画面を横向きにしたときや文字サイズを大きくしたときにも、操作を妨げないことが大切です。デザインの確認は、上から下へ見るだけでなく、押して戻る操作まで含めます。
写真が合わないときは元の画像も見直す
PCで横長に使っている写真を、スマホで縦長に表示すると、人物や店内の端が切れることがあります。大事な部分が中央にある写真を選ぶか、スマホ用に別の写真を用意します。画像へ文字を直接入れている場合は、その文字まで切れる可能性があるため、本文の見出しとして表示できないかも検討してください。
調整後は、キャッシュの影響で古い写真を見ていないか再読み込みして確かめます。別の機種を持っている方に、店名、メニュー、予約先を探してもらうのも一つの方法です。操作の説明なしで進めるかを見ると、自分では気づきにくい迷いやすさを見つけられます。
まとめ：美容室のホームページのスマホ対応を見直すときに
美容室のホームページのスマホ対応では、文字が読めること、写真で伝えたい部分が見えること、予約操作ができることを確かめます。自動で縦に並ぶレイアウトでも、入力する文章や画像の選び方は調整が必要です。美容室のホームページのスマホ対応を見直すときは、普段使うスマホで料金の確認から予約まで通して操作してください。PCの見た目を保ちながら、スマホで必要な写真や文章の量を整えていきましょう。