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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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