縦方向のリズムと横方向のリズムとは？読みやすく整ったUIを作るレイアウト設計を徹底解説

縦方向のリズムと横方向のリズムは、利用者インターフェースの整然さ、読みやすさ、情報の見つけやすさを支える基本的なレイアウト設計です。縦方向のリズムは、行間、段落間隔、見出し前後、カードの上下余白、セクション間隔など、画面を上から下へ読み進める際に繰り返される間隔の規則を表します。横方向のリズムは、列幅、左右余白、要素間隔、グリッド、文字列の整列、ボタン群の配置など、画面を左から右へ見たり比較したりするときの規則を表します。

画面内の各要素を個別に美しく整えても、縦横の間隔に共通性がなければ、全体として落ち着かない印象になります。ある見出しの下は24ピクセル、別の見出しの下は27ピクセル、似たカードの左右余白が画面ごとに異なると、利用者は意識していなくても構造を把握しにくくなります。逆に、一定の基準から間隔を組み立てると、利用者は繰り返される規則を自然に学習し、どこからどこまでが一つの情報なのか、どの要素が同じ階層なのかを素早く理解できます。

リズム設計は、すべてを同じ間隔にすることではありません。関連する情報は近づけ、異なる情報群は離し、重要な見出しには十分な空間を与え、比較する項目は同じ列へそろえる必要があります。つまり、良いリズムとは均一さではなく、意味に応じた差を一貫した規則で表現することです。本記事では、文字組み、カード、フォーム、一覧、グリッド、レスポンシブ対応、アクセシビリティ、デザインシステム、CSS実装まで、縦方向と横方向のリズムを体系的に解説します。

1. 縦方向のリズムと横方向のリズムとは

縦方向と横方向のリズムは、画面内に繰り返し現れる配置、間隔、整列の規則です。単に余白を一定値へそろえることではなく、情報の関係と利用者の視線移動を、一貫した視覚パターンとして表現することを意味します。

1.1 縦方向のリズムとは

縦方向のリズムとは、画面を上から下へ進むときに現れる高さと間隔の繰り返しです。本文の行間、段落と段落の間、見出しの前後、フォーム項目の上下、カード内の情報配置、セクションの区切りなどが含まれます。これらが共通の基準に基づいていれば、内容量が多い画面でも読み進める速度を維持しやすくなります。

縦方向のリズムが崩れると、関連する文章が離れすぎたり、別のセクションが近づきすぎたりし、情報の所属関係が分かりにくくなります。利用者は余白を一つずつ測るわけではありませんが、繰り返される間隔の差から内容の階層を判断しています。そのため、縦方向のリズムは視覚的な整然さだけでなく、情報構造を読み取るための重要な手掛かりになります。

1.2 横方向のリズムとは

横方向のリズムとは、左右方向に並ぶ要素の幅、間隔、開始位置、終了位置を整える規則です。画面の左右余白、列幅、グリッドの列と溝、アイコンと文字の間隔、ボタン群、表の列、カードの横並びなどが含まれます。横方向の規則が一貫していると、利用者は同じ位置にある情報を素早く比較できます。

例えば、一覧内の名称、状態、日付、金額が行ごとに異なる位置へずれていると、利用者は各行を個別に読み直さなければなりません。列をそろえるだけで、同じ種類の情報を縦に追えるようになり、比較速度が大きく向上します。横方向のリズムは、美しい整列を作るだけでなく、探索、比較、操作を効率化する仕組みです。

1.3 リズムは繰り返しから生まれる

一つのカード内だけ余白が整っていても、画面全体で同じ規則が繰り返されなければ、リズムとして認識されません。見出しと本文の間隔、フォームラベルと入力欄の間隔、カード内の余白など、同じ意味を持つ関係に同じ間隔を使うことで、視覚的な繰り返しが生まれます。

繰り返しは、すべての部品を同じ形にすることではありません。同じ役割には同じ規則、異なる役割には予測可能な差を与えることです。例えば、同じ階層の見出しは同じ上下間隔を持ち、上位見出しはより大きな前余白を持つといった階層的な繰り返しが、自然なリズムを作ります。

1.4 リズムと情報階層の関係

情報階層は、文字サイズや太さだけでなく、周囲の空間によっても示されます。大きな見出しでも、前後の間隔が本文と同じであれば、セクションの開始として認識しにくくなります。反対に、小さな補助文でも、周囲に大きすぎる空間があると、重要な独立情報のように見える可能性があります。

縦方向では、上位階層ほど大きな区切りを持たせ、下位階層ほど関連内容へ近づける方法が有効です。横方向では、同じ階層の要素を同じ開始位置へそろえ、補助情報を少し内側へ配置するなど、位置によって親子関係を示せます。リズムは情報階層を補強するために使う必要があります。

1.5 リズムは視覚だけの問題ではない

レイアウトリズムは、画面を美しく見せるだけでなく、利用者の作業速度、理解度、誤操作へ影響します。入力欄の間隔が狭すぎれば、どの説明がどの欄に属するか分かりにくくなり、ボタン同士が近すぎれば誤って別の操作を実行する可能性があります。

また、一定のリズムは実装と保守にも役立ちます。画面ごとに個別の余白を作るのではなく、共通の間隔変数やグリッド規則を使えば、変更を製品全体へ反映しやすくなります。リズムは視覚品質、操作品質、開発効率をつなぐ基盤です。

