ANN-001 公開  更新

テキスト帯型 告知バー

ページの一番上に細い帯を置き、臨時休業や営業時間の変更などを1行の文だけで伝える設計です。
リンクやボタンを付けず、帯を読めば用件が済むように書きます。

ワイヤーフレーム(PC)

テキスト帯型 告知バー PC版ワイヤーフレーム

ワイヤーフレーム(SP)

テキスト帯型 告知バー SP版ワイヤーフレーム

SP版の特徴

  1. 文を左にそろえる:2行になったとき、中央そろえだと行の始まりがずれて読みにくくなるためです。
  2. 2行までに収める:帯が高くなると、本文が画面の下に押し出されるためです。

採用前の判断ポイント

向いているケース

  • 伝えたいことが1行で言い切れる(臨時休業・営業時間の変更など)
  • 詳しく説明するページを用意するほどの内容ではない
  • すべてのページで、同じお知らせを確実に目に入れたい

向かないケース

このワイヤーの特徴

1行で用件が終わるようにする

日付・何が起きるか・読み手への影響を、1つの文に収めています。
帯を読んだだけで用件が分かれば、詳しいページを開く手間がかかりません。

すべてのページの同じ場所に出す

どのページから入った人にも同じ位置で見えるよう、ヘッダーの上に置いています。
トップページだけに出すと、記事や問い合わせのページから入った人が気づけません。

リンクを付けず、帯を押しても何も起きないようにする

押せそうに見えて何も起きない帯は、読み手を迷わせます。
リンクのない帯は、文字だけの見た目にとどめています。

制作時のよくある失敗

いつのことか書いていない

「臨時休業します」だけでは、今日なのか先の話なのか分かりません。
日付と曜日を必ず入れます。

期限を過ぎても出し続けている

終わったお知らせが残っていると、ほかのお知らせも読まれにくくなります。
掲載の終わりの日を決めて、外す作業を予定に入れておきます。

文が長く、SPで何行にもなる

SPでは帯が画面の上を大きく占め、本文が押し下げられます。
SPで2行に収まる長さを目安に削ります。

読み上げで、すぐに割り込む設定にしている

急ぎでないお知らせに、読み上げを割り込ませる設定(role=alertなど)を付けると、ページを開くたびに読み上げが中断されます。
普通の文として置き、領域の名前を付けるのにとどめます。

よくある質問

告知バーには、どのくらいの長さの文を入れればよいですか?

PCで1行、SPで2行に収まる長さが目安です。
それ以上になる場合は、詳しい内容を別のページにまとめ、帯からはそのページへ案内します。

告知バーは、すべてのページに出したほうがよいですか?

臨時休業や営業時間の変更など、どのページから来た人にも関わる内容なら、すべてのページに出すのが向いています。
一部の人にしか関わらない内容は、関係するページだけに出します。

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

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

関連ページ

この型をシェアする

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

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

このPatternを書いた人

岡野 優太

株式会社ENVY DESIGN

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

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

レビュー・修正の履歴

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