「ごみ回収の取り忘れ防止アプリ」をAI(Claude Code)と一緒に作ってみる話 ④事務所の稼働ボードと、UIデザイナー評価73点から積み重ねた改善

前回③の次回予告どおり、今回は事務所側の稼働ボードまわりの改善と、運用しながら積み重ねてきた細かいUI改善についてまとめて書きます。今回はいつもより盛りだくさんで、文章も長めになりました。もともとこの連載は、事細かく・長くなってもいいと思って始めているので、そのつもりで読んでいただければと思います。

事務所の稼働ボードで、班の中身まで見られるようにした話

もともと事務所の稼働ボードは、各班のカードに「進捗」「現在の取り場」「申告ステータス」「取り残し・積載・異常の件数」といった要約が表示されるだけでした。これはこれで全体の状況をつかむには十分なのですが、「この班は具体的にどこまで終わっていて、どこで止まっているのか」まで知りたい場合には、一つひとつ確認する手段がありませんでした。

そこで、各班のカードに「▼ 取り場ごとの状況」という展開ボタンを付けました。開くと、その班が回る取り場が巡回順に並び、取り場ごとに「済」「取り残し」「他班へ」「一部」「未着手」のいずれかの状態と、取り残しの理由、現在地が一覧できます。取り場は区(グループ)ごとに小見出しで区切っているので、巡回エリアの単位でも状況がつかみやすくなっています。

これは新しく専用のAPIを作って対応しました。事務所の画面は25秒ごとに自動更新される作りになっているのですが、展開した状態のまま自動更新がかかるたびに表示がちらついてしまうと使いづらいので、開閉状態とデータの両方をキャッシュして、更新のたびに画面がガタつかないようにしています。

また、この「取り場ごとの状況」展開は、事務所側だけでなく、現場のタブレットにある「他の班の稼働状況を見る」画面にも同じ形で追加しました。もともと現場側のこのメニューは目立たない位置に埋もれていて気づかれにくかったので、メニューの先頭に、アイコン付きの大きなボタンとして配置し直してもいます。事務所と現場、どちらからでも同じように他の班の状況が見られるようになったことで、「あの班が今どこで何をしているか分からない」という場面はかなり減ったと思います。

体感速度が重いという声への対応

機能を足していくうちに、画面の表示が以前より少し重く感じられる、という声が出てきました。原因を調べたところ、同じリクエストの中でマスタ系のシート(コース一覧や取り場一覧など、頻繁には変わらないデータ)を何度も読み直していたことが分かりました。

対応として、1回のリクエスト内に限ってマスタシートの読み込み結果を使い回す仕組みを入れました。対象はマスタだけで、チェック結果や異常報告といった、書き込んでからすぐ読み直す可能性があるデータは常に最新を読みに行くようにしています。Google Apps Scriptはリクエストのたびにスクリプトが最初から実行し直される仕組みなので、このキャッシュはリクエストをまたいでは効かないのですが、それでも1回の画面表示あたりに読み込むシートの数をかなり減らすことができました。

あわせてクライアント側でも、タブレットから送信している最中や、自分が操作した直後の数秒間は、自動更新が割り込んでこないように調整しました。せっかく入力している最中に裏から更新がかかって画面が切り替わる、という引っかかりを防ぐためです。

UIデザイナーに評価してもらったら73点だった話

これは日報のnoteでも書いた話と似ているのですが、この回収現場ボードについても、Claude Codeの中でUIデザイナー役のサブエージェントに現場画面・事務所画面を評価してもらいました。結果は100点満点中73点でした。

指摘された内容はかなり広範囲にわたっていて、色がハードコードであちこちに散らばっていること、赤色が使われすぎていて本当に危険な状態がどれか分かりにくいこと、ダークモードがないこと、文字が小さすぎる箇所があること、ボタンやタップ領域が小さく押しづらいこと、確認ダイアログがブラウザ標準のもので使いやすさの配慮がないこと、などが挙げられていました。

これを受けて、かなり大きな作り直しをしました。まず色については、散らばっていた15色以上のハードコードされた色指定を全て、状態の意味ごとに定義し直した変数に置き換えました。「完了」「残り」「他班へ」「積載中」「対象外」「危険」といった意味の軸で色を再定義し、赤は「危険」を表す1色だけに統一しています。たとえば「まとめ置き」の表示色は水色から紫に変え、「他班へ」は青にする、というように、似た色がかぶらないように整理しました。現場画面と事務所画面はそれぞれ別のHTMLファイルなのですが、この色の定義だけは一字一句まったく同じものを両方に書いていて、ソースコード上にもその旨をコメントで残してあります(Google Apps Scriptの仕組み上、CSSファイルを共有する機能がないための対応です)。

