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

UI/UX Pro Maxを前提に、Antigravityへ受注一覧の見直しを頼みました。「v2 モダン」は見た目が変わりましたが、上部の大きな集計、グラデーション、文字アイコンがまだ気になる。これは見やすいのか？

同じ1366×768でCodexに比べさせると、完全に見える行は標準でv1の8行からv2の6行へ減っていました。高密度も12行と8行。詳細と一括操作の置き方は変わった一方、件数と絞り込みが合わないところも残りました。

実務とは無関係の検証用プロジェクトです。2026年10月5日、同じ15,000件の架空受注で比べています。前日のスキル導入と既存v1の改修は、前の回に分けました。

最初はレビュー、その後でゼロベースの見直しを頼んだ

最初の依頼はレビューです。スキルを明示し、環境に合うパスを使い、作業ガイド・README・設計原則・前日の比較も読むよう指定しました。次は実際に送った内容の要点です。

UI/UX Pro Maxを使って、現在の受注一覧画面をレビューしてください。
今回は分析と改善案の提示まで進めてください。

SKILL.mdを明示的に読み、実際の配置先の検索スクリプトを使ってください。
使用したスキル、検索語、結果、採用・見送りの理由を報告してください。
対象は日本語の業務用受注一覧です。
各改善案には「何を変えるか」「なぜ変えるか」「どう確認するか」を添えてください。
画面で確認したこと、コードから判断したこと、未検証のことを分けてください。
今回はファイル変更・commit・pushを行わないでください。

UI/UX Pro Maxを使い、現在の受注一覧をレビューしてください。
今回は分析と改善案の提示までです。

プロジェクトの作業ガイド、README、設計原則、設計を決めた理由のメモを読んでください。
プロジェクト内の .agents/skills/ui-ux-pro-max/SKILL.md を明示的に読み、
scripts/search.py を実際の絶対パスで実行してください。
CLAUDE_PLUGIN_ROOTは使わず、実行環境に合うパスを確認してください。

対象は日本語の業務用受注一覧です。
使用したスキル、検索語、結果、採用・見送りの理由を報告してください。
用途が違う検索結果は、理由を残して見送り、
一般指針へ切り替えた場合はそのことを明記してください。

配置・色・文字サイズ・余白・検索・行クリック・メニュー・
ステータス表示・ノートPCでの表示領域を評価してください。
画面で試したこと、コードから判断したこと、未検証のことを分けてください。
今回はファイル変更・commit・pushを行わないでください。

レビューの後に、設定の切替と見た目への不満を追加しました。

うーん、まず高密度とかの設定が切り替えるとリセットされる。基本的に残るようにして。切り替え後に設定が変わると混乱する。

v2モダンのほうだが、もっとモダンにできない？既存機能にとらわれすぎている気がする。一度ゼロベースで考えなおして。

今のv2は、こうした追加指示も経た版です。比較するv1にも、CodexがPro Maxの一般指針を参照して直したラベル・選択・詳細操作が入っています。エージェント、指示、機能、文字サイズが異なる二つの画面を比べています。

同じノートPC相当の表示領域で並べてみた

v1は最上部の検索、件数付きの絞り込み、操作欄、表の順です。

v2には、総額・総件数・未処理・遅延/至急のカードが増え、顧客名に頭文字や取引区分も入りました。

検索・メニュー開閉・ページ分割は元からある機能です。変わったのは、サマリーの大きさと役割、行内の見せ方、操作の場所。未処理カードは押せますが、総額は表示だけです。

「もっとモダンに」で見た目はかなり変わりました。でも、気になっていた上部サマリーが、表のための縦幅を使っています。受注を探す間、総額を常に大きく出す必要があるのか。ここはまだ迷います。

高密度でも、同じ行高ではなかった

v1とv2を同じ表示領域で撮りました。

密度とデータのシナリオは親画面で共有し、高密度＋16件の通常データでv2→v1→v2と切り替えても残りました。一方、再読込では高密度だけ保存され、シナリオは15,000件、画面はv1へ戻ります。v2のURL同期が版指定を消す不具合です。

表示には標準52px・高密度36pxとあっても、描画したv2の先頭行は65px・53pxでした。v1は52px・36px。v2は顧客名と取引区分の2段表示で、上下の余白もあります。表本文もv1の14pxに対しv2は13pxで、ID・補助文字には別指定がありました。

Chrome 145、DPR 1。同じ15,000件・25件表示・ID降順、メニュー閉、条件・選択・詳細なし、画面と表は先頭。列見出しの下から表と画面内に上下とも収まる行だけを数え、切れた行は除外しました。各条件1回の観測です。

設計記録の「8行から10行、25%増」とは合いませんでした。操作欄を1段にしても、カードと行の情報が増えれば、全体の行数は減ります。設定ラベルや記録の評価文だけでは判断できず、実画面を見る必要がありました。

詳細と一括操作は、置く場所が変わった

v1の詳細は右側へ情報を順に並べた形です。

v2は基本サマリー、取引・決済、進行タイムラインの3タブと、ステータスの変更欄が付きました。

処理中から出荷済みへ変えると一覧へ反映し、閉じて「元に戻す」で処理中へ戻りました。変更は画面内で、サーバー保存と出荷確定は未実装です。与信審査などの工程・日付・取引条件にも仮置きがあり、実履歴を取得する機能はこれからです。

一括操作は、v1では表の前、v2では下へ浮く形です。

1件選ぶと表の上端はv1で48px下がり、v2は変わりませんでした。ただ、浮いた操作欄は一覧の手前を使います。表が動かなくても行が隠れるのは気になります。

スキルを使っても、件数と操作は確かめる必要があった

Codexに実際の操作で確かめさせた結果です。

遅延・至急は、集計が出荷済み・キャンセルを除く一方、絞り込みは納期の上限だけ。10月3日固定の判定日で、同じ表示から異なる対象へ進んでいました。

総額カードの「+14.2%」は前期比を計算した値ではなく固定表示です。検索しても総額と件数は全受注のまま。上部サマリーが何を伝える部品かも決め直したいです。

グラデーションと文字アイコンは、まだ納得していない

頭文字を色付きで囲み、状態の前へ丸を足す。それが見分ける助けになるのか。見た目を増やしただけになっていないか。

頭文字と絵文字・記号のアイコンが混在し、今回の撮影環境では一部が四角にも見えました。使った固定版SKILLには、絵文字でなくSVGを使う指針もあります。どの提案を採ってこの部品になったか、その理由も見直したいです。

スキルは使えた。では、画面は使いやすいか。カードを常設する意味、行高、文字とアイコン、件数と操作の一致を見ると、まだしっくりきません。

汎用の指針はPro Maxへ任せ、必要な差分だけ追加する方針は保ちます。ただ、独自スキルへ移す前に、今の画面で何が必要かをもう少し試したい。次は表をたくさん見たい方向へ、v3を作っていきます。

確認した情報

作業・比較は10月5日、公式資料は10月17日再確認。Windows上のWSL2のLinux側プロジェクトで、Codexが撮影・計測・操作検証しました。Antigravityで前提にしたスキルと、各作業で実際に採った検索結果の追跡は区別し、後者には未確認が残ります。複数の指示と実装が変わった画面比較で、スキル単独の効果や実業務の使いやすさは別途確かめる対象です。

シリーズの記事

前の記事：AIで作る業務UI/UX 03：UI/UX Pro Maxを導入。操作は直ったが、表示行は増えなかった

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