data-table-design

データテーブルの設計

概要

ユーザーがすばやく一覧し、比較して、判断できるデータテーブルを設計します。テーブルは、UI コンポーネントの中でも特に情報密度が高いものです。列の順序、配置、数値の書式といった小さな設計上の判断が積み重なり、使いやすさに大きな差が生まれます。このスキルでは、確立された慣例を適用し、チームが作るすべてのテーブルに一貫性と読みやすさを持たせます。

使用するタイミング

• 新しいデータテーブルやグリッドコンポーネントを設計するとき
• 既存のテーブルに使いやすさの問題がないか確認するとき
• 表形式のデータを含むダッシュボード、レポート、管理画面を作成するとき
• 列の順序、配置、書式を決めるとき
• 小さな画面に合わせてテーブルをレスポンシブにするとき
• テーブル内の数値、日付、通貨、ステータス値を書式設定するとき

手順

ステップ 1：データとコンテキストを把握する

ユーザーから次の情報を集めます（すでに提供されているものは省略します）。

1. どのデータを表示しますか？ — 列には何があり、データ型は何ですか？
2. 対象ユーザーは誰ですか？ — 素早く確認するパワーユーザーですか、それとも情報をじっくり探す一般ユーザーですか？
3. 主なタスクは何ですか？ — 値の比較、特定の行の検索、操作の実行、エクスポートのいずれですか？
4. 行数はいくつですか？ — 数十件（すべて表示）、数百件（ページネーション）、数千件（仮想スクロール）のいずれですか？
5. どこに表示しますか？ — ページ全体のテーブル、ダッシュボードウィジェット、モーダル、コンテンツへの埋め込みのいずれですか？

ステップ 2：列の順序を決める

列の順序によって、最初に目に入る情報が決まります。次の優先順位に従います。

1. 識別子を最初に配置します。 ユーザーが「どの行を見ているか」を把握できる列を一番左にします。通常は名前、タイトル、ID です。
2. 最も比較される項目を次に配置します。 行間で最も比較される列を、識別子の右隣に置きます。多くの場合、ステータス、日付、主要な指標です。
3. 数値や定量情報の列は右側に配置します。 数値は右揃えにし、テーブルの右側にまとめると読みやすくなります。これはスプレッドシートや財務レポートの形式に合致しており、左側で状況を確認し、右側で値を読み取れます。
4. 操作列は一番右に配置します。 編集、削除、表示など、行単位の操作は最後の列に置きます。ユーザーは行の末尾に操作があることを想定しています。
5. メタデータと補足情報は中央に配置します。 カテゴリー、担当者、タグなど、文脈を補足するものの主な比較対象ではない列を中央に置きます。

注文テーブルの列順の例：

| Order # | Customer | Status | Date | Items | Total | Actions |
|---------|----------|--------|------|-------|-------|---------|
  ↑ ID      ↑ Context  ↑ Key    ↑ Mid   ↑ Num   ↑ Num   ↑ Acts

ステップ 3：配置ルールを適用する

配置は、テーブル設計において最も大きな影響を与える判断です。配置が不適切だと、数値は読みづらくなり、テキストの列も揃わなくなります。

データ型	配置	理由
テキスト（名前、説明）	左揃え	自然な読み方向であり、右端が不揃いでも問題ありません
数値（件数、金額、ID）	右揃え	小数点と桁を揃えて比較できます
通貨	右揃え	小数点を揃える必要があり、小数桁数を統一します
パーセンテージ	右揃え	数値のため、比較しやすいように揃えます
日付	左揃えまたは右揃え	テキスト（「2025年3月15日」）で表示する場合は左揃え、数値（「2025-03-15」）で表示する場合は右揃え
ステータス／タグ	左揃えまたは中央揃え	バッジやピルを使用する場合は中央揃え、プレーンテキストの場合は左揃え
ブール値（はい／いいえ、チェックボックス）	中央揃え	対称的な内容は中央揃えが最適です
操作（ボタン、アイコン）	中央揃えまたは右揃え	アイコンボタンは中央揃え、テキストの操作は右揃え

重要なルール：数値は必ず右揃えにします。 これは譲れないルールです。数値を右揃えにすると、先頭の桁を見て大きさを比較できます。左揃えでは、1,234 と 12,345 を比較する際に、桁数を数える必要があります。

列見出しは、その列のデータと同じ配置にします。 データが右揃えなら、見出しも右揃えにします。これにより、列の視覚的な軸が揃います。

ステップ 4：データの書式を統一する

書式設定の詳細については、references/table-formatting.md を参照してください。主なルールは次のとおりです。

数値：

• ロケールに合った桁区切りを使用します：1,234,567（1234567 ではありません）
• 列内の小数点以下の桁数を統一します。値のひとつが 4.50 の場合、すべての値を小数点以下 2 桁で表示します
• フォントが対応している場合は、右揃えにして等幅数字または表形式の数字を使用します
• ダッシュボードでは大きな数値を省略して表示します：1.2M、$34K。ただし、ホバー時や詳細ビューでは完全な精度で表示します