2. 縦方向のリズムと横方向のリズムの違い

縦方向と横方向のリズムは互いに関係していますが、解決する問題と利用者の視線移動が異なります。どちらか一方だけを整えても、画面全体の読みやすさと操作性は完成しません。

2.1 視線移動の違い

縦方向のリズムは、文章やセクションを上から下へ読み進める視線を支えます。どこで一つの話題が終わり、次の話題が始まるのかを、上下の間隔によって伝えます。長いページ、記事、フォーム、設定画面では特に重要です。

横方向のリズムは、同じ行にある複数の情報を見たり、列方向に比較したりする視線を支えます。表、ダッシュボード、カード列、ツールバーなどでは、開始位置と列幅が一貫していることで、視線が迷いにくくなります。

2.2 基準単位の違い

縦方向のリズムでは、本文の行送りや基本間隔を基準にする方法があります。例えば本文の行送りを24ピクセルとし、段落間隔を24、見出し前を48など、その倍数で設計すると、画面全体に共通する縦の拍が生まれます。

横方向のリズムでは、列数、画面左右の余白、列間の溝、最小部品幅などが基準になります。12列グリッド、8ピクセルの間隔体系、最大コンテンツ幅などを組み合わせ、画面幅が変わっても横方向の関係を維持します。

2.3 情報関係の示し方の違い

縦方向では、近い要素を同じまとまり、遠い要素を別のまとまりとして見せます。ラベルと入力欄は近づけ、次のフォーム項目との間は広げることで、どの情報が属しているかを理解しやすくします。

横方向では、同じ開始位置、同じ列、左右の近接によって関係を示します。アイコンとラベルを近づけ、別の操作との間を広げることで、どの記号がどの文字に関係しているかを伝えます。

2.4 レスポンシブ変化の違い

縦方向のリズムは、画面幅が変わっても比較的維持しやすい一方、文字が折り返されることで要素の高さが変わります。そのため、固定高さに依存せず、内容量に応じて自然に伸びる設計が必要です。

横方向のリズムは、画面幅の影響を直接受けます。広い画面では複数列、狭い画面では一列へ変えるなど、構造そのものが変化します。横方向の規則をそのまま縮小するのではなく、列数、余白、並び方向を切り替える必要があります。

2.5 品質評価の違い

縦方向のリズムは、ページを上から下へ眺めたときに、間隔の繰り返しが自然か、セクション境界が理解できるかで評価できます。文字だけの状態へしても、読み順とまとまりが分かるかを確認すると有効です。

横方向のリズムは、整列線を引いたときに主要要素が共通位置へそろっているか、同じ種類の情報を素早く比較できるかで評価できます。左右反転、長い翻訳文、狭い画面でも規則が維持されるかを確認します。

3. 縦方向のリズムがUXへ与える影響

縦方向のリズムは、ページを読む速度、内容の理解、現在位置の把握、疲労感へ影響します。特に長い文章や複雑なフォームでは、上下の間隔が利用者体験を大きく左右します。

3.1 読み進める速度を安定させる

本文の行間と段落間隔が一貫していると、利用者は次の行や次の段落へ視線を移しやすくなります。行間が場所によって変化すると、文章の流れが途中で止まり、どこまで読んだかを見失いやすくなります。

良い縦方向のリズムでは、本文、見出し、補足、引用がそれぞれ予測可能な間隔を持ちます。利用者は内容を読むことへ集中でき、レイアウトの変化を毎回解釈する必要がありません。長い記事や説明画面では、リズムの安定が読了率にも関係します。

3.2 情報の所属関係を伝える

見出しの下に本文が近く配置され、次の見出しとの間により大きな空間があれば、本文がどの見出しへ属するかを理解しやすくなります。これは近いものを同じグループとして認識する視覚的な性質を利用した設計です。

反対に、見出しの上と下が同じ間隔だと、見出しが前の段落に属するのか、次の段落に属するのか曖昧になります。一般的には見出しの前を広く、後を狭くすると、次の内容との結び付きが強くなります。縦方向の間隔は情報関係を直接伝えます。

3.3 長い画面の疲労を減らす

情報が密集しすぎる画面では、利用者は常にどこを読んでいるか確認しなければならず、視覚的な疲労が高まります。適切な行間とセクション間隔があれば、一定の区切りで休息でき、内容をまとまりとして処理できます。

ただし、余白を増やしすぎるとスクロール量が増え、関連情報を同時に見られなくなります。疲労を減らすためには、すべてを広げるのではなく、本文内は安定した密度を保ち、意味の変わる場所にだけ十分な空間を与えることが重要です。

3.4 スクロール位置を理解しやすくする

長いページでは、セクションの開始と終了が明確であるほど、利用者は現在どこを読んでいるか把握しやすくなります。見出し前の空間、背景の切り替え、セクション内の一定したリズムが、ページ内の位置情報として機能します。

すべての要素が同じ間隔で連続していると、画面が終わりのない情報列に見えます。重要な区切りへ大きな間隔を設定し、繰り返しの単位を作ることで、利用者はページを章や部分として記憶できます。

3.5 操作ミスを減らす

フォームや設定画面では、ボタン、入力欄、説明文の上下間隔が操作ミスへ影響します。ある入力欄のエラー文が次の入力欄に近すぎると、どの項目の問題か誤解する可能性があります。

