データテーブルUIの作り方：Pixsoで請求書一覧を部品化する

Pixsoで実務に使えるデータテーブルを作るには、まず各列の値と、利用者が行う操作のルールを決めます。その後、セル、行、ヘッダー、ツールバーをAuto Layoutで再利用できる部品にします。この記事では請求書一覧を例に、並べ替え、行の選択、表示密度、読み込み中、空の状態、エラー、狭い画面への対応まで設計します。編集できる部品と、開発へ渡せる仕様をそろえることが目標です。

1. 請求書一覧の列と操作のルールを書く

例にするのは、経理担当者が請求書を確認する画面です。一行に請求書番号、顧客、状態、金額、支払期限、担当者、操作を置きます。検索、状態による絞り込み、支払期限または金額での並べ替え、複数行の選択、請求書の詳細表示、権限上許可された対象の書き出しを行えます。

各列について、データ型、表示形式、優先度、内容を読める最小幅、揃え方、省略方法、値がない場合の表示、並べ替え方、狭い画面での扱いを記録します。金額は桁を比較しやすくそろえ、通貨を明示します。日付は表示形式を決め、時刻を含む値なら適用するタイムゾーンも合意します。状態は色に加えて文字で伝えます。行の操作には、実装で見えるラベルまたはアクセシブルな名前を付けます。

主な仕事が画像を見比べること、単純な一覧を読むこと、スマートフォンで各項目の一つの操作を済ませることなら、テーブル以外の形式が適している場合があります。情報を密に置く理由は、実際の比較や管理の仕事から決めましょう。

2. 最小単位のセルから部品を作る

Pixsoのデザインファイルでは、行全体を作る前に、文字、数値、状態、チェックボックス、操作の各セルを作ります。各セルの中にAuto Layoutを設定し、内側の余白と揃え方をそろえます。顧客名が長い、金額の桁数が多いといった実際に起こる内容を入れ、文字幅の制約を確認します。

セルのバリアントは、構造の違いに必要なものに絞ります。状態ごとに行を複製する代わりに、状態を示すバッジの部品を入れ子にします。選択状態はチェックボックス、並べ替えの方向はヘッダーセルが受け持ちます。値の組み合わせごとに行を作らなければ、部品の数が増えすぎるのを防げます。

Table/Cell/TextやTable/Header/Sortableのように、役割が分かる名前を付けます。Pixsoはコンポーネントとバリアントを扱え、Auto Layoutで内容に応じた配置を組めます。ライブラリの整理には、Pixsoのコンポーネント公式ガイド（英語）を参照してください。

3. 行とヘッダーを組み立てる

セルのインスタンスを横方向のAuto Layoutに並べます。操作と状態の列は幅を定め、顧客名には伸縮できる領域を割り当て、金額の桁の揃え方を保ちます。通常、ホバー、キーボードフォーカス、選択中の行を用意し、業務上の条件がある場合だけ操作不可の状態も作ります。

ヘッダーには列名、並べ替えの操作と現在の方向、全選択の挙動を設けます。製品が列幅の変更を提供する場合は、その操作対象も加えます。並べ替えの方向は見た目と実装上の両方で伝えます。現在の並び順を知る必要があるのに、ホバー時にしか矢印が現れない仕様にしないようにします。

一文字の顧客名、70文字の顧客名、金額0、大きな金額、担当者未割り当て、期限超過、支払期限がない行を試します。Auto Layoutははみ出しや折り返しを確認する助けになりますが、折り返すか、省略するか、別の場所へ移すかはチームで決めます。

4. 読みやすさを保ちながら表示密度を変える

利用者に異なる必要がある場合に、コンパクト表示とゆったりした表示を用意します。コンパクトな行は多くの請求書を一覧しやすく、ゆとりのある行は操作対象と文字を見分けやすくできます。密度の変更では上下の余白や補助情報の見せ方を調整し、重要な値を説明なく取り除かないようにします。

テーブルまたは行に密度のプロパティを設け、選択、エラー、折り返す内容との組み合わせを試します。顧客名が二行になっただけで崩れるコンパクト表示は、確認が足りません。行の最小高と縦方向の揃え方を仕様に残します。

表示密度の切り替えだけで、情報の優先順位は解決しません。12列すべてが必須になったら、仕事を見直します。列の表示設定を保存する方法、詳細パネル、役割ごとに分けた一覧の方が適している場合があります。

5. 並べ替え、絞り込み、複数選択の範囲を決める

ツールバーには検索、状態フィルター、表示密度、書き出し、選択件数を置きます。テーブル全体の操作と、一行だけを対象とする操作を分けます。行が選択されたら、件数と範囲が分かる一括操作の領域を表示します。「書き出す」だけより、「選択した請求書12件を書き出す」の方が結果を予測できます。

ページ移動や絞り込みをまたぐ選択の扱いも定めます。「すべて選択」は現在のページ、絞り込み結果全体、全請求書のどれを意味するのでしょうか。フィルター変更で選択を解除するなら、その前に知らせます。選択した中に書き出せない請求書があれば、実行前に除外件数と理由を示します。

サーバーからデータを取得する場合、並べ替えや絞り込みにも読み込み中の表示が必要です。現在の検索条件を保ち、重複リクエストを制御し、古い結果や一部しか取得できていない結果を区別します。サーバーの動作は実装側が担いますが、画面上で何を伝えるかはデザインファイルにも示します。

