NTF-004 公開  更新

新着バッジ型 通知

グローバルナビの「お知らせ」など、もともとあるメニューの項目に小さな丸の印を付け、新しい情報があることを伝える設計です。
そのページを開いたら印を外し、新しい情報が出たら再び付けます。

ワイヤーフレーム(PC)

新着バッジ型 通知 PC版ワイヤーフレーム

ワイヤーフレーム(SP)

新着バッジ型 通知 SP版ワイヤーフレーム

SP版の特徴

  1. メニューボタンにも印を付ける:SPではメニューが畳まれていて、項目の印だけでは開くまで気づかれないためです。
  2. 開いた中の項目にも印を付ける:メニューを開いたあと、どの項目が新しいのかを探さずに済むようにするためです。

採用前の判断ポイント

向いているケース

  • お知らせ・セミナー・新着の実績など、更新を知らせたいページがメニューにある
  • 通知のための専用のボタンを、ヘッダーに増やしたくない
  • 何度も来る人に、更新があったことだけをさりげなく伝えたい

向かないケース

このワイヤーの特徴

もともとある入口に、印だけを足す

「お知らせ」のメニューに小さな丸を付け、新しい情報があることを伝えています。
通知のための専用のボタンを増やさないので、ヘッダーがすっきりしたままです。

印の意味を、文字でも伝える

丸の印だけでは、読み上げや色の見分けにくい環境で意味が伝わりません。
メニューの名前に「新着あり」を添え、目で見る人と同じ情報を伝えています。

見たら外し、新しい情報が出たら付け直す

そのページを開いたら印を外し、次に新しい情報を公開したときに改めて付けます。
いつまでも残る印は、やがて誰にも見られなくなるためです。

SPでは、メニューボタンにも印を付ける

SPではメニューが畳まれているので、項目の印だけでは気づかれません。
メニューボタンにも同じ印を付け、開いた中の項目へ案内します。

制作時のよくある失敗

印をいつ外すか決めていない

外す決まりがないと、印が付けっぱなしになり、新しい情報があっても気づかれなくなります。
ページを見たら外す、一定の日数で外す、などを決めておきます。

印を、あちこちのメニューに付ける

すべての項目に印があると、どれが本当に新しいのか分からなくなります。
印を付ける項目は1〜2か所に絞ります。

丸の印だけで、意味を伝えている

丸だけでは「新着」なのか「注意」なのか分かりません。
読み上げ用の文を添えるか、「NEW」の文字にするなど、意味が伝わる形にします。

SPのメニューボタンに印がない

畳まれたメニューの中にだけ印があると、開くまで気づかれません。
メニューボタンにも印を付けます。

よくある質問

新着の印は、丸と「NEW」のどちらがよいですか?

場所に余裕があれば「NEW」のように文字にすると意味が伝わりやすくなります。
メニューの幅が狭い場合は丸の印にし、読み上げ用に「新着あり」と添えます。

新着の印は、何日くらい付けておけばよいですか?

そのページを見たら外すのが基本です。
見たかどうかを覚えられない場合は、公開から1〜2週間など、日数で外す決まりにしておきます。

ログインのないサイトでも、見たかどうかを覚えられますか?

ブラウザに保存する方法で覚えられます。
ただし、別の端末やブラウザでは、印がもう一度表示されます。

同じパーツのPattern

通知の型の選び方と一覧を見る

関連ページ

この型をシェアする

チームや制作先に、この型のページを送れます。

この型は役に立ちましたか?

このPatternを書いた人

岡野 優太

株式会社ENVY DESIGN

代表取締役/ディレクター/デザイナー

Web業界歴14年。これまでに500件以上のWeb制作プロジェクトに携わり、企業サイト、採用サイト、ECサイトなど幅広い領域を手がけてきました。情報設計・ディレクション・デザインを中心に、Webサイトの企画から改善まで携わっています。近年はAIO(AI Optimization)・GEO領域に注力し、ChatGPTやPerplexity、Google AI Overviewなど生成AI検索からの引用獲得を支援しています。

レビュー・修正の履歴

  1. 公開 アバター画像岡野 優太 この型を公開