先に結論主要列、状態、次の操作を先に見せ、全列確認と編集は目的に合う表示へ切り替えます。
スマホで最初に見る列を決める
対象名、日付、状態、次の操作など、一覧で判断する3〜5項目を選びます。ID、長いメモ、内部集計は詳細へ移し、列を小さく詰め込みません。
現場スタッフと管理者では重要列が違うため、役割別の初期表示を検討します。列名を略し過ぎず、同じ意味の項目名を画面間でそろえます。
カード・詳細展開・表を使い分ける
一件ずつ判断する一覧はカード、複数件の数値比較は表など、作業に合わせます。カード内へ全項目を詰めて縦長にし過ぎないよう、詳細展開を使います。
横スクロールが必要な比較表では、最初の列を固定し、横へ続くことを表示します。ページ全体ではなく表の範囲だけが横に動くようにします。
絞り込みで表示件数を減らす
日付、担当、状態、拠点で絞り、選択中の条件と件数を表示します。再読込や詳細から戻った後も条件を保つと探し直しを減らせます。
並べ替えは列名と現在方向を示し、スマホでも押しやすくします。大量データを一度に描画せず、追加表示やページ分割を使います。
長い値と操作ボタンを実データ量で試す
長い会社名、金額、未設定、複数状態、最大件数で文字切れを確認します。省略した値は詳細や補助表示で確認できるようにします。
編集・削除・詳細のボタンを密集させず、主要操作を一つ優先します。320px級、文字拡大、横向き、タブレット、PCで横スクロールと画面外配置を検査します。
相談前にそろえるもの
- 役割別の主要列
- カード・表・詳細
- 表内だけの横移動
- 絞り込み・件数
- 長い値・操作ボタン
全部そろっていなくても構いません。分かる範囲を確認し、業務ルールや金額に関わる部分は担当者と一緒に決めます。