AIで作ったUIを、実用品質へどう直すか

一般的なUIの型は学習されています。しかし、その会社で「未処理」が何を止めるのか、誰がその数字を見て決めるのか、次の操作へ何分で到達すべきかまでは知りません。

そこで指示を変えます。「きれいにして」ではなく、「担当者が未処理三件を見つけ、理由を読み、次の操作へ進める画面にする」「経営判断と作業通知を同じ階層へ置かない」と渡します。デザインの依頼を、仕事の受入条件へ翻訳します。

このInsightsでは、本文、比較、手順、注意、用語、図を別の意味として持たせています。見た目の種類を増やすためではありません。二つの案を比べる文章なら表が効き、出来事を追う文章なら段落を切り刻まない方が読めます。

以前は、同じカードが縦に続くと、どこが転換点なのか見えにくくなりました。今回の再編集でも、表やChecklistを減らし、出来事と判断は文章として読める長さを残します。部品の統一と、読み味の均一化は別です。

リンクが押せる、見出し順が正しい、横にはみ出さない。これらは自動で守れます。一方、重要な数字が周囲に埋もれる、長い見出しが三行続いて息苦しい、スマートフォンで表の右側に気付けない、といった問題は実画面を見ないと残ります。

W3CのReflowの考え方は、拡大や狭い幅でも情報と機能を失わないことを求めます。ただし基準を満たしたことと、読みたくなる画面であることも同じではありません。機械検証と目視は競合せず、違う失敗を探します。

更新頻度が低い案内ページや、選択肢が一つしかない操作では、複雑なダッシュボードや動きは不要です。新しい表現は学習コスト、実装量、アクセシビリティ確認を増やします。

「何か使いにくい」と感じたら、装飾を足す前に、誰が何を判断する画面かを一文に戻す。その一文と画面の最初の視線が一致しないとき、問題は美しさではなく情報構造にあります。

AIが作る画面は、余白、角丸、カード、控えめな色をかなり自然に並べます。そこで起きやすいのは、壊れていないが急いでいる人には使いにくい画面です。重要な状態と補足情報が同じ強さで並び、次に押す場所が目に入らず、一覧にカードが増えるほど比較も難しくなります。

これはデザインセンスの問題に見えますが、実際には情報の順序の問題です。利用者が最初に知りたいのは何か。今すぐ判断することは何か。後から読めばよい説明はどれか。その順序を渡さない限り、AIは一般的に見栄えのよい画面を選ぶしかありません。

ピース・ビズのCorporate Siteでも、記事の種類、テーマ、更新日、関連する読み先をデータとして持ち、表示側が意味に応じた見せ方を選べるようにしています。画面ごとに装飾を足すより、内容が何を伝えるべきかを先に定義する方が、後の変更にも耐えます。

デスクトップで整って見える画面が、狭い幅では同じ順番で読めるとは限りません。表が横へ逃げる、見出しが不自然に折れる、ボタンの説明が切れる、関連リンクが長い本文の後に埋もれる。自動テストはリンク切れや型の間違いを見つけられますが、こうした読み順や密度の違和感までは判断しません。

確認するときは、まずタイトルと導入だけを見て、何の記事かが分かるかを確かめます。次に、本文を途中まで読んで、次の見出しが話を急に変えていないかを見る。最後に、幅を狭めた画面で、情報が省かれずに再配置されているかを見る。W3CのReflowの考え方も、単に横スクロールをなくすのではなく、拡大した読者が内容を読めることを求めています。

AIへ渡すべきなのは、きれいにしてという抽象的な依頼ではありません。誰が、どの順で、どの判断をする画面か。そして狭い幅で何を絶対に失ってはいけないかです。