お知らせや案内を知らせる通知を7つの型に分け、AIへの指示文・動く見本・コードを載せています。
通知はどの型を選ぶか
通知には、押した操作の結果をその場で伝えるものと、新しいお知らせに気づいてもらうものの2種類があります。お知らせの通知を選ぶときは、お知らせがどれくらいの頻度で増えるか、だれに向けたものか（ログインした人か、初めて来た人か）、急ぎの内容を含むか、の3つを先に決めます。急いで伝えたいことは、押して開くまで見えない場所にしまわず、告知バーやページの上部に出します。
| こんなとき | 向いている型 |
|---|---|
| 保存や送信の結果を、押したボタンのそばで確実に伝えたい | ページ内通知型 |
| お気に入りやコピーなど、軽い操作が効いたことだけを伝えたい | トースト型 |
| お知らせのページを更新したことに、気づいてもらえれば足りる | 新着バッジ型 |
| ログインした人に、まだ見ていないお知らせを件数で伝えたい | ベル型 |
| お知らせが多く、未読だけを読んだり、まとめて既読にしたりしてほしい | 既読管理一覧型 |
| ヘッダーに余地がないが、どのページからもお知らせを開けるようにしたい | 引き出しタブ型 |
| 記事を読んだ人に、催しや資料を1件だけ案内したい | フローティングカード型 |
通知がすべり込んで消える動き方は、アニメーション集の部品の動き（通知がすべり込んで消える）にあります。
ページ内通知型とトースト型は操作の結果を伝える型で、エラーのように読み逃すと困るものはページ内通知型に出します。新着バッジ型はいちばん軽く、ほかの型と組み合わせても邪魔になりません。フローティングカード型と引き出しタブ型は画面の端に固定して出すので、1つのページで両方を使うなら、置き場所を上下や左右に分けます。
どの型でも守ること
- 未読や新着は、文字でも伝える。色の付いた点や数字入りの丸だけに頼ると、色の区別がつきにくい人や、読み上げソフトで聞いている人には届きません。ボタンの
aria-labelに「未読 3件」「新着あり」と書きます。 - 見たら印を消す。開いた・押したのに件数や印が残ると、押しても何も変わらないように見えます。消す決まりを先に決めておきます。
- 急ぎの内容を通知の中だけに入れない。通知のパネルは、一度も開かれないまま終わることもあります。障害や期限の近い手続きは、ページの上の告知バーなどで知らせます。
- 画面の端に固定する部品どうしを重ねない。チャットの入口、Cookie の同意の帯、上へ戻るボタンのように端に貼り付く部品は、どこに置くかを先に割り振ってから足します。
- 出たときにフォーカスを奪わない。パネルの中にフォーカスを入れるのは、読み手が自分で開いたときに限ります。
よくある質問 (FAQ)
一覧を開いた時点で、件数の数字は消すのが分かりやすいです。一つひとつのお知らせの「未読」の印は、そのお知らせを開いたときか「すべて既読にする」を押したときに外します。数字が残り続けると、読み手は数字を気にしなくなります。
ブラウザの localStorage に覚えれば、同じブラウザの間は覚えておけます。別のスマホやパソコン、違うブラウザで開いたときには引き継がれません。プライベートブラウズなどで使えないこともあるので、読み書きは try と catch で囲み、使えないときもページが壊れないようにします。
どちらかの位置を変えるか、カードを出している間はもう片方を上にずらします。画面の端に固定する部品は、置き場所の一覧を作ってから足すと重なりを防げます。SP では画面が狭いので、同時に出すのは1つまでにするのが手堅いです。
ここに載せた型は、サイトを開いている間だけ見えるページの中の通知です。プッシュ通知はサイトを閉じていても端末に届きますが、読み手の許可が必要で、許可を求める出し方を誤ると嫌がられます。まずはページの中の通知で足りるかを考えます。