複雑な「データテーブル」を使いやすくするデザインパターン

業務システムや管理画面のUI設計において、頻繁に登場し、かつエンジニアやデザイナーを悩ませるのが「データテーブル（表）」です。

データベースの値をそのまま画面に出力した結果、列が多すぎて横スクロールが長くなったり、どこにどのアクションボタンがあるのか分からない「カオスな表」に遭遇した経験がある方もいらっしゃるでしょう。

日々の業務のために表示するデータテーブルは、単なる「データの置き場」ではありません。ユーザーが現状を把握し、比較し、次のアクションを決定するためのツールです。

本記事では、業務システムの体験を改善するための「データテーブルのデザインパターン」を解説します。

テキストは左、数値は右。配置の原則

データテーブルにおける視認性の土台となるのが配置（位置揃え）です。表計算ソフトでもお馴染みですが、UIデザインにおいても以下のルールが基本です。

テキストデータは「左揃え」: 名前、ステータス、メールアドレスなどは、視線が左から右へ動く自然な読書体験に合わせるため左揃えにします。
数値データは「右揃え」: 金額、数量、サイズなどは右揃えにします。桁の位置が揃うため、ユーザーは「どの値が大きいか（桁数が違うか）」を瞬時に比較・スキャンできるようになります。
IDは数量を示すものではなく機械的なラベルのため、数値のみで構成されたIDでも左揃えとするのがよいでしょう。
ヘッダーもデータに合わせる: データの揃え位置と、列のタイトル（ヘッダー）の揃え位置を一致させます。

HTMLの <table> タグやスプレッドシートの延長で、すべてのセルを縦横の罫線で囲ってしまうデザインを見かけます。しかし、線が多すぎると「データ」よりも「線」というノイズにユーザーの視覚リソースが奪われてしまいます。

ゲシュタルト心理学の「近接の要因」を活用し、線ではなく空間で情報を整理しましょう。

縦線を消す: 十分な余白（パディング）と正しいコンテンツの配置があれば、縦の罫線がなくても人間の目は列を独立したブロックとして認識できます。
横線は控えめに: 行を区切る横の罫線は視線の誘導に役立ちますが、1pxの薄いグレーなど、極力主張しない色（コントラスト比を下げた色）に留めます。
ゼブラストライプの活用: 1画面に表示するデータ行が非常に多い場合は、1行ごとに背景色をわずかに変えるゼブラストライプ（縞模様）を採用すると、横方向の視線のズレを防ぐことができます。

データベースに存在するカラムをすべて画面に出す必要はありません。ユーザーの「タスク」に必要な情報だけを厳選することが重要です。

「識別子」と「主役」を左に配置: ID、ユーザー名、重要ステータスなど、その行の「顔」となる情報を最も左の列に配置します。データベースの列の順序に従うのではなく、ユーザーが情報を把握しやすい順序に並べます。
横スクロール時の「列固定（Sticky）」: どうしても列数が多くなる場合は、一番左の「識別子」の列と、一番右の「アクション」の列を横方向にスクロールしないように固定し、中間のデータだけを横スクロールさせる設計にします。これにより、ユーザーは「今どの行を見ているか」を見失いません。
詳細情報の格納: 長い備考欄やエラーのスタックトレースなどを無理にセル内に押し込むと、行の高さが不揃いになりUIが崩壊します。ホバー時のツールチップ、行をクリックして展開するアコーディオン、あるいは画面右側からスライドインするドロワー（サイドパネル）に詳細を逃がすアプローチを取りましょう。

業務システムのテーブルでは、データの閲覧だけでなく「操作」が伴う場合があります。このアクションへの導線設計が、作業効率を左右します。

個別操作（行に対するアクション）: 「編集」「詳細」「削除」といった行単位の操作は、テーブルの最も右側に配置するのが基本です。
個別操作ボタンは、各行に繰り返し表示されるため、テキストボタンよりもツールチップ付きのアイコンボタンで簡潔に表現するほうが良い場合もあります。
また、利用頻度の低いアクションは、リスト式のメニューに収め、三点ボタンで呼び出すようにするのも、ひとつの案です。（ミートボールメニュー）
一括操作（複数行に対するアクション）: 各行の最も左側にチェックボックスを設け、テーブル上部に「一括承認」「一括削除」などのアクションボタンを配置します。一括操作の影響範囲が大きい場合は、実行前に確認ダイアログを表示しましょう。

テーブルのデザインにおいて見落とされがちなのが、コンテンツが無い状態の表示です。

次の3つの状態に分けて状況を、適切な文言やグラフィックにて示しましょう。

読み込み中（ローディングステート）
- 読み込みに時間がかかることが想定される場合は、ローディングを示すアニメーションや、コンテンツのスケルトンを表示してユーザーが状態を認知しやすくしましょう。
該当するデータが無い（エンプティステート）
- 検索結果を表示するデータテーブルの場合は「この条件に一致するデータはありません」などとして、状況を伝えましょう。追加機能として、条件を一部変更すると該当するデータがある場合は、「〜〜の場合は〜〜件の情報があります」としてその結果へのリンクを設置すると親切な場合もあります。
- ユーザーが新たなデータを登録できる場合は、データが無いことを伝えると共に「新規登録」のボタンを表示すると良いでしょう。
読み込みに失敗した（エラーステート）
- 過去の記事でお伝えしたように、できるだけ3つのW「What happened （何が起きたのか？）」「Why it happened （なぜ起きたのか？）」「What the user can do （ユーザーは何ができるのか？）」を表示して、ユーザーが困らないようにしましょう。