余白のリズムとは?縦方向・横方向の間隔をそろえるコツ

縦方向・横方向のリズムの基本

まずは、デザインでいう「余白のリズム」とは何か、縦方向と横方向でそれぞれどこに現れるのかを押さえましょう。

余白のリズムとは

余白のリズムとは、同じ種類の要素が並ぶときに、そのあいだの間隔が一定の規則で繰り返されることで生まれる心地よさのことです。

音楽で一定の拍子が刻まれていると聞きやすいのと同じように、デザインでも間隔が規則正しく繰り返されると、見る人は次に何が来るかを予想しながら安心して読み進められます。

反対に、同じ種類の要素なのに間隔がばらばらだと、視線が引っかかり、落ち着かない印象になります。

Webページの場合、このリズムは「縦方向」と「横方向」の2つの向きで考えると整理しやすくなります。

縦方向のリズムとは

縦方向のリズムとは、要素が上から下へ積み重なるときの間隔の規則性のことです。

Webページは上から下へスクロールして読むことが多いため、記事の一覧、お知らせのリスト、段落の並びなど、縦方向のリズムが読み心地を大きく左右します。

次の見本は、同じお知らせの一覧を、間隔だけ変えて並べたものです。

NGの見本では、2つめと3つめのあいだだけ大きく空いているため、そこで話題が切り替わるように見えてしまいます。

OKの見本のように間隔をそろえると、4つのお知らせが同じ仲間として、すっきりと読み進められます。

横方向のリズムとは

横方向のリズムとは、要素が左右に並ぶときの間隔の規則性のことです。

商品カードを横に並べた一覧、ナビゲーションメニュー(ページの上部などに並ぶリンク)、横に並んだボタンなどで、横方向のリズムが問われます。

次の見本は、同じ3枚のカードを、間隔だけ変えて横に並べたものです。

NGの見本では、間隔の違いから「1枚目と2枚目はセットで、3枚目は別物」という意味が生まれてしまっています。

横に並ぶ要素は一度に視界に入るため、縦方向よりも間隔の違いに気づかれやすい点に注意しましょう。

縦横の余白のリズムを整える方法

ここからは、縦方向・横方向のリズムを整えるための具体的な方法を見ていきます。

繰り返す要素の間隔は1つの数値に決める

リズムを作るいちばんの基本は、繰り返し並ぶ要素の間隔を、あらかじめ1つの数値に決めてしまうことです。

「お知らせ同士は12px」「カード同士は16px」のように決めておけば、要素が増えても減っても同じリズムが保たれます(同じ役割の余白に同じ数値を使う考え方は余白の間隔のルールとはで解説しています)。

ここからは、コーディングする人向けの補足です。

CSSでは、並べる側の要素にgapを指定すると、中の要素同士の間隔をまとめて同じ値にできます(MDN「gap」)。

.card-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列に並べる */
  gap: 24px 16px; /* 縦方向(行同士)24px・横方向(列同士)16px */
}

gapは値を2つ書くと、1つめが縦方向(行と行のあいだ)、2つめが横方向(列と列のあいだ)の間隔になり、1つだけ書くと縦横どちらも同じ間隔になります。
これはrow-gap(行と行のあいだ)とcolumn-gap(列と列のあいだ)をまとめて書く書き方なので、「行→列」の順と覚えておくと迷いません。

要素1つずつにmarginをつけるよりも、間隔の指定が1か所にまとまるので、リズムが崩れにくくなります。

縦と横で同じ「ものさし」を使う

縦方向と横方向の間隔は、必ずしも同じ数値でなくてかまいませんが、同じ「ものさし」から選ぶのがコツです。

ここでいうものさしとは、「余白は8px・16px・24px・32pxの中から選ぶ」のように、あらかじめ決めておいた数値の一覧のことです。

縦方向の間隔だけルールに沿って決め、横方向は感覚で決めてしまうと、縦と横で数値の系統がずれ、全体としてのリズムが崩れてしまいます。

たとえば縦の間隔を24px、横の間隔を16pxにするなら、数値は違っても、どちらも同じ一覧から選んだ数値なので、全体として統一感が保たれます。
反対に、一覧にない13pxや19pxのような思いつきの数値が混ざると、そこだけリズムが崩れます(数値の一覧の作り方は8pxグリッドとはで解説しています)。

要素の大きさもそろえる

間隔をそろえても、並んでいる要素自体の大きさがばらばらだと、リズムは乱れて見えます。

