ANN-005 公開  更新

重要度別型 告知バー

お知らせを「重要」と「通常」に分け、見た目とラベルで重要度を伝える設計です。
帯は1本だけにし、重要なお知らせがあるときはそちらを優先して、ほかのお知らせは件数で伝えます。

ワイヤーフレーム(PC)

重要度別型 告知バー PC版ワイヤーフレーム

ワイヤーフレーム(SP)

重要度別型 告知バー SP版ワイヤーフレーム

SP版の特徴

  1. ラベルを1行目に分ける:狭い幅でも、文を読む前に重要度が伝わるようにするためです。
  2. リンクを最後の行に置く:文を読み終えてから押せるようにするためです。

採用前の判断ポイント

向いているケース

  • 障害・臨時休業のような重要なお知らせと、キャンペーンなどの案内の両方を出すことがある
  • 同じ時期に、複数のお知らせが重なることがある
  • 重要なお知らせのときだけ、確実に目に入れたい

向かないケース

このワイヤーの特徴

重要度を、色だけでなくラベルでも伝える

「重要」「お知らせ」のラベルを付け、色の違いだけに頼らないようにしています。
色の見分けにくい人や、白黒で印刷した場合でも、重要度が伝わります。

帯は1本だけにする

帯を何本も重ねると、画面の上が埋まり、どれが大事か分からなくなります。
重要なお知らせがあるときはそれだけを出し、ほかのお知らせは「ほか1件」のように件数で伝えます。

重要なお知らせは、閉じられないようにする

障害や休業のお知らせは、全員に知ってほしい内容です。
閉じるボタンを付けず、状況が落ち着いたら運用側で外します。

通常のお知らせは、落ち着いた見た目にする

通常の案内まで目立つ色にすると、本当に重要なときに目立たなくなります。
普段は控えめな見た目にし、重要なときとの差をはっきりさせます。

制作時のよくある失敗

すべてのお知らせを「重要」にしてしまう

どれも重要と書かれると、読み手は重要の表示を気にしなくなります。
重要の基準(サービスが使えない・来店に影響する、など)を先に決めておきます。

色だけで重要度を分けている

赤と青の違いだけでは、色の見分けにくい人に伝わりません。
ラベルの文字やアイコンを添えます。

重要なお知らせのときだけ、帯の高さが大きく変わる

帯の高さが急に変わると、本文の位置がずれ、読んでいた場所を見失います。
重要度が変わっても、帯の高さはできるだけそろえます。

障害が解消しても、重要の帯が残っている

解消したあとも帯が残ると、まだ使えないと思われてしまいます。
解消したら、その旨を短く伝えてから外します。

よくある質問

どんなお知らせを「重要」にすればよいですか?

サービスが使えない・来店や予約に影響する・期限のある手続きが必要、など、知らないと読み手が困る内容を重要にします。
基準を決めて、運用する人の間で共有しておきます。

重要なお知らせが2件以上あるときは、どうすればよいですか?

帯には最も影響の大きいお知らせを1件だけ出し、ほかは件数とお知らせの一覧へのリンクで伝えます。
帯を重ねると、どれから読めばよいか分からなくなります。

重要なお知らせは、読み上げですぐに伝えたほうがよいですか?

ページを開いた時点ですでにある帯は、普通の文として読めれば十分です。
ページを開いている間に新しく重要なお知らせが出る場合に限り、読み上げで知らせる設定(role=alertなど)を検討します。

同じパーツのPattern

告知バーの型の選び方と一覧を見る

関連ページ

この型をシェアする

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

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

このPatternを書いた人

岡野 優太

株式会社ENVY DESIGN

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

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

レビュー・修正の履歴

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