data-display-and-selection

データの表示と選択

複雑なデータコレクション（商品、ファイル、ユーザー、注文、タスクなど）に、唯一の正しい表示方法はありません。タスクによって適した表示方法は異なります。閲覧にはグリッドが適しており、詳細の比較にはリストやテーブルが適しています。一括管理には、一括操作ができる高密度なテーブルが適しています。ユーザーが選べるようにしましょう。

---

表示モード

データに視覚的な側面と詳細な側面の両方がある場合は、複数の表示方法を用意します。

表示	最適な用途	デフォルトにする場合
グリッド	商品、画像、ファイル、カードなどの視覚的なアイテム	アイテムごとの見た目がはっきり異なり、閲覧が主なタスクである場合
リスト	タスク、メール、記事などの中程度の詳細情報	テキストやメタデータの重要な項目をもとに選択する場合
テーブル	注文、レポート、ユーザー管理などの高密度なデータ	複数のデータ列を比較する必要がある場合

表示切り替えの配置： コレクションの右上、並べ替え／フィルター操作の隣に配置します。ツールチップ付きのアイコンボタン（grid、list、table）を使います。ユーザーの選択をlocalStorageに保存します。

[Filter ▾]  [Sort ▾]          [⊞ Grid]  [☰ List]  [⊟ Table]

モバイルでは、コンテンツに最適な表示に切り替えます。視覚的なアイテムにはグリッド、テキストにはリストを使います。両方の表示が本当に使いやすい場合を除き、小さい画面では表示切り替えを用意しないでください。

アイテムが6つほどを超えたら、カードではなくテーブルにする

カードの枠線が役立つのは、読者が並べて比較する少数のアイテムを囲む場合です。ページ上に15個の枠線を繰り返し並べても、何も区切られません。すべての行が囲まれているため、枠線には情報がなく、読者はノイズのせいで読みづらくなります。

アイテムがだいたい6つを超えたら、テーブルに切り替えます。 行の間には水平線を引くか、しま模様にします。側面と外側の枠線はすべてなくします。ページ自体の列幅で既に範囲が定まっているリストでは、垂直の境界線に役割はありません。線が必要になるずっと前から、視線は近接性や配置の整列によって情報をグループ化します。

例外は、行では表現できないものを含むカードです。 画像、チャート、アイテムごとの操作セット、折り返しが必要な本文などは、数にかかわらずカードのままにします。枠線が行を区切るのではなく、ひとつの構成をまとめているからです。商品グリッド、ギャラリー、ダッシュボードタイルのセットは、このルールの対象外です。判断基準は、枠線が何を囲んでいるかです。テキストと値の一行を囲んでいるなら、テーブルの行に装飾を加えているだけです。レイアウトを囲んでいるなら、それはカードです。

次に、枠線が担っているように見せていた強調をヘッダーに持たせます。太字にする、小さめの大文字にして文字間隔を広げる、背景を暗くするなどの方法があります。読者がリスト内をどれだけ移動する必要があるかに応じて選びます。長い参照テーブルでは、スキャンの起点となるヘッダーが必要です。短いテーブルなら、最初の列で十分な場合もあります。

---

選択：大きなヒット領域を優先する

チェックボックスは小さなターゲットです。行を選択するために16×16pxのチェックボックスをクリックさせるのは、不要な操作上の負担です。特にタッチデバイスではその負担が大きくなります。

デフォルトでは、行またはカード全体を選択対象にします。

• 行のどこかをクリック → 行を選択します（背景が変わり、チェックボックスにチェックが入ります）
• チェックボックスは選択状態を視覚的に示すものであり、選択する唯一の方法ではありません
• キーボード操作：フォーカス中の行はSpaceキーで選択し、Shift+クリックで選択範囲を広げ、Ctrl/Cmd+クリックで個々のアイテムの選択を切り替えます

.row {
  cursor: pointer;
  background: var(--color-surface);
  transition: background 100ms ease-out;
}
.row:hover {
  background: var(--color-grey-50);
}
.row.selected {
  background: var(--color-primary-subtle); /* subtle brand tint */
}

グリッド内のカードでは、選択範囲はカード全体です。隅にあるチェックボックスだけではありません。

---

選択状態の視覚表現

選択したアイテムの状態は、チェックマークだけでなく、背景色の変化でも示します。

