画面の余白を減らすと、より多くの情報を載せられます。
しかし、関係する項目と別の話題の境界が消え、読む人が内容を整理しなければならなくなることがあります。
余白は空いた場所ではなく、情報のまとまりを示すための距離です。
このレッスンでは架空の申込フォームを使います。
項目の内部、項目同士、セクション同士の距離を分け、画面幅が変わっても関係を読み取れる配置にします。
この記事で学ぶこと
- 情報の階層に合わせて余白の段階を決めます。
- 要素の内側と外側の余白を分けて調整します。
- 長い文章や狭い画面でも内容が読めるか確認します。
距離を決める前に関係を分ける
余白を調整する前に、何が同じ項目かを決めます。
フォームなら、項目名、入力欄、補足説明、エラー表示で一つのまとまりです。
氏名欄と連絡先欄は別の項目ですが、連絡先という上位のまとまりに含める場合があります。
距離を変える前に、この階層を書き出します。
すべての間隔が16pxなら、項目名が上の入力欄に属するか下の入力欄に属するか迷うことがあります。
項目名と自分の入力欄を近づけ、次の項目までを広げると関係を表現できます。
枠線や背景色を追加しなくても、近さだけで改善できる箇所を探してください。
同じまとまりでも、操作に必要な距離は残します。
小さなボタン同士を近づけすぎると押し間違えることがあります。
まとまりを見せたいなら、操作部品を詰める代わりに外側の余白や見出しを使えます。
視覚的な関係と身体的な操作のしやすさは、別々に確認する必要があります。
紙の資料でも考え方は同じです。
写真と説明文を近づけ、別の写真との間を広げます。
行間のような文章内部の余白と、段落の間隔を区別してください。
細かな数値を決める前に、どこで話が切り替わるかが分かることを優先します。
余白は、文章を減らす代わりにはなりません。
長い説明を大きく離しても、読者が必要な条件を見つけにくい状態は残ります。
関係を決める段階で文章の重複も見直し、残した内容がまとまりとして読める距離を選びます。
構成と間隔を別々に確認してください。
少数の段階へ間隔を整理する
間隔を毎回違う値にすると、同じ関係なのに見た目がばらつきます。
まず現状の間隔を測り、狭い、中間、広いなど少数の役割へ整理します。
Webの練習なら8、16、32pxを出発点にできますが、これは試作の基準で、すべての媒体に正しい数値ではありません。
架空のフォームでは、ラベルと入力欄を8px、項目同士を16px、連絡先と参加条件の群を32pxとします。
同じ役割の距離が揃うので、新しい項目を追加するときも判断できます。
数値に名前を付けるなら「項目内」「項目間」「章間」のように用途が分かるものにします。
測定で11pxや19pxが見つかったからといって、必ず8の倍数へ直す必要はありません。
文字の見え方や部品固有の調整が必要な場合があります。
大事なのは倍数への服従ではなく、関係と間隔に説明できる一貫性があることです。
例外には理由を残します。
基準を決めた後は一画面で試します。
すべてのページを一括変更すると、長文や複数列で問題が起きても原因を追いにくくなります。
文字量が短い項目と長い項目を両方置き、基準が実際の情報量に耐えるか確かめてから広げます。
外側と内側の余白を分ける
カードなどの部品には、内容と枠の間の内側余白と、隣の部品までの外側余白があります。
内側が小さすぎると内容が枠へ貼り付き、外側が小さすぎると別の部品同士がつながって見えます。
どちらが問題かを区別すると、無関係な場所まで広げずに済みます。
架空の料金カードで見出しと価格が窮屈なら、まずカード内部の距離を調べます。
カード間を広げても内部の読みにくさは解消しません。
逆に二つの料金が一つのプランに見えるなら、外側の距離や見出しの配置を直します。
余白を増やす対象を具体的にしてください。
外枠の余白も、内容の優先順位へ影響します。
紙面いっぱいまで文字を置くと、裁断や印刷条件に加え、読んで区切る余裕がなくなることがあります。
画面なら端の操作領域やスクロールも考えます。
使用媒体の制約を確かめ、見た目だけで余白を削らないようにします。
内外の余白を一つの設定へまとめると、修正した際に予期しない場所も変わります。
制作ツールや実装で別々に設定できるなら役割を分けて管理します。
担当者への指示も「もっと余白を」ではなく「カード内部の左右を広げる」と伝えると修正が具体化します。
画面幅と文字量の変化を試す
横に三枚並べたカードは、スマートフォンでは縦に並ぶことがあります。
横並びで調整した距離をそのまま使うと、章とカードの区別が弱くなる場合があります。
幅を変えたときの読み順と、まとまりの境界を確認し、役割に合わせて距離を調整します。
長い日本語見出しやエラー文を入れて試してください。
短い仮テキストだけでは、実際の文章で折り返したときの問題を見落とします。
エラーが出て他の項目を押し下げても、どの欄の説明かが分かる必要があります。
空白だけを固定して内容を切り取らないようにします。
拡大表示でも文章が読めるか見ます。
余白を減らして一画面へ押し込めるより、必要に応じて縦へ伸びる方が適切な場面があります。
スクロールがあること自体を失敗とせず、横と縦を何度も動かさなければ読めない状態を避けます。
内容が増えたときの方針も決めます。
本文が二倍になったら文字を小さくするのか、部品を伸ばすのか、別ページへ分けるのかを判断します。
余白のルールは単一の完成画像だけでなく、情報が変わる運用の中で使えることが目標です。
まとまりを読者の見方で確認する
確認では、項目名がどの説明に属するか、どこから次の話題かを聞きます。
意図と違うまとまりに読まれた場合、距離、見出し、位置を順に見直します。
「余白がきれいか」という好みの質問だけでは、情報の関係が伝わったか分かりません。
架空のフォームで補足文が次の入力欄の説明に見えたなら、自分の入力欄との距離を縮めます。
その上で次の項目との距離を広げ、再確認します。
何もかも広げると縦に長くなるため、問題が起きている関係だけを調整します。
修正前後の数値と用途を簡単に残します。
「項目内8px、項目間16px、群間32px。ただし長いエラー表示は必要高さまで伸ばす」と書けば、担当者が再現できます。
画面写真だけでは分からない意図を言葉にしておくと、新しい項目の追加に使えます。
基準は完成後も見直せます。
問い合わせが特定の欄へ集中するなら、文言だけでなく関係の見せ方を点検します。
余白は多ければよいものではありません。
必要なまとまりを見分けられ、読む・操作する負担を増やさない距離を選びます。
変更を依頼するときは、画面のどの辺からどの辺までを測ったかを揃えます。
枠の端と文字の見た目の端を混同すると、同じ数値でも印象がずれます。
制作ツールの測定値を基準にしつつ、見た目で必要な調整をした場合は、その理由を一言残します。
実践課題
実践課題：余白の役割表を作る
既存の画面一つで、余白の役割表と修正案を作ります。
画面の画像か編集可能なデータを用意し、情報を項目と群へ分けてから距離を測ります。
8px単位は試行の基準として使い、例外が必要なら理由を残してください。
- 項目内・項目間・群間を色分けする
- 現状の距離を測って少数の段階へまとめる
- 内側と外側を分けて修正する
- 小さい画面と長い文章で確認する
架空の完成例「連絡先フォーム：ラベルと入力欄8px、項目間16px、参加条件との間32px。カード内側は16px。エラー文は高さを固定せず伸ばす。確認で補足が別項目に見えた箇所だけ距離を修正する。」
自己確認
- 距離の段階が情報の階層と対応する
- 内側と外側の設定を区別している
- 長文や画面幅の変化で内容が隠れない
まとめ
余白は、情報の関係を示す距離です。
項目内、項目間、群間を分け、少数の段階で揃えます。
固定数値を守ることより、文字量や画面幅が変わってもまとまりを読めることを確認してください。
- 情報の階層に合わせて余白の段階を決めます。
- 要素の内側と外側の余白を分けて調整します。
- 長い文章や狭い画面でも内容が読めるか確認します。
