通知UIデザインパターン：プッシュ通知・インアプリ通知・トーストの設計

通知はユーザーに重要な情報を届ける強力なコミュニケーション手段ですが、過剰または不適切な通知はユーザーをアプリから離脱させる最大の原因にもなります。本記事では、ユーザーにとって価値ある通知を適切なタイミング・形式で届けるための通知UIデザインパターンを解説します。

通知の種類と使い分け

プッシュ通知（Push Notification）：

アプリを開いていなくてもOSレベルで届く通知。配送状況の更新・メッセージの受信・リマインダーなど、ユーザーが即座に知るべき情報に使います。

インアプリ通知センター（Notification Center）：

アプリ内の通知履歴ページ。過去のすべての通知を一覧で確認でき、既読/未読・削除管理ができます。

トースト通知（Toast / Snackbar）：

操作の結果（成功・エラー・情報）を画面下部または上部に一時的に表示するUI。「保存しました」「コピーしました」のような短い確認メッセージに使います。自動的に消える（3〜5秒後）のが基本です。

バナー通知：

画面上部に固定表示される帯状の通知。「オフライン状態です」「新しいアップデートがあります」など、継続的にユーザーに認識させたい情報に使います。

バッジ（Badge）：

アプリアイコンまたはタブアイコン上の数字バッジ。未読メッセージ数・未確認の通知数を示します。

プッシュ通知パーミッションのUX

最悪のアプローチ：

アプリ起動直後にOSのパーミッションダイアログを表示する。ユーザーはまだアプリの価値を体験していないため、大半が拒否します。

ベストプラクティス：

1. ユーザーがアプリの価値を体験した後（オンボーディング完了後・特定の機能を使った後）に通知の必要性を説明するカスタムプレリクエスト画面を表示します
2. 「注文状況をリアルタイムで受け取りますか？」のように、具体的なメリットを説明します
3. 「許可する」「後で」の選択肢を提供し、「後で」選択時に適切なタイミングで再度依頼します

カスタムプレリクエスト画面のデザイン：

• イラストまたはアイコン（通知のビジュアル）
• メリットの説明（「注文の更新情報を逃さない」など）
• 「通知を有効にする」ボタン（OSのダイアログを表示）
• 「後で設定する」のテキストリンク

トースト通知の設計

成功トースト：

• 背景: 緑系（#22C55E または濃いグリーン）または ダーク (#1F2937)
• アイコン: チェックマーク
• テキスト: 「保存しました」「コピーしました」（最大2行）
• 自動消去: 3〜4秒後

エラートースト：

• 背景: 赤系
• アイコン: エラーアイコン（！）
• テキスト: 具体的なエラー内容
• 自動消去: 5〜6秒（エラーは情報量が多く、少し長め）
• 「再試行」ボタンを添えることも有効

配置：

• モバイル: 画面下部（タブバーより上）
• デスクトップ: 右下または左下

スタッキング：

複数のトーストが連続して発生する場合、最大2〜3件を積み重ねて表示し、古いものを自動的に消します。

通知センター（インアプリ）のUI

リストレイアウト：

通知を時系列（新しい順）に並べたリストが基本です。各通知に：

• アイコン（通知の種類を示す）
• タイトル（太字）
• 本文（2行まで）
• 経過時間（「2分前」「昨日」）
• 未読バッジ（左の色付きドット）

グルーピング：

「今日」「昨日」「今週」「今月」のセクション見出しで日付グループ化すると、過去の通知を探しやすくなります。

アクション：

スワイプ（既読にする・削除）またはロングプレス・三点メニューで通知のアクションを提供します。「全て既読にする」「全て削除する」の一括操作も提供します。

通知設定UIの設計

カテゴリ別の通知設定：

「注文・配送」「キャンペーン・お知らせ」「メッセージ」「システム」などカテゴリ別にON/OFFを切り替えられるトグルスイッチのリストが標準です。

チャンネル別設定（Android）：

AndroidのNotification Channelに対応したきめ細かい設定UIを提供することで、ユーザーが重要な通知だけを受け取れるようになります。

まとめ

通知UIの設計で最も重要なのは「ユーザーにとっての価値」です。価値のない通知はユーザーをアプリから離れさせます。プレリクエスト画面でのメリット説明・適切なトースト通知・使いやすい通知設定UIを整備することで、ユーザーとの信頼関係を築く通知体験が実現します。UI ZUKANでは通知UIの実装例を掲載しています。