イベントカウントダウン

ブラウザのウィンドウ全体に写真の背景を全面表示し、部屋の反対側からでも読める大きな数字でカウントダウンするタイマーです。タイトルを入力し、日付と時刻を選び、厳選された6種類のシーンから1つを選ぶと、そのURLがそのままカウントダウンタイマーになります。リンクを送れば、受け取った人のブラウザでも同じカウントダウンタイマーが時を刻みます。サインアップやアカウントは不要です。

テンプレートには、編集ダイアログ、確認済みのUnsplash背景画像6点を備えたシーン選択、3種類の単位表示形式、更新のたびにシステム時計から再計算して誤差を自動補正するカウント処理、プレゼンテーション向けの全画面モードが含まれています。編集ダイアログで目的に合ったシーンを選び、日付を設定しましょう。

このテンプレートは単一ページのアプリで、すりガラス風の下部ツールバー（編集、全画面表示、リンクをコピー）、カウントダウンの全設定を行う編集ダイアログ、目標日時を過ぎると数字をゼロのまま表示する終了状態を備えています。データベースも認証機能もなく、背景画像の取得以外にサーバーとの通信は発生しません。

広告を挿入したり、URLに自社ブランドを強制的に入れたりするサブスクリプション型のカウントダウンサービスと比べてみてください。中には時計ひとつに月額料金を請求するサービスもあります。このテンプレートなら、リンクは自分のもの、ページはすっきりしていて、コードは自分のリポジトリにあります。

おすすめの活用例

製品ローンチの盛り上げ

ニュースレターやSlackチャンネルにリンクを貼る、あるいはSNSに投稿するだけで、ローンチ日に向けて時を刻むカウントダウンタイマーを見てもらえます。写真の背景が雰囲気を演出してくれるので、自分でデザインする必要はありません。お祝いムードならパーティーのシーン、憧れを感じさせたいならバケーションのシーンがおすすめです。見る人全員が、それぞれのブラウザでリアルタイムに更新される同じ数字を、中央に大きく表示された独自のタイトルとともに目にします。こうして共有された期待感が、見ている人を初日からの顧客に変えていきます。

イベントやカンファレンスでの表示

ノートパソコンをプロジェクターにつなぎ、リンクを開いて全画面表示にします。カウントダウンが画面いっぱいに広がり、最後列からでも読める大きさで数字が表示されます。セッションの合間や休憩中も、参加者は次の予定まであとどれくらいかを正確に把握できます。基調講演の前にも同じ時計を使えます。操作がないと数秒でツールバーが消えるので、手動で操作しなくても画面はすっきりしたままです。

結婚式や記念日のお祝い

日付を設定し、ウェディングの背景を選んで、パートナーや家族とリンクを共有しましょう。グループチャットに送ることもできます。タイムゾーンが違っても、みんなで一緒にカウントダウンできます。URLには目標日時がUTCの絶対時刻として保存されるため、どこで開いても残り時間は正確です。その瞬間を迎えると、数字はゼロで止まり、日付を示す控えめな一文が表示されます。

チームの締め切りやスプリント目標

プロジェクトのチャンネルにリンクを貼れば、チーム全員が同じ時計を見られます。分散したチームを運営する担当者は、スプリントの締め切りを設定し、すっきりと1つの数字で表示できる「日数のみ」形式を選んで、あとは共有リンクに伝達を任せられます。インストールするアプリも、付与する権限もなく、リンクとカウントダウンの間にアカウント登録の壁もありません。

はじめ方

1. テンプレートをリミックスする

「リミックス」をクリックすると、このカウントダウンタイマーが自分のLovableワークスペースにコピーされます。背景システム、編集ダイアログ、カウント処理のループ、URLの状態エンコーダー、6枚のシーン写真すべてを含む完全なソースコードが手に入ります。全面表示の写真レイアウトをそのまま使うことも、ワークスペースでカスタマイズすることもできます。

2. ブランドに合わせてカスタマイズする

src/tints.cssを開き、アイデンティティカラーのティントをブランドカラーに合わせて変更します。写真の背後にあるインディゴのグラデーションは、画像の読み込み中に訪問者が最初に目にする部分なので、シーンが表示される前の印象を決めます。編集ダイアログや選択時のリングの色も合わせたい場合は、スタイルパックの--color-primaryを調整してください。数字のフォントも、数字行コンポーネントのfontFamilyを編集すれば、システムフォントからカスタムフォントに置き換えられます。

3. コンテンツを追加する

src/lib/scenes.tsを開き、6つのUnsplash写真IDを用途に合った画像に置き換えます。各エントリーは名前、ラベル、写真IDで構成されています。読み込み時間を一定に保つため、同じ?w=1600&q=55&auto=format&fit=cropクエリ文字列を使いましょう。シーンを追加したり、不要なものを削除したりすることもできます。src/data/seed.tsを更新すれば、訪問者が最初に開いたときに表示されるデフォルトのカウントダウンを設定できます。

4. ツールを連携する

デフォルトの構成では、外部サービスを一切使わずに動作します。利用状況のデータや訪問者アカウントが必要な場合は、index.htmlにアナリティクスのスニペットを追加してカウントダウンリンクを開いた人数を計測したり、Supabaseのテーブルを接続して閲覧数を記録したり、訪問者がアカウントを作成できるようにしたりできます。Open Graphの画像タグを設定すれば、共有したURLがSlackやiMessageで正しくプレビュー表示されます。SNSのフィードでのプレビューも、同じメタデータで制御されます。

5. 公開する

Lovableで「公開」をクリックすると、カウントダウンが公開URLで利用できるようになります。キャンペーンやイベントのプログラムにリンクを掲載する場合は、カスタムドメインを設定しましょう。アプリ全体が静的なので、どんな回線でも高速に読み込まれ、ホスティング費用もほとんどかかりません。URLを共有すれば、カウントダウンの始まりです。

まとめ

このカウントダウンタイマーテンプレートは、製品をローンチする創業者、キャンペーンを運営するマーケター、分散したチームをまとめる運営担当者、そしてこれから訪れる瞬間のためにすっきりした全画面の時計がほしいすべての人に向けて作られています。日付を共有可能なリンクに変える単一ページのアプリが手に入り、写真の背景、大きな数字、3種類の単位表示形式、全画面モード、その瞬間の到来を知らせる終了状態まで揃っています。

テンプレートを開き、日付を設定し、シーンを選んで公開しましょう。動作するカウントダウンタイマーを、半日もかからずに公開して届けられます。すべてのコードはLovableワークスペースにあり、シーンの追加、カスタムフォント、アナリティクス、バックエンドなど、必要なときにいつでも拡張できます。リンクこそがプロダクトです。共有して、カウントダウンを始めましょう。