余白の使い方｜詰めない勇気と伝わる間
情報の多いページでは、文字を削る前に要素同士の距離を見直したい。余白が示すのは洗練された雰囲気だけでなく、何と何が関連し…
text: HYPE編集部
Webデザイナーの記事一覧へ情報の多いページでは、文字を削る前に要素同士の距離を見直したい。余白が示すのは洗練された雰囲気だけでなく、何と何が関連しているかという構造だ。スマートフォンでも読みやすい間隔の作り方を考える。
余白は情報のグループを示す
関連する要素を近く、別の話題を遠くに置く。単に空きを増やすことより、読む順序が明確になるかを見る。
関連する情報は近くに、意味の違う情報は離して置くと、見出しを読まずともまとまりをつかみやすくなる。サービスの特徴、料金、注意事項を同じ密度で詰めると、何が一組なのか分かりにくい。余白は単なる装飾ではなく情報の境界線でもある。カードの周囲を広げるより、内部の項目同士の距離との比率を先に見直したい。
見出しと本文の距離を決める
見出しの上と下に同じ間隔を取ると所属が曖昧になりうる。本文へのつながりが自然に見えるよう調整する。
見出しの下と次の見出しの上の距離が同じだと、どの本文に属するのか判別しづらい。段落のまとまりと節の切れ目を別の余白で表現する。本文が長いページでは、区切りのために線を増やす前に間隔で意味を伝えられないか試す。視線が次にどこへ移るかをスクロールしながら確認すると、紙上の静止画とは違う問題が分かる。
体系立てて学びたい場合は、Webスキルを学ぶオンラインスクール デイトラのようなオンラインスクールも選択肢になります。
見出しと本文の間隔は、装飾ではなく情報のまとまりを示す手がかりになります。W3C「WCAG 2.2 Quick Reference」でも読みやすさに関わる指針が整理されており、余白のルールをアクセシビリティの観点からも点検できます。
スマホで詰まりを点検
デスクトップで美しい余白でもスマホでは長いスクロールになる。重要な情報に早く辿り着けるか実機で確認する。
PCでは整っていたカードが縦並びになると、上下の余白が重なって間延びすることがある。逆にスマートフォンでは左右の余裕が足りず、文字が画面端へ寄り過ぎることもある。横幅を変えながら見て、段落の行数とカード間の距離を調整する。余白の数値だけを統一するより、読み取りの速度と操作のしやすさを優先したい。
狭い画面では、余白の不足がそのまま読みにくさにつながります。デジタル庁「ウェブアクセシビリティ導入ガイドブック」は誰にとっても使いやすい情報提供を扱っており、実寸での確認を制作工程に入れる根拠になります。
空白と欠落を区別する
余白を作るために価格や条件など必要な情報を削ってはいけない。折りたたみ、段階的表示、別ページへの誘導も検討する。
空白が多いこと自体は欠陥ではないが、読み手が必要な情報を見つけられないなら設計を見直す。申込ボタンの周囲に余白を置いても、料金や条件との関係が途切れていると判断しにくい。余白を削って情報を入れる前に、内容の優先順位が正しいか確認する。見せない情報と、後で読める位置へ移した情報を混同しないようにしたい。
材料を広げるなら、雑誌のオンライン書店 Fujisan.co.jpで専門誌を読む方法もあります。
文字組みも余白設計の一部
行間、段落間、リストの間隔が不揃いだと読み手は疲れる。見出しの階層とセットでルール化する。
行間が狭く長い文章が続くと、画面全体に空白があっても読みにくい。文字サイズ、行長、改行位置と段落の余白は一体として調整する。日本語と英数字が混ざる価格表や仕様書では、行頭の揃い方にも注意が必要だ。実際の原稿で検証し、ダミーテキストだけで完成判断しない。文章量が変動する運用も想定しておきたい。
行間や段落の余白は、文字の周囲に確保される空間として文字組みと一体で考える必要があります。MDNのCSSボックスモデルに関する解説では余白を含む要素の構造が整理されており、実装時の確認にも使えます。
デザイン意図を営業資料にする
なぜ目立たせないのかを発注者に説明できれば、余白を「何もない」と評価されにくい。視線誘導の目的まで伝える。
顧客へは「おしゃれだから空けた」ではなく、情報の区分や行動までの分かりやすさを理由に説明する。修正前後を並べ、どこを一まとまりにしたか示すと判断しやすい。経営者向けの提案では、見栄えの話だけではなく、サービス比較のしやすさや問い合わせ前に読む条件との関係を明示したい。余白の調整で成果が必ず増えると断言はしない。
学んだことを仕事につなげる入口として、スキルマーケット ココナラで小さな案件から始める方法もあります。
余白を改善する手順
まずページ内で情報のまとまりを見つけ、関連項目の距離を揃える。次に見出しの前後の空白を見直し、見出しが下の本文を導いているか確かめる。その後、カードや画像の周囲を調整する。画面全体を一度に広げると情報の境界が曖昧になることがあるため、まとまりごとに評価する。異なる長さの見出しや実際の料金表も配置して崩れを確認したい。
納品時にはデザイン上の基準を簡単に残しておく。見出しを追加した場合の距離、複数行のボタンに変わった場合の高さ、画面幅が変わる場合の余白の扱いなどを記載する。運用担当者が後日更新しても一定の読みやすさを保てることが重要になる。
文字量が増えた場合の耐久性
運用担当者が見出しを少し長くしただけでカードの高さが揃わなくなる場合がある。固定されたデモ文章だけで整えるのではなく、実際の更新を想定して長文も表示する。
料金プランの欄では、注意事項の量がプランによって違うことがある。無理に同じ高さへ揃えるより、比較の軸と申込の動線が分かる構造を優先する。
余白を増やすと表示領域に入る項目が減ることもある。利用者が比較するために複数の情報を同時に見たい画面では、空ければよいという発想を避ける。
社内資料と一般向けサイトで同じ余白を採用する必要はない。利用目的と端末の違いを踏まえ、情報密度を変える判断を残す。意図のある差を、設計の不統一と混同しないようにしたい。
余白は固定された寸法の規則ではなく、情報の関係を伝えるための手段でもある。例えば、重要な申込条件とボタンを離し過ぎると、読む人がどの条件に同意する操作なのか迷う可能性がある。反対に独立した注意事項を密着させると、通常の説明と混ざりやすい。配置の前後関係を確かめながら調整したい。
仕事と売上につなげるための判断
余白の改善を商談で示すなら、感覚的な美しさではなく、関連情報のまとまりと行動導線を比較画像で説明する。デザイナーの仕事は空間を空けることではなく、読む人の判断を助ける配置を作ることだ。最終の文量が変わったときにも崩れない設計を求めたい。
出典
CTA
仕事の取り方や単価の決め方で迷ったら、HYPEへご相談ください。→ お問い合わせはこちら
※本記事にはプロモーションを含みます。
合わせて読みたい
つくる人の仕事のヒントを、週1で
新しい記事と、学び・案件のヒントをメールでお届けします。
RECOMMEND
注目のコンテンツ
