モバイル向けレスポンシブデータテーブル：項目の優先順位を決める

レスポンシブなデータテーブルは、デスクトップの全列ではなく、利用者が判断するための情報を保つべきです。文字を小さくしたり列を隠したりする前に、情報の優先度と、狭い画面での行操作、選択、並べ替え、エラーの扱いを定義します。既存のデータテーブルコンポーネントのガイドを構造の土台にし、テーブルが支える作業に合わせてモバイル用の優先度モデルを作りましょう。

列数ではなく判断から始める

1行から何を判断する必要があるかを問いかけます。配送キューなら注文、状態、配送先、次の操作が必要で、補助的な参照番号は詳細画面へ移せます。狭いテーブルは、補助情報にもう1タップ必要でも、主要な判断を速く読み取れると成功です。

データベースの順番で優先度を決めないでください。サポートだけが使う項目も、あるワークフローでは不可欠で別のワークフローでは不要です。行での判断を1文に書き、表示中のフィールドだけで完了できるかを確認します。

関係性を保つレイアウトを選ぶ

レスポンシブなテーブルの判断には、列を減らしたテーブル、積み上げ行、テーブルと詳細画面の3パターンが多くの場合で使えます。主要フィールドが短く比較しやすければ縮約テーブル、各レコードに短い説明が必要で列比較が重要でなければ積み上げ行、一覧で走査しつつ完全な記録に広い場所が必要なら詳細画面が適しています。

1. 安定した最初のフィールドを置き、どの行を読んでいるか分かるようにする。
2. 最も強い状態または判断の手がかりを識別情報の近くに置く。
3. 関係する補助値を片方だけ隠さず一緒に移す。
4. 詳細表示のトリガーを明確なラベルの実コントロールにする。
5. 行操作を関係のない画面端に浮かせず、行に付けておく。

例：リリースチェックリスト

リリース名、担当者、環境、テスト状態、リスク、最終更新、チケット、操作の8列を持つチェックリストを考えます。モバイルではリリース名、テスト状態、リスク、操作1つを残し、担当者、環境、最終更新、チケットを展開可能な詳細領域に入れます。行の要約は「出荷できるか」に答え、詳細パネルは調査を支えます。

テスト状態が「ブロック」なら、ブロック理由を行に表示するか、詳細を開く手がかりを明確にします。ブロック中の証拠だけを2画面目に隠したまま、緑の状態を見せないでください。

操作、選択、フィードバックを保つ

レスポンシブ化でテーブルの操作モデルが意図せず失われがちです。選択が1行、表示中のページ、条件に一致する全レコードのどれに及ぶかを決め、コントロールの近くに示します。行から詳細を開く場合、未保存の編集と戻り位置を予測可能にします。破壊的操作を表示する唯一の方法をスワイプにしないでください。

長い値と状態変化を扱う

長い名前、翻訳後のラベル、入力されたメモは通常のデータであり、例外ではありません。行数制限を使う場合は、ラベル付き詳細画面で隠れた文章を読めるようにします。省略記号で状態、マイナス金額、2つのレコードの差を隠さないでください。想定の2倍の長さや対応言語の文字列を試してから列の優先度を固定します。

読み込み、エラー、空、古い状態でも同じ行の関係を保ちます。読み込み後に列順が変わるスケルトンは、別のレイアウトを学習させます。更新時は現在の並べ替えとフィルターが維持されるかを示します。保存に失敗したら、編集値を表示したまま具体的な復旧操作を出し、黙って元に戻さないでください。

キーボードと支援技術の経路をテストする

コンパクトなテーブルにも予測可能なフォーカス順が必要です。キーボード利用者が非表示のデスクトップ列を通らず、行、詳細、選択、操作メニューへ到達できるようにします。同じ「その他」ラベルが複数行にあるときは、コントロールと行の関係を読み上げます。タッチでは、横スクロール領域の端にある小さなアイコンだけにヒット領域を依存させないでください。

デスクトップ、狭いモバイル、拡大文字、翻訳コンテンツの状態マトリクスを作ります。詳細を開く、メニューを閉じる、編集から戻る、検証エラーを受け取る各場面で期待するフォーカスを記録します。2枚の静止画を比べるだけでは見つからない失敗を確認できます。

根拠を添えて優先度を引き渡す

各フィールドについて、判断上の役割、隠した場合の代替、役立つ最大長、テストデータを記録します。縮約状態と展開状態をつなぎ、レビュー担当者が1つのフローで比較できるようにします。Pixsoでは優先度マトリクスをレスポンシブフレームの隣に置き、ブレークポイント間で共有するコントロールを注記します。これにより、開発者はデスクトップのスクリーンショットと曖昧なモバイル切り抜きではなく、挙動の根拠を得られます。

リリース前に、テーブルを知らない人に狭い画面で主要タスクを完了してもらいます。判断の手がかりを探すために毎行を開く必要があるなら、データは残っていても目的を失っています。圧縮した列を足すのではなく、優先度を見直しましょう。