カウントダウン付き告知バー
このパーツは、ページ最上部に固定表示する横長の告知バーに、残り時間を刻むカウントダウン表示を組み込んだものです。 linear-gradient による赤〜黄の帯の中に、黒地の SALE タグ、訴求文、残り時間（ 02日 14:23:08 の形式）、そして詳細リンクを横一列に並べています。
このパーツの使いどころと実装ポイント
このパーツは、ページ最上部に固定表示する横長の告知バーに、残り時間を刻むカウントダウン表示を組み込んだものです。linear-gradient による赤〜黄の帯の中に、黒地の SALE タグ、訴求文、残り時間（02日 14:23:08 の形式）、そして詳細リンクを横一列に並べています。時間表示は JavaScript で setInterval を回し、終了時刻までの差分を日・時・分・秒に整形して書き換える想定です。
向いている場面
- 期間限定セールや初年度割引を打ち出す SaaS のトップページ
- 申込締切が決まっているセミナーやウェビナーの集客ページ
- EC の送料無料キャンペーンなど、急かす理由がある販促
カスタマイズと注意点
差し替えどころは、終了時刻の定数・割引率の文言・タグのラベルの3点です。終了後も 0日 00:00:00 のまま残ると不信感につながるため、ゼロ到達でバー全体を非表示にするか「終了しました」に切り替える処理を必ず入れてください。数字部分は等幅フォントにすると桁の揺れでガタつかず読みやすくなります。狭い画面ではリンクが折り返して縦に伸びやすいので、flex-wrap や小さい画面でのリンク省略を検討すると安定します。
このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。
よくある質問
カウントダウンの時間はどうやって動かしますか
終了したい日時を基準に、現在時刻との差を毎秒計算して日・時・分・秒に分解し、表示部分を書き換えます。JavaScriptのsetIntervalで1秒ごとに更新するのが一般的です。終了時刻はサーバー側の値かUTC基準で持つと、閲覧者のタイムゾーンによるずれを防げます。
キャンペーン終了後はどう表示すべきですか
残り時間がゼロになったら、バーをそのまま放置せず非表示にするか、文言を終了済みに切り替えてください。マイナス値やゼロ表示のまま残ると信頼を損なうため、ゼロ到達を検知して表示を差し替える処理を入れておくのが安全です。