はじめに
- はじめて本ウェブサイトを見る方へ
- 利用上の注意事項
ガイダンス
基本デザイン
コンポーネント
リソース

余白

2024年5月30日更新

概要

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

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

余白の機能

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

余白の種類

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

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

パディング

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

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

マージン

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

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

マージンの相殺

CSSにおいて、浮動要素（float）と絶対位置指定要素（position: absolute）以外の、縦方向に並ぶボックス同士の隣接する上下のマージン領域（隣接兄弟要素の上下マージン）は相殺されます。親と子孫を隔てるコンテンツがない場合、空ブロックの場合でも同様です。

余白のルールの考え方

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

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

余白ルールの例

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

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

余白スケールの適用例

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

スクリーンショット：余白スケールの適用がされた、上から「カテゴリー」、「セクションタイトル」、「サンプルのコンテンツ文章」のテキストが配置されたレイアウトの例。カテゴリーの上には24 CSS pxの余白、カテゴリーとタイトルの間には8 CSS px の余白、タイトルと文章の間には24 CSS px の余白、文章の上には64 CSS px の余白が設定されている。

余白による関係性の明示

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

スクリーンショット：余白による関連性の例。上から「画像」、「画像のキャプションテキスト」、「本文テキスト」が並んだサンプルが2つ横並びでレイアウトされている。左図は画像と画像のキャプションテキストの余白が画像キャプションと本文の余白に比べて小さく取られている。一方、右図では画像と画像のキャプションテキストの間の余白が画像キャプションと本文の余白と同じ高さが設定されている。

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

余白による階層の明示

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

スクリーンショット：余白による階層の形成の例。見出し「階層1」から「階層4」まで、上から下に順に配置されており、それぞれの見出しの下には本文テキストが置かれている。階層が進むごとに見出しの大きさは小さくなり、見出しと本文テキストの間の余白も縮まっていることが示されている。

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

リンクテキスト: 概要余白: アクセシビリティ

アクセシビリティ

余白におけるアクセシビリティ観点での留意点について説明します。

空白や両端揃えを使ってレイアウトを調整しない

余白の種類には空白（ホワイトスペース）がありますが、これはCSSのword-spacing、letter-spacing、あるいは両端揃え（text-align: justify）によって表現されるような小さな余白のことです。

単語間のスペースによってテキストブロック内には意図せず川（タイポグラフィのリバー）が生じます。両端揃えには、標準的な両端揃えのほか、inter-word（word-spacingを変化させる）、inter-character（letter-spacingを変化させる）といった種類の設定があります。偶然に生じる分の川を回避することはできませんが、両端揃えによって川が余計に多く生じることで、認知障害のあるユーザーの多くはテキストを読むことが困難になることがあります。

日本語文字の文章は、ふつう空白で単語を区切らないため、川はあまり生じません。しかし表組のセル内や定義リストの見出し等で両端揃えをするケースはしばしば散見されます。文字と文字の間隔が大きいと、特に拡大ソフトウェアを用いるロービジョンのユーザーにとっては一つの言葉に読めないことがあるなど不都合があることにも留意してください。

なお、空白文字（全角スペース、あるいは「 」）を使って文字の位置をそろえようとする試みについては、そもそも単語が文字単位で分断されてもとの言葉の原型が失われてしまい、スクリーンリーダーでの読み上げに支障をきたします。

空白や両端揃えを使って文字の表示位置やレイアウトを調整しないようにしましょう。

参考情報

F88: 達成基準 1.4.8 の失敗例－両端揃え (左右両方のマージンを揃える) のテキストを使用している（WCAG 2.1）
F32: 達成基準 1.3.2 の失敗例－単語内の間隔を制御するために、空白文字を使用している（WCAG 2.1）

余白: 概要角の形状: 概要

リンクテキスト角の形状

デジタル庁新規タブで開きます

RSSフィード
プライバシーポリシー
ウェブアクセシビリティ