ガイドライン

Anatomy: 解剖図

| Item | Name | Description | Component | Optional |
|---|---|---|---|---|
| 1 | Divider | HTML hr エレメント | — |
Options: 選択肢
Style
Solid (default)
通常状態のディバイダーのスタイルです。

Dashed
破線表現のディバイダーです。
通常よりも強度が弱くなるため、関連性が強い要素同士や、コンテキストが類似している要素を分割するために使用します。

Direction
Horizontal (default)
横方向に伸びるスタイルのディバイダーです。縦並びの要素を分ける際に使用します。

Vertical
縦方向に伸びるスタイルのディバイダーです。横並びの要素を分ける際に使用します。

Emphasis
Low
通常よりも強度が弱い配色のディバイダーです。
関連性が強い要素同士を分割する場合に使用します。

Middle (default)
ディバイダーのデフォルトの配色です。
ミドルが最も使用されるスタイルです。他のスタイルのディバイダーはミドルを基準に使用します。

High
最も強度が強いディバイダーのスタイルです。
要素同士を強く分割して文脈を切り替えるために使用します。使用は極力控えてください。

Metrics: 寸法
- Vertical Resizing: Fixed
- Horizontal Resizing: Fixed
- Alignment: Bottom left

Usage: 使い方

Do
ディバイダーは、コンテンツの文脈に沿って適切なグループ単位に使用します。

Don’t
過剰にディバイダーを使用しないでください。視覚的なノイズとなり、情報を把握しづらくなることがあります。

Don’t
要素同士の区切りをディバイダーで表現する際は、最後の要素のディバイダーは配置しないでください。
Change log: 変更履歴
| Date | Changes |
|---|---|
| 2025/8/15 | ドキュメントを公開 |
| 2023/10/14 | Figmaを公開 |
小さな気づきや違和感があれば、
お気軽に教えてください。
フィードバック