時計/タイマー/カウントダウンのコードスニペット8選。CSS/JSで作れるデザイン！

Webサイト上に「時計」を表示するデザインは、一定の需要があります。

もとからデバイスの画面に時計は表示されていますが、それでもWebサイト上に時計が表示されると、つい目がいってしまいますよね。

時計の要素としてとくに需要があるのが、クイズやイベントなどに使われるカウントダウンです。カウントダウンの機能は、UXにおいて重要な役割を果たすことも。

今回は、時計やタイマー、カウントダウンなどの機能を取り入れられるコードスニペットを8選ご紹介します。

1. Vue.jsを使ったデジタル時計

最初にご紹介するのは、近代的なデザインのデジタル時計です。この時計はVue.jsを使って構築されています。

機能自体はベーシックですが、目をひくデザインに仕上がっていますね。

See the Pen Digital Clock with Vue.js by Toshiyuki TAKAHASHI (@gau) on CodePen.

2. メタ構造のユニークな時計

こちらはCSSのみで作られたコードスニペット。

「時計を時計で構築する」というメタ構造のデザインが特徴で、小さな時計の針が一斉にまわることで時間を刻みます。

See the Pen Clock of clocks by Razvan Spatariu (@RazvanDH) on CodePen.

3. ロレックスを忠実に再現した時計

時代を超えて愛されるハイエンド腕時計、ロレックス。美しいデザインと緻密な動きで、多くの人の心を掴んできました。

ロレックスの時計を忠実に再現したこのコードスニペットは、機能性に優れているわけではありません。しかしユーザーの心を魅了する素敵なデザインです。

See the Pen HTML/CSS illustration – Rolex by Chris Ota (@chrisota) on CodePen.

4. ストップウォッチ型の時計

スポーツには欠かせないストップウォッチを、CSSのみで再現したスニペットです。

やりすぎ感のない、機能的なデザインが特徴。ユーザーが直感的に操作できるインターフェースですね。

See the Pen Stopwatch by Hilo (@hilotacker) on CodePen.

5. 世界の時間がわかる時計

さまざまな国の時間をイラストとともに表示する、Vue.jsを使ったスニペット。

選択した場所の時間に応じてイラストも変化するので、さまざまな国をターゲットにした多国籍サイトに使えそうですね。

See the Pen Vue Time Comparison by Sarah Drasner (@sdras) on CodePen.

6. フリップ式のカウントダウン

イベントの始まりに合わせて、Web上でカウントダウンが使われている場面をよく見かけますよね。

このコードスペニットを使えば、時計をめくる形で24時間のカウントダウンが行えます。クラシックなデザインのカウントダウン時計を探している方は、ぜひ試してみてください。

See the Pen Draft Countdown by Dorian Camilleri (@doriancami) on CodePen.

7. ポップなカウントダウン

ポップなカウントダウンは、特定の日にセールを行うECサイトにおすすめです。

以下のコードスニペットは、アメリカの独立記念日までのカウントダウンを行なっています。ユーザーの注意を特定の日に引きつけたいなら、ポップな要素をWebサイトに取り入れてみてください。

See the Pen DailyUI #014 | Countdown Timer by Julie Park (@juliepark) on CodePen.

8. 映画のようなカウントダウン

昔の映画を思わせるデザインのカウントダウンスニペット。時間を表示することで、ユーザーを自然に次のステップへと誘導できます。

近ごろ人気が再燃しているスプラッシュスクリーン（起動画面）としても使えそうですね。

See the Pen Movie Style Film Countdown by Craig Roblewsky (@PointC) on CodePen.

おわりに

時計に関連する機能は、Webサイトの主役ではないかもしれません。しかし、遊び心のあるカウントダウンやタイマーを取り入れることでユーザーの目を楽しませ、イベント開始などの重要な情報を知らせられます。

またこれらのスニペットは、JavaScriptなどの言語を学ぶうえでも優れた教材になるはず。

ぜひスニペットの中をのぞいて、コードがどのように構築されているかを分析してみてください。

（執筆：Eric Karkovack　翻訳：Nakajima Asuka　編集：Kitamura Yuu、Kimura Yumi）