ウェブページで通知バッジ的表示をしていて目を惹かれた


  • 公開:
  • 更新:
  • 編集:
概要 ▶ スマホアプリの新着やお知らせで使う通知バッジをウェブページでも使う時代が来る…かも?

とある情報を検索していて、ブログのページを開いたらヘッダーになにか見慣れない表現がありました。(※スクリーンショットはその会社のトップページです)

ウェブページのヘッダーで通知バッジ表示
ウェブページのヘッダーで通知バッジ表示

フッターにも見慣れない表現。

ウェブページのフッターで通知バッジ表示
ウェブページのフッターで通知バッジ表示

スマホの画面でみるとこんなイメージです。

スマホの画面ではヘッダーには通知バッジ的表現はない
スマホの画面ではヘッダーには通知バッジ的表現はない
メニューをタップすることで通知表示のような表現の部分が出てくる
メニューをタップすることで通知表示のような表現の部分が出てくる

厳密には見慣れないというか、見慣れまくっていますけど、ウェブページでは見慣れないものですね。

スマホではみなさんも毎日見ていると思います。アプリアイコンの右上にバッジとして赤丸の中に数字という表現。

以下の画像の例では未読メールが3件という意味です。

なお、「セミナー・イベント」をクリックするとこんな画面になりました。[リンク

セミナーページ
セミナーページ

どうやらセミナーの申込受付中のものが2件あるということらしいです。なるほど。

なお、オンデマンド配信の申込はカウントされていないようです。

今回のウェブページで通知バッジのような表現はウェブページでは見慣れなかったので、思わず記録がてらブログを書いてしまいました。

結構目を惹く表現だと感じましたので、新着やお知らせを強調する際に、これから流行る表現になっていくのか気に掛けていきます。

最後にスマホの画面でヘッダーに通知バッジのような表現を付けたイメージを作ってみました。

メニュー部分に通知バッジのような表現を重ねたもの(イメージ)
メニュー部分に通知バッジのような表現を重ねたもの(イメージ)

みなさんはどう思いましたか?

それでは、また。

  • Sprocket(今回紹介したウェブページのサイト)
カテゴリー:

このページをぜひシェアしてください