ANN-004 公開  更新

期限表示型 告知バー

申し込みの締切など、期限のあるお知らせを、締切の日付と残りの日数で伝える設計です。
締切日には「本日締切」と書き、締切を過ぎたら帯を出しません。

ワイヤーフレーム(PC)

期限表示型 告知バー PC版ワイヤーフレーム

ワイヤーフレーム(SP)

期限表示型 告知バー SP版ワイヤーフレーム

SP版の特徴

  1. ラベルと残りの日数を1行目にまとめる:狭い幅でも、受付中であることと締切の近さを最初に伝えるためです。
  2. 締切の文を2行目に分ける:日付の途中で折り返して、読みにくくなるのを防ぐためです。

採用前の判断ポイント

向いているケース

  • 申し込みの締切や受付の終了日など、実際に決まった期限がある
  • 締切が近いことを、残りの日数で分かりやすく伝えたい
  • 締切を過ぎたら、自動で表示を切り替えられる

向かないケース

このワイヤーの特徴

締切の日付と、残りの日数を並べる

「10月15日(木)まで」と「あと3日」を並べて書いています。
日付だけだと今日から何日あるかを数える手間がかかり、日数だけだと、いつまでかが分かりません。

締切日と、締切後の表示を決めておく

締切日は「本日締切」とし、締切を過ぎたら帯を出しません。
受付が終わったのに「あと0日」や申し込みのリンクが残っていると、押した人を困らせます。

残りの日数は、文字で書く

秒単位で動くカウントダウンにせず、日付と日数を文字で書いています。
動き続ける表示は気が散りやすく、読み上げでも内容が伝わりにくくなります。

制作時のよくある失敗

期限がないのに、カウントダウンを出す

実際の期限ではない残り時間を見せると、読み手をだますことになり、サイトへの信頼を損ないます。
残りの日数は、実際に決まった期限にだけ使います。

締切を過ぎても、帯が残っている

締切後に申し込みのリンクが残っていると、受付が終わったページへ案内してしまいます。
締切の翌日には帯を外すか、受付終了の表示に切り替えます。

日付の基準が、読み手の時刻とずれる

日付の切り替えを閲覧者の端末の時刻だけで判断すると、時差のある地域や時刻の設定がずれた端末で、表示が食い違います。
基準にする時刻(日本時間など)を決めて計算します。

秒単位で動かし、ほかの文が読みにくい

数字が動き続けると、目がそちらに引っ張られます。
動かす場合も、止める方法を用意します。

よくある質問

残りの日数は、何日前から出せばよいですか?

締切の1週間前ほどから出すのが目安です。
それより前は締切の日付だけを書き、近づいたら日数を添えると、急かしすぎずに伝えられます。

カウントダウンのタイマーは、使わないほうがよいですか?

実際の期限であれば使えますが、秒単位で動く表示は気が散りやすく、読み上げにも向きません。
日付と残りの日数を文字で書くほうが、多くの場面で伝わりやすくなります。

締切を過ぎたら、帯はどうすればよいですか?

帯を外すか、「受付は終了しました」と短く伝えてから外します。
申し込みのリンクは、締切と同時に外します。

同じパーツのPattern

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

関連ページ

この型をシェアする

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

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

このPatternを書いた人

岡野 優太

株式会社ENVY DESIGN

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

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

レビュー・修正の履歴

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