AIで作る業務UI/UX 05：受注一覧v3をExcel・TUIに寄せた。でも、まだ惜しい

UI/UX Pro Maxを前提に作った受注一覧v2は、欲しい画面とは少し違いました。上の方に件数や金額が大きく並ぶ。ダッシュボードを意識しているのかな。文字もいちいち大きく感じる。その下で受注を見ようとすると、一度に見える情報が少ない。

そこでv3は、とにかく情報量。いっぱい見られる画面を目指して、ExcelやTUIっぽい方向へ寄せて作っています。今はこっちの方向が良いと思っていますが、使いやすさも見やすさも、まだ改善できる気がする。なんか惜しいんですよね。

実務とは無関係の検証用プロジェクトです。表示する15,000件も取引先名も架空データです。

v2は、一覧より上の表示が気になった

v2には、総受注金額、総受注件数、未処理、遅延・至急のカードがあります。画面の上で状況をまとめ、その下に一覧を置く構成です。

受注一覧v2の標準表示。上部に金額・件数など4枚のカードがあり、その下に受注の表が続く

欲しいのは、まず受注をたくさん並べて見られる画面です。件数のカードが大きくても、その分だけ見たい行が下へ押されると気になる。v2では、この違和感が残りました。

スキルを使った経緯やv2の操作検証は前の回に残しました。そこから、見たい画面へどう寄せていったか。

v3は、表へ戻して一度に見える量を増やした

v3では上部の集計カードを置かず、画面幅を使って表を広げています。顧客名、金額、ステータス、納期、担当者を罫線のある行に並べ、金額は右へ揃えました。

受注一覧v3。上部の集計カードがなく、画面幅を使った表に受注25行を表示している

この辺りは、結局Excelに近づいているなと思います。きれいなカードを増やすより、同じ項目を縦に並べて、いっぱい見たい。

最初に頼んだのも、「テーブルの一覧性を高めたフルワイド」「フィルターは各列で出来るように（Excel風）」という方向です。検索は画面の最上部へ。詳細を右に出すか、左右キーで前後へ移るかは、最初はまだ迷っていて、実装を待つように伝えていました。

表を詰めた後は、周りに残る表示も気になってきます。「v3 Excel-Like Ultra-Dense」というバッジや密度切替の表記は外しました。基本は高密度で見たいので、毎回その説明に場所を使う必要があるのかな、と。CSV出力と表示列も、むき出しのボタンから設定メニューへまとめるよう頼みました。

撮影時には、CodexでWindows版Chromeを操作し、同じ1440×900の表示領域でv2の標準表示とv3を確認しました。メニューは閉じ、検索・絞り込み・選択・詳細を開かず、同じ架空データの先頭25件を表示しています。上下が画面内に完全に収まるデータ行は、v2が8行、v3が25行でした。

これは2026年10月15日の作業版を各1回表示した結果です。文字サイズや行の高さ、行内の補助表示も変えています。v3の25行は、このページの全行です。さらに何行まで収まるか、読む速さや間違いにくさは、これから確かめるところ。

列の条件は、Excelのフィルターに寄せた

各列の見出しには、絞り込みを開くボタンがあります。例えば「ステータス」の右にあるフィルターを押すと、並べ替え、候補の検索、値を選ぶチェックボックスが開きます。

v3のステータス列でフィルターを開いた状態。並べ替え、候補の検索、チェックボックス、適用ボタンを表示している

全体の検索は最上部にまとめ、列ごとの条件は列から開く形にしました。表をたくさん見せたい、という今回の狙いに合わせた置き方です。

Excelから取り入れたのは、列ごとに条件を絞る形です。この試作では受注の検索・表示を扱い、セルの直接編集や表計算は対象外にしています。

検索は、一か所に集めてもまだしっくりこなかった

一覧の直上にも検索欄がありましたが、最上部へ一本化したいと頼みました。簡単な検索と詳細検索をどう並べるかは、2案を切り替えて試し、コマンドパレット型のB案を選んでいます。

それでも、入力欄と詳細検索ボタンの高さが合わない。虫眼鏡、入力欄、ボタンが、別々の部品をくっつけたように見える。枠線や角丸を直す指示も、一度では伝わりませんでした。「なんか逆じゃない？」と、検索バーの中にある入力欄の話だと説明し直しています。

その後、検索バーと詳細検索を統合したいと改めて頼みました。今の作業版では、条件を表すチップと入力欄が同じ外枠に入り、詳細検索はバーのすぐ下へ開きます。