主要操作と危険な操作の間にも十分な縦間隔が必要です。削除ボタンが保存ボタンの直下へ狭く配置されていると、タッチ操作で誤って押す危険が高まります。縦方向のリズムは読みやすさだけでなく、安全な操作間隔を作るためにも使われます。

4. 横方向のリズムがUXへ与える影響

横方向のリズムは、画面内の探索、比較、視線移動、操作の発見へ影響します。特に一覧、表、ダッシュボード、複数列レイアウトでは、横方向の整列が作業効率を大きく変えます。

4.1 情報を比較しやすくする

同じ種類の情報が同じ列へそろっていると、利用者は各行を全文読まなくても、必要な列だけを縦方向に追えます。価格、日付、状態などを比較する場面では、この整列が作業速度を大きく向上させます。

カード形式でも、画像、タイトル、価格、操作の開始位置をそろえると、複数カードを比較しやすくなります。内容の長さが異なっても、主要要素の基準線を共通化することで、視線が左右へ大きく揺れることを防げます。

4.2 操作位置を予測しやすくする

一覧内の編集、削除、詳細操作が毎回同じ位置にあれば、利用者はラベルを読み直さずに操作できます。業務画面では、操作位置の一貫性が繰り返し作業の速度へ直接影響します。

ただし、重要度の異なる操作を同じ列へ密集させる場合は、誤操作へ注意が必要です。主要操作、補助操作、危険操作を視覚的に区別しながら、位置規則は維持します。予測可能性と安全性の両方を設計します。

4.3 画面の中心と余白を安定させる

左右余白がページごとに異なると、画面遷移のたびに内容の開始位置が変わり、製品全体が不安定に見えます。共通のコンテンツ幅と左右余白を設定すると、利用者は画面の構造を学習しやすくなります。

広い画面で内容を端から端まで広げると、一行が長くなりすぎたり、関連情報が遠く離れたりします。最大幅を設定し、内容を中央または適切な基準線へ配置することで、横方向のリズムと可読性を維持できます。

4.4 グループ関係を示す

アイコンと文字、ラベルと値、ボタンと補足説明など、関係する要素を横方向へ近づけることで、一つの組として理解しやすくなります。別の操作群との間を広げることで、グループの境界も示せます。

ツールバーで、保存と元に戻す操作を近づけ、表示設定との間を広げれば、機能群の違いを視覚的に示せます。横方向の間隔は単なる均等配置ではなく、操作の分類を伝える役割を持ちます。

4.5 画面幅の変化へ適応しやすくする

横方向の規則がグリッドとして定義されていれば、画面幅が変わったときにも列数や幅を体系的に変更できます。広い画面では4列、標準画面では3列、狭い画面では1列など、同じ部品を無理なく再配置できます。

個別の固定座標で作られた画面は、少し幅が変わるだけで要素が重なったり、不均等な余白が生じたりします。横方向のリズムは、レスポンシブ設計の柔軟性を支える構造でもあります。

5. 文字組みと縦方向のリズム

文字は縦方向のリズムを作る最も基本的な要素です。本文の行送り、見出し、段落、リスト、注釈を一貫した体系で設計することで、文章量が多くても読みやすさを維持できます。

5.1 行送りを基準にする

行送りとは、文字の基準線から次の行の基準線までの距離です。文字サイズだけでなく、行送りが読みやすさを大きく左右します。行送りが狭すぎると上下の行が密集し、広すぎると同じ段落としてのまとまりが弱くなります。

本文の行送りを縦方向の基本単位として利用すると、段落間隔、リスト項目、見出し周辺の余白を体系化しやすくなります。例えば本文の行送りが24ピクセルなら、段落間隔を24、セクション間隔を48など、倍数関係を作れます。

5.2 段落間隔を行間と区別する

段落間隔が行間とほとんど同じだと、どこで段落が変わったか分かりにくくなります。反対に大きすぎると、同じ話題の文章が別のセクションのように分離して見えます。

本文の内容、行の長さ、文字サイズに応じて、段落間隔を行送りの一部または一倍程度に設定します。すべての文章へ同じ値を使うのではなく、記事本文、カード説明、補助文など、用途ごとに密度を調整します。

5.3 見出し前後の余白を設計する

見出しは前の内容から区切り、次の内容へ結び付ける必要があります。そのため、一般的には見出しの前余白を後余白より大きくします。これにより、見出しが次の本文の開始を示すことが分かりやすくなります。

見出し階層ごとに余白を変える場合も、無数の値を使わず、基本単位の倍数から選びます。大見出しは大きな区切り、小見出しは小さな区切りとして表現し、文字サイズと余白の両方で階層を示します。

5.4 リストのリズムを整える

箇条書きでは、項目内の複数行と、項目同士の間隔を区別する必要があります。項目間隔が狭すぎると、どこまでが一つの項目か分かりにくくなり、広すぎると同じリストとしてのまとまりが失われます。

番号や記号の位置、本文の開始位置、複数行時の折り返しもそろえます。縦方向の間隔だけでなく、横方向のインデントを一貫させることで、リスト全体のリズムが安定します。

5.5 注釈と補助文を本文へ結び付ける

注釈や補助文は、説明対象へ近づける必要があります。入力欄の説明が本文と同じ間隔で離れていると、どの要素を説明しているか分かりにくくなります。

補助文の文字サイズを小さくするだけでなく、対象との縦間隔を小さくし、次の要素との間を広げます。文字階層と空間階層を一致させることで、情報関係を明確にできます。