見る人は余白の数値ではなく、「要素の端から次の要素の端まで」の見た目でリズムを感じ取るためです。

次の見本は、文字の量が違う3枚のカードを、同じ12pxの間隔で並べたものです。

NGの見本は、カード同士の間隔は同じ12pxなのに、カードの下の端がそろっていないため、横のリズムが乱れて見えます。

OKの見本のように、画像の高さをそろえ、カードの高さも合わせると、間隔の規則正しさがそのまま伝わります。
カードの高さは1枚ずつ手で合わせなくても、CSSのFlexboxやGridで横に並べれば、同じ行のカードは初期設定で一番高いカードに合わせて伸びます。
Figmaのオートレイアウトでも、カードの高さを親の枠に合わせる設定にすれば、同じようにそろいます。

文字の量が大きく違う場合は、説明文を2行までにするなど、中身の量にもルールを設けるとそろえやすくなります。

区切りでは間隔をはっきり変える

リズムを整えるといっても、ページ中のすべての間隔を同じにすればよいわけではありません。

同じ仲間の要素同士は同じ間隔で繰り返し、話題が変わるところでは間隔をはっきり大きくすることで、「ここから次のまとまり」という区切りが伝わります。
たとえばカード同士が16pxなら、次のセクションまでは64pxのように、ひと目で違いが分かる差をつけます(区切りの余白の取り方はセクション間の余白とはで解説しています)。

音楽でいえば、一定の拍子の中に休符を入れて、フレーズの切れ目を作るようなものです。

なお、文章の中では、行と行のあいだ(行間)がいちばん細かい縦のリズムになります(行間の決め方は行間と行長の記事で解説しています)。

実践のポイント

縦方向・横方向のリズムを整えるときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 縦方向の間隔にはルールを当てはめているのに、横に並ぶカードやボタンの間隔は感覚で決めてしまうことがあります。
  横方向の間隔も、縦と同じものさしから選びましょう(横に並べる間隔をグリッドのガターで決める方法はグリッドと余白の関係とはで解説しています)。
• 間隔の数値はそろっているのに、要素の高さがばらばらでリズムが乱れて見えることがあります。
  画像の高さや文章の行数もそろえられないかを確かめましょう。
• リズムを意識しすぎて、セクションの区切りまで同じ間隔にしてしまうことがあります。
  区切りがなくなると、どこからが次の話題なのかが分かりにくくなります。
  同じ仲間同士は同じ間隔、区切りは大きな間隔と、使い分けましょう。

よくある質問

• Q. 縦と横の間隔は同じ数値にしたほうがいい?
  A. 同じでなくてもかまいません。
  たとえば、カードの一覧では、縦の間隔を横より少し広くとると、行の区切りが分かりやすくなることがあります。
  大切なのは、縦は縦、横は横で、同じ種類の間隔をそろえることです。
• Q. 文字を扱う記事で見かける「バーティカルリズム」と同じもの?
  A. 考え方は共通しています。
  「バーティカル(vertical)」は英語で「垂直・縦方向」という意味です。
  タイポグラフィ(文字のデザイン)の分野では、行の高さを基準にして見出しや段落の上下の余白を決め、文章全体に一定の縦のリズムを作ることを「バーティカルリズム」と呼ぶことがあります。
  この記事で紹介した縦方向のリズムは、それを文章だけでなくカードやリストなどページ全体の要素に広げた考え方です。
• Q. スマートフォンで列の数が変わったら、リズムはどうすればいい?
  A. 列の数が変わっても、要素同士の間隔は同じ数値を保つのが基本です。
  3列が1列になっても間隔の規則が同じなら、リズムは崩れません。
  画面が小さいぶん、全体の間隔を一段階小さくする場合も、すべての同じ種類の間隔を一緒に変えるようにしましょう。

まとめ

余白のリズムとは、同じ種類の要素同士の間隔を一定の規則で繰り返すことで生まれる心地よさで、縦に積み重なる要素の「縦方向のリズム」と、左右に並ぶ要素の「横方向のリズム」があります。

繰り返す要素の間隔を1つの数値に決め、縦横で同じものさしを使い、要素の大きさもそろえることで、リズムは整います。

まずはよく見るWebサイトの記事一覧や商品一覧を開き、縦と横の間隔がそれぞれ一定になっているかを確かめてみてください(余白の学び方の全体像はデザイン初心者のための余白学習ロードマップで紹介しています)。