「確認する」という作業には2種類ある。
「正しく読めているか見る」作業と「間違いを直す」作業だ。この2つは性格が違う。前者は速くできる。目でざっと追って「OK」を押せばいい。後者は集中が必要だ。元の帳票画像を見て、数値を確認して、修正する。
このシステムを毎日使う担当者にとって、操作の9割は前者だ。A社の帳票なら精度が高い。ほとんどの行は合っている。「全件を1行ずつ確認する」という操作は、疲弊させる。
この前提でUIを設計した。
信頼度を色で伝える
Claude Visionは各明細行の読取に対して確信度（confidence）を返す。UIにはこれを色で表示した。
高（high）：グリーンのバッジ。問題なし。中（medium）：オレンジのバッジ。目視確認を推奨。低（low）：レッドのバッジ。修正の可能性が高い。
担当者は一覧を縦にスキャンする。グリーンだけが並んでいる行は目で流す。オレンジやレッドが見えたら止まって確認する。色が「注意のシグナル」として機能する。
要確認フィルタ
「要確認のみ表示」ボタンで、信頼度がmediumとlowの行だけを絞り込める。
let showOnlyReview = false;
document.getElementById('filter-btn').addEventListener('click', () => {
showOnlyReview = !showOnlyReview;
renderItems(showOnlyReview);
});
function renderItems(filterFlag) {
const items = filterFlag
? allItems.filter(i => i.confidence !== 'high')
: allItems;
// 一覧を再描画
}精度が高い帳票では要確認の行が少ない。ほとんどは「全件表示のまま目視確認→一括OK」で終わる。精度が低い帳票では「要確認フィルタ→1件ずつ修正」という操作になる。担当者が意識して切り替える必要はなく、フィルタボタン一つで動く。
一括OKボタン
信頼度highの全件を一括で確認済みにするボタンを置いた。
document.getElementById('bulk-confirm-btn').addEventListener('click', async () => {
const highItems = allItems.filter(i => i.confidence === 'high' && !i.confirmed);
const ids = highItems.map(i => i.id);
await fetch(`/api/orders/${orderId}/bulk-confirm`, {
method: 'POST',
body: JSON.stringify({ item_ids: ids }),
headers: { 'Content-Type': 'application/json' }
});
reloadItems();
});信頼度highの行をまとめてOKにして、残ったオレンジ・レッドの行だけを手動確認する。この2ステップが確認作業の骨格だ。
インライン修正
各明細行は「確認モード」と「編集モード」に切り替えられる。確認モードでは読み取り専用で表示される。編集モードでは各フィールドがinput要素に変わって直接編集できる。
モーダルではなくインライン編集にした理由は「元の帳票画像を見ながら修正する」ためだ。モーダルが開くと一覧が隠れる。インライン編集なら一覧と右側の帳票画像を同時に見ながら直せる。
変更を保存するとPATCHリクエストがサーバーに送られ、データベースが更新される。修正後の行には「人間が確認済み」フラグが立つ。
確認完了ブロック
全件確認が終わったら「注文確定」ボタンを押す。確定するとステータスが「confirmed」になり、以降は編集できなくなる。
未確認の行が残っている場合は「未確認の行が○件あります」という警告を出して確定をブロックする。見落としが業務データに混入しないための安全弁だ。
担当者が安心して使える確認UIがあれば、AIの精度は「完璧」でなくていい。そういう設計だ。
*次回は「複数画像対応——サムネイルストリップとモーダルナビ」*
*シンプルシステム株式会社 代表 伊藤勝彦*