告知バーのUIデザイン

告知バーの型の選び方

告知バーの型は、「帯だけで用件が伝わるか」「何日も出し続けるか、閉じられてもよいか」「期限や重要度を伝える必要があるか」の3つで変わります。問い1で中心の型を選び、問い2と問い3で加える型を決めます。画面の上に帯を出さず、入口だけを置いて読みたい人に開いてもらう形は、通知のパーツにまとめています。型を選んだら、各Patternのページでワイヤーフレームとプロンプト、動くデモを確認できます。

問い1：お知らせの用件は、帯だけで伝わりますか？

帯に書く量と、詳しいページを用意するかで決まる問いです。

問い2：何日も出し続けますか？閉じられてもよい内容ですか？

何度も来る人に、同じ帯を見せ続けてよいかを確かめる問いです。

問い3：期限や重要度を伝える必要はありますか？

帯の中で、急ぎ具合や大事さを伝える必要がある場合に加える型です。

告知バーの型の比較

すべての型に共通する設計の原則

告知バーの型を作る中で、型が違っても繰り返し出てきた原則です。どの型を選んでも、次の点は同じように確かめます。

• いつのことか、日付と曜日を必ず書く
• 帯は1本にする。重なる時期は、影響の大きいお知らせを帯に出し、ほかは件数とお知らせの一覧で伝える
• 掲載の終わりの日を決め、過ぎたら外す。締切のある案内は、締切と同時に申し込みのリンクを外す
• PCで1行、SPで2行に収まる長さにし、詳しい内容は別のページにまとめる
• 帯には「お知らせ」と分かる領域の名前を付け、急ぎでない内容に読み上げを割り込ませる設定は使わない
• 重要度は色だけでなく、ラベルの文字でも伝える。文字と背景の色の差を十分に取る
• ページを表示したあとに帯を差し込まず、帯の高さぶんの場所を先に確保して、画面のずれを防ぐ
• 帯の内容は、お知らせの記事や営業日カレンダーなど、ほかの場所の表記とそろえる

組み合わせの例

• クリニックや店舗の臨時休業：テキスト帯型で日付と休業を伝え、詳しい案内は臨時休業表示型 営業日カレンダーと重要なお知らせ固定型 お知らせにそろえて載せる
• BtoBのサービスの障害：重要度別型の重要の帯で状況を伝え、閉じられないようにする。解消したら短く伝えてから外す
• セミナーや相談会の募集：閉じられる型で案内し、締切が近づいたら期限表示型に切り替えて、締切の翌日に外す
• 年末年始の営業日：リンク付き型で要点を伝え、リンク先のお知らせの記事に日ごとの営業時間をまとめる

よくある質問

告知バーは、どのページに出せばよいですか?

臨時休業や営業時間の変更、障害など、どのページから来た人にも関わる内容なら、すべてのページの同じ位置に出します。キャンペーンなど一部の人に関わる内容は、関係するページだけに出す方法もあります。

告知バーと、お知らせの一覧は、どう使い分けますか?

告知バーは、今すぐ知ってほしい短い内容を目に入れるためのものです。経緯や詳しい説明はお知らせの記事に書き、一覧にも残しておきます。帯からは、その記事へ案内します。

告知バーは、何本まで出してよいですか?

1本にするのが基本です。重なる時期は、最も影響の大きいお知らせを帯に出し、ほかのお知らせは件数とお知らせの一覧へのリンクで伝えます。

告知バーで、表示の速さや画面のずれは起きませんか?

ページを表示したあとに帯を差し込むと、本文が押し下げられ、画面がずれることがあります。帯はページを作る時点で入れておくか、帯の高さぶんの場所を先に空けておきます。

告知バーを、ヘッダーと一緒に画面の上に残してもよいですか?

残せますが、画面の上が狭くなり、本文が読みにくくなります。残すのは障害など重要なお知らせに限り、通常のお知らせはスクロールとともに流れる形にするのが扱いやすくなります。