背景： --color-primary-subtle。ブランドのプライマリーカラーを大きく彩度を落として明るくし、不透明度を約5～8％にします。認識できる程度にしつつ、目立ちすぎないようにします。

左側のアクセント（任意）： --color-primaryの3pxの左ボーダーを付けると、リストやテーブルの行で選択状態をさらに強調できます。

チェックボックス： チェックを入れ、--color-primaryで塗りつぶします。チェックボックスは補助的なサインであり、主要なサインではありません。

.row.selected {
  background: var(--color-primary-subtle);    /* e.g. hsl(224, 21%, 94%) */
  border-left: 3px solid var(--color-primary);
}

してはいけないこと： 選択状態に高コントラストまたは彩度の高い背景を使わないでください。コンテンツと競合し、高密度なテーブルが読みづらくなります。

---

一括操作

1 つ以上の項目を選択すると、一括操作が表示されます。何も選択していない場合は表示されません。

配置： 選択中にコレクションの上部に表示されるコンテキストツールバーです（標準のツールバーを置き換えるか、補完します）。

[✓ 3 selected]  [Delete]  [Archive]  [Export]  [Move to ▾]  [× Clear]

• 選択数を最初に表示します：「3 件選択中」——操作の前に対象範囲を確認できます
• 選択内容に適用できる操作だけを表示します——一部の操作が単一項目にのみ対応している場合は、複数選択時に無効にします
• 「クリア」を選択すると、すべての選択が解除され、ツールバーが閉じます
• 削除などの破壊的な一括操作では、必ず件数を明示した確認ダイアログを表示します：「3 件のプロジェクトを削除しますか？この操作は取り消せません。」

すべて選択： テーブルヘッダーのチェックボックスを選択すると、現在のページにあるすべての項目が選択されます。追加の操作「247 件をすべて選択」で、データセット全体を対象にできます。

[☑ Select all on page]  →  [Select all 247 results]

---

並べ替えとフィルタリング

列の並べ替え（テーブル表示）

• 列ヘッダーをクリックすると昇順に並べ替わり、もう一度クリックすると降順になり、3 回目のクリックで並べ替えが解除されます
• 並べ替え中の列には方向を示す矢印（↑ ↓）を表示します
• 並べ替え可能な列だけをクリックできるようにします——並べ替えできない列のヘッダーにはホバー状態を表示しません

フィルター

• 取得パラメーターと結果フィルターは、別の場所に配置します。 フォームには新たなデータ取得に必要な条件（日付範囲、所有者、場所）と送信ボタンを配置します。結果のすぐ上にあるツールバーには、読み込み済みの行を絞り込むための項目（切り替え、セグメント化されたフィルター、全件数に対する表示件数、結果を使った操作）を配置します。これらが混在していると、どのコントロールに送信ボタンが必要なのかユーザーには分からず、結果に対する操作も検索の一部のように見えてしまいます。
• 継続的に使うフィルターは、サイドバーまたはコレクション上部のフィルターバーに配置します
• 有効なフィルターはチップやタグとして表示し、個別に削除できるようにします
• 「すべてのフィルターをクリア」を選択すると、すべての有効なフィルターを一度に削除します
• フィルターが有効な場合は、フィルターボタンに件数バッジを表示します：Filter (3)

空の状態

• フィルターに一致する結果がない場合： 「これらのフィルターに一致する結果はありません。[フィルターをクリア]」——一般的な空状態は表示しません
• コレクションに項目が本当にない場合： 最初の項目を作成するための行動喚起を表示します：「プロジェクトはまだありません。[プロジェクトを作成]」

---

検索とオートコンプリート

検索は、大量の項目の中から目的の 1 つを見つけるための機能です。そのため、すぐに反応し、見分けやすいものでなければなりません。

最初の数文字から候補を表示します。 1 文字、遅くとも 2～3 文字入力した時点で結果を返し始めます。すべて入力したり、何かを表示するために Enter キーを押したりする必要はありません。入力に合わせて、ドロップダウンに結果をリアルタイムで表示します。

有効な結果をひと目で見分けられるようにします。 候補リストの目的は、長いリストをすべて読まずに、ユーザーが自分の探している結果を見つけられるようにすることです。結果には文字列だけでなく、次の情報を含めます。