6. 文字組みと横方向のリズム

横方向の文字組みでは、行幅、左揃え、数値の整列、ラベルと値の関係が重要です。文章の一行が長すぎたり、開始位置が不統一だったりすると、読む速度と比較効率が低下します。

6.1 適切な行幅を保つ

広い画面で本文を端から端まで表示すると、一行が長くなり、次の行の開始位置を見失いやすくなります。読み物では、画面幅すべてを使うのではなく、適切な最大行幅を設定することが重要です。

一方、行幅が狭すぎると改行が増え、ページが縦に長くなります。日本語では単語間の空白が少ないため、英語とは異なる折り返し特性もあります。実際の文字量と端末で確認し、読みやすい幅を決めます。

6.2 左端をそろえる

見出し、本文、リスト、画像説明などの左端が少しずつずれていると、画面が不安定に見えます。意図的なインデントでない限り、主要な文章要素は共通の開始位置へそろえます。

カード内でも、タイトル、説明、ボタンの左端をそろえると、内部構造を理解しやすくなります。中央揃えを多用すると文字量の違いによって左右端が変化するため、長文や複数項目では左揃えの方が安定します。

6.3 数値を比較しやすくする

価格、件数、日付などを一覧表示する場合、右揃えや桁の整列を利用すると比較しやすくなります。数値の開始位置をそろえるより、末尾または小数点位置をそろえた方が大小を判断しやすい場合があります。

数値と単位を分離しすぎると関係が弱くなるため、適切な間隔で近づけます。通貨記号、パーセント、単位の位置も一覧全体で統一します。横方向のリズムは数値理解へ直接影響します。

6.4 ラベルと値の列を設計する

設定、プロフィール、概要画面では、ラベル列と値列を分けることで情報を比較しやすくできます。ただし、ラベルが長い場合に値列が狭くなりすぎないよう、固定幅と可変幅の関係を考える必要があります。

狭い画面では、ラベルと値を上下配置へ変更する方が読みやすくなります。デスクトップの二列構成をそのまま縮小せず、横方向の余裕がなくなった時点で縦方向へ再構成します。

6.5 中央揃えを限定して使う

中央揃えは、短いタイトル、空状態、完了画面など、単一メッセージへ注意を集めたい場面に向いています。しかし、長文や複数行の項目では、各行の開始位置が変わるため読み進めにくくなります。

複数のカードを中央揃えにする場合も、文字量の違いによって視覚的な中心がずれることがあります。中央揃えを装飾として広く使わず、情報構造と利用目的に合う場面へ限定します。

7. 余白尺度とリズム

一貫したリズムを作るには、画面ごとに自由な余白値を選ぶのではなく、少数の間隔尺度を用意することが有効です。尺度は規則を作るための道具であり、すべてを機械的に同じ間隔へするものではありません。

7.1 基本単位を決める

多くのデザインシステムでは、4ピクセルまたは8ピクセルなどの基本単位を使い、その倍数で余白を構成します。基本単位を持つことで、5、7、11、13ピクセルのような近い値が無秩序に増えることを防げます。

ただし、文字の行送りや境界線など、すべてを基本単位の整数倍にできるとは限りません。重要なのは数値を完全にそろえることではなく、主要な間隔を少数の規則へ集約することです。

7.2 意味に応じた間隔名を作る

8pxや16pxだけで管理すると、どの場面でどの値を使うべきか判断しにくくなります。関連要素間、部品内、セクション間など、意味に基づく名前を付けると利用しやすくなります。

実装上では数値変数を使いながら、設計資料では用途を明確にします。例えば、小間隔はアイコンと文字、中間隔はフォーム項目内、大間隔はセクション間というように、利用例を共有します。

7.3 等比的な尺度を検討する

間隔尺度を4、8、12、16のような等差で増やす方法と、4、8、16、32のように大きさの差を広げる方法があります。小さな関係差と大きなセクション差を明確にしたい場合、後者の方が階層を作りやすいことがあります。

ただし、極端に間隔差が大きいと、中間的な関係を表現できなくなります。製品の情報密度と部品種類に合わせ、必要な段階数を決めます。段階を増やしすぎないことも重要です。

7.4 例外を管理する

写真、図表、ブランドロゴ、特殊な操作部品では、標準間隔だけでは不自然になる場合があります。例外を完全に禁止すると、内容の特性を無視した画面になります。

例外を使う場合は、理由を記録し、近い既存変数で代替できないか確認します。画面ごとの感覚調整を増やさず、再利用可能な新しい規則として追加する価値があるかを判断します。

7.5 光学的な調整を認める

数値上は中央でも、アイコンの形や文字の重心によってずれて見えることがあります。この場合、数値を完全に均等にするより、視覚的に均等に見えるよう微調整する必要があります。

ただし、光学調整を理由にすべての余白を個別変更すると、体系が崩れます。アイコン部品、文字部品など共通コンポーネント内で調整し、画面担当者が毎回修正しなくてもよい仕組みにします。

8. 基準線グリッドと縦方向のリズム

基準線グリッドは、文字の基準線や行送りを共通の縦方向単位へ合わせる考え方です。印刷物で広く使われてきましたが、ウェブやアプリでも文字と部品の高さを整えるための参考になります。

8.1 基準線を使う目的

