Component Gallery

Data Display UI

データ表示UIまとめ

データ表示UIは、一覧、数値、状態、履歴などを比較・把握しやすく表示するためのコンポーネント群です。

最終更新日: 2026-07-16 / レビュー状態: 未レビュー

30秒でわかる要点

データ表示UIは、一覧、数値、状態、履歴などを比較・把握しやすく表示するためのコンポーネント群です。

拾いたい検索意図

  • ・一覧 UI を作りたい
  • ・カードとテーブルを使い分けたい
  • ・SaaSのKPI表示を設計したい

設計ポイント

  • ・比較したい情報は列や項目を揃える
  • ・状態は色だけに頼らない
  • ・空状態と更新日時を用意する

関連コンポーネント

カード（Card）カード（Card）は、関連する情報をまとめて表示するコンテナコンポーネント。画像・タイトル・説明文・アクションを組み合わせて使う。テーブル（Table）テーブル（Table）は、構造化されたデータを行と列で表示するコンポーネント。ソート・フィルタ・ページネーション機能と組み合わせて使用される。バッジ（Badge）バッジ（Badge）は、数量・ステータス・ラベルを小さいサイズで表示するコンポーネント。通知数や状態の強調表示に使用される。タグ（Tag）タグ（Tag）は、コンテンツの分類・属性を示すラベルコンポーネント。削除可能・クリック可能なバリアントを持つ場合もある。バッジより情報量が多く、一覧での絞り込みにも使われる。アバター（Avatar）アバター（Avatar）は、ユーザーやエンティティを表すアイコン・プロフィール画像コンポーネント。画像がない場合はイニシャルや代替アイコンで表示する。タイムライン（Timeline）タイムライン（Timeline）は、時系列に並んだイベントや更新履歴を縦・横に表示するコンポーネント。承認フロー・活動ログ・チャット履歴などに使われる。評価（レーティング）（Rating）評価（レーティング）（Rating）は、星や数値でユーザーの評価を入力・表示するコンポーネント。読み取り専用・インタラクティブのバリアントがある。

関連画面パターン

ダッシュボード画面（Dashboard Screen）ダッシュボード画面は、重要指標や状態を一覧し、次に取るべき行動へ進むための業務画面です。商品一覧画面（Product List Screen）商品一覧画面は、複数の商品を比較しながら絞り込み、目的の商品詳細へ進むための画面です。プロフィール画面（Profile Screen）プロフィール画面は、ユーザーの基本情報、自己紹介、公開状態、編集導線をまとめて確認・更新する画面です。管理テーブル画面（Admin Table Screen）管理テーブル画面は、業務データを検索・絞り込み・一括操作し、詳細確認や編集へ進むための画面です。

運営・更新・参照元

最終更新日
2026-07-16
レビュー状態
未レビュー

参照元

FAQ

データ表示UIでは何から設計しますか？

まず検索意図や利用シーンを決め、card、table、badgeなどの主要コンポーネントを画面目的に合わせて選びます。

データ表示UIで避けるべきことは何ですか？

見た目の流行だけで部品を選び、ユーザーの判断・入力・移動の文脈を無視することです。

データ表示UIの関連ページはどう辿るべきですか？

まずハブで主要コンポーネントを把握し、次に画面パターン、比較ページ、実装レシピの順に確認すると設計から実装までつなげやすくなります。