スマホで読めるページの作り方
- hi ko
- 8月19日
- 読了時間: 4分
更新日：9月26日
PCで綺麗でも、スマホで“読めない・押せない・遅い”なら伝わりません。
スマホで読めるページの作り方は、文字→余白→画像→導線→フォームの順に手を入れるのが
最短です。
STEP1｜文字の基準を決める
スマホの読みにくさは、ほとんどが文字の小ささと行間不足。まずここから。
本文は16〜18px、行間は1.8前後
段落は3〜5行で改行、1文は短めに
見出しは太字にして、直下に1行の余白
英数記号は和文より少し小さめに見えることがあるので、詰まりを見た目で確認
スマホで“拡大せず読める”かを最終判断に
STEP2｜余白と1カラム化
スマホでは横移動の負荷が想像以上に高い。1カラム＋十分な余白が基本です。
セクション上下に本文2〜3行分の余白
箇条書きは行間＋4〜8pxで読みやすく
2カラム以上にしたい情報はタブ／アコーディオンで段階表示に
ヘッダーはスクロール縮小で高さを抑え、本文を広く
詰め込まず、“1画面＝1メッセージ”横スクロールが出る固定幅は即修正
STEP3｜画像は軽く・揃える
表示が遅いと、本文に到達する前に閉じられます。軽さと統一で“今の標準”へ。
画像はWebP、サイズは横1200px・16:9に統一
width/height を明記して**レイアウトずれ（CLS）**を防止
ファーストビュー外は遅延読み込み
写真の色味を同じトーンに寄せる（黄ばみを取るだけで清潔感が上がる）
ヒーローは静止画＋短いコピーが基本 自動再生動画・重いスライダーは一旦OFF
STEP4｜導線は“段落末1リンク”＋“3ボタン”で一本道に
スマホは戻る操作＝ストレス。リンクをばら撒かず、道筋を1本に。
各段落の最後に関連1リンクだけ（例：比較→価格→FAQ→CTA）
ページの主ボタンは3つに分岐
資料DL（3分で理解）
無料相談（15分で棚卸し）
見積（条件が決まったら）
ボタンは横幅8割・高さ44px以上、タップ間隔8〜12px
文言は“ベネフィット＋所要時間”が効く（例：3分で読める導入ガイド）
STEP5｜フォームは“必須3項目”から
完了率を落とす最大の理由は面倒さです。徹底して削る。
入力は名前／メール／本文の必須3項目から
電話は後追いでもOK（必要なら任意チェック）
入力種別を最適化（電話は数字キーボード、メールは**@キーボード**）
エラー文は日本語で具体的に、フォーム下に対応目安を記載
自動返信には受付時刻・次の連絡タイミングを明記
長いフォーム＝スマホでは離脱。分割やステップ化は“最後の手段”
STEP6｜文章の作り方
導入は要約3行（結論→読む価値→次に分かること）
見出しは質問形や結論形で“何が分かるか”を明確に
文中リンクは固有名詞で貼る（“こちら”は避ける）
段落は短く、改行多め。リズム重視で
スマホで読めるページの作り方は“短く・区切る・まとめる”
STEP7｜チェックリスト
文字は16〜18pxで行間1.8？
セクションに十分な余白がある？
横スクロールが一切ない？
画像はWebP／16:9でwidth/heightあり？
段落末リンクは各1本に絞れている？
ボタンは8割幅・高さ44px以上？ 文言に所要時間が入っている？
フォームは必須3項目＋自動返信の対応目安あり？
1つでも“×”なら、そこから直せば体感が変わる
番外｜スマホでの“見た目の事故”を避ける小ワザ
長い英数字（URLや品番）は改行可能な形に（ハイフン・スペースの入れ方を工夫）
表は2列まで、それ以上はカード化
画像に文字を焼き込まない（デバイスで読めなくなる）
フッターに住所・電話・営業時間・SNSをテキストで
HTTPS未対応・混在コンテンツの警告は即対処（信用が溶ける）
まとめ：順番で整えると“すぐ”読めるページになる
スマホで読めるページの作り方
文字→余白→画像→導線→フォーム順番が決まれば、難しい実装なしでも
スマホで読めるページの作り方は回ります。“センス”ではなく基準と引き算で、今日から手触りを変えましょう。
――
写真や導線の見直しも含めて、軽く整えたい方へ。
**COMFORT NOVA（コンフォートノヴァ）**では、
入口3ページ診断（無料）
画像のWebP化・比率統一・軽量化
ボタン文言（ベネフィット＋所要時間）テンプレ
フォーム“必須3項目”への縮約と自動返信整備まで差し替え中心で並走します。まずは気軽にどうぞ。
