概要 ▶ スマホアプリの新着やお知らせで使う通知バッジをウェブページでも使う時代が来る…かも?
とある情報を検索していて、ブログのページを開いたらヘッダーになにか見慣れない表現がありました。(※スクリーンショットはその会社のトップページです)
![ウェブページのヘッダーで通知バッジ表示](https://res.cloudinary.com/jdash2000/image/fetch/f_auto,q_auto/https://jdash.info/assets_c/2024/05/8e7484eb1ff7ef80ea2034b4299f0c48ca1c6753-thumb-480xauto-1844.jpg)
フッターにも見慣れない表現。
![ウェブページのフッターで通知バッジ表示](https://res.cloudinary.com/jdash2000/image/fetch/f_auto,q_auto/https://jdash.info/assets_c/2024/05/2024-05-06-%E3%82%A6%E3%82%A7%E3%83%96%E3%81%A7%E9%80%9A%E7%9F%A5%E3%83%90%E3%83%83%E3%82%B8%E3%81%AE%E3%82%88%E3%81%86%E3%81%AA%E8%A1%A8%E7%A4%BA-02-thumb-480xauto-1846.jpg)
スマホの画面でみるとこんなイメージです。
![スマホの画面ではヘッダーには通知バッジ的表現はない](https://res.cloudinary.com/jdash2000/image/fetch/f_auto,q_auto/https://jdash.info/assets_c/2024/05/2024-05-06-%E3%82%A6%E3%82%A7%E3%83%96%E3%81%A7%E9%80%9A%E7%9F%A5%E3%83%90%E3%83%83%E3%82%B8%E3%81%AE%E3%82%88%E3%81%86%E3%81%AA%E8%A1%A8%E7%A4%BA-05-thumb-480xauto-1858.jpg)
![メニューをタップすることで通知表示のような表現の部分が出てくる](https://res.cloudinary.com/jdash2000/image/fetch/f_auto,q_auto/https://jdash.info/assets_c/2024/05/2024-05-06-%E3%82%A6%E3%82%A7%E3%83%96%E3%81%A7%E9%80%9A%E7%9F%A5%E3%83%90%E3%83%83%E3%82%B8%E3%81%AE%E3%82%88%E3%81%86%E3%81%AA%E8%A1%A8%E7%A4%BA-06-thumb-autox807-1854.jpg)
厳密には見慣れないというか、見慣れまくっていますけど、ウェブページでは見慣れないものですね。
スマホではみなさんも毎日見ていると思います。アプリアイコンの右上にバッジとして赤丸の中に数字という表現。
以下の画像の例では未読メールが3件という意味です。
なお、「セミナー・イベント❷」をクリックするとこんな画面になりました。[リンク]
![セミナーページ](https://res.cloudinary.com/jdash2000/image/fetch/f_auto,q_auto/https://jdash.info/assets_c/2024/05/2024-05-06-%E3%82%A6%E3%82%A7%E3%83%96%E3%81%A7%E9%80%9A%E7%9F%A5%E3%83%90%E3%83%83%E3%82%B8%E3%81%AE%E3%82%88%E3%81%86%E3%81%AA%E8%A1%A8%E7%A4%BA-03-thumb-480xauto-1848.jpg)
どうやらセミナーの申込受付中のものが2件あるということらしいです。なるほど。
なお、オンデマンド配信の申込はカウントされていないようです。
今回のウェブページで通知バッジのような表現はウェブページでは見慣れなかったので、思わず記録がてらブログを書いてしまいました。
結構目を惹く表現だと感じましたので、新着やお知らせを強調する際に、これから流行る表現になっていくのか気に掛けていきます。
最後にスマホの画面でヘッダーに通知バッジのような表現を付けたイメージを作ってみました。
![メニュー部分に通知バッジのような表現を重ねたもの(イメージ)](https://res.cloudinary.com/jdash2000/image/fetch/f_auto,q_auto/https://jdash.info/assets_c/2024/05/d92ffcb0f5df83a69b46490c59536fe9d583602c-thumb-480xauto-1856.jpg)
みなさんはどう思いましたか?
それでは、また。
関連情報・参考資料
- Sprocket(今回紹介したウェブページのサイト)