余白（概要）

デザインにおける余白とは、レイアウト内の要素間の空き領域やギャップを、情報伝達を明確にするために意図的に使用することを指します。

視覚的な余白はテキスト、画像、アイコン、その他のグラフィックコンポーネントなどの要素間に余裕を与えることで、デザインの視覚的なバランスと調和を生み出すのに役立ちます。

余白の機能

• 適切な余白で要素の間隔を保つことによりコンテンツの過密感を防ぎ、可読性を向上させ、ユーザーがより快適に閲覧できるようにします。
• 余白に一定のルールを持たせることで、さまざまな要素間の関係を強調したり、ユーザーの注意を主要な領域に誘導し、明確な視覚的階層を確立するのに役立ちます。
• デザイン全体で一貫したバランスの良い間隔を維持することで、統一感のあるデザインや、より使いやすいユーザー体験を実現することができます。

余白の種類

要素間の適切な余白は、情報を効果的に伝えるうえで非常に重要です。情報の明確さや可読性、視覚的なバランス、操作性など、適切な余白はさまざまなユーザー体験の向上に寄与します。

要素間の余白を形成する要素はパディング、マージン、行間隔、空白（ホワイトスペース）などがあります。

パディング

CSSボックスモデルにおいて、要素の内容自体であるコンテンツ領域に要素のパディングを含めた広がりをパディング領域といいます。コンテンツ領域の上下左右に広がるパディング領域の寸法を、上パディング（padding-top）、右パディング（padding-right）、下パディング（padding-bottom）、左パディング（padding-left）として定義できます。

パディングは、要素内の内部余白をつくるために使用され、要素全体のボックスサイズを拡大し、コンテンツをボックスの境界からの余白として確保します。これにより、テキスト、画像、および他の要素自体に余白をもたせます。ボックスモデル（box-sizing）の初期値はcontent-boxで、要素の幅（width）と高さ（height）はコンテンツ領域の幅と高さであり、要素全体のボックスサイズは、要素の幅と高さに四方のパディングを足したものとなります。

マージン

CSSボックスモデルにおいて、要素全体のボックスの外側に設定するボックスがもつ余白をマージン領域といいます。パディング領域の上下左右に広がるマージン領域の寸法を、上マージン（margin-top）、右マージン（margin-right）、下マージン（margin-bottom）、左マージン（margin-left）として定義できます。

マージンは、要素全体のボックスサイズには影響を与えませんが、ボックス間に余白をつくり、ページ全体のレイアウトに影響を与えます。また、要素間のギャップや間隔を作成することで、要素間の関係性を調整することが可能です。

余白のルールの考え方

要素内のパディングや要素間のマージンに一定のルールを与え、それを維持することで統一感のあるデザインと、一貫性があるより分かりやすい情報伝達を提供することが可能です。特に、一定のルールによる余白の取り方は、情報の階層や序列を視覚的に表現する上で非常に重要です。

• 余白の一貫性を保ち、統一感のあるレイアウトを作成します。同種の要素には同じ間隔値を使用して、視覚的な調和を確立します。
• 間隔値の絶対的な数値はありませんが、使用される間隔値に規則性を与えることは、統一感のあるレイアウトを構成する上で非常に重要です。間隔値を決定するために規則性のあるモジュラースケールや比率を使用することが多くありますが、これは、比例感とバランスを成立するのに役立ちます。
• 情報やコンテンツの階層や序列に基づいて間隔値を調整します。通常、重要な要素は注目を集めるためにより大きな間隔値を与え、重要でない要素はより小さい間隔値を与えます。
• 読みやすさと視覚的な明確さを保つため、余白を効果的に使用します。過度な間隔で要素を詰め込むのを避け、要素間に十分なスペースがあることを確認し、密集し、詰まった感じをできる限り回避します。
• レスポンシブデザインでは、異なる画面サイズやデバイスでの間隔値を考慮します。さまざまなビューポートで間隔が適切にスケーリングされ、視覚的なバランスが保たれることを確認します。

余白ルールの例

余白ルールは基準となる余白の単位を選定し、基準単位の倍率スケールからルールの範囲を決めます。一般的に利用されることの多い基準単位は8 CSS pxです。この基準単位をもとに、コンポーネントやデザインエレメントのレイアウトを検討することとなります。スタイルガイドで定義される余白スケールは、3つから5つ程度になることが多いといえます。

余白は通常コンポーネントが直接ともなっていたり、テンプレート内に定義済みとなるため、余白を単体で配置することはありません。余白スケールのトークン化は必要に応じて実施してください。

余白スケールの適用例

余白スケールは、マージンまたはパディングに適用し、レイアウトに一定のルールとしての余白ルールを提供します。下記の例では、基準単位に等倍の8 CSS px、3倍の24 CSS px、8倍の64 CSS pxという3つの余白スケールを使うという余白ルールを定めたうえで、コンポーネントを配置しています。視覚的に関係性をつくったり視認性を高めるデザインにするために、3つの異なる余白スケールを用途に応じて組み合わせています。

余白による関係性の明示

余白の大きさを適切に調整して、情報の関連性を視覚的に示すことができます。
通常、お互いに近い位置に配置された要素は関連があると見なされます。この原則を使用して、より関連性のあるコンテンツ要素には小さな余白を与え、関連性の低いコンテンツ要素には大きな余白を配置して文書構造を強調します。

この例では、画像と本文に加えて、画像自体に補足説明としてのキャプションが配置されています。左図では画像とキャプションの余白を敢えて小さく取ることで、キャプションと画像を視覚的に関連づけています。一方、右図では本文と同じ余白を与えているので、キャプションが画像を説明しているのか本文の一部なのかの判断がしにくくなっています。

余白による階層の明示

より大きい余白を持つ要素は、より小さい余白を持つ要素よりも重要度が高く見られる傾向があります。たとえば、トップレベルの見出しは、デザイン要素の大きさと比例し、周囲により多くの余白が与えられ、視覚的な焦点とその重要度を高めることができます。反対に、重要度が低くなるにつれて、見出しに与えられる余白は減少し、階層的に下位、より重要度の高い情報に従属することを示すことができます。

それぞれの見出しのフォントサイズに見合う大きさの余白を配置することで、情報の階層構造を視覚的にも構成しています。