WEBアプリケーション開発
スレッドが読みにくいという声から、メールをチャット形式で表示する機能を搭載。画像・PDFプレビュー、組織横断、チャットボタンによる切り替えに対応しました。
返信メールがわかりにくい!そんなご意見から、チャット形式のメール表示を搭載
「返信のやりとりが追いにくい」「添付をいちいち開くのが面倒」——そんなご意見をきっかけに、B-management のメール機能へチャット形式の表示を搭載しました。
開発の背景
従来のメール画面では、返信が積み重なるほど件名・署名・引用が混在し、いま何が話されているかが分かりにくくなりがちでした。特に請求書や見積書など、画像・PDFのやり取りが多い業務では、添付を都度開く手間も負担になっていました。
そこで、メッセージアプリのように会話の流れが一目で分かるチャット表示を追加し、メール業務の読みやすさを改善しました。
主な特徴
1. チャット形式で、返信の流れが一目瞭然
受信メッセージは左側、送信メッセージは右側の吹き出しで表示。会話の往復が時系列で並ぶため、「誰が・いつ・何を返したか」が直感的にわかります。
2. 画像添付もそのまま見える
添付画像はチャット上にプレビュー表示。別ウィンドウで開かなくても、やりとりの文脈のまま内容を確認できます。
3. PDFも画像化して表示。いちいち開かなくてOK
請求書などのPDFは、チャット内でサムネイル(画像化)して表示します。「開く」操作なしでも概要を把握でき、必要なときだけ原本を開けます。
4. 複数組織に所属していても、組織横断で確認できる
複数の組織・アカウントに所属している方でも、サイドバーから組織を切り替えつつ、メール・LINE・社内チャットを横断して確認できます。通知バッジで未読も把握しやすい設計です。
5. 「チャットボタン」で、必要なメールだけチャット表示
すべてのメールを強制的にチャット化するのではなく、チャットボタンで特定のスレッドだけチャット形式に切り替えられます。他のメールと表示が混同せず、普段どおりの一覧と必要なときだけのチャット表示を使い分けできます。
できるようになったこと
| 以前 | チャット表示後 |
|---|---|
| 返信・引用が入り混じり読みにくい | 吹き出しで会話の流れが追いやすい |
| 画像・PDFを都度開く必要があった | チャット上でプレビュー確認できる |
| 組織ごとに画面を行き来しがち | 組織横断でメールを確認できる |
| 表示形式の切り替えができなかった | チャットボタンで必要なスレッドだけ切替 |
本事例は、DXインフラSaaS「B-management」におけるメールUI改善として、WEBアプリケーション開発の実績です。