通知の型の選び方
通知の型は、画面の上に帯を出すのではなく、入口だけを置いて、読みたい人に開いてもらう形です。「同じ人が何度も来るか」「専用の入口を作るか、既存のメニューに印を付けるか」「写真で目を引きたいか、画面をすっきり保ちたいか」で、向いている型が変わります。全員に今すぐ伝えたい内容は、告知バーのパーツの型を使います。
問い1：同じ人が、何度も訪れますか？
未読を数えて伝える意味があるかを確かめる問いです。
| 状況 | 向く型 |
|---|---|
| 会員サイトやサービスの画面など、同じ人が何度も来て、お知らせが何件も出る | ベル型 |
| 何度も来る人に、メニューのページが更新されたことだけを伝えたい | 新着バッジ型 |
| 初めて来る人が多い、会社や店舗のサイト | → 問い2へ |
問い2：案内で、何を大事にしますか？
案内の中身と、画面の使い方で決まる問いです。
| 状況 | 向く型 |
|---|---|
| 写真で目を引き、イベントやフェアに誘いたい | フローティングカード型 |
| 画面の上も本文も空けたまま、入口だけを置いておきたい | 引き出しタブ型 |
| 全員に今すぐ伝えたい（臨時休業・障害など） | 帯を出す（重要度別型 告知バーなど） |
通知の型の比較
| 型 | 役割 | 入口の置き場所 | 向く状況 |
|---|---|---|---|
| ベル型 | 未読の伝え方 | ヘッダー | 同じ人が何度も来て、お知らせが何件も出る |
| 引き出しタブ型 | 置き場所 | 画面の右端 | 画面の上を空けたまま、お知らせの入口を置きたい |
| フローティングカード型 | 目を引く案内 | 画面の右下 | 写真で目を引きたい案内がある |
| 新着バッジ型 | 既存の入口への印 | グローバルナビの項目 | 専用のボタンを増やさず、更新があったことだけを伝えたい |
すべての型に共通する設計の原則
通知の型を作る中で、型が違っても繰り返し出てきた原則です。
- 開いた人にしか届かないことを前提にする。全員に届けたい内容は、告知バーでも伝える
- 本文を覆うモーダルにしない。開いたままでも本文を読めるようにする
- 開閉する部品は aria-expanded で状態を伝え、Escキーでも閉じられるようにする。閉じたら、開いたボタンに戻る
- アイコンや丸の印だけで意味を伝えず、「お知らせ」「新着あり」と分かる読み上げ用の名前を付ける
- 既読や閉じたことは、お知らせごとの名前で覚え、内容が変わったら改めて知らせる
- チャット・先頭へ戻る・追従するCTAなど、画面の端に浮かぶほかの部品と重ならない位置にする
- 出てくるときの動きは控えめにし、動きを減らす設定のときは動かさない
組み合わせの例
- 会員サイトやBtoBのサービス：ベル型で日々のお知らせを未読の数で伝え、障害のときだけ重要度別型 告知バーの重要の帯も出す
- 写真を大きく使う式場やホテルのサイト：引き出しタブ型でフェアや季節のプランをまとめ、ファーストビューは崩さない
- セミナーを開く制作会社や研修会社：記事を読み進めた人にフローティングカード型で次の開催を案内し、締切が近づいたら期限表示型 告知バーも使う
よくある質問
通知と告知バーは、どう使い分けますか?
臨時休業や障害など、全員に今すぐ気づいてほしい内容は、画面の上に帯を出す告知バーが向いています。急ぎではなく、読みたい人に開いてもらえばよい内容は、入口だけを置く通知の型が向いています。
通知の型だけで、重要なお知らせを伝えてもよいですか?
通知の型は、開いた人や読み進めた人にしか届きません。全員に必ず届けたい内容は、告知バーでも伝えます。
画面の右下に、ほかの部品もあるときはどうすればよいですか?
チャット、先頭へ戻るボタン、追従するCTAなど、画面の端に浮かぶ部品を洗い出し、高さや左右をずらして重ならないようにします。重ねきれないときは、通知の入口をヘッダーのベルにまとめる方法もあります。
閉じたことや既読は、どこに覚えておけばよいですか?
ログインのあるサイトなら利用者ごとにサーバーで、ログインのないサイトならブラウザに保存する方法があります。どちらの場合も、お知らせや案内ごとに見分けられる名前を付けて覚えます。