1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

面倒な記録を“間違えずに・素早く・誰でも”できるようにするUI設計

Posted at

ログって、地味だけどめちゃくちゃ重要ですよね。

オペレーターが対応した内容、動画監視中に発生した事象、クライアント報告用の記録…
すべての業務が「記録に残っているかどうか」でトラブル対応の質が変わる。

でも、現場ではこうなりがちです:

  • ログ入力が面倒だから記入漏れ
  • フォーマットが複雑で、記入ミスが増える
  • 運用ルールが人によって違う
  • エクセルを開くのが億劫

そんな悩みが積み重なった結果、私は **「誰でも・すぐに・迷わず・正確に入力できるログUIをつくろう」**と決めました。


🧩 ログの構造が崩れると、業務は信用されなくなる

現場にいた頃、私は何度も「ログがちゃんと残ってない」「報告がバラバラ」「あとで確認できない」系のトラブルに遭遇してきました。

例えば:

  • 「誰が対応したか分からない」→ クライアント対応の責任所在が曖昧に
  • 「対応内容が記載されていない」→ 報告書が書けない
  • 「記録形式が人によって違う」→ 月次集計が死ぬ

そうなると、管理側も判断が難しくなるし、現場に対して「どうやって対応してるか分からない」という不信感も生まれる。

その結果、報告業務が増える、確認回数が増える、そしてみんな疲弊する。

だから私は、「ログ設計は業務設計の心臓」だと思っています。


📋 現場にあったログ入力環境の課題

私が担当していたのは、コールセンターと動画配信監視という、**“記録が業務に直結する現場”**でした。

オペレーターにはこういう状況がありました:

  • 対応後、すぐに次のコールに移るためログ記入の時間がない
  • 入力項目が多すぎて、どれを書けばいいか迷う
  • 入力ルールが暗黙的で、新人がミスを連発
  • エクセルが重くて、PCがフリーズする

つまり、ログは「入力されるべきなのに、されにくい仕組み」になっていた。


💡 ログ入力をHTML+CSSでWeb化した

そこで私は、エクセル形式の入力を廃止して HTML+CSSでログ入力フォームを構築しました。ツールは社内イントラネット上で動作させ、Googleフォームっぽい感覚で誰でも使えるようにしました。

主な設計ポイント:

  • 必要最低限の項目に絞る:現場が「これだけ書けばOK」と思える安心感を優先
  • プルダウンとラジオボタン中心:手打ちより選択。これで記入ミスをほぼ排除
  • 入力ガイドを横に表示:新人でもルールに迷わず記入できるように
  • 送信後の自動ログ保存+通知:Google Apps Scriptで処理→スプレッドシートへ自動保存

これによって、記入時間は平均で40%減。しかも入力内容の正確性が上がったため、報告チェックの手間も減りました。


🖥 UI設計のこだわり:「使う人の流れ」を優先する

ログ入力って、ミスすると意味がなくなる。だから私は、以下のような順序でUIを設計しました。

1. 書きやすさ

  • 入力欄は大きく・見やすく
  • 項目は業務順に並べる(対応→状況→結果のように)

2. 誘導性

  • 必須項目には赤印を付ける
  • 「何を書けばいいの?」を横に表示(説明・例付き)

3. 精度

  • 日付・時間は自動挿入
  • 選択肢には“間違いやすい項目”を除外した配慮設計

4. ストレス軽減

  • 入力完了時は「お疲れ様でした」と表示
  • エラー時も「修正点はこちら」とフォローする文面付き

結果、UIがただの入力フォームじゃなく、“業務のナビゲーション”に進化したと思っています。


📈 スプレッドシート連携で集計も即対応

記入されたログは、Googleスプレッドシートにリアルタイムで記録されるようにしました。

これにより:

  • リーダーが“その場で”対応ログを確認できる
  • 自分のチームが対応した履歴を可視化できる
  • 月次報告用のデータ抽出が一瞬で終わる

しかも、スプレッドシート上でピボットテーブルを設定することで 案件数・対応時間・業務種別・担当者傾向 がすぐに可視化できるようになりました。


📄 ログと報告書の連携:VBAで帳票化を加速

ログを整えたら、次は報告書。

私はVBAで、ログデータからクライアント提出用の帳票を自動生成するツールを構築しました。具体的には:

  • スプレッドシートからCSVを取り込み
  • VBAマクロでフォーマットに整形
  • レイアウト・署名・日付を自動挿入
  • PDFに変換して指定フォルダへ保存

このプロセスにより、報告書作成時間が 1件30分 → 約5分 まで短縮。リーダーが「帳票作成に手が取られないので、現場対応に時間を回せる」と言ってくれたのが嬉しかったです。


🤖 Botもログに対応できるように進化

私が構築していた社内Botにも、ログ入力関連の機能を実装しました。

Botの新機能:

  • 「ログ記入の手順を教えて」と聞いたら、項目別に説明
  • 「○○業務の対応ログの例ってどんなの?」にテンプレ返答
  • 入力ミスが多い項目の注意喚起(例えば“業務種別”の選択間違い)
  • よくあるエラー→Botから解決方法をレコメンド

これによって、「ログ記入ミスを減らす仕組み」としてBotが一役買うようになりました。


👥 実際に現場で起きた変化

ログ設計を変えたことで、現場には以下のようなポジティブな変化がありました。

  • 「記入しやすいから、漏れなく書けるようになった」
  • 「ミスしてもすぐ直せる安心感がある」
  • 「新人でも入力が怖くない」
  • 「記録がちゃんとしてるから報告のときに堂々と言える」

中でも印象的だったのは、新人が「初めての業務の記録ってすごく緊張するけど、画面がちゃんと導いてくれて安心だった」と言ってくれたこと。ログフォームって、単なる記録じゃなく“働く人の安心設計”なんだなって実感しました。


✍️ 締めに:ログ設計は“信頼設計”でもある

私がログ設計を変えて思ったのは、次のことです:

  • 書きやすさ=記録の正確性
  • ミスが減ると、報告精度が上がる
  • UIが優しいと、“現場の人が記録する意思”を持てる

つまりログ設計は、現場を信頼し、現場から信頼されるための仕組みなんです。

誰でも使えて、迷わずに入力できて、あとから確認できる──そんな仕組みがあるだけで、現場の空気って驚くほど変わります。

そしてその変化は、ただのツールの話じゃなく、「記録=自分の仕事を形にすること」という意識の転換につながっていきました。


📘 次回:
第6回|ログ集計改革〜ExcelからGoogleスプレッドシートへ
── ローカル処理からチームで見える集計へ。一元管理の威力とその設計裏側

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?