• 項目が視覚的なものであれば、サムネイルや画像（製品、人、ファイルなど）
• 該当するカテゴリや領域。型が決まっているドメイン（製品、スペアパーツ、サービスなど）では、ラベルを読む前に種類を見分けられるよう、カテゴリを示すアイコンと色も付けます。これらの結果タイプに適したブランドイメージのアイコンを選びます（[[brand-visual-language]] を参照）。
• 一致したテキストを結果内で強調表示

これは厳密なルールではなく、すべての検索に画像が必要というわけではありません。ただし、目標は常に同じです。ユーザーが多数の結果から正しいものをすばやく特定できるようにすること（読むには時間がかかります。[[ui-density]] を参照）。

すべての結果を表示する手段も用意します。 ドロップダウンはショートカットであり、すべての結果を表示するものではありません。「「…」のすべての結果を表示」を必ず用意し、フィルター付きの結果一覧ページ（上記のコレクションのパターンを参照）を開けるようにします。クイック候補だけでは不十分な場合に使います。

キーボードだけで完全に操作できるようにします。 矢印キーで候補を移動し、Enter キーで選択し、Esc キーで閉じられるようにします。マウスでもすべての操作ができなければなりません。検索はパワーユーザー向けの操作経路です。キーボードから手を離すことを強制してはいけません。

---

テーブル固有のパターン

固定ヘッダー

縦方向にスクロールしたときも、テーブルの列ヘッダーが上部に固定されるようにします。ユーザーが各列の意味を常に確認できなければなりません。

先頭列の固定

横方向にスクロールする幅の広いテーブルでは、先頭列（行の識別子である名前や ID）を左側に固定します。

行アクション

行ごとのアクション（編集、削除、表示）は、右端の列にホバー時に表示します。通常時は表示しないでください。視覚的なノイズが増えるためです。

[Name]  [Status]  [Date]  [Amount]          ← at rest
[Name]  [Status]  [Date]  [Amount]  [Edit] [⋯]  ← on hover

一度しか実行できないアクションでは、結果をボタンの位置に表示します。 行アクションを繰り返せない場合（送信、リリース、承認）は、ボタンの代わりに作成された参照情報、タイムスタンプ、または短い状態を表示します。別のステータス列に同じ情報を表示すると、ボタンが示している内容を繰り返し、1つの事実が2か所に分かれてしまいます。ボタンと同じ幅の表示領域にすることで、実行前後で行の配置を揃えます。

列のサイズ変更と並べ替え

エンタープライズ向けのデータテーブルでは、ヘッダーの境界をドラッグして列のサイズを変更でき、ヘッダーをドラッグして列を並べ替えられるようにします。レイアウトは保持します。

空のセル

「N/A」は絶対に使用しないでください。 翻訳できない英語の専門用語であり、「該当しない」と「利用できない」の2つの意味を同時に持ち、列に繰り返し表示されると実際の値より目立ってしまいます。値がない場合は、控えめな文字色のエンダッシュ（–）を列の値と同じ位置に配置し、スクリーンリーダー向けには「値なし」などの代替テキストを用意します。ハイフンは数値の隣ではマイナス記号のように見えます。

ほとんどの行に値がない疎な列に限り、セルを空欄にします。それ以外の場合、空欄は読み込み中または不具合のように見えます。ゼロは値です。0 と記載します。理由が重要な場合は、「未測定」「保留中」のように言葉で示します。値は存在するものの不明な場合は「?」を表示できます。それでも「N/A」より多くの情報を伝えます。

---

数値を理解しやすくする

数値だけでは、それが何を意味するのか判断しにくいものです。「1,240 人」や「€48,900」も、比較対象がなければほとんど意味を持ちません。データを提示するとは、数値を並べることだけではなく、ユーザーがひと目で 理解できる ように、文脈と形を与えることです。

数値には比較対象を添えます。 基準値のない単独の数値は、基準値と比較した数値よりも伝える情報が少なくなります。基準値には、割合、平均、差分、比較などがあります。「€48,900（先月比 +12%）」、「目標の 72%」、「ユーザー 1 人あたり平均 3.4」など、たいていの場合、重要な洞察は絶対値ではなく比較にあります。

伝える内容がパターンなら、可視化します。 目で数字の列を追うよりも、推移、分布、比較、関係性 をグラフで表したほうがすばやく理解できる場合は、グラフを使います。単一の KPI にはスパークラインを添えられます。カテゴリの集合は、表より棒グラフのほうが読みやすくなります。表は正確な値を調べるためのもの、グラフは全体像を把握するためのものです。