複数列に異なる文字サイズの文章がある場合、行の位置が少しずつずれると、横方向に見たとき不安定になります。基準線グリッドへ合わせることで、異なる列でも行のリズムをそろえられます。

ただし、すべての文字を厳密に同じ基準線へ置くことが目的ではありません。本文、見出し、注釈など異なる行送りを、共通単位の倍数として整えることで、全体の縦方向リズムを安定させます。

8.2 本文行送りから設計する

本文は画面内で最も繰り返される要素であるため、その行送りを基準にする方法があります。本文が24ピクセルの行送りなら、画像下の説明、カードの最小高さ、段落間隔などを24の一部または倍数で設計できます。

この方法によって、文章量が異なるカードでも、一定の高さ単位へ収まりやすくなります。ただし、文字サイズ変更や翻訳で行数が変わるため、固定高さを強制しないことが重要です。

8.3 見出しをグリッドへ合わせる

見出しの文字サイズが大きい場合、行送りも本文とは異なります。見出しの高さと前後余白を合計し、本文の基準単位へ戻るように設計すると、次の本文が共通の縦位置へ戻りやすくなります。

厳密な数学的整合より、見出しと本文の関係が自然に見えることを優先します。日本語の文字は上下の空間が均等に見えない場合もあるため、実際の書体で確認します。

8.4 画像と部品を基準へ合わせる

画像、アイコン、ボタンなどの高さも、基準単位の倍数へ近づけると、周囲の文章と整いやすくなります。例えばボタン高さ48ピクセル、カード内余白24ピクセルなど、本文行送りとの関係を作れます。

ただし、操作領域や画像比率を犠牲にして基準線へ合わせてはいけません。リズムは利用者体験を改善するための手段であり、必要な操作サイズや内容表示を制限する規則ではありません。

8.5 可変文字サイズへの対応

利用者が文字サイズを拡大すると、行送りと要素高さが変わり、固定された基準線グリッドは維持できなくなります。アクセシビリティを優先し、グリッドから外れても内容が読める設計にする必要があります。

実装では、固定ピクセルより相対単位を利用し、文字拡大に合わせて余白も適度に増える仕組みを検討します。基準線は標準表示の品質を高める参考とし、利用者設定を制限するものにしないことが重要です。

CSS実装例：本文の行送りを基準にした縦間隔

:root {  --rhythm-unit: 0.5rem;  --space-1: calc(var(--rhythm-unit) * 1);  --space-2: calc(var(--rhythm-unit) * 2);  --space-3: calc(var(--rhythm-unit) * 3);  --space-4: calc(var(--rhythm-unit) * 4);  --space-6: calc(var(--rhythm-unit) * 6); } .article {  font-size: 1rem;  line-height: 1.5; } .article p {  margin-block: 0 var(--space-3); } .article h2 {  margin-block: var(--space-6) var(--space-2); }

9. グリッドと横方向のリズム

グリッドは、画面を列と溝へ分け、要素の開始位置と幅を共通化する仕組みです。横方向のリズムを安定させ、複数画面や複数端末で一貫したレイアウトを作るために役立ちます。

9.1 列数を目的から決める

12列グリッドは柔軟性が高く広く使われていますが、すべての製品で12列が必要なわけではありません。単純な記事ページなら1列または少数列、管理画面ならより細かな列分割が必要になる場合があります。

列数は流行ではなく、配置する情報単位と画面幅から決めます。カードを何列表示するか、サイドバーと本文の比率をどうするか、主要操作がどの幅を必要とするかを確認します。

9.2 列間の溝を設計する

列と列の間の溝は、隣接する情報を分ける役割を持ちます。溝が狭すぎると別列の内容が一つの行として見え、広すぎると関連情報が離れすぎます。

画面幅が狭くなった場合、列幅だけでなく溝も調整できます。ただし、すべてを比例縮小すると操作領域が不足するため、一定以下では列数を減らす方が安全です。

9.3 外側余白を統一する

コンテンツの左右外側余白は、画面全体の安定感を作ります。同じ製品内でページごとに24、30、40ピクセルと変化すると、主要情報の開始位置が揺れて見えます。

端末ごとに異なる外側余白を定義することはできますが、同じ表示条件では共通化します。狭い画面では必要な操作領域を残しつつ余白を縮め、広い画面では最大コンテンツ幅と組み合わせます。

9.4 列をまたぐ要素を管理する

見出し、画像、表、主要カードなどは、複数列をまたぐ場合があります。無計画に幅を変えると、横方向の開始位置と終了位置が増え、画面が複雑になります。

代表的な幅の組み合わせを定義し、同じ種類の部品では同じ列数を使用します。例えば通常カードは4列、主要カードは8列、全幅通知は12列など、役割と幅を結び付けます。

9.5 グリッドから外す場合を決める

背景画像、装飾、全幅セクションなど、グリッド外へ広げたい要素もあります。すべてを列内へ閉じ込めると、画面が単調になる場合があります。

グリッド外へ出す場合も、内部の文字や操作は主要コンテンツの開始位置へ戻すと、読みやすさを維持できます。背景は全幅、内容はグリッド内という構成が有効です。

CSS実装例：列と溝を持つグリッド

.layout-grid {  display: grid;  grid-template-columns: repeat(12, minmax(0, 1fr));  gap: 1.5rem;  width: min(100% - 3rem, 75rem);  margin-inline: auto; } .card--small {  grid-column: span 4; } .card--large {  grid-column: span 8; } @media (max-width: 48rem) {  .layout-grid {    grid-template-columns: 1fr;    width: min(100% - 2rem, 100%);  }  .card--small,  .card--large {    grid-column: auto;  } }

