お知らせ・通知機能、情報過多にしないためのUX設計
お知らせ・通知機能は、「ユーザーに気づいてほしい」という目的で作られるはずなのに、設計を誤ると真逆の結果を招きます。通知が多すぎれば見なくなり（通知疲れ）、少なすぎたり分かりにくかったりすれば重要な情報を見逃されます。
ポイントは、未読・既読が一目で分かること、重要な情報が埋もれないこと、そして情報量が多くなっても負担にならない仕組みを用意しておくことです。
配信のタイミングや頻度、通知文言の書き方、遷移先の設計まで含めて考えることで、通知本来の目的である「気づいて、行動してもらう」状態に近づけます。
目次
未読・既読を視覚的に区別する
お知らせの一覧では、読んだかどうかが見た目だけで分かることが基本です。
- タイトルはデフォルトで太字にし、既読になったら細字（通常のウェイト）に切り替える
- 太字・細字の差だけでなく、未読の行にうっすら背景色を敷く、行頭に小さなドット（●）を添えるといった表現を軽く重ねると、太字に気づきにくいユーザーにも伝わりやすくなる。ただし色・太字・ドット・アイコンを全部同時に使うと、かえってごちゃついた印象になるため、基本は太字と細字の差を軸にし、他は補助的に留める
- 未読の件数を、一覧の見出しやタブに「未読3件」のように数字で示しておくと、開かなくても状況が把握できる
重要なお知らせは、目を引く見た目にする
すべてのお知らせを同じ見た目で並べると、緊急性の高い情報も、日常的な案内も同じ重みに見えてしまいます。
- 重要度の高いお知らせには、背景色を変える、タイトル横にアイコン（警告マークなど）を添えるといった方法で視覚的に優先度を伝える。ただしこれは「本当に重要なものだけ」に使うのが前提で、通常のお知らせにも同じ強調表現を使ってしまうと「重要」の意味がインフレを起こし、結局どれも同じに見えてしまう
- 重要度の基準（何をもって「重要」とするか）は、あらかじめ運用ルールとして決めておくとブレにくくなる
タイトルは省略しても、全文を読める手段を残す
タイトルが長くなる場合、無条件に省略するのではなく、情報が欠落しない工夫とセットで考えます。
- 一覧表示ではタイトルを1〜2行までとし、それを超える場合のみ末尾を「…」で省略する
- 省略した部分は、ホバー時のツールチップやタップ時の展開で全文を確認できるようにし、「読めない」状態を残さない
- そもそもタイトル自体を簡潔に書く運用ルールを設けておくと、省略に頼る場面自体を減らせる
通知はヘッダーに置き、気づける状態にする
通知の存在に気づいてもらうには、置き場所と見た目の両方が重要です。
- ヘッダーに通知アイコン（ベルマークなど）を常設し、未読がある場合は赤丸のバッジを表示する
- バッジの中に未読件数を数字で表示すると、「どれくらい溜まっているか」が開かずに分かる
- アイコンをクリックすると通知一覧が表示され、そこから各通知の詳細に遷移できる、という2段階の導線にする
- 一覧・詳細のいずれにも、日付・時間を明記する。「いつの情報か」が分からないと、優先順位の判断も、対応の緊急度も測れなくなる
通知が多いときの負担を減らす仕組み
通知の件数が増えるほど、ひとつずつ目を通す負担も増えていきます。
- 「あとで読む」機能を用意し、今すぐ対応しなくてよい通知を、未読のまま一時的に脇に置けるようにする
- 一覧にチェックボックスを設け、複数選択してまとめて既読にできるようにする
- 通知の種類ごとにタブやフィルタ（お知らせ、システム通知、メッセージなど）を分けておくと、「今見たい種類だけ」に絞り込め、情報過多の印象を和らげられる
- 全件を一括で既読にできる操作も用意しておくと、「とりあえず全部消化したい」というニーズにも応えられる
配信の頻度・タイミングを設計する
表示の工夫だけでなく、そもそも「送りすぎない」ことも情報過多対策の一部です。
- 同じ内容の通知を、短時間に何度も重複して送らないようにする
- 複数の更新が同時に発生した場合、1件ずつ送るのではなく、まとめて1通の通知にする（ダイジェスト化）
- 深夜・早朝など、緊急性の低い通知が届いてほしくない時間帯を考慮し、配信時間をずらす、または翌朝にまとめて送る
- 「とりあえず全部通知する」のではなく、そもそも通知する必要がある情報かどうかを、配信前に精査する
通知文言は、内容が一目で伝わる書き方にする
見た目の工夫がどれだけ整っていても、文言があいまいでは効果が薄れてしまいます。
- 「更新のお知らせ」のような、内容が推測できない曖昧な文言を避け、タイトルだけで何が起きたか分かるようにする
- 誰が、何をしたのかを短く明記する（例：「田中さんがコメントに返信しました」）
- 通知の種類ごとに文言のテンプレートを用意し、担当者によって表現の質がばらつかないようにする
通知から遷移した先で、探させない
通知をクリックした後の遷移先が分かりにくいと、通知そのものの価値が下がってしまいます。
- 通知をクリックしたら、一覧ページを経由させず、対象の詳細画面に直接遷移させる（一覧→一覧→詳細ではなく、一覧→詳細の2段階にする）
- 遷移先がページ内の一部（コメント欄など）である場合は、該当箇所まで自動でスクロールし、ハイライト表示するなどして探させないようにする
- ログインが必要な操作の場合、ログイン画面で止めず、ログイン後に元々の遷移先へ自動的に戻す
LYZON Designのクリエイティブ・UI/UX
デザインひとつでCVRが変わります
見た目だけでなく成果につながるUI/UX設計を提供。LYZON Designのサービス詳細はこちらからどうぞ。
お知らせ・通知機能に関するよくある質問
Q1. 未読・既読の表現は、太字・細字以外に何がありますか？
行の背景色を変える、未読件数をバッジで表示する、行頭にドットを添えるといった方法があります。ただし表現を重ねすぎるとかえって分かりにくくなるため、基本は太字と細字の差を軸にし、他は補助的に使うのがおすすめです。
Q2. 「重要なお知らせ」の強調表現は、どのくらいの頻度で使ってよいですか？
明確な基準はありませんが、多用すると「重要」の意味が薄れてしまいます。本当に緊急性・重要性が高いものに絞って使い、通常のお知らせとは明確に差をつけることをおすすめします。
Q3. タイトルの省略は、何文字くらいを目安にすればいいですか？
サイトのデザインやカラム幅によって異なりますが、一覧では1〜2行に収まる文字数を目安にすることが多いです。それ以上は省略し、ツールチップや詳細画面で全文を確認できるようにしておけば、文字数の厳密な基準にこだわりすぎる必要はありません。
Q4. 通知アイコンはヘッダー以外に置いてもいいですか？
補助的にフッターやサイドメニューに置く例もありますが、主要な導線はヘッダーに置くのが基本です。ユーザーが最も見つけやすい場所に統一しておくことで、迷わず気づける状態を維持できます。
Q5. 通知をまとめて送る（ダイジェスト化）と、緊急性の高い通知も埋もれませんか？
すべてをまとめてしまうと、緊急性の高いものまで埋もれるリスクがあります。重要度の高い通知は即時配信、それ以外は一定時間ごとにまとめる、というように、重要度に応じて配信方法を使い分けるのがおすすめです。
Q6. 通知文言のテンプレートは、どこまで固定すればいいですか？
「誰が」「何をしたか」という基本構造だけ固定し、対象名や内容などの差し込み部分は可変にしておくのが一般的です。すべて固定文言にしてしまうと、状況に合わない不自然な文言になることがあるため、可変部分を残しておくとよいでしょう。
Q7. 通知からの遷移先は、必ず1クリックで詳細画面に飛ばすべきですか？
基本的にはその方が望ましいですが、対象が削除済み、権限がないなど、詳細画面に遷移できない例外もあります。その場合は、なぜ遷移できないのかが分かるメッセージを表示し、一覧ページなど次に取れる行動を示すようにしましょう。
LYZONのWebデザイナー マネージャー。社内案件ではディレクターも担当。
Webデザイン・コーディングとの比率は半々。2015年入社。
ロックンロールを深く愛している。
