この記事について
WEBデザインにおいて、余白は重要な役割を果たします。適切な余白を設けることで、コンテンツがより見やすく、読みやすくなり、ユーザー体験が向上します。この記事は余白についてのガイドラインを記していますので、パターン作成時に確認してください。
多くのユーザーは貼り付けてそのまま使うので、微妙な状態でリリースすると、微妙なページが世の中に量産されて、なおかつ「ベクトルのテーマ・パターンはデザイン微妙」というイメージが一層定着して覆すのが非常に困難になるので、常に2ランク上を目指して美しいページを増やしましょう。
L
余白の基本的なルール
S
| XS | 通常の段落余白よりも小さいケース |
| S | ブロック間の余白（p要素余白） |
| M | ブロックコンポーネント間の余白 |
| L | セクションの最初と最後の余白 |
| XL | コンテンツエリアとフッターの余白など（コンテンツのパターンでは使う事はほぼないはず） |
S
上記の表のサイズのスペーサーを入れれば良いのではなく、余白がこのサイズになるようにしてください。
余白は必ずスペーサーで配置しなければいけないわけではなく、ブロックの余白機能でも間違いではないのですが、スペーサーを配置したのに、スペーサーの前後のブロックの余白が加算された状態にならないようにしてください。
L
L
Lが小さいんだよ！と思った場合
S
もし現状の L サイズなどの規定サイズよりも全体的に大きくしたい など、変更したい場合（特定の一箇所だけイレギュラーな値にしたい場合は除く）、手入力で高さを指定したブロックを沢山配置するのではなく、各スペーサーに割り当てられている CSS 変数の値を カスタムHTMLブロックなどを使って上書き指定する事をまず検討してください。
L
L
正しい余白の状態の例
XS
タイトルの下にサブテキストをつけたい場合 line-height で余白がつくので基本余白は入れない。
ただし、サブテキストが２行以上になるようなケースは、補足・装飾ではなく「段落」になるので、S あるいは XS をいれるのが適切になる。
M
S or XS
About Lightning
S or XS
Lightning（無料）はWeb制作の専門知識がなくても簡単にビジネスサイトが作成できるように設計されたWordPressテーマです。
S or XS
About Lightning
S or XS
Lightning（無料）はWeb制作の専門知識がなくても簡単にビジネスサイトが作成できるように設計されたWordPressテーマです。
S or XS
About Lightning
S or XS
Lightning（無料）はWeb制作の専門知識がなくても簡単にビジネスサイトが作成できるように設計されたWordPressテーマです。
S or XS
About Lightning
S or XS
Lightning（無料）はWeb制作の専門知識がなくても簡単にビジネスサイトが作成できるように設計されたWordPressテーマです。
M
S or XS
About Lightning
S or XS
Lightning（無料）はWeb制作の専門知識がなくても簡単にビジネスサイトが作成できるように設計されたWordPressテーマです。
S or XS
About Lightning
S or XS
Lightning（無料）はWeb制作の専門知識がなくても簡単にビジネスサイトが作成できるように設計されたWordPressテーマです。
S or XS
About Lightning
S or XS
Lightning（無料）はWeb制作の専門知識がなくても簡単にビジネスサイトが作成できるように設計されたWordPressテーマです。
S or XS
About Lightning
S or XS
Lightning（無料）はWeb制作の専門知識がなくても簡単にビジネスサイトが作成できるように設計されたWordPressテーマです。
L
L
NG例 : セクションブロックに余白がついている
S
セクション（グループブロックやカバーブロック）に背景色をつけると自動的に padding が入ってしまい、このセクション内の L サイズのスペーサーにさらに余白が加算される事になる。
L
L
NG例 : スペーサー の上下のブロックの余白が加算されている
S
Lightning では段落やカラムブロックは S 相当の margin-bottom が自動的につくようになっている。そのため、その下に配置したスペーサーの余白設定が、margin-top なら相殺されるが、 height の設定になっていると余白が加算されてしまう。そうならない（加算されずに大きい方のマージンが適用される）ように、レスポンシブスペーサーのデフォルトは margin-top に なっています。
スペーサーの上のブロックに不要な margin-bottom がある場合は、そのブロックの 余白を 0 に指定してください。
※ X-T9はスペーサーの上下の要素は自動的に余白がなくなる指定にしてますが、Lightning は仕様変更すると既存サイトへの影響が大きいので…。
L
L
NG例 : 情報のグルーピングと余白が合致していない
M
悪い例
XS
料金について
M
料金についての案内文です。これは「料金について」という見出しと同じ情報グループになるはずです。
しかし、見出しの「悪い例」と「料金について」の間の余白の方が小さくなっており、その２つで一つの情報グループだと間違った印象を与えるとともに、メリハリのバランスがおかしい状態になります。
正しい例
M
料金について
S
料金についての案内文です。これは「料金について」という見出しと同じ情報グループです。
「正しい例」と「料金について」の余白は広めになっており、「料金について」とこの文章の余白の方が小さいので、関連している情報だという印象を伝えられます。
L
L
同じ情報グループ外と同じ情報グループ内の余白
XS
“情報グループの外の余白” は “情報グループ内の要素間の余白のサイズ” よりも大きくする事（最低でも同じ）を徹底してください。徹底 オブ 徹底 オブ 徹底 でよろしくお願いいたします。
L