スマホ向けLPのデザイン｜文字・余白・表・ボタンを実幅で確認する手順

こんにちは。バナナデスクです。

PCではきれいなのに、スマホで見ると料金表だけ横へ飛び出す。文字を小さくして収めると、今度は条件が読みにくい。LPをスマホへ合わせる時によく起きる問題です。

すべてを細く縮めるより、本文は画面内で折り返し、比較表は表の中だけを横へ動かせるようにします。情報ごとに見せ方を変えると、必要な条件を削らずに整えられます。

執筆：バナナデスク｜WEBビジネスの設計・集客・改善

390pxは画像の書き出し寸法ではない

ここでいう390pxは、検証用のブラウザ表示幅をCSSピクセルで表した値です。画像ファイルの画素数とは別です。スクロールバー等による幅の減少がなければ、左右20pxの余白を引いた本文幅は350pxです。実際には利用可能幅も測ります。

見本は、架空の相談LPを同じ原稿のまま二つのHTMLにしたものです。修正前は固定幅と小さい文字が残った設計、修正後は画面幅に応じて配置が変わる設計です。実在の顧客ページを悪い例として掲載したものではありません。

18pxや52pxは、この見本で使う設計値です。すべてのLPの正解ではありません。フォント、文章量、表示倍率、利用者の操作環境を合わせて確認します。

WCAG 2.2のターゲットサイズの解説は、原則として24×24 CSS px以上、または間隔等の例外条件を示しています。これは最小条件であり、「24pxなら誰にとっても押しやすい」という意味ではありません。

見本では、主要ボタンに高さ52px以上を取り、文字だけでなく周囲の余白もリンクの範囲に含めます。二つのボタンが隣り合う場合は間隔を空けます。「詳しくはこちら」より、「相談の条件を確認する」のように行き先が分かる言葉を使います。

画面下の固定ボタンは、条件やフォームの最後を覆わないかを確認します。キーボードが出た時や文字を拡大した時にも見え方が変わります。今回の修正後は通常の文書の流れへ戻し、まず重なりを避ける構成にしました。

.table-wrap { overflow-x: auto; }
.table-wrap table { min-width: 680px; width: 100%; }
main { width: min(1040px, calc(100% - 40px)); margin: auto; }

横に比較する意味がある表は、表だけを横へ動かします。表の直前に「横へスクロールできます」と案内し、操作できる領域だと伝えます。そもそも横比較が不要なら、項目ごとの縦並びへ変える方が分かりやすい場合もあります。

画像の説明図は、横長の文字を細かく詰め込むと、幅に合わせて縮小した時に読めません。本文へ数字と条件を残し、図は一つの関係だけを示します。図をタップして拡大することを前提にせず、そのまま読める要点に絞ります。

MDNのレスポンシブデザインの解説を踏まえ、見本ではPCの二列を狭い画面で一列にします。対象と受け取るもの、提供範囲、料金、進め方、条件確認の順序です。

料金の注意書きをPCの右端へ置いたまま、スマホでは最後まで離れてしまうような配置は避けます。料金と条件は近くに置き、見た目が変わっても一緒に読めるようにします。

見本の条件確認ボタンは、架空サービスの条件を表示する練習用です。申込の送信や契約を行うものではありません。実際のLPでは、この先のフォーム入力と受付まで別に確認します。

スマホ対応を「横幅を狭くした」で終わらせないでください。条件を読み、必要な場所へ移動し、操作できるところまで確かめると、見た目の調整が利用者の判断につながります。

2026年10月1日の編集用ブラウザで、1280×900、390×844、375×667を確認しました。狭い二条件では縦スクロールバーが15pxを占め、利用可能幅は375pxと360pxです。

指定幅	修正前のページ全体幅	修正後のページ全体幅	修正後の表領域／表
390px	1100px	375px	335px／680px
375px	1100px	360px	320px／680px

390px条件では、表内を横へ40px動かした時も、ページ全体の横位置は0のままでした。条件ボタンを押すと説明が表示され、もう一度押すと閉じ、開閉状態の属性も変わることを確認しています。文字拡大や実端末でソフトウェアキーボードを出した状態は、今回の確認に含みません。

見本はZIPを展開し、HTMLをブラウザで開くと確認できます。架空の内容で、実際の受付は行いません。