Portfolioはじめに
どれだけ優れたAIシステムを構築しても、使われなければ意味がありません。業務ツールの成否は、機能の良し悪しだけでなく、「現場で実際に使ってもらえるか」にかかっています。
この記事では、社内AIアシスタントのUI/UX設計と、運用に関わるポイントを解説します。「便利そうだけど使いにくい」ツールにならないための工夫をご紹介します。
UIデザインの設計思想
全ページ共通チャットウィジェット
AIチャットは、どのページからでもアクセスできるウィジェット形式で実装しました。
| 設計方針 | 理由 |
|---|---|
| ページ右下に常駐 | 視界に入るが邪魔にならない位置 |
| どのページでも利用可能 | わざわざ「AIページ」に移動しなくていい |
| 現在のURLを自動送信 | 文脈の理解に役立つ（「このページの内容について」と聞ける） |
| 最小化可能 | 必要ないときは隠せる |
なぜ専用ページではないのか
「AIチャット専用ページ」を作る方法もありますが、ウィジェット形式を選んだ理由があります。
作業中 → AIページに移動 → 質問 → 元のページに戻る → 作業再開
作業中 → その場で質問 → 回答を見ながら作業継続
ページ遷移の手間を省くことで、AIに質問するハードルを下げることができます。
フレンドリーなデザイン
親しみやすさの演出
業務ツールは「使われてなんぼ」です。見た目の親しみやすさも、利用率に影響します。
| 要素 | 工夫したポイント |
|---|---|
| カラーテーマ | 明るい色を基調に、親しみやすい印象 |
| アバターアイコン | 人物のアイコンで「相談相手」感を演出 |
| 吹き出し表示 | 「AIサポートも使えます」と存在をアピール |
| アニメーション | 開閉時のスムーズな動き |
初回利用時の導線
初めて使うユーザーのために、以下の工夫をしています。
- 目立つ吹き出し：「困ったときはAIに聞いてみてください」
- サンプル質問の表示：「こんな質問ができます」の例を提示
- 最初の挨拶：起動時にAIからの挨拶メッセージ
免責事項と注意喚起
なぜ免責が必要か
AIの回答は便利ですが、100%正確ではありません。業務で使う以上、AIの回答を鵜呑みにしないルールを周知する必要があります。
| リスク | 対策 |
|---|---|
| AIが誤った情報を回答 | 「必ずダブルチェックを」と明示 |
| 古い情報を参照 | 最終更新日を表示 |
| 根拠のない回答 | 参照元がない場合は「推測です」と表示 |
表示する注意書き
チャット画面には、以下の注意書きを常に表示しています。
情報は集約されたデータベースから参照しています。
質問の表現によって、取得元が正しくない場合もあります。
必ずダブルチェックを行ってください（特に料金案内等）
この注意書きにより、「AIが言ったから正しい」という誤解を防ぎます。
ダブルチェックの習慣づけ
単に注意書きを表示するだけでなく、回答に参照元リンクを付けることで、確認しやすくしています。
【回答】
返金の手続きは、以下の手順で承っております。
【参照元】
- FAQ「返金について」 [リンク]
- 2024/01/15の対応事例 [リンク]
参照元を1クリックで確認できるため、ダブルチェックの手間を最小限に抑えられます。
監査ログの設計
なぜログが必要か
AIの業務利用において、ログの記録は重要な役割を果たします。
| 目的 | 具体的な活用 |
|---|---|
| 品質改善 | よくある質問の分析、回答品質のレビュー |
| トラブル対応 | 問題が発生した場合の原因追跡 |
| 透明性確保 | AIがどんな回答をしたか記録として残す |
| 利用状況把握 | どの部署がよく使っているか、どんな質問が多いかを分析 |
記録する情報
監査ログには、以下の情報を記録しています。
| 項目 | 内容 | 用途 |
|---|---|---|
| ユーザー | メールアドレス | 誰が使ったかの特定 |
| タイムスタンプ | 質問・回答の日時 | 時系列での追跡 |
| アクセス元 | どのページで質問したか | 文脈の理解 |
| 質問内容 | ユーザーの入力 | 傾向分析 |
| 参照データ | 検索で取得したドキュメント | 根拠の確認 |
| 回答内容 | AIの出力 | 品質レビュー |
ログの透明性
ログを記録していることは、ユーザーに明示しています。
チャットは、回答内容の改善のため記録されます
これにより、透明性を確保しつつ、ユーザーが安心して利用できる環境を作っています。
回答フォーマットの統一
なぜフォーマットが必要か
AIの回答がバラバラだと、以下の問題が発生します。
- 「結局どうすればいいの？」が分かりにくい
- 必要な情報が見つけにくい
- ユーザーごとに使い勝手が異なる
採用したテンプレート
AIの回答は、以下のフォーマットで統一しています。
お問い合わせの前提を確認
結論を先に提示
追加で必要な情報があれば質問
優先度付きのToDoリスト
そのままコピペ可能な文面
根拠となったドキュメントへのリンク
このフォーマットにより、「最低限これだけ見れば対応できる」という一貫した体験を提供します。
アクセシビリティへの配慮
キーボード操作
マウスを使わずにキーボードだけで操作できるよう、以下を実装しています。
- Escキー：チャットを閉じる
- Enterキー：メッセージ送信
- Tab移動：各要素へのフォーカス移動
スクリーンリーダー対応
視覚に頼らない操作のため、適切なARIA属性を設定しています。
- チャットの役割を明示（role="dialog"）
- 新しいメッセージの通知（aria-live）
- ボタンの説明（aria-label）
運用で気をつけているポイント
よくある質問の分析
監査ログから、よくある質問を定期的に分析しています。
| 分析項目 | 活用方法 |
|---|---|
| 頻出質問 | FAQの優先度付け、マニュアルの拡充 |
| 回答できなかった質問 | データの追加、プロンプトの改善 |
| 参照元が適切でなかった質問 | データの分類見直し |
定期的な回答品質レビュー
月に1回程度、AIの回答をサンプリングしてレビューしています。
- 回答は正確か？
- 参照元は適切か？
- 不足している情報はないか？
問題があれば、データの更新やプロンプトの調整を行います。
まとめ
AIチャットのUI/UX設計で重要なのは、以下の3点です。
- 使いやすさ：どのページからでもアクセス可能、親しみやすいデザイン
- 透明性：免責事項の明示、監査ログの記録
- 改善サイクル：ログ分析、品質レビュー
どれだけ優れたAI技術を使っても、「現場で使われなければ意味がない」。この原則を忘れずに、使いやすく、信頼できるツールを目指しています。