時間とともに変化するものは、時系列で示します。 収益、利用状況、ステータス履歴など、時間とともに変化する値は、現在のスナップショットだけでなく、その推移を示します。推移を示す線は、単一の数値ではわからない「これは改善しているのか、悪化しているのか」という問いに答えます。時間に依存するものは、現在の値と併せて履歴を表示することを検討します。

見慣れていて、広く理解されているグラフの種類を選びます。 多くの人がすでに読み方を知っている 棒グラフ、折れ線グラフ、面グラフ、円グラフ／ドーナツグラフ、スパークライン を、見栄えはよくてもデータを読む前に グラフの読み方を学ぶ 必要がある珍しい形式（サンキーダイアグラム、レーダーチャート、コード図、ツリーマップ）より優先します。グラフの種類が目新しいと、理解の負担が増します。一般的なグラフではどうしても伝えられない場合に限って、その負担を受け入れます。

色は絞り、意味を持たせます。 色は最大 2～3 色までとし、それぞれの色が表す意味を 1 つに限定します（[[status-colors-and-errors]] を参照）。信号機の色や、広く知られている慣例（ブランドのプライマリーカラーとグレー）を使います。さらに区別が必要なら、色相を増やすのではなく、凡例やツールチップを追加します。グラフの作り方（軸、凡例、ライト／ダーク）：dataviz。グラフと表の組み合わせ：[[coordinated-data-views]]。

1 つの指標には、それが表す対象についての情報をすべて載せ、ページ全体で凡例は最大 1 つにします。 1 つのもの（行、カード、レコード）を説明する情報は、すべて同じ指標に含めます。値や識別子は、棒グラフと横のリストやキーに分けず、図形上に直接載せます。スペースが足りなくなったら、完全なラベル、数値のみ、表示なしの順に段階的に省略し、完全なテキストはツールチップまたは title とアクセシブルネームに含めます。ページ全体で凡例は最大 1 つとし、図形自体では表せない情報（通常は色の意味）にのみ使います。行、カード、コンポーネントの中に小さな凡例は置きません。各指標の横にキーがあると、視線を移動させて対応関係を記憶する必要が生じ、横のリストには指標の内容が言葉で重複して記載されます。

2 つの図を横に並べると、情報が分散します。 一方が位置（値が尺度上のどこにあるか）を、もう一方が距離（基準値からどれだけ離れているか）を表す場合は、役割が異なります。どちらも位置を表すグラフを 2 つ並べるのは、同じ情報を重複して示すことになります。

ダッシュボードは要約するものであり、一覧を並べるものではありません

各ダッシュボードカードには数値を 2～3 個と、根拠としてサンプル行を最大 2 行だけ表示します。完全な一覧をその場で開く「すべて表示（n）」も用意します。ページの上から下まで完全な一覧を並べると、カードが載っているだけのレポートになってしまいます。

各カードが持つすべての行をトップページに表示すると、読者は自分に関係する行を見つけるために、すべてを確認しなければなりません。これは、ダッシュボードが取り除くはずだった作業そのものです。一覧を積み重ねても、それぞれの間に優先順位が生まれません。どの情報が重要なのか示されないため、ページはデータの羅列に見え、読者はそのままスクロールして通り過ぎるようになります。数値を使えば、ページにざっと確認できる最上層を設けられ、サンプル行は数値が実際のデータに基づいていることを示しながら、コンテンツそのものにはなりません。

5 行ではなく、2 行にします。 1 行だけでは、並び順による偶然に見えます。5 行では、カードが避けるはずだった一覧が始まっています。詳細表示については、[[coordinated-data-views]] を参照してください。

ユーザーが行単位で操作するなら、行をテーブルの行にします

ユーザーが行を選択、編集、カウントするなら、行をテーブルの行として維持し、グループ化は軽量なグループヘッダー行とグループ化キーの切り替えで表現します。最初に開く必要がある親の下に行をネストしないでください。アコーディオンでは親が操作単位になり、グループごとにクリックが必要になり、行の並べ替えができなくなり、行が親から外れた途端に破綻します。ヘッダー行なら、並べ替え可能なリストを1つのまま維持し、グループごとの全選択も可能で、同じデータを別のキーで再グループ化できます。