10. カードとリズム

カードは、縦方向と横方向の両方のリズムが同時に現れる部品です。外側の並びだけでなく、内部の文字、画像、操作の位置を整える必要があります。

10.1 カード内部の縦リズム

カード内では、画像、タイトル、説明、補助情報、ボタンの順序と間隔を一貫させます。同じ種類のカードで間隔が異なると、内容の重要度が違うように見える可能性があります。

タイトルと説明は近づけ、説明と操作の間は少し広げるなど、意味に応じた間隔階層を作ります。内容量が少ないカードでも、無理に固定高さへ合わせるための大きな空白を作らないよう注意します。

10.2 カード列の横リズム

複数カードを横に並べる場合、幅、列間隔、画像比率を統一します。カード幅が少しずつ異なると、一覧全体が不安定に見えます。

横方向の間隔は、カード内部の余白より大きくすることで、各カードの独立性を示せます。内部要素と外部要素の間隔を同じにすると、カード境界が弱くなる場合があります。

10.3 高さをそろえる判断

カードの高さをそろえると、横並びが整って見えますが、内容量の少ないカードへ大きな空白が生じる場合があります。比較と一覧性を優先する画面では、高さをそろえる価値があります。

一方、記事や検索結果のように内容量が大きく異なる場合は、自然な高さを許可した方が情報効率が高くなります。高さをそろえる場合も、説明文を不自然に切り捨てないようにします。

10.4 操作位置をそろえる

カード内の主要ボタンを下部へそろえると、複数カードから同じ操作を選びやすくなります。特に料金プランや商品比較では有効です。

ただし、ボタンを下へ固定するために内容と操作の間へ大きな空白が生じる場合があります。カード全体の高さ、説明量、比較目的を考慮し、必要な画面に限定します。

10.5 小画面での縦積み

小画面では複数列カードを一列へ変更します。このとき、横方向のカード間隔が縦方向のセクション間隔へ変わるため、同じ数値をそのまま使うと広すぎたり狭すぎたりする場合があります。

カードが縦に連続する場合は、一覧としてのまとまりを保ちながら、各カードの境界を認識できる間隔へ調整します。画面幅だけでなく、並び方向が変わったことを考慮します。

11. フォームとリズム

フォームでは、縦横のリズムが入力速度、エラー理解、操作ミスへ直接影響します。ラベル、入力欄、説明、エラー、ボタンの関係を一貫した間隔で表現する必要があります。

11.1 一つの入力項目をまとめる

ラベル、入力欄、補足説明、エラーは、一つの項目として近く配置します。次の入力項目との間は、それらの内部間隔より広くします。

すべての縦間隔が同じだと、どの説明がどの入力欄に属するか分かりません。項目内と項目間で明確な差を作ることが、フォームの縦方向リズムで最も重要です。

11.2 二列フォームを慎重に使う

氏名の姓と名、都道府県と郵便番号など、強く関連する短い入力は横並びにできます。しかし、項目数が多いフォームを二列にすると、読み順とTabキーの順序が分かりにくくなる場合があります。

横並びにする場合は、関連性、入力長、画面幅を確認します。狭い画面では必ず一列へ戻し、ラベルと入力欄の関係を維持します。

11.3 エラー表示でリズムを壊さない

エラー文が表示されると、入力項目の高さが変わり、下の項目が移動します。これは必要な変化ですが、画面全体が大きく跳ねると現在位置を見失う可能性があります。

エラー領域を一定量確保する方法もありますが、すべての項目へ空白を作ると密度が下がります。短いアニメーション、エラー概要、フォーカス移動などを組み合わせ、変化を理解しやすくします。

11.4 ボタン群の配置を整える

送信、戻る、キャンセルなどのボタンは、フォーム本文との間に十分な縦余白を設けます。最後の入力欄と送信ボタンが近すぎると、入力途中の操作と確定操作の境界が弱くなります。

横方向では、主要ボタンと二次ボタンの順序と間隔を一貫させます。危険な操作を同じボタン群へ入れる場合は、より大きな間隔または別領域へ分けます。

11.5 長いフォームをセクション化する

多数の入力項目を一続きに並べると、利用者は現在どの種類の情報を入力しているか分からなくなります。住所、支払い、確認など、意味のあるセクションへ分けます。

セクション間は大きな縦余白、内部項目は中程度の余白を使い、繰り返し可能なリズムを作ります。見出しや進行表示も同じグリッドへそろえ、画面全体の横方向リズムを維持します。

12. レスポンシブ設計とリズム

レスポンシブ設計では、画面を縮小するだけでなく、縦横のリズムを新しい表示条件へ適応させます。広い画面の横方向構造を、狭い画面では縦方向構造へ変換する場面が多くあります。

12.1 列から縦積みへ変換する

広い画面で横並びだったカード、フォーム、比較項目は、狭い画面では縦積みへ変更します。このとき、横の溝がそのまま縦間隔になるとは限りません。

横並びでは24ピクセルの溝が適切でも、縦積みで24ピクセルではカード同士が近すぎる場合があります。並び方向ごとに、関係を維持できる間隔を設定します。

12.2 外側余白を段階的に変える

