ux-tables について
データの形や量、行に対する操作に応じたテーブルとリストの設計を支援する UX スキルです。スキャンしやすさに加え、ソート、密度、ページネーション、アクセシビリティ確認を扱います。
主な機能
- 01データとタスクに応じたテーブル／リストの選択
- 02テキストと数値の配置および形式の統一
- 03ソート、選択、行アクションの設計
- 04データ量に応じた密度とページネーションの選択
- 05オーバーフローとローディング状態の定義
- 06ユーザビリティ、アクセシビリティ、文言の監査への引き継ぎ
活用シーン
- 01大量データ向けのソート可能なテーブル設計
- 02検索結果リストの検索・絞り込み方法の選択
- 03テーブルの行密度とページネーションの計画
- 04テーブルとリストのアクセシビリティ構造の確認
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/ux-tablesを入力して読み込まれたか確認します。
詳細
テーブルとリストのスキル
このスキルの動作（最初にお読みください）
これは生成型のスキルです。デフォルトの失敗パターンは、データよりも装飾（重い罫線、何もかも縞模様、中央揃えのテキスト、混在した書式）、操作機能の欠如（並べ替えもカスタマイズもできない — 実際のデータ量では致命的）、そして密度の極端さ（窮屈な 32px 行、または無駄の多い余白）です。テーブルの唯一の役割は、ユーザーがデータをスキャンし、比較し、操作できるようにすることであり、あらゆる視覚的な選択はそれに貢献するか、それと対立するかのどちらかです。このスキルは次をゲートします。
- データの形とタスクを明確にする — 2 次元的な比較（テーブル）か 1 次元的なスキャン（リスト）か、データ量、そしてユーザーが行に対して何をするか。
- 常に当てはまる核心を適用する — 配置のルール、階層、書式、インタラクションの状態。
- 文脈依存の判断（密度、ページネーションの種類、カスタマイズ、リストのバリエーション）をトレードオフとともに明らかにする。
その後、検証のために ux-heuristics-audit、ux-accessibility-audit、ux-aesthetics-audit、ux-microcopy-audit に引き継ぎます。
ステップ 0 — 設計の前に文脈を明確にする
不明な場合は尋ねてください。回答なしで進める場合は前提を明言してください。
- テーブルかリストか？ 列をまたいだ複数属性の比較 → テーブル。1 行につき 1 項目を線形にスキャンする（メール、検索結果、設定） → リスト。シンプルなテーブルの内容はリストとして読むほうがよく、リストのほうがスクリーンリーダーのユーザーにとって扱いやすいです。
- データ量と増加 — 数十行なら仕組みは何も不要です。数千行なら並べ替え、絞り込み、ページネーション、1 ページあたりの件数、検索が必要です。
- ユーザーは行に対して何をするか？ 読み取り専用、単一行の操作（インラインの ⋮ メニュー）、一括操作（複数選択チェックボックス）、または編集 — それぞれが固有の UI を追加します。
- 密度の許容度 — データ密度の高い運用ツール（詰めた 40px 行）か、消費者向けの快適さ（標準 48px / ゆったり 56px）か。
常に適用する核心（ほぼすべてのケースで正しい）
配置と書式（誰もが破る暗黙のルール）
- テキストは左揃え（LTR）、読み方向に合わせます。
- 数値は右揃え、等幅数字（tabular figures）で — これが数値の列をひと目で比較できるようにします。
- 1 列につき 1 つの一貫した書式 — 「22.04.2018」の隣に「4.6.2018」を決して置かないこと。日付、通貨、単位の書式は全体で統一します。
- 読みやすいサンセリフ書体を使用し、列の余白はスキャン、比較、編集が快適にできる幅にします。
ノイズのない階層
- ヘッダーは見た目にはっきり区別（太さ、やや暗い背景）しますが、主張しすぎません。空のヘッダーセルは決して作らないこと — 左上のセルも含みます。
- 罫線は最後の手段です。 最小限の線は、何もかもグリッドにするより優れています。水平の区切り線は行間が詰まっている場合か、テーブルが非常に長い場合のみ。縞模様は幅が広く密度の高いデータセットに。
- オーバーフローは明示的に処理します。 省略記号＋全文のツールチップで切り詰める、列の幅を変更可能にする、または列を非表示／並べ替え可能にします。
インタラクション（これを絵ではなくツールにするもの）
- 意味のあるすべての列で並べ替え — アルファベット順、数値、日付、昇順／降順。データ量が多い場合は譲れません。
- 行にホバー状態と選択状態を — これがないと、ユーザーは均一な行の中で現在位置を見失います。
- 行の操作はホバーするまで非表示（またはインラインの ⋮ メニューの背後 —
ux-menusを参照）。一括操作のチェックボックスは常に表示し、選択時に対象の一括操作を表示します。 - テーブルの上にツールバーを配置し、データがそれを正当化する場合は検索、絞り込み、エクスポート、印刷を提供します。
- リンクはリンクに見えるように — 認識できるスタイル、本文テキストと区別、ホバーのフィードバック。
リスト：構造と読み込み
- コンテンツから型を決める： 単一行（名前、設定）→ 複数行（メール：送信者 + 件名 + プレビュー）→ リッチ（メディア + アクション）→ 画像リスト（ギャラリー）→ ネスト（階層、明確なインデント付き）→ 順序が重要な場合のみ番号付き。
- 縦は横に勝る — 視線移動が少なく、自然にスクロールできます。横並びのリストは、スクロールしない短いセットにのみ使用します。
- キーラインの整列： テキストとアイコンは見えない縦のガイドラインに揃えます。サムネイルは左、コントロール要素（チェックボックス、メニュー）は右、テキストは画像に対して垂直方向に中央揃えにします。
- 項目が 3 行以上にわたる場合は区切り線（メール形式）。サムネイル付きのリストではインデントされた区切り線、それ以外は余白を使用します。
- 読み込み：スケルトンスクリーンを上から下へ順次表示 — 全画面のスピナーは使用しません。
状況に応じた判断（表面化させ、自動適用しない）
| 判断項目 | 適用する場合 | 避ける／適応させる場合 | 既定の推奨 |
|---|---|---|---|
| 行の密度 | 全体を一度に把握することが重要な場合（運用、トレーディング）はコンデンス（40px） | カジュアルな閲覧でのコンデンス（疲労） | レギュラー 48px。消費者向けの快適さにはリラックス 56px |
| ページネーション vs. 無限スクロール vs.「もっと読み込む」 | ページネーション：再発見しやすさ、レポート、位置の把握。無限：娯楽的なフィード。手動の「もっと読み込む」：閲覧 + コントロール | ユーザーが行を再発見したり引用したりする必要がある場合の無限スクロール | データ作業にはページネーション + 1 ページあたりの項目数コントロール。「もっと読み込む」は中間の選択肢 |
| ゼブラストライプ | 長い行をまたいで視線が移動する幅広のテーブル | 幅の狭いテーブル（視覚的なノイズ） | まずはプレーンな行 + ホバー状態。幅が広い場合にゼブラ |
| 列のカスタマイズ | パワーユーザー、多数の列（リサイズ、非表示、並べ替え） | シンプルな固定テーブル（オーバーヘッド） | 6～8 列を超える場合、または多様なユーザー層に提供 |
| ツールバー（検索／フィルター／エクスポート） | 実際のデータ量がある場合。繰り返しの検索タスク | 20 行のテーブル（煩雑） | データ量の要求に応じて機能を追加 |
| リスト vs. グリッド表示の切り替え | 閲覧スタイルが混在する場合、ビジュアル + 仕様のコンテンツ | 明らかに一方が適切な場合 | 適した方を既定に。多様なユーザー層には切り替えを提供（結果ページについては ux-search を参照） |
| 検索可能／フィルター可能なリスト | 長いリスト（連絡先、カタログ） | 短いリスト | 走査が即座にできなくなったら上部に検索バー |
| シンプル vs. 複雑なテーブル構造 | セルの結合や複数レベルのヘッダーは、データが本当にそれを必要とする場合のみ | スクリーンリーダーも認知も複雑な構造には苦労します | 複雑なテーブルはシンプルなものに分割。ヘッダーは 1 レベルに |
結果を検証する（オーケストレーション）
引き継ぎでは、各レンズをインストール可能なスキルの
nameで指定します。そのスキルがインストールされている場合にのみ呼び出してください。インストールされていない場合でも、このスキル自体のコアにこれらのルールがすでに含まれているため、ブロックせずにそのまま進めてください。
生成または修正した後は、完了と宣言するのではなく、結果を監査レンズに引き継いでください。これらは候補レンズです。姿勢は docs/orchestration-policy.md で設定するか、全体を ux-design-review 経由でルーティングします。ここでは、heuristics と microcopy は Tier A（自動実行）、accessibility、aesthetics、mobile-responsiveness は Tier B（提案） です。既存のデザインシステムの下では aesthetics は抑制され、accessibility は利用状況に絞り込まれます。mobile-responsiveness はモバイルの場合にのみ適用されます。ユーザーがこのスキルを特定の目的で呼び出した場合は、そのスコープを尊重してください。
ux-heuristics-audit(Tier A) — 状態の可視性（並べ替え方向、選択）、ユーザーによる制御（カスタマイズ、1 ページあたりの項目数）、フォーマットの一貫性。ux-accessibility-audit(Tier B — 提案。デザインシステムの下では絞り込み) — セマンティック構造（実際の<table>、<th>+ scope、キャプション。リストにはリストマークアップ）、ヘッダーの完全性、比例幅、リンクのコントラスト — 支援技術はこのスキルが指定するマークアップに依存します。ux-aesthetics-audit(Tier B — 提案。デザインシステムの下では抑制) — 罫線/ゼブラの抑制、密度のリズム、整列の規律。ux-microcopy-audit(Tier A) — ヘッダーラベルの明瞭さと簡潔さ、空の状態とツールバーの文言。ux-mobile-responsiveness-audit(Tier B — 提案。モバイルの場合にのみ適用) — コンテキストがモバイルの場合: レスポンシブなリストの適応、列の折りたたみ戦略。
監査で矛盾が浮かび上がった場合（例: ブランドのスタイリングとスキャンしやすさ）、主要なタスクに立ち返って解決してください。ユーザーは比較して見つけるために来ているのであって、スキャンを遅くする装飾は欠陥です。
よくある do/don't パターン
| ❌ しない | ✅ する |
|---|---|
| すべてを中央揃えにする | テキストは左揃え、数値は表形式の数字で右揃え |
| 同じ列に「22.04.2018」と「4.6.2018」 | 列ごとに 1 つの一貫したフォーマット |
| すべてのセルに完全なグリッド罫線 | 最小限の線。区切り線/ゼブラはそれが価値を持つ場合のみ |
| 並べ替えのない大きなテーブル | 並べ替え可能な列、一定量を超えたらツールバー |
| 均一な行、ホバー/選択状態なし | ホバー + 選択状態で、ユーザーが現在位置を見失わないようにする |
| すべての行を散らかすアクションボタン | ホバーで表示されるアクション / インライン ⋮。一括操作用に表示されるチェックボックス |
| セルのテキストが黙って切り取られる | 省略記号 + ツールチップ。サイズ変更/非表示可能な列 |
| 財務レポートでの無限スクロール | ページネーション + 1 ページあたりの項目数。再発見しやすさが優先 |
| 結合セルと二段ヘッダー | シンプルな構造。テーブルを分割 |
| リストの読み込み中に全画面スピナー | 順次スケルトンローディング |
| テーブルによるレイアウト、ヘッダーのないデータテーブル | セマンティックマークアップ — 実際のヘッダー、キャプション（→ アクセシビリティ） |
| 確認せずに出荷 | heuristics + accessibility + aesthetics + microcopy に引き継ぐ |