マークが示すのは、データが示すことだけです

内部スコアをパーセンテージで表示することはありません。 ランキングや重み付けのために計算された数値は、読者が確認できる測定値ではありません。画面上に21％を占める対象はないからです。判定は言葉で示し、その下に比較した実際の値を表示します。操作の対象になるのはそれらです。

繰り返しのマークは、すべての要素にデータがある場合にのみ表示します。 タイムライン、スパークライン、グリッドは、各バーやセルが何かを表す場合にのみ、その幅を割く価値があります。空のバーが8本あって、点灯したバーが1本だけでもグラフに見えるため、読者は実際には測定されていない履歴を読み取ってしまいます。データがそろうまで待つか、1つの値をテキストで表示します。

プラスとマイナスは、前後を表します。 同じものを2つの時点で比較する場合にのみ、追加と削除のマークを使います。並列する比較対象の間で、片方に値がない場合は、平易な言葉で「存在しない」と報告し、差分マークは付けません。「− ショップ：グラデーションなし」では、誰も削除していないのに、ショップが削除したように見えます。

タイトルがリンクで、カードは反応しません

レコードのリストでは、レコード名を開くとレコードが表示されます。カード全体にリンクを広げると、アンカーをネストしなければ2つ目のリンク先を置けず、カード全体にホバー時のスタイルが適用され、テキストを選択するたびに移動してしまいます。ライブサイトなど2つ目のリンク先には、名前の横に専用のアイコンを付けます。

---

レビューチェックリスト

• データに視覚的な側面と詳細な側面の両方がある場合、表示モードの切り替えが用意されていますか？
• ユーザーが選んだ表示モードは、セッションをまたいで保持されますか？
• チェックボックスだけでなく、行またはカード全体が選択範囲になっていますか？
• 選択状態には、控えめな背景色の変化（--color-primary-subtle）が使われていますか？
• アイテムを選択すると、選択数を示す一括操作ツールバーが表示されますか？
• 削除などの一括操作では、対象アイテム数を明記した確認ダイアログが表示されますか？
• 「すべて選択」はページ単位で機能し、全データセットに適用するオプションもありますか？
• 適用中のフィルターは、削除可能なチップとして表示されていますか？
• 「結果なし」と「本当に空」の状態は区別されていますか？
• 行ごとの操作は、通常時ではなくホバー時にのみ表示されますか？
• 各インジケーターは独自の値と識別子を持ち、ページごとの凡例は最大1つで、行やコンポーネント内にはありませんか？
• テーブルを縦にスクロールしたとき、テーブルヘッダーは固定されますか？
• 値がない場合は、代替テキスト付きの薄い色のダッシュで示され、「N/A」は使用せず、ゼロは0と表記されていますか？
• 重要な数値には、単独で表示するのではなく、基準（％、平均、差分、比較対象）が示されていますか？
• ストーリーが推移・分布・比較に関する場合はグラフが使われ、時間とともに変化するデータは単なるスナップショットではなく時系列で表示されていますか？
• グラフの種類には、読み解くために学習が必要な珍しいものではなく、棒・折れ線・面・円・スパークラインなど、広く知られたものが使われていますか？
• 新たなデータ取得が必要なコントロールはフォーム内にあり、読み込み済みの行に対するフィルターは結果の上にあるツールバーに配置されていますか？
• 一方向の行操作では、別のステータス列ではなく、ボタンがあった場所に結果が表示されますか？
• グラフやインフォグラフィックには、意味が明確な少数の色（色は2～3色以下、信号機の色または既知の慣例）が使われ、それぞれの色が1つの意味だけを表していますか？また、色の意味が自明でない場合は凡例やツールチップがありますか？
• 行が集計単位の場合、グループはアコーディオンではなく、1つのフラットなテーブル内のヘッダー行として表示されていますか？
• 画面上のパーセンテージはすべて、何らかの実測値に対する割合ですか？内部スコアを表に出していませんか？
• 繰り返し表示されるマークの各バーやセルには値が付与され、値がない場合はマーク自体が削除されていますか？
• 「＋」と「−」は時間経過による変化にのみ使われ、比較対象間での欠如は差分記号を使わずに示されていますか？
• カードと行のリンクはタイトルからのみ設定され、2つ目のリンク先は独立したアイコンとして表示されていますか？