広い画面では十分な左右余白と最大幅を使い、狭い画面では内容領域を確保するため余白を縮めます。突然大きく変えるのではなく、画面幅の段階に応じて調整します。

ただし、最小余白を削りすぎると文字や操作が画面端へ近づき、読みづらくなります。安全領域、タッチ操作、端末形状も考慮します。

12.3 文字折り返しによる高さ変化

画面幅が狭くなると、見出し、ボタン、カード説明が複数行になり、縦方向の高さが増えます。固定高さを使うと内容が切れたり、重なったりします。

文字量に応じて高さが自然に伸びる設計にし、伸びた後も前後の縦間隔が維持されるようにします。横方向の変更が縦方向のリズムへ与える影響を確認します。

12.4 ナビゲーション形式を変える

デスクトップの横並びナビゲーションを狭い画面へそのまま縮小すると、項目が読めなくなります。メニュー、下部ナビゲーション、横スクロールなど別形式へ変更する必要があります。

形式が変わっても、主要領域の順序と選択状態は維持します。横方向のリズムを失っても、縦方向の情報階層へ変換して同じ構造を理解できるようにします。

12.5 端末ごとに密度を調整する

スマートフォンではタッチ操作領域が必要なため、デスクトップより部品間隔を大きくする場合があります。一方、一画面に表示できる情報量は少ないため、装飾的な余白を減らす必要もあります。

単純にすべてを大きくするのではなく、操作領域は確保し、セクション間の過剰な空白やカード装飾は減らすなど、密度の優先順位を調整します。

13. アクセシビリティとリズム

縦横のリズムは、低視力、認知特性、運動機能、画面拡大、キーボード操作など、多様な利用条件へ影響します。一貫した配置は、特定の利用者だけでなくすべての人の理解を支えます。

13.1 十分な行間を確保する

行間が狭い文章は、低視力や読字に困難がある利用者にとって特に読みづらくなります。文字拡大時にも、行が重ならず明確に分離される必要があります。

ただし、極端に広い行間は同じ段落のまとまりを弱くします。文字サイズ、行幅、書体に合わせ、複数の設定で確認します。

13.2 文字拡大でリズムを維持する

利用者が文字サイズを拡大すると、行数と部品高さが増えます。固定高さや固定位置へ依存したレイアウトでは、内容が切れたり操作が隠れたりします。

相対単位と自動レイアウトを利用し、文字拡大に合わせて縦方向の間隔も適切に変化させます。標準時の厳密な基準線より、内容を失わないことを優先します。

13.3 フォーカス順序と視覚順序を一致させる

横方向へ複雑に配置した画面で、キーボードフォーカスが視覚上とは異なる順序で移動すると、現在位置を追いにくくなります。CSSで見た目だけ並べ替える場合は特に注意が必要です。

自然な文書順序を基礎とし、視覚的な横並びと操作順序を一致させます。レスポンシブで縦積みへ変わった場合も、読み順とフォーカス順序が自然であることを確認します。

13.4 操作部品の間隔を確保する

ボタンやリンクが上下左右に密集すると、タッチやスイッチ操作で誤って別の要素を選ぶ可能性があります。視覚的な間隔だけでなく、実際の操作領域の間にも十分な距離を設けます。

特に危険な操作は、主要操作から離します。リズムを整えるために均等配置した結果、危険な操作まで近づけないようにします。

13.5 認知負荷を減らす

一貫したリズムは、利用者が新しい画面ごとに配置規則を学び直す負担を減らします。見出し、説明、入力欄、ボタンが毎回同じ順序と間隔で現れれば、内容へ集中しやすくなります。

逆に、装飾的な理由で画面ごとに位置や余白を大きく変えると、同じ機能でも別の操作に見えます。認知負荷を減らすためには、製品全体で予測可能な縦横の規則を維持することが重要です。

14. デザインシステムと実装

縦方向と横方向のリズムを製品全体で維持するには、デザインシステムへ間隔、グリッド、文字、部品規則を組み込む必要があります。数値一覧だけでなく、用途と例外も共有します。

14.1 間隔変数を定義する

小、中、大といった少数の間隔変数を用意し、設計ツールとコードで共通利用します。数値を直接入力する回数を減らすことで、画面ごとの微妙なずれを防げます。

変数名は単なる番号でもよいですが、利用例を資料へ示します。アイコンと文字、カード内余白、フォーム項目間、セクション間など、代表的な用途を明確にします。

14.2 文字スタイルへ行送りを含める

文字サイズだけをデザイン変数へ登録し、行送りを担当者任せにすると、同じ本文スタイルでも画面ごとに高さが変わります。文字スタイルには行送り、太さ、文字間隔を含めます。

見出しと本文の前後余白は文字スタイルそのものへ含めるか、レイアウトパターンとして別管理します。どちらの場合も、利用者が毎回数値を考えなくてよい仕組みにします。

14.3 グリッド変数を共有する

列数、溝、外側余白、最大幅を端末区分ごとに定義します。デザインツールのレイアウトグリッドと、CSSのグリッド設定を対応させます。

画面ごとに異なる列構成が必要な場合でも、共通の外側余白と列基準を利用します。例外的な全幅要素についても、内部内容がどのグリッドへ戻るかを定義します。

14.4 自動レイアウトを活用する

デザインツールと実装の両方で、内容量に応じて自動的に伸びるレイアウトを使います。固定座標で要素を配置すると、文字変更や翻訳でリズムが崩れます。