v3の検索バー直下に詳細条件を開いた状態。検索欄と詳細検索ボタンが同じバーにあり、ステータス・納期・金額の条件がその下に続く

これは10月17日の作業版です。高さや色を揃える話から始まり、最後は検索欄と詳細検索の分かれ方まで見直すことになりました。

詳細は、一覧を背後に残しながら前後へ移る

受注IDを押すと、右側に詳細を開きます。TUIを参考にしたのは、一覧を残し、キーでも前後へ移れる方向です。詳細には金額の表示、タブ、ステータス変更を置いています。

受注ORD-25000の詳細を右側に開いたv3。左側に一覧が残り、詳細に前後移動・ステータス変更・タブがある

詳細は、v2と比べられるように表示項目を揃えてもらいました。背景をぼかす処理は、後ろの一覧が見えにくいので外す方向へ。幅は画面の半分ぐらいを基本にして、必要な時は全画面へ広げたい、と頼んでいます。

コピーやステータスが複数の場所に出ていたのも気になりました。同じ状態が何か所もあると、どれを見て、どこを押せばいいのか迷う。表示をまとめ、ステータスは変更できると分かる見た目にしてほしい。

さらに、前後の受注へ移ると、超過日数の表示が出たり消えたりして、隣のステータス欄の位置がずれていました。超過日数はIDの横へ移し、ステータス欄の位置を固定するよう頼みました。項目が収まっていても、次の受注を開くたびに操作する場所が動くのは気になります。

撮影時には先頭の ORD-25000 を開き、右矢印キーで次の ORD-24999 へ移るところをCodexで確認しました。詳細を閉じて次の行を開き直す以外にも、続けて見ていける形を試しています。

前後移動を詰める中で引っかかったのが、1ページの最後で止まること。「次へ1ページの最後まで行ったら、次のページへで一覧も次のページに動かせない？ 止まるのが嫌で」と頼みました。今どの受注を見ているかも分かるように、全体の何件目かを表示するよう伝えています。

詳細を閉じた時にも手戻りがありました。開く前は見えていたヘッダーが隠れ、行が上のメニューにくっついてしまう。元の行へ戻れても、画面まで動くと気になる。開く前のスクロール位置を保つよう直してもらいました。

全画面表示へ切り替えるボタンもあります。撮影時には全画面への切り替えも確認しましたが、左端の文字に余裕がない配置が残っています。

v3の詳細を全画面表示へ切り替えた状態。次の受注ORD-24999の情報を表示している

詳細にある取引条件や進行の履歴には、試作の固定表示が含まれます。

いっぱい見えるようにはした。でも、まだ惜しい

v2より、自分が作りたい方向には寄っています。上部の大きな件数表示より表を優先し、ExcelやTUIっぽく、一覧でたくさん見られる形にしたかった。

それでも「これで使いやすくなった」とは、まだ言い切れません。情報量を増やした画面を見ながら、見やすさと使いやすさにはもう少し手を入れられる気がしています。どこが惜しいのかも含めて、今は悩んでいます。

振り返ると、表へたくさん詰めることから始めて、重複した表示、操作する場所のずれ、検索部品のばらつきを減らす指示が続いていました。一覧を広く使いたい。詳細を見ても、次の受注へ移っても、さっき見ていた表や操作する場所を見失いたくない。そこを揃える方向で、v3を直し続けています。

v3を完成形として固定する前に、この違和感を残しておきます。スキルでできた画面を、そのまま良い画面として受け取るのではなく、自分が見たいものへ寄せてみた。その途中が今のv3です。

確認した情報

確認日：2026年10月15日・17日。

  • UI/UX Pro Maxの導入時に固定したSKILL：v2の前提にしたスキルの資料。v2とv3では複数の指示と実装が変わっています。
  • 画像と表示行数は、制作中の enterprise-ui-lab の受注一覧を、Windows版ChromeでCodexが撮影・確認した記録です。表示行数と元の5画像は10月15日、検索バーの画像は17日の作業版です。操作時間や誤操作、実業務での効率は未測定です。
  • v3の作成・修正依頼は、10月11〜17日のやり取りから、実際に出した指示を確認してまとめました。

シリーズの記事

前の記事：AIで作る業務UI/UX 04：UI/UX Pro Maxで受注一覧v2を作った。でも、まだしっくりこない

「AIで作る業務UI/UX」の記事一覧（読む順）

コメント

タイトルとURLをコピーしました