【モジュールの余白】リスト

こんにちは！sunaです！

前回の記事では「余白についての考え方」と「コンテンツ幅」についてご紹介しました。

前回は余白を指定する際のポイントについて、

1. モジュールの余白は各モジュール同士の関係によって決まる
2. 各モジュールの余白の関係を理解して指定する必要がある

とお伝えしました。

今回は最初に、モジュール同士の関係について、
具体的に考える際のポイントをご紹介します！

モジュール同士の関係について考慮するべきポイント

1. 情報のまとまりと関連性を考える
2. 関連する情報が、ひとつのかたまりに見えるように余白を指定する

モジュールの余白を指定するうえで最も重要なことは、
“情報をわかりやすく整理し、ユーザーに認知負荷をかけないこと”です。

・どのような情報が入るモジュールなのか
・どこまでをひとかたまりとして見せると理解しやすいのか

を考えながら余白を指定しましょう。

それでは上記のポイントを踏まえて、「リスト」モジュールについて考えていきましょう！

リストモジュールについて

リストモジュールは目的に合わせて、使い分けていくことが大切です。
ここでは特に使用頻度の高い、3種類のリストについて考えていきます。

代表的なリストモジュールの種類

通常リスト…順序のないリストを表示する際に使用します
順序リスト…順序のあるリストを表示する際に使用します
注釈リスト…補足の情報を表示する際に使用します

それでは具体的にリストモジュールの余白について考えていきましょう。

※以下は個人的に情報の区切りがわかりやすいと思う余白の指定方法です。
ルールが複雑化するのを防ぐため、入れ子も同じ余白を指定する方が一般的かもしれません、、

リストモジュールの余白について

リストモジュールの余白には以下の6つの種類があります。
※ 今回は入れ子の入れ子までを想定

大きな情報のかたまりから順に書いていくと下記のようになります。

リストモジュールの余白の種類

① 親要素のli同士の余白 　
② 入れ子のul同士の余白 
③ 親要素のliと入れ子のulの余白
④ 入れ子のli同士の余白　　　　　　　　　　　　　　　　　　　　
⑤ 入れ子の入れ子のul同士の余白
⑥ 入れ子のliと入れ子の入れ子のulの余白 
⑦ 入れ子の入れ子のli同士の余白 

リストモジュールの余白の関係について

それぞれの余白の関係は以下になります。

① リストモジュールの中の最も大きな情報のかたまりは、親要素のliとなるため、情報のかたまりがわかりやすいように最も大きな余白を指定する

②,⑤ 同じレベルの要素同士が隣接していて、インデントもついていないため、④や⑦より大きな余白を指定しないと、情報のかたまりがわかりにくい

③,⑥ 親要素のli同士の余白 = 親要素のliと入れ子のulの余白
※ ① = ③, ④ = ⑥

④,⑦ 最も小さい情報のかたまりであるため、最も小さい余白を指定する

リストモジュールの余白を指定する際の注意点

・入れ子の階層が増えた場合にルールの複雑化を防ぐため、統一できる余白は統一する
（階層が深くなるときに余白が小さくなっていく等のルール指定はしない）
② = ⑤
④ = ⑦

・リストモジュールはテーブルモジュールやパネルモジュールなど、他のモジュールの中に入れて使用する場合もあるため、最も大きな余白（①）に大きすぎる余白を指定しないようにする

同じ構造のモジュールは、余白ルールを統一しましょう

余白を指定する際のデザイン指針が明確になるため、新たなモジュールを追加する場合も、迷わず余白ルールを指定することができます。

リストモジュールの場合は、通常リストと順序リストは同じ構造であるため、余白ルールは統一しましょう。

注釈リストについて

注釈リストの場合は入れ子にすると情報がさらに複雑になってしまうため、
入れ子は想定せず作成していきます。

注釈はある特定の情報を補足するための要素で、ページ上では最も小さい情報のかたまりになります。

注釈リストに関しては他のリストモジュールで指定している、最も小さい余白（④,⑦）を指定しましょう。

今回のまとめ

モジュールの関係について考えるときは…
1. 情報のかたまりと関連性を考慮し、ひとかたまりに見えるように余白を指定しよう！
2. 同じ構造のモジュールは余白ルールを統一しよう！

リストモジュールの余白を指定するときは…
1. 通常リストと順序リストの余白ルールを統一しよう！
2. 注釈リストはサイト上で最も小さい余白を指定しよう！

リストモジュールは入れ子の余白も指定する必要があり、汎用的に使用するモジュールの中で、最も小さい余白を指定します。
リストモジュールの余白を基準に、他のモジュールの余白についても考えていくとわかりやすいと思います。

次回は「汎用」モジュールの余白についてご紹介します！