Codepenから学ぶ時計デザインのアイデア

Codepenで公開している時計のデザインが結構あったので気になったデザインをまとめてみました。シンプルなデザインからフリップ時計やバイナリ時計・Polar Clockまでいろんなバリエーションがあるもんですね。

Clock prototype design

秒のカラムが弾むリズム感のあるキュートなデザイン

See the Pen Clock prototype design by Anastasia Goodwin (@agoodwin) on CodePen.

Column clock

3つの棒グラフのようなカラムがグラフィカルに動く

See the Pen Column clock by Nelson Rodrigues (@nelsonr) on CodePen.

Flat Clock

フラットな時計がレトロ感のあるフリップ時計を表現

See the Pen Flat Clock by Steven Fabre (@stevenfabre) on CodePen.

Digital Analog Clock

アナログとデジタルと融合させた面白いアイデア

See the Pen Digital Analog Clock by Maneesh (@maneeshc) on CodePen.

Glitch Clock

グリッチエフェクトと時計を組み合わせたクールなデザイン

See the Pen Glitch Clock by Constantine (@dats-wassup) on CodePen.

Flat Clock and Date

アナログ時計と日付のフラットなデザイン

See the Pen Flat Clock and Date by Joseph Shambrook (@WinterJoey) on CodePen.

App Icon – Clock

スマホアプリの時計を再現したフラットなデザイン

See the Pen App Icon – Clock by nicolazj (@nicolazj) on CodePen.

Animated Digital LED Clock

数字がアニメーションで切り替わるLED時計のデザイン

See the Pen Animated Digital LED Clock by Collin (@cMack87) on CodePen.

Binary Clock

時刻の数値を二進法で表示するバイナリ時計のデザイン

See the Pen Binary Clock by Will McNeilly (@willmcneilly) on CodePen.

Proportionate Clock

カラムの比率で時計を表現したデザイン

See the Pen Proportionate Clock by Jamie Brook (@sketchbrook) on CodePen.

HTML 5 Canvas Polar Clock

円形のラインで日付と時計を表現したPolarClock

See the Pen HTML 5 Canvas Polar Clock by Lennart Hase (@motorlatitude) on CodePen.

Clock 3D

ドッドのデジタル時計を3Dの回転体で表現

See the Pen Clock 3D by Gerard Ferrandez (@ge1doot) on CodePen.

Particle Clock

パーティクルアニメーションで切り替わるデジタル時計

See the Pen Particle Clock by Kris Hedstrom (@kristofferh) on CodePen.