ページの最上部に置くお知らせの帯を7つの型に分け、AIへの指示文・動く見本・コードを載せています。
告知バーはどの型を選ぶか
告知バーは、ヘッダーの上に細い帯を敷いて、そのときだけのお知らせを伝える部品です。型を選ぶときは、帯の文だけで用が済むか、詳しいページがあるか、どのくらいの期間出し続けるか、締切があるか、同じ時期に何件を知らせるか、の順に考えます。どの型でも、帯は1本・1文に絞ると読まれやすくなります。
| こんなとき | 向いている型 |
|---|---|
| 臨時休業など、1文で伝わり、読んだ人にしてほしい操作がない | テキスト帯型 |
| 日程の一覧や手続きの説明など、詳しいページがある | リンク付き型 |
| 何週間か出し続ける・同じ人が何度も訪れる | 閉じられる型 |
| 申し込みやキャンペーンに締切がある | 期限表示型 |
| 点検・障害などの急ぎの知らせと、普段のお知らせが混ざる | 重要度別型 |
| 送料・発送日・新しいサービスなど、同じ時期に知らせたいことが2〜3件重なる | 複数告知の切り替え型 |
| 読み飛ばされても困らない短い知らせを並べ、店先のような動きを出したい | 流れる文字型 |
閉じられる型と期限表示型は、帯をどう出すかを決める型です。リンク付き型に重ねて使っても問題ありません。とはいえ、誰にも見落としてほしくない知らせには × を付けません。複数告知の切り替え型と流れる文字型は文が動くので、止めるボタンを必ず添え、急ぎの知らせは動かない帯で出します。
ロゴやカードを帯にして流し続ける動きは、アニメーション集のループの動き（ループスライダー）にあります。流れる文字型は文のお知らせ、あちらはロゴやカードの帯です。
どの型でも守ること
- 帯を何段にも積まない。お知らせが重なっても帯は1本にして、いちばん大事なものだけを出し、残りはお知らせ一覧へ案内します。2〜3件をどうしても並べたいときは、1本の帯の中で切り替えます。
- いつのことかを日付で書く。「明日」「今週末」は読む日によって意味が変わります。曜日も添えると読み違いが減ります。
- 出す日と一緒に、外す日を決める。期限の切れた知らせが出たままだと、サイトのほかの情報まで手入れされていないように見えます。
- header より前に置き、名前を付ける。
role="region"とaria-label="お知らせ"を付けます。role="alert"は、読み込みのつど読み上げソフトが割って入るので付けません。 - SP で文を省略しない。「…」で切ると、肝心の日付や条件が消えます。文を短くしたうえで、折り返して全文を見せます。
よくある質問 (FAQ)
ふだんのお知らせは告知バーにします。告知バーはページを読む邪魔をせず、気づいた人が読めば足ります。ポップアップは画面をふさぎ、閉じる操作をさせるので、操作の前に必ず確かめてもらう必要があるときだけに使います。
基本はページと一緒に流れるようにします。帯まで画面に残すと、追従するヘッダーと合わせて上の部分が厚くなり、SP では本文が見える範囲が狭くなります。ページを開いたときに目に入れば、役目は果たせています。
ヘッダーや本文と区別できる、濃い色の面が使いやすいです。濃い灰色やサイトのメインの色に白い文字を載せると、細い帯でも目に入ります。重要度で色を変えるときも、「重要」などのラベルの文字を添えて、色だけに判断を任せません。
帯にはいちばん大事な1件だけを出し、ほかはお知らせ一覧へ案内するのが基本です。同じ時期に2〜3件を並べたいときは、複数告知の切り替え型のように1本の帯の中で切り替え、止めるボタンを付けます。帯を何段にも積むと、ファーストビューが押し下げられます。