プロパティと属性システム は何をしますか？
目的
プロパティと属性システムは、単一エンティティ（例：製品仕様、不動産物件の特徴、ユーザー詳細）の「キー: 値」メタデータペアを設計・構造化するための方法論を提供します。data-table-ui-system が複数アイテムの比較を扱うのに対し、このシステムは単一オブジェクトに属する属性の内部階層と空間構成に焦点を当てます。これにより、重要なメタデータがスキャン可能で、ナラティブテキストと視覚的に区別され、さまざまなビューポート幅にわたって構造的整合性を維持することが保証されます。
ユースケース
- 製品仕様: 製品詳細ページ（PDP）で寸法、素材、技術的詳細を表示する。
- 不動産物件リスト: 物件の特徴（寝室数、浴室数、面積、築年数）を整理する。
- ユーザープロフィール: アカウントメタデータ（登録日、役割、サブスクリプションステータス）を表示する。
- トランザクション/監査ログ: 単一のイベントまたは注文の特定の属性を表示する。
- プロジェクト概要: プロジェクトメタデータをヘッダーやサイドバーに要約する。
使用すべきでない場合
- 複数アイテムの比較: ユーザーが複数行にわたって属性を比較する必要がある場合。代わりに
data-table-ui-systemを使用します。 - ナラティブコンテンツ: 長文の説明やストーリーの場合。代わりに
article-layout-systemを使用します。 - グローバルナビゲーション: サイト全体の構造の場合。代わりに
site-navigation-systemを使用します。 - インタラクティブフォーム: 主な目的がデータ入力である場合。代わりに
form-design-systemを使用します。
入力
- 属性一覧: 表示するキー（ラベル）と値（データ）のリスト。
- データ型マトリックス: 値が文字列、数値、ブール値、アイコン、リンクのいずれであるかを識別する。
- 優先順位ランキング: 「主要」（可視性が高い）属性と「副次」（詳細/非表示）属性の区別。
- レイアウトコンテキスト: これがサイドバー、メインコンテンツカラム、モーダルのどこに配置されるか。
出力
- リスト構造仕様: ラベル（キー）と値の関係の定義（サイズ、太さ、色）。
- 配置マトリックス: コンテナ幅に基づく水平スタッキングと垂直スタッキングのルール。
- グループ化戦略: 大規模な属性セットをサブセクションに分類する方法論。
- セマンティックブループリント: 属性をHTMLの説明リスト（
<dl>）構造にマッピングする。
ワークフロー
1. 属性の分類とグループ化
属性が5〜7個を超えるエンティティの場合、それらを論理的なカテゴリ（例：「寸法」「パフォーマンス」「準拠」）にグループ化します。これにより認知負荷が軽減され、ユーザーは関連する詳細にジャンプできます。
2. レイアウトパターンの選択
利用可能な水平スペースと属性密度に基づいてパターンを選択します：
- 水平（横並び）: ラベルを左に、値を右に。広いコンテナと短いラベルに最適。
- 垂直（積み重ね）: ラベルを上に、値を下に。狭いコンテナ（サイドバー、モバイル）や長い値に最適。
- グリッド（複数列）: 属性を2列または3列のグリッドに配置。「一目でわかる」高密度の統計に最適。
3. 視覚的階層の確立
「キー」と「値」を区別します：
- ラベル（キー）: ミュートカラー、小さめのフォントサイズ、またはすべて大文字スタイルを使用して、説明子であることを示します。
- 値（データ）: コントラストの高い色、太字、または大きめのサイズを使用して、実際のデータが主要な焦点となるようにします。
- 区切り: ペアを分けるために、微妙な区切り線または一貫した垂直リズム（
--space-sから--space-m）を使用します。
4. 配置とスキャン容易性の定義
- 水平配置: 横並びレイアウトの場合、ラベルを左揃えにします。ラベルの長さが大きく異なる場合は、固定幅のラベル列を検討して、値のためのきれいな垂直「軸」を作成します。
- ジャスティフィケーション: 広いコンテナでは「極端なジャスティフィケーション」（ラベルを左端、値を右端）を避けてください。目が遠くまで移動する必要があるためです。ペアを近くに保ちます。
5. レスポンシブな変形の計画
属性リストはUIの「シェイプシフター」です：
- スタックシフト: テキストの重なりや極端な折り返しを防ぐために、水平（デスクトップ）から垂直（モバイル）に移行します。
- グリッド崩壊: 複数列グリッドは、小さい画面では1列または2列に崩壊する必要があります。
判断ルール
- 「軸」ルール: 水平リストでは、値は垂直方向の配置ライン（軸）を共有する必要があります。これにより、目がデータをジャンプせずにスキャンできます。
- 空の値: 値を空白のままにしないでください。「—」または「なし」を使用して、属性がシステムエラーではなく意図的に空であることを確認します。
- アイコンの使用: 即座に意味的な区別を提供する場合にのみアイコンを使用します（例：寸法には「定規」アイコン）。明瞭さを提供せずに視覚的ノイズを追加するだけの場合はアイコンを避けてください。
- 密度ロジック: 一般的なプロフィールには「標準」密度（16pxのギャップ）を使用し、技術仕様やダッシュボードには「コンパクト」密度（8pxのギャップ）を使用します。
制約
- アクセシビリティ: セマンティックな正確さのためにHTMLの
<dl>（説明リスト）要素を使用します（<dt>をラベルに、<dd>を値に）。これにより、スクリーンリーダーがペア間の関係を伝えることが保証されます。 - コントラスト: ラベルと値の両方がWCAG AAコントラスト比（4.5:1）を満たす必要があります。ラベルが「ミュート」されていても、読みやすいままでなければなりません。
- レスポンシブ性: リストがビューポートをオーバーフローしてはなりません。テキストの折り返しは、リストの「軸」を壊さずに適切に処理する必要があります。
よくある失敗パターン
- 「値/ラベルのぼやけ」: ラベルと値の重さや色が同一になり、リストをスキャンできなくなる。
- 極端なジャスティフィケーション: 広い画面で値を右端に押しやり、ラベルから分離してしまう。
- テーブルの悪用: 単一オブジェクトの属性リストに
<table>を使用すると、不要なマークアップのオーバーヘッドが追加され、レスポンシブにスタイルを設定するのが難しくなる。 - 不整合な配置: 明確な論理的区切りなしに、同じリスト内で水平スタッキングと垂直スタッキングを混在させる。
- 空状態の欠落: プロパティを空白のままにすると、ユーザーはデータがロード中なのか単に欠落しているのか疑問に思う。
検証基準
- ラベルと値が、太さ、サイズ、または色によって視覚的に区別されている。
- 属性が
<dl>、<dt>、<dd>を使用してセマンティックにマークアップされている。 - リストがモバイルビューポートで水平スタッキングから垂直スタッキングに変換される。
- 大規模な属性セットが論理的なサブカテゴリにグループ化されている。
- 配置によってデータ値のための明確な垂直「軸」が作成されている。
- 欠落しているプロパティに対して空の状態（例：「—」）が定義されている。
- すべてのテキストのコントラスト比がWCAG AA基準を満たしている。