スマホ対応HPを読みやすくする作り方
- hi ko
- 7月31日
- 読了時間: 4分
PCでは綺麗でも、スマホで“読めない・押せない・遅い”なら成果は出ません。
スマホ対応HPは、文字→余白→画像→導線→フォームの順で手を入れるのが最短です。
今日から少しずつ直しましょう。
スマホ対応HPの文字サイズと行間の基準
スマホの読みづらさの多くは文字の小ささと行間不足です。まずはここから。
本文は16〜18px、行間は1.8前後
段落は3〜5行で改行、1文は短めに
見出しは太字にして、直下に1行の余白
英数字や記号が詰まって見える時は、実機で見た目確認を
拡大せず読めるか——これがスマホ対応HPの最低ライン
スマホ対応HPの余白と1カラム設計
横方向の移動はスマホ最大の負担。1カラム＋十分な余白が基本です。
セクション上下は本文2〜3行分の余白
箇条書きは行間＋4〜8pxで息継ぎを
2カラム以上に見せたい情報はタブ／アコーディオンで段階表示
高いヘッダーはスクロールで縮小し、本文の視界を広く
1画面＝1メッセージ”で、視線の迷子を防ぐ
横スクロールが出る固定幅は即修正
スマホ対応HPの画像ルール：軽く・揃える・ズレさせない
表示が遅いと、本文に届く前に閉じられます。軽さと統一で“今の標準”に。
画像はWebP、サイズは横1200px・16:9に統一
width/heightを明記して**レイアウトずれ（CLS）**を防止
ファーストビュー外の画像は遅延読み込み
写真の色味を同じトーンに寄せる（黄ばみ除去だけでも清潔感UP）
ヒーローは静止画＋短いコピーが基本。重いスライダーは止める
写真が弱い箇所は“工程3段／比較2列”の図表に置換
スマホ対応HPの導線：段落末1リンク＋3ボタンで一本道に
スマホは戻る操作＝ストレス。リンクのばら撒きをやめ、道筋を一つに。
各段落の最後に関連リンクは1本だけ（例：比較→価格→FAQ→CTA）
ページの主ボタンは3つに分岐
資料DL（3分で理解）
無料相談（15分で棚卸し）
見積（条件が決まったら）
ボタンは横幅8割・高さ44px以上、タップ間8〜12px
文言は“ベネフィット＋所要時間”（例：3分で読める導入ガイド）
フォームは“必須3項目”から：スマホ対応HPで完了率を落とさない
長いフォームはスマホで離脱が増えます。まず削る。
必須は名前／メール／本文の3項目から
電話は任意にし、後追いで確認でもOK
入力種別を最適化（電話＝数字キーボード、メール＝@キーボード）
エラー文は日本語で具体的に、自動返信に受付時刻と次の連絡目安を明記
段階式は“最後の手段”。まずは短く
文章の作り方：スマホで読み切れるリズムにする
導入は要約3行（結論→読む価値→次に分かること）
見出しは質問形／結論形で“何が分かるか”を明確に
文中リンクは固有名詞で貼る（“こちら”は避ける）
段落は短く、改行多め。スマホ対応HPはリズムが命
短く・区切る・まとめる——これが読み切りのコツ
5分セルフチェック（実機で確認）
本文16〜18px・行間1.8？
セクション上下に十分な余白？
横スクロールが一切ない？
画像はWebP／16:9でwidth/heightあり？
段落末リンクは各1本？
ボタンは8割幅・高さ44px以上？ 文言に所要時間入り？
フォームは必須3項目＋自動返信（対応目安つき）？
1つでも“×”なら、そこから直せばスマホ対応HPの体感が変わる
やらないリスト（スマホで嫌われる定番）
自動再生動画・重いスライダー
文字12px以下・行間詰め
文中リンクの乱立（リンクは段落末に退避）
PNG/JPGの大判貼り付け
小さく密集したボタン
HTTPS未対応・混在コンテンツ放置
この6つをやめるだけで数字は上向きます
まとめ：順番で整えると、すぐ“読める”になる
文字→余白→画像→導線→フォーム順番を決めて差し替えるだけで、スマホ対応HPは今日から“読める・押せる・速い”に寄ります。センスではなく基準と引き算で前に進みましょう。
――
写真や導線の見直しも含めて、軽く整えたい方へ。**COMFORT NOVA（コンフォートノヴァ）**では、
入口3ページ診断（無料）
画像のWebP化・比率統一・軽量化
3ボタンCTA文言テンプレ
フォーム“必須3項目”への縮約と自動返信整備まで差し替え中心で並走します。
まずは気軽にお問い合わせください。
