【モジュールの余白】見出し

こんにちは！sunaです！
前回は「ボタン」モジュールの余白についてご紹介しました。

今回はサイト内で使用する頻度やデザインの自由度も高い、サイト全体の印象を左右する「見出し」モジュールの余白についてご紹介します！

見出しモジュールとは

「見出し」モジュールとは、ページ内のセクションの区切りで使用されるモジュールです。見出しレベルごとに異なるフォントサイズ・余白感を指定します。

「見出し」モジュールの余白について考えていく際のポイントは以下の通りです。

見出しモジュールの余白について考慮すべきポイント

1. コンテンツの内容と見せ方を考える
2. 見出しを使用する各セクションの関連性とまとまりを考える

たとえば、記事ページをデザインする場合は、長い文章が多くなるため、各セクションの区切りを明確にすると読みやすくなります。
記事ページの見出しの場合は、上余白は大きめに指定しましょう。

このように、コンテンツの内容によって適切な見せ方は異なります。
それぞれのコンテンツに最適な見せ方を検討し、余白を指定するようにしましょう。

また、見出しレベルの低いセクションは、それよりも高い見出しレベルのセクションに関連しているため、
h3のセクションはh2のセクションの一部であり、h4のセクションはh3のセクションの一部です。

セクションの関連性から余白の大きさを指定しましょう。

見出しモジュールの余白について

見出しレベルの高いセクションから順に大きな区切りとなるため、より高いレベルの「見出し」モジュールが大きな余白になるように数値を指定していきます。

見出しモジュールとその他のモジュールとの余白の関係について

「見出し」モジュールによるセクションの区切りは、ページ内で一番大きな情報のまとまりになります。
そのため、今までご紹介してきた「リスト」・「汎用」・「ボタン」モジュールの余白よりも、すべてのレベルの「見出し」モジュールの余白が大きくなるように指定していきましょう。

今回のまとめ

「見出し」モジュールの余白について考えるときは…

1. コンテンツの内容に応じて適切な余白を指定しよう！
2. より高いレベルの「見出し」モジュールから大きな余白を指定しよう！

「見出し」モジュールと他のモジュールの余白について考えるときは…

「見出し」モジュールの余白が、他のモジュールよりも大きな余白になるように指定しよう！

次回は「ボックス・パネル・テーブル」モジュールの余白についてご紹介します！