【MBTI診断】16タイプ別・フリーランスに向いてる仕事/働き方
- コラム
- フリーランス/個人事業主
- 働き方
Webサイト上に「時計」を表示するデザインは、一定の需要があります。
もとからデバイスの画面に時計は表示されていますが、それでもWebサイト上に時計が表示されると、つい目がいってしまいますよね。
時計の要素としてとくに需要があるのが、クイズやイベントなどに使われるカウントダウンです。カウントダウンの機能は、UXにおいて重要な役割を果たすことも。
今回は、時計やタイマー、カウントダウンなどの機能を取り入れられるコードスニペットを8選ご紹介します。
目次
最初にご紹介するのは、近代的なデザインのデジタル時計です。この時計はVue.jsを使って構築されています。
機能自体はベーシックですが、目をひくデザインに仕上がっていますね。
See the Pen Digital Clock with Vue.js by Toshiyuki TAKAHASHI (@gau) on CodePen.
こちらはCSSのみで作られたコードスニペット。
「時計を時計で構築する」というメタ構造のデザインが特徴で、小さな時計の針が一斉にまわることで時間を刻みます。
See the Pen Clock of clocks by Razvan Spatariu (@RazvanDH) on CodePen.
時代を超えて愛されるハイエンド腕時計、ロレックス。美しいデザインと緻密な動きで、多くの人の心を掴んできました。
ロレックスの時計を忠実に再現したこのコードスニペットは、機能性に優れているわけではありません。しかしユーザーの心を魅了する素敵なデザインです。
See the Pen HTML/CSS illustration – Rolex by Chris Ota (@chrisota) on CodePen.
スポーツには欠かせないストップウォッチを、CSSのみで再現したスニペットです。
やりすぎ感のない、機能的なデザインが特徴。ユーザーが直感的に操作できるインターフェースですね。
See the Pen Stopwatch by Hilo (@hilotacker) on CodePen.
さまざまな国の時間をイラストとともに表示する、Vue.jsを使ったスニペット。
選択した場所の時間に応じてイラストも変化するので、さまざまな国をターゲットにした多国籍サイトに使えそうですね。
See the Pen Vue Time Comparison by Sarah Drasner (@sdras) on CodePen.
イベントの始まりに合わせて、Web上でカウントダウンが使われている場面をよく見かけますよね。
このコードスペニットを使えば、時計をめくる形で24時間のカウントダウンが行えます。クラシックなデザインのカウントダウン時計を探している方は、ぜひ試してみてください。
See the Pen Draft Countdown by Dorian Camilleri (@doriancami) on CodePen.
ポップなカウントダウンは、特定の日にセールを行うECサイトにおすすめです。
以下のコードスニペットは、アメリカの独立記念日までのカウントダウンを行なっています。ユーザーの注意を特定の日に引きつけたいなら、ポップな要素をWebサイトに取り入れてみてください。
See the Pen DailyUI #014 | Countdown Timer by Julie Park (@juliepark) on CodePen.
昔の映画を思わせるデザインのカウントダウンスニペット。時間を表示することで、ユーザーを自然に次のステップへと誘導できます。
近ごろ人気が再燃しているスプラッシュスクリーン(起動画面)としても使えそうですね。
See the Pen Movie Style Film Countdown by Craig Roblewsky (@PointC) on CodePen.
時計に関連する機能は、Webサイトの主役ではないかもしれません。しかし、遊び心のあるカウントダウンやタイマーを取り入れることでユーザーの目を楽しませ、イベント開始などの重要な情報を知らせられます。
またこれらのスニペットは、JavaScriptなどの言語を学ぶうえでも優れた教材になるはず。
ぜひスニペットの中をのぞいて、コードがどのように構築されているかを分析してみてください。
(執筆:Eric Karkovack 翻訳:Nakajima Asuka 編集:Kitamura Yuu、Kimura Yumi)
マウスカーソルに反発する!?リペリングエフェクトを取り入れたコードスニペット9選
Workship MAGAZINE
ボーダーにエフェクトを追加するコードスニペット8選。CTAボタンや入力フォームなどに!
Workship MAGAZINE
時計/タイマー/カウントダウンのコードスニペット8選。CSS/JSで作れるデザイン!
Workship MAGAZINE