ダークモードにも対応しました。端末の設定に自動で追従する仕組みに加えて、画面のヘッダーに月と太陽のアイコンで手動切り替えもできるようにしています。ダークモードのときは「残りN件」の表示を赤くしない、といった細かい調整も入れました。

文字の大きさは最小13pxに統一しました。バッジやタグ、ツールバーの文字が小さすぎて読みにくいという指摘があったための対応です。「残り N件」の表示も、普段は黒、遅れているときだけ赤、という使い分けに変え、色付きの文字はコントラストを上げて読みやすくしています。

タップ操作まわりでは、ボタンを押したときに少し縮んで暗くなる反応を全体に付けました。また、操作できる要素の最小サイズを48px、よく使う主要なボタンは56pxに広げています。それまでリンクのような見た目だった「追加」ボタンも、破線で囲んだボタンらしい見た目に変えました。

一覧画面で「未着手」のバッジが赤系の色で表示されていたせいで、画面全体が赤だらけに見えてしまう問題もありました。これは、背景色を使わず枠線だけの無彩色バッジに変更することで解消しています。

取り場の詳細画面も大きく作り直しました。品目ごとにアコーディオン形式にして、基本は開いた状態で「回収済・取り残し・対象なし」の選択肢と状態別の入力、他班へ渡す・まとめ置きにするといった操作がすべて見えている状態にしています。回収済にした品目だけは自動で折りたたまれる仕組みで、折りたたんだ品目には「回収済にする」ボタンだけが残ります。品目名や三角のマークをタップすれば、個別に開閉もできます。下部には「N品目まとめて回収済」という大きなボタンも用意しました。ヘッダー部分は取り場名・住所・鍵マーク・注意マークだけに絞り込み、参照写真も小さめのサイズに調整しています。

進捗の表示も2段構成にしました。1段目にコース名・残り件数・時計・進捗バー、2段目に取り残しや引き継ぎ待ち、積載中といった件数をピル状の表示でまとめ、件数が0のものは表示しないようにしています。画面の下部には「一覧」と「次の取り場へ」の2つのボタンを固定で表示するようにし、よく使う操作のためにいちいち画面の下まで手を伸ばさなくて済むようにもしました。

メニュー部分やダイアログの使い勝手も見直しました。メニューを開いたときにキーボードやマウスでも操作しやすいよう、ダイアログ共通の仕組みを用意して、Escキーで閉じられるようにしたり、フォーカスが外に逃げないようにしたり、閉じたときに元の操作していた場所にフォーカスが戻るようにしたりしています。アイコンだけのボタンには読み上げ用のラベルを、画像には代替テキストを付けました。ブラウザ標準の確認ダイアログ(はい/いいえのポップアップ)も、画面の上部に赤い帯で「やめる/実行する」と出すインラインの確認表示に置き換えています。積んだ荷物を降ろすときや、参照写真を撮り直すときなど、取り消しのきかない操作の確認に使っています。

メニューの項目順も、よく使う3つの操作を上に、区切り線を挟んで車両変更、一番下に赤字で「選び直す」という並びに整理しました。コースを切り替えるタブも、背景色とのつながりを自然にし、どのコースを見ているか進捗表示に常に出るようにしています。

事務所側の画面では、更新が止まっている班のカードに枠と左帯で目立つ印を付けたり、テーブルの文字サイズや行の高さを少し広げたり、異常報告の写真をタップで拡大できるようにしたりといった調整もあわせて行いました。印刷するときは、ダークモードの設定に関わらず常に明るい配色で印刷されるようにもしています。

小さいけれど地味に効く改善

このほかにも、運用の中で出てきた細かい要望にいくつか対応しました。

取り場の詳細画面を開閉するとき、同じ取り場をもう一度開いた場合にはスクロール位置を覚えておいて、閉じる前に見ていた場所に戻るようにしました。それまでは毎回画面の先頭に戻ってしまい、長い品目リストの途中を見ていたときに不便だったためです。別の取り場に移動したときだけ、先頭に戻るようにしています。

「他の班に任せる」「まとめ置きへ持ち出し」といった、取り場の操作の中でもよく使うボタンは、大きさと色を目立つように変更しました。普段の品目チェックのボタンと同じくらい押しやすく、見つけやすくするためです。

今のところの状況

これだけの作り直しを経て、現在も全コースで試験運用を続けています。運用しながら細かい要望が出てくるたびに、その都度対応を重ねている状況です。

次回予告

次回は、現場の運用が進む中で見つかった細かいバグの話や、企業回収まわりのデータ整備について書いてみようと思います。

熊谷興業株式会社　熊谷朝和　 (山口県光市)