カード、フォーム、ボタン群などを、間隔変数と方向を持つコンテナとして設計します。内容が追加されても、共通間隔が維持される構造を作ります。

14.5 リズムの禁止例を示す

デザインシステムには、5、7、11ピクセルなど近い値を無計画に使う、関連要素と無関係要素を同じ間隔にする、横並びを無理に狭い画面へ残すなど、避けるべき例を掲載します。

禁止理由と代替方法を示すことで、担当者は新しい画面でも判断を応用できます。単に「8ピクセル単位を守る」だけでは、意味に合わない均一な画面になる可能性があります。

CSS実装例：間隔変数と共通スタック

:root {  --space-xs: 0.25rem;  --space-sm: 0.5rem;  --space-md: 1rem;  --space-lg: 1.5rem;  --space-xl: 2rem;  --space-2xl: 3rem; } .stack {  display: flex;  flex-direction: column; } .stack[data-gap="sm"] {  gap: var(--space-sm); } .stack[data-gap="md"] {  gap: var(--space-md); } .stack[data-gap="lg"] {  gap: var(--space-lg); }

CSS実装例：横方向の配置部品

.cluster {  display: flex;  flex-wrap: wrap;  align-items: center;  gap: var(--space-md); } .cluster[data-justify="between"] {  justify-content: space-between; }

CSS実装例：読みやすい本文幅

.reading-column {  width: min(100%, 68ch);  margin-inline: auto;  padding-inline: var(--space-lg); }

15. リズムのテストと改善

縦横のリズムは、デザイナーが整っていると感じるかだけでは評価できません。利用者が情報を理解し、操作を見つけ、比較し、長時間作業できるかを確認する必要があります。

15.1 余白を非表示にして構造を見る

画面を単色や線だけで表示し、見出し、本文、カード、操作の開始位置と間隔を確認します。色や画像の魅力を一時的に外すことで、構造上のずれを見つけやすくなります。

整列線を引き、同じ役割の要素が共通位置へそろっているかを確認します。数ピクセルの差をすべて修正するのではなく、意味のないずれを減らします。

15.2 読み順を観察する

利用者へ画面を見せ、どこから読み始め、次にどこへ移動したかを観察します。意図した情報階層と実際の視線順序が一致しているかを確認します。

重要な見出しが飛ばされる、関連しないカードを同じグループとして認識する場合は、縦間隔や横位置を見直します。余白の美しさではなく、理解の順序を評価します。

15.3 比較作業の速度を測る

一覧や表では、「最も高い金額を見つける」「期限が近い項目を選ぶ」などの作業を行ってもらい、発見時間と誤りを測定します。

列位置や行間を変更した複数案を比較すると、横方向のリズムが作業効率へ与える影響を確認できます。見た目が整っていても比較しにくい案は採用すべきではありません。

15.4 異なる内容量で確認する

短い文字、長い文字、空状態、エラー、翻訳、大きな文字サイズなど、内容量が変化した状態でリズムを確認します。標準的な短い文言だけで作られた画面は、実際のデータで崩れる可能性があります。

カード高さ、ボタン幅、列位置が変わった後も、関連情報と別情報の間隔差が維持されるか確認します。リズムは固定寸法ではなく、変化に耐える関係として設計する必要があります。

15.5 判断基準を記録する

最終的に採用した行送り、段落間隔、グリッド、左右余白について、数値だけでなく理由を記録します。「本文の読みやすさ」「カード比較」「タッチ操作」など、利用目的と結び付けます。

この記録をデザインシステムへ戻せば、新しい画面でも同じ判断を再利用できます。リズム設計は一度完成させる作業ではなく、製品と利用者の変化に合わせて継続的に改善する必要があります。

縦方向と横方向のリズムを評価するときは、デザインデータだけではなく実際の内容と端末を使用します。特に文章量、翻訳、入力エラー、動的なカード数など、理想的な静止画では発生しない条件を再現することが重要です。内容の変化によってすぐ崩れる規則は、実用的なリズムとは言えません。

また、リズムの問題が複数画面で繰り返される場合は、個別画面を修正するのではなく、文字スタイル、間隔変数、カード部品、フォームパターン、グリッド設定を見直します。共通資産を修正することで、製品全体の一貫性を効率的に高められます。

おわりに

縦方向のリズムと横方向のリズムは、画面を美しく整えるためだけの装飾規則ではありません。縦方向のリズムは、行間、段落、見出し、フォーム項目、セクションの関係を整理し、利用者が上から下へ迷わず読み進めるために役立ちます。横方向のリズムは、列幅、左右余白、要素間隔、整列を安定させ、情報の比較と操作位置の予測を支えます。

良いリズムは、すべてを同じ間隔へそろえることではありません。関連する情報は近づけ、異なる情報は離し、同じ役割の要素は共通位置へそろえます。小さい間隔、中間隔、大きい間隔を意味に応じて使い分け、文字、カード、フォーム、グリッドの規則を一つの体系として設計する必要があります。

最終的には、間隔変数、文字スタイル、列グリッド、自動レイアウトをデザインシステムへ組み込み、内容量、画面幅、文字拡大、翻訳、エラー状態でもリズムが維持されるか検証することが重要です。数値を機械的に守るのではなく、利用者が情報を理解し、比較し、操作できるかを基準にすることで、読みやすく、保守しやすく、一貫した利用者インターフェースを作ることができます。