Sticker
Sticker は、オブジェクト（メインの情報）に対する付加的な情報を表示するコンポーネントです。
1. 概要 (Overview)
説明
ステータス、おすすめ、カテゴライズ、ハッシュタグなど、オブジェクトに対する付加的な情報を表示します。インタラクティブな Chip に対して、静的な Sticker という位置付けです。Chip と区別するため、矩形寄りの角丸としています。
リンク
2. 構成要素 (Anatomy)
付加情報を言い表すラベルテキストを、角丸のコンテナで囲んで構成します。付加情報には基本的に Value が入り、Key は入りません。表示領域への最適化のため、チェックマークなどアイコンのみで表現する柔軟性を持たせても構いません。
3. 使い分け (Usage)
いつ使うか
- 公開状態などのステータスを表示するとき
- NEW や SALE のような強調的な情報を表示するとき
- カテゴリーやハッシュタグなど、オブジェクトを分類する付加情報を表示するとき
いつ使わないか
- 絞り込みや解除などのインタラクションを受け付ける場合は Chip を使用する
- Key と Value のペアで情報を並べる場合は Description List を使用する
類似コンポーネントとの違い
- Chip: ラベルのような見た目でインタラクションを受け付けるコンポーネント。押せる感の強調のため丸く、静的な Sticker は区別のため矩形寄りの角丸とする。
4. バリエーション (Variants)
Color
色を決定します。
| Modifier class | |
|---|---|
| Informative* | .-color-informative |
| Neutral | .-color-neutral |
| Positive | .-color-positive |
| Notice | .-color-notice |
| Negative | .-color-negative |
| Attention | .-color-attention |
InformativeNeutralPositiveNoticeNegativeAttention
Appearance
外観を決定します。
| Modifier class | |
|---|---|
| Flat* | .-appearance-flat |
| Tinted | .-appearance-tinted |
| Outlined | .-appearance-outlined |
| Transparent | .-appearance-transparent |
FlatTintedOutlinedTransparent
Size
サイズを決定します。
| Modifier class | |
|---|---|
| XS | .-size-xs |
| S | .-size-s |
| M* | .-size-m |
| L | .-size-l |
| XL | .-size-xl |
XSSMLXL
Skeleton
コンテンツの読み込み中は、Sticker と同じ形状の Skeleton を表示できます。
5. ステート (States)
Sticker は静的なコンポーネントであり、インタラクションを起こさないため、固有のステートは持ちません。
6. アクセシビリティ (Accessibility)
このコンポーネント固有のチェック項目です。コントラスト・フォーカス可視化など全コンポーネント共通の原則はアクセシビリティガイドラインを参照してください。
- ステータスなどの意味を色だけで伝えず、ラベルテキストでも伝える
- アイコンのみで表現する場合は代替テキストを設定する
7. ライティング (Writing)
- ラベルには付加情報の Value（「公開」「下書き」など）を入れ、Key（「ステータス:」など）は入れない
- ラベルは表示領域を圧迫しない簡潔なテキストにする
- NEW や SALE のような強調的な情報は乱用せず、本当に強調すべき場合に限って用いる