顧客情報のテーブルで重複レコードを統合するときは、項目ごとの値の不一致と、統合後に残るレコードを確定前に確認できるようにします。

6. 読み込み中、空、失敗、一部取得を分ける

テーブルの構造が分かっている初回の読み込みには、スケルトンを使えます。実データと誤認するほど具体的な値を入れないようにします。更新時は、全行をスケルトンへ戻すより、現在の行を残して進行表示を添える方が、文脈を保ちやすい場合があります。

何も表示できない理由を、一つの空画面にまとめないでください。

• 請求書がまだない：最初の請求書を作成する、または取り込む方法を示します。
• 条件に一致する結果がない：適用中の条件と、条件を解除する操作を示します。
• 権限がない：データ自体が存在しないように見せず、アクセスできる範囲を説明します。
• 読み込みに失敗した：検索条件を残し、再試行を用意します。キャッシュと最新データを区別します。
• 一部だけ取得できた：取得できなかった範囲や情報源と、利用できる範囲を示します。

完了にも根拠が必要です。書き出した後は、選択行を緑にするだけでなく、生成されたファイルやダウンロード状況を示します。状態を一括変更した場合は、完了、除外、失敗の件数と詳細の確認方法を伝えます。監査ログの画面設計で扱うように、出来事そのものの結果と、その詳細を画面が取得できたかどうかも別の状態です。

7. ページ移動と大量の結果の扱いを決める

一ページに収まらない請求書を、どのように移動して確認するかを示します。ページあたりの件数、全体件数の表現、前へ・次への動作、必要な場合のページ指定を決めます。絞り込みで結果が減り、現在のページが存在しなくなった場合も扱います。請求書の詳細から戻ったときには、検索と並べ替えの状態を保ちます。

結果が非常に多い、または継続的に更新される場合は、実装でサーバー側のページ分割や仮想スクロールを使うことがあります。全行が常にブラウザーに読み込まれているとは想定しません。全体件数が正確か、概算か、不明かを記録し、未取得の行まで選択対象にできるかも決めます。次のページを取得しているのか、現在の行を更新しているのかを進行表示で区別します。

現実的なページ表示と、先頭・末尾で操作できないボタンの状態を作ります。一ページだけの結果、先頭と最終ページ、件数が変わる場合、次のページを取得できない場合を試します。処理速度の実装は開発の課題ですが、現在位置と失敗からの戻り方はUIで説明する必要があります。

8. 狭い画面で残す情報と操作を決める

レスポンシブ対応は、表全体を小さくすることでは済みません。中程度の幅なら、優先する列を固定し、テーブルの領域内で横スクロールできるようにします。続きの列があることも伝えます。スマートフォンでは、請求書、顧客、状態、金額を縦にまとめ、副次的な項目を展開可能な詳細に移す方法を検討します。

一つのフレームを無理に縮めるのではなく、Pixsoに画面幅ごとの例を作ります。選択と行の操作に到達できるかを確認します。長い翻訳、200%の拡大、固定ヘッダー、テーブルの横スクロールとページの縦スクロールの組み合わせを試します。

どの情報を隠すか、移すか、省略するかを文書化します。偶然収まったCSSによって、列の優先順位を決めないようにしましょう。Auto Layoutで編集できるテーブルは設計用の成果物です。本番の実装では、必要な操作に応じて適切なtableまたはgridの意味付けを選びます。

9. 部品だけでなく、一覧全体をレビューして引き渡す

名前と利用方法をレビューしてから、承認したテーブルの部品をチームライブラリへ公開します。並べ替え、権限、選択範囲、画面幅への対応について残る疑問は、該当箇所へのコメントで解決します。Pixsoでは共同レビューや引き渡し用の注記をデザインの近くに置けます。公式の共同デザイン・引き渡しの説明（英語）も参照できます。

開発開始前に、項目の定義、例示データ、行の状態、キーボード操作、見えるフォーカス、操作の名前、並べ替えの通知、選択の意味、読み込み、空、失敗、完了、狭い画面の挙動を確認します。生成された仕様やコードだけでは、データの正しさ、処理性能、意味付け、アクセシビリティを検証できません。実装した製品で試します。

列のルール、権限、一括操作が変わったら、部品を再確認します。共有部品の更新は見た目をそろえる助けになりますが、内容や上書き設定が異なる各インスタンスの確認も必要です。

10. データテーブルの確認リスト

• 各列にデータ型、形式、優先度、幅、空の値、画面幅ごとのルールがある。
• ヘッダーから現在の並び順と、使える操作が分かる。
• 全選択の範囲が、ページ、絞り込み結果、全体のどれか明確になっている。
• 一括操作で件数、権限、進行状況、失敗、完了の根拠を示す。
• コンパクト表示とゆったりした表示の両方で、長い実データを扱える。
• 初回読み込み、更新、データなし、検索結果なし、権限なし、失敗、一部取得を区別する。
• 狭い画面でも主要な比較と操作を保ち、ページ全体が横にはみ出さない。
• 実装で意味付け、キーボード、フォーカス、通知、拡大、処理性能を試す。

列の意味から、処理後の確認までを組み立てる

データテーブルは、値の仕様からセル、ヘッダー、行、ツールバー、状態表示、画面幅ごとの構成へと組み上げます。PixsoのAuto Layoutと再利用できる部品で編集しやすくそろえ、実際に起こる請求書の値で弱いルールを見つけます。選択範囲、失敗からの復帰、完了の根拠、実装時の確認まで用意すると、日々の管理業務を支えるテーブルになります。