Webサイトをスマートフォンで閲覧している際、「入力欄同士の間隔が狭くて押しづらい」「次の項目の見出しと前項目の入力ボックスがくっついていて見づらい」と感じたことはありませんか？
特に問い合わせフォームや応募フォームにおいて、要素同士の間隔（余白）が詰まっていると、ユーザーに強いストレスを与え、途中離脱（コンバージョン率の低下）を招く直接的な原因となります。
本記事では、フォームを中心としたスマホ画面の表示崩れ・余白詰まりを解消し、快適なUI（ユーザーインターフェース）を実現するためのCSS調整テクニックを解説します。
なぜフォームの余白は「詰まって」見えてしまうのか？
PC向けに作られたデザインやデフォルトのCSSスタイルでは、デスクトップ表示時には適切な余白があっても、スマホ表示に画面幅が縮小された際に余白指定（margin や padding）が不足し、要素同士が圧迫される現象が起きます。
特に注意すべきは以下の3要素の境界線です。
- 入力フィールド（input / select）とその下にある次の項目の「見出しラベル」
- 複数行入力欄（textarea）と送信ボタンの距離
- 画面最下部に固定表示されている「お問い合わせ・電話ボタン」とコンテンツの重なり
快適な視認性を生むCSS余白調整コード
フォーム要素全体に適度なリズムと空気感を持たせるため、CSSで以下のようなスタイリングを適用します。
/* フォームの各項目グループ（行）ごとの下部余白を確保 */
.form-item,
.mw_wp_form tr,
.mw_wp_form dl {
margin-bottom: 24px !important;
}
/* テキスト入力欄やセレクトボックス自体の下に適度な隙間を作る */
input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
margin-bottom: 12px !important;
}項目ごとのまとまり（24px前後）と、入力欄単体の下余白（12px前後）にメリハリをつけることで、ユーザーは「どこからどこまでが1つの入力ブロックなのか」を直感的に視認できるようになります。
スマホ特有の「固定フッターボタン被り」対策
近年のスマホサイトでは、画面下部に「電話する」「LINEで相談する」といった追従型の固定ナビゲーション（フッターバー）を配置することが一般的です。
しかし、この固定バーが存在することで、フォームの一番下にある送信ボタンやチェックボックスが固定バーの下に隠れて押せなくなるという致命的なUIトラブルが発生します。
解決策：コンテナ最下部に十分なパディング（底上げ）を設定する
ページの最下部（フォームコンテナ全体）に対して、固定バーの高さ以上の余白を強制的に追加することで、スクロールした際に最後までコンテンツが隠れずにスッキリ表示されるようになります。
/* 固定フッターバー（高さ約60～70px）の被り防止用余白 */
.form-container,
.mw_wp_form {
padding-bottom: 80px !important;
}ステージング環境での事前検証の重要性
デザインやCSSの修正を行う際は、直接本番サイトのスタイルシートを変更するのではなく、必ずステージング環境（テスト用URL）で修正を適用し、実機のスマホやデベロッパーツールで確認するフローを徹底しましょう。他のページへの予期せぬデザイン崩れ（副作用）を未然に防ぐことができます。
まとめ
Webサイトの使いやすさは、数ピクセル単位の「余白（マージン）の設計」によって大きく変化します。
入力欄とラベルの間隔を適度に広げ、スマホ特有の固定ナビゲーションによる隠れを考慮した「底上げ余白」を設定することで、ユーザーにとってストレスのない快適な入力体験を提供することができます。
【編集後記】
スクリーンショットで「間が詰まっている」という違和感に気づき、すぐに修正へ動けたのは非常に良い視点でした。デザインの美しさはもちろんですが、フォームのようなCV（成果）に直結するパーツでは「押しやすさ・読みやすさ」という機能美が何より優先されます。ステージング環境で事前にCSS調整を行い、実機で綺麗に余白が広がったことを確認できた安心感は格別ですね。