WordPress HP作成完全ガイド #7｜スマホ表示の最終調整で「崩れ」と「読みにくさ」をなくす

「パソコンで見るときれいなのに、スマホで開くと文字が大きすぎたり、写真が画面からはみ出したり、ボタンが小さくて押しにくかったり……せっかく作ったのに、なんだか惜しい」——公開直前にいちばん多くいただく相談です。

前回#6「最低限これだけ！必須プラグインと初期設定」で、HPの土台を安全で軽い状態に整えました。いよいよ最終仕上げです。この記事では、スマホで見たときの「崩れ」と「読みにくさ」をなくす調整を、順番にやっていきましょう。特別な知識は必要ありません。

なぜ「スマホ表示」の調整が最後の決め手なのか
まず「スマホでどう見えているか」を確認する
1. 1. 自分のスマホで実際に開いてみる
2. 2. パソコンの管理画面でスマホ表示をプレビュー
崩れをなくす「4つの仕上げ」
仕上げに、全ページをスマホで最終チェック
まとめ ― これで基本のHPは完成です

なぜ「スマホ表示」の調整が最後の決め手なのか

いまの時代、あなたのサロンを探すお客様の多くは、パソコンではなくスマホで検索します。つまり、多くの人が最初に目にするのは「スマホで見たあなたのHP」です。ここで読みにくかったり崩れていたりすると、それだけで離れてしまうことも少なくありません。

ところが、HPを作る作業はほとんどパソコンの画面で行います。だから「PCではきれい・スマホでは崩れる」というズレが起きて当たり前なのです。悪いことではありません。最後にスマホ目線で見直して整えれば、それでちゃんと仕上がります。

まず「スマホでどう見えているか」を確認する

直す前に、いまの見え方を知るのが先です。確認の方法は2つで十分です。

1. 自分のスマホで実際に開いてみる

いちばん確実で、いちばん簡単な方法です。ご自分のスマホで、公開したHPのアドレスをそのまま開いてみましょう。トップページだけでなく、メニューや料金、予約フォームまで、お客様と同じ順番で指でたどってみるのがコツです。「読みにくい」「押しにくい」と感じた場所こそ、直すべきポイントです。

2. パソコンの管理画面でスマホ表示をプレビュー

直しながら確認するなら、パソコンの方が作業が速く進みます。WordPressの管理画面から「外観 → カスタマイズ」を開くと、画面の下のほうにスマホの形をしたアイコンがあります。これを押すと、その場でスマホ幅の見え方に切り替わります。ここで直して、右上の「公開」を押せば反映されます。

崩れをなくす「4つの仕上げ」

スマホでよく起きる崩れは、だいたい次の4つに集約されます。上から順に見ていけば大丈夫です。

1. 文字の大きさ ― 大きすぎ・小さすぎを直す

パソコンでちょうど良い見出しでも、スマホでは大きすぎて2〜3行に折り返し、間延びして見えることがあります。逆に本文が小さいと読む気が失せてしまいます。目安は、本文は「指を近づけなくてもスッと読める大きさ」、見出しは「本文より少し大きい」くらい。スマホプレビューを見ながら、大きすぎる見出しは一段下げると引き締まります。

2. 画像 ― はみ出しをなくす

写真が画面の右にはみ出して横スクロールが出る、というのはスマホで最も多い崩れです。画像を選んだときに出る幅の指定を「なし（元のサイズ）」ではなく、画面いっぱいに収まる設定に戻すと直ります。横に2枚並べたい写真も、スマホでは上下に1枚ずつ並ぶ形にしておくと、小さくつぶれずに見せられます。

3. ボタン・リンク ― 指で押しやすく

予約ボタンや電話番号は、お客様の行動に直結する大事な場所です。指で押すことを考えると、ボタンは小さすぎず、上下にゆとりを持たせるのが安心です。リンクが文字の中に埋もれていると押し間違えのもと。予約や問い合わせは、はっきりした「ボタンの形」にしておくと、迷わずタップしてもらえます。

4. 余白と行間 ― ぎゅうぎゅうを解く

スマホは画面が縦に細長いぶん、文字が詰まっていると圧迫感が出ます。段落と段落のあいだに一行分の余白を入れる、行間を少しゆるめる——それだけで、同じ文章でもぐっと読みやすくなります。「余白は空きすぎかな」と思うくらいが、スマホではちょうど良い読み心地です。

仕上げに、全ページをスマホで最終チェック

最後に、お客様になったつもりでスマホから全ページを一周します。次の5点だけ確認できれば合格です。

横スクロールが出る（画面から何かがはみ出す）ページはないか
本文がスッと読める大きさになっているか
予約・問い合わせボタンが、指で迷わず押せるか
メニュー（三本線など）を開いて、各ページへ行けるか
電話番号をタップして、そのまま発信できるか

この5つが問題なければ、あなたのHPは「スマホで気持ちよく使える」状態です。ここまで来れば、お客様に自信を持って見てもらえます。

まとめ ― これで基本のHPは完成です

サーバー・WordPressの準備から、固定ページと投稿、問い合わせフォーム、必須プラグイン、そして今回のスマホ表示の調整まで——これで、個人サロンのHPとして必要な土台がひととおり完成しました。あとは公開して、実際のお客様の反応を見ながら少しずつ育てていくだけです。まずは一周してみて、「ここが気になる」と感じた場所から手を入れていきましょう。