コンテンツのグループ間に視覚的・意味論的な区切りを設けるUIコンポーネント。水平線（<hr>）・余白・背景色の違い・セクション見出しなど複数の手段があり、「どの手段を選ぶか」の判断基準が設計の核となる。
この記事を読むと、<hr> vs 余白による区切り・装飾用途と意味論的区切りの使い分け・role="separator" と aria-orientation・セパレーターの乱用を避ける判断基準が自分でできるようになります。
1. UI例（Preview / Live）
このセパレーターは、デザインシステム GUNJO の Separator 実装です。水平・垂直・ラベル付きの区切りと、「引きすぎない」使い分けを確認できます（右上 Code で編集可）。
実装で見る（GunjoUI）
この部品を、デザインシステム GUNJO の実装で確かめられます。
2. 定義（Definition）
コンテンツの論理的なグループ間に視覚的な区切りを設けるUIコンポーネント。実装手段は <hr>（水平線）・余白・背景色の違い・セクション見出しなど複数あり、目的と文脈によって最適な手段が変わる。
余白との違い：余白だけでも十分なグループの分離ができる場合、Separatorは不要。Separatorは「余白だけでは伝わらない」または「意味論的な区切り（<hr>）が必要な場合」にのみ使う。
セクション見出しとの違い：セクション見出し（<h2>・<h3>）は内容の階層を示す。Separatorは見出しのないグループ間の視覚的区切り。見出しがあれば Separator は基本的に不要。
3. 使い分け（When to use / When NOT to use）
3.1 When to use
- 設定画面・フォームで論理的に異なるグループを区切る（プロフィール設定 / セキュリティ設定）
- ドロップダウンメニュー・コンテキストメニューで機能グループを分ける
- 認証フォームで「メールログイン」と「ソーシャルログイン」を区切るラベル付きセパレーター
- ナビゲーションバー・フッターでインライン要素を区切る垂直セパレーター
3.2 When NOT to use
- リストのすべての項目間 → 余白または hover背景色で十分
- 見出し（
<h2>・<h3>）が既にある場合 → 見出しが区切りの役割を果たす - カードや背景色の違いで既にグループが分かれている場合 → 視覚的区切りは既に存在する
3.3 代替UI（Alternatives）
- 強い区切りが必要 → セクション見出し（
<h2>） - グループを独立させる → カード（
Card）コンポーネントで囲む - インライン区切り →
·（中点）やパイプ文字|（ただし意味論はない）
4. 設計判断の核（Decision Principles）
Separatorは「グループの境界」を示すもの——項目間の全てに線を引くと、ノイズになり区切りの意味が薄れる。
判断の優先順位：① 本当に線が必要か（余白で代替できないか）→ ② 装飾か意味論か → ③ 水平か垂直か → ④ ラベルが必要か
- 「線を引く前に余白を試す」：カードや背景色の差・十分な余白があれば、
<hr>は不要。Separatorが増えるほど画面のノイズが増える - 装飾用は
aria-hidden="true"：見た目だけの線はaria-hidden="true"を付けてスクリーンリーダーにスキップさせる。意味のある区切りは<hr>またはrole="separator"を使う - 垂直セパレーターは常に装飾用：ナビゲーションリンク間の縦線（
|）はほぼ常に装飾。aria-hidden="true"にする - 乱用禁止：同一画面内でSeparatorが3本以上続くなら、情報設計（グループ化・カード化）を先に見直す
5. 状態設計（States）
5.1 必須状態（Required）
- Default：静的な表示のみ。状態変化はない
5.2 条件付き状態（Conditional）
- ラベル付き：「または」などのテキストを中央に配置したセパレーター
- 垂直：
aria-orientation="vertical"を設定
5.3 State Gallery
| 状態 | 必須 | 何を伝えるか |
|---|---|---|
| Default（水平） | ✅ | グループ間の区切り |
| ラベル付き | — | 「または」などの選択肢分岐を示す |
| 垂直 | — | インライン要素間の区切り（装飾） |
6. バリエーション設計（Variants）
Separatorのバリアントは「向き」と「ラベルの有無」で決まる。
| バリアント | 目的 | 注意 |
|---|---|---|
| 水平（Horizontal） | セクション・グループ間の区切り | 使いすぎない |
| 垂直（Vertical） | インライン要素間の区切り | 常に装飾、aria-hidden 必須 |
| ラベル付き（Label） | 「または」などの分岐を示す | ラベルはシンプルに |
| 装飾なし（余白のみ） | 視覚ノイズを減らした区切り | 最も推奨されるアプローチ |
禁止パターン：リストのすべての項目の間にSeparatorを入れる → リスト項目の区切りはhover背景・余白で表現し、Separatorは使わない。
7. パターン集（Good / Bad / How to fix）
7.0 よく崩れる設計パターン（3つ）
- 全項目間に線：10項目のリストで9本の
<hr>が並び、コンテンツより線の方が目立つ - 見出し直後のSeparator：
<h2>の直下に<hr>を入れて二重に区切りを表現する（見出しが既に区切り役） - 垂直Separatorに意味を持たせる：
|区切りのナビゲーションリンクでaria-hiddenを付けず、スクリーンリーダーが「縦棒」と読み上げる
7.1 Bad（典型3つ）
- 設定フォームの5つの項目間に全て
<hr>を挿入し、線が項目より目立つ - ドロップダウンメニューで1項目ごとに
<hr>を入れ、グループの境界が分からない <span>|</span>の垂直区切りにaria-hiddenがなく、スクリーンリーダーが「縦棒」と読み上げる
7.2 Good（対になる3つ）
- 設定フォームを「プロフィール・セキュリティ・通知」の3グループに分け、グループ間の2箇所だけに
<hr>を使う - ドロップダウンのグループ境界にだけ
<hr role="separator">を使い、関連する項目は余白でまとめる <span aria-hidden="true">|</span>で垂直区切りをスクリーンリーダーからスキップさせる
7.3 How to fix（手順）
- 現在のSeparatorの数を数え、「グループの境界にあるか」を確認する
- 境界でないSeparatorを削除し、代わりに余白（
gap・my-*）を使う - 垂直Separatorに
aria-hidden="true"を付与する - 意味のある水平Separatorは
<hr>またはrole="separator"を使う
8. ルール（Must / Better）
Must（守らないと壊れる）
Better（品質が跳ねる）
9. アクセシビリティ要件（必須）
Keyboard
- Separatorは非インタラクティブなため、Tabフォーカスは不要
Focus
- フォーカスを当てない
Screen Reader
- 意味のある区切り：
<hr>を使う（スクリーンリーダーが「区切り線」と読み上げる） - 装飾用途のみ：
<hr aria-hidden="true">または<div aria-hidden="true">にする - 垂直Separator：常に
aria-hidden="true"にする
<!-- 意味のある水平区切り -->
<hr />
<!-- 装飾のみの水平区切り -->
<hr aria-hidden="true" />
<!-- 垂直Separator（装飾） -->
<span class="separator-vertical" aria-hidden="true"></span>
<!-- ラベル付きセパレーター -->
<div role="separator" aria-label="または">
<span aria-hidden="true">または</span>
</div>
Touch / Pointer
- 非インタラクティブなためタップ領域の考慮不要
Contrast / Readability
- Separatorの色は背景とのコントラストが低すぎず・高すぎない適度な区切り感にする（
border-gray-200/dark:border-slate-700が基準）
10. 実装メモ（Implementation Notes）
- shadcn/ui の
Separatorコンポーネントはorientation（"horizontal"/"vertical"）を持ち、role="separator"とaria-orientationを自動付与する - ラベル付きSeparatorはshadcn/uiには含まれないため、
flex items-center gap-3で左右の線とテキストを並べて実装する - TailwindCSSのみの場合、水平は
<div class="h-px bg-gray-200 dark:bg-slate-700" aria-hidden="true" />、垂直は<div class="w-px h-4 bg-gray-300 dark:bg-slate-600" aria-hidden="true" />で実装できる
11. 関連リンク
- 関連するUIデザイン原則: 視覚的階層 (Visual Hierarchy), 情報密度 (Information Density), 余白 (Whitespace)
- 用語集（定義）: 視覚的階層 (Visual Hierarchy)
- 関連するUIコンポーネント（横）: List（リスト）, Card（カード）, Accordion（アコーディオン）
12. まとめ
Separatorの設計は「本当に線が必要か」を問うことから始まります。迷ったら 4. 設計判断の核 に戻り、余白・カード・背景色の差で代替できないかを先に確認してください。「グループの境界にだけ使う」「垂直Separatorは常に aria-hidden」の2ルールを守るだけで、大半のSeparator問題は解消します。