通貨：

• 数値の前に記号を置き、間にスペースを入れません：$1,234.56
• 小数点以下 2 桁を使用する通貨は、常に小数点以下 2 桁で表示します
• 記号を含む文字列全体を右揃えにします

パーセンテージ：

• 数値の後に % を付け、間にスペースを入れません：42.5%
• 列内の小数点以下の桁数を統一します
• すばやく確認できるよう、数値の横に視覚的なバーやスパークラインを表示することを検討します

日付：

• テーブルごとに形式をひとつ選び、統一します
• アクティブなワークフロー内の最近の項目には相対日付（3 hours ago）を使用します
• 記録やレポートには絶対日付（Mar 15, 2025）を使用します
• ユーザーのタスクに関係する場合にのみ時刻を含めます
• アクセシビリティのため、ISO 形式の日時を指定した <time> 要素を使用します

ステータス：

• 色分けしたバッジやピルを使用します。成功／アクティブには緑、警告／保留中にはアンバー、エラー／重大には赤、非アクティブ／下書きにはグレーを使用します
• 色だけに頼らず、必ずテキストラベルを併記します（アクセシビリティ）
• アプリケーション全体でステータスの用語を統一します

NULL／空の値：

• 値がない場合は、「N/A」、空文字列、「null」ではなく、エムダッシュ — またはエンダッシュ – を使用します
• 「値なし」と「ゼロ」を区別します。— と 0 を使い分けます

ステップ 5：行の動作を設計する

密度。 データの種類と対象ユーザーに応じて選択します。

密度	行の高さ	使用場面
コンパクト	32–36px	データ量の多いテーブル、パワーユーザー向け、財務データ
デフォルト	40–48px	多くのテーブル、幅広いユーザー向け
ゆったり	52–64px	アバター、複数行のコンテンツ、またはタッチターゲットを含むテーブル

ホバー状態。 ホバー時に控えめな背景色のハイライトを表示します（ライトテーマでは background: rgba(0,0,0,0.04)、ダークテーマでは rgba(255,255,255,0.06)）。横幅の広い行で視線を追いやすくなります。

ストライプ行。 行を追うのが難しい横幅の広いテーブル（列が 6 つ以上）の場合にのみ、交互に異なる背景色を使用します。幅の狭いテーブルでは、ストライプ行が視覚的なノイズになります。

選択。 行を選択できる場合は、識別子より前の最初の列にチェックボックス列を追加します。ヘッダーのチェックボックスでは、「一部選択」の状態に不確定状態を使用します。

並べ替え。 ヘッダーに矢印アイコンを表示して、現在の並べ替え列と方向を示します。デフォルトの並べ替えは、ユーザーが最もよく行うタスクに合わせます。パワーユーザー向けに複数列での並べ替えを可能にしますが、必須にはしません。

ステップ 6：レスポンシブ時の動作に対応する

小さな画面のテーブルでは、意図的な選択が必要です。

1. 優先列。 必須の列（常に表示）と、ブレークポイントで非表示にできる列を定義します。識別子と主な指標は常に表示します。
2. 横スクロール。 データ量の多いテーブルでは、最初の列（識別子）を固定した横スクロールが最適な場合がよくあります。内容を無理に詰め込んだり、省略したりするより適しています。
3. カードレイアウト。 画面幅がしきい値（通常は < 600px）を下回る場合は、各行をラベルと値を縦に並べたカードに変換することを検討します。
4. 列の切り替え。 ユーザーが列の表示／非表示を切り替えられるようにします。選択した設定を記憶してください。

ステップ 7：レビュー用チェックリスト

仕上げる前に、以下を確認してください。

• 識別子の列が左端にある
• すべての数値列が右揃えになっている
• 列見出しの配置がデータの配置と一致している
• 数値の小数点以下の桁数と桁区切りが統一されている
• 通貨の値に通貨記号が表示され、小数点以下の桁数が統一されている
• ステータスに色とテキストラベルの両方が使われている
• null 値には空欄や「N/A」ではなく、エムダッシュが使われている
• アクション列が右端にある
• 行の密度が用途に合っている
• ホバー状態が行の追跡に役立つ
• 並べ替えが視覚的に示され、最も有用な順序がデフォルトになっている
• 小さな画面向けのレスポンシブ対応方針が定義されている
• 色のコントラストが WCAG AA を満たしている（テキストは 4.5:1、UI 要素は 3:1）

出力形式

以下のいずれか、または複数を提出してください。

• テーブルの設計仕様（列、型、配置、書式、デフォルトの並べ替え順）
• テーブル実装用のマークアップ／コード（HTML、React など）
• 既存のテーブルに対する、具体的な指摘と修正を含むレビュー

参考資料

• 例を含む完全な書式設定ガイドについては、table-formatting.md を参照してください