ANN-003 公開  更新

閉じられる型 告知バー

帯に閉じるボタンを付け、読んだ人は閉じられるようにする設計です。
閉じたことを覚えておき、同じお知らせは次に開いたときも出しません。
新しいお知らせに変わったら、また表示します。

ワイヤーフレーム(PC)

閉じられる型 告知バー PC版ワイヤーフレーム

ワイヤーフレーム(SP)

閉じられる型 告知バー SP版ワイヤーフレーム

SP版の特徴

  1. 閉じるボタンを右上に置き、押せる範囲を広げる:指で押すため、小さな×だと押し間違えやすいためです。
  2. 文の右側に余白を取る:文が閉じるボタンの下に回り込み、重なって読めなくなるのを防ぐためです。

採用前の判断ポイント

向いているケース

  • キャンペーンやイベントの案内など、何日も続けて出すお知らせがある
  • 何度も来る人に、毎回同じ帯を見せたくない
  • 帯がなくなっても、お知らせの一覧やリンク先で同じ内容を確かめられる

向かないケース

このワイヤーの特徴

読んだ人が、自分で帯を片づけられる

閉じるボタンで、読み終えた帯を消せるようにしています。
何日も同じ帯が出続けると、画面の上が狭くなり、帯そのものが読み飛ばされるようになります。

閉じたことを覚えておく

閉じたことをブラウザに覚えておき、ページを移ったり開き直したりしても、同じお知らせは出しません。
閉じたのにまた出てくると、読み手は閉じたことが無駄だったと感じます。

内容が変わったら、また表示する

お知らせごとに見分けるための名前を付け、新しいお知らせになったら、閉じていても表示します。
古いお知らせを閉じた人にも、新しいお知らせは届きます。

閉じたあとの読み上げの位置を決めておく

帯を閉じると、押したボタンがなくなります。
読み上げやキーボードで使っている人が迷わないよう、閉じたあとはページの先頭付近に移るようにしています。

制作時のよくある失敗

閉じるボタンが小さく、押しにくい

×だけの小さなボタンは、SPで押し間違えやすくなります。
押せる範囲は44px程度の高さを目安に取り、読み上げ用に「このお知らせを閉じる」と名前を付けます。

閉じても、ページを移るとまた出てくる

閉じたことを覚えていないと、ページを移るたびに帯が戻ります。
閉じたことはブラウザに残し、同じお知らせの間は出さないようにします。

一度閉じると、新しいお知らせも出なくなる

「帯を閉じた」ことだけを覚えると、内容が変わっても表示されません。
お知らせごとに名前を付けて、どのお知らせを閉じたかを覚えます。

重要なお知らせまで、閉じられるようにしている

障害や休業のように、全員に知ってほしい内容は、閉じられると見落とされます。
閉じられる帯は、見逃しても困らない案内に使います。

よくある質問

閉じたことは、どのくらいの期間覚えておけばよいですか?

そのお知らせを出している間は、覚えておくのが基本です。
期限のないお知らせなら、数日から1か月程度を目安にし、期間を過ぎたら改めて表示します。

閉じたことを覚えるのに、Cookieは必要ですか?

ブラウザの保存の仕組み(localStorageなど)でも覚えておけます。
どの方法でも、利用者の情報を集めるためではなく、表示を切り替えるためだけに使います。

閉じるボタンは、帯のどこに置けばよいですか?

右端に置くのが一般的です。
文やリンクと重ならないよう、帯の右側に余白を取ってから置きます。

関連ページ

この型をシェアする

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

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

このPatternを書いた人

岡野 優太

株式会社ENVY DESIGN

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

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

レビュー・修正の履歴

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