エンジニア必見！個性が光るデジタル時計のデザイン集

デジタル時計のUIデザインや実装の参考になる、クールで洗練されたデザインを集めました。プロジェクトのインスピレーション探しに活用してください。

"Number field"は数字の時計を空間的に表現するのに最高な感じがする（完璧にするには24時間表示が必要だけど、それはちょっとした修正で済むしね）。

線形スタイルな時計は他にもたくさんあるけど、12列のデザインは個人的にすごくしっくりくる。パッと見で大体の時間を直感的に把握できるのがいい。

iPhoneのロック画面用にアナログ時計の文字盤が本当に欲しい。

ここまで来たら、HNの時計マニアのために昔懐かしいWebring [1] を作ってもいいくらいだね！:)

https://clocks.dev/clock/lock-screen にある時計は、俺が作ったFilling Digit時計 [2] にちょっと似てる。こっちは分の中の秒を表現するために、空洞の数字の下から水が溜まっていく仕組みなんだ。

あと、ここで話題になった「Alphabetical Clock（アルファベット時計）」[3] も面白いよ。

いくつかは微妙に惜しい感じがする。例えばオレンジ色の"number field"（https://clocks.dev/clock/number-field ）だと、12:10と10:12の区別がつかないし。"word field"（https://clocks.dev/clock/word-field ）では使われていない文字の代わりに「X」が表示されてるけど、これだと元になった"word clock"デザインみたいな言葉が浮かび上がる不思議さがかなり薄れてる。「temporal exposure」（https://clocks.dev/clock/temporal-exposure ）はぼかし部分に不自然な中心からズレた帯があるし、「figure hands」は描画領域からはみ出てるし、みたいな感じ。

うわ、これ大好き！SVGとJavaScriptを使って実験的な時計の文字盤を作ってた自分の小さなプロジェクトを思い出したよ。AIブームの前だったから全部手作業で作ったんだけど、大した代物じゃないとはいえ、独学でプログラミングの基礎を学んだデザイナーとして誇りに思ってるんだ。

https://watchface.netlify.app/

当時のことはここに書いたよ：
https://72mena.medium.com/designing-watch-faces-using-svgs-and-javascript-70f0ca20f143

最高！そろばん時計を作ったんだけど、CSSベースのアニメーションを使っちゃったからコレクションには追加できなかったんだ。こっちで公開してるよ。
https://soroban-clock.netlify.app

これも追加してよ（自作デザインです）：https://euclid.tulv.in/

一番下の列のバイナリ時計、8の位の左側を16の位じゃなくて10の位だと思ってるみたいだ。だから10時が「1010」じゃなくて「00010000」と表示される。変なの。

23時（午後11時）は「00100011」と表示されるけど、これだと35時ってことになる。32の位が20の位になってるのか？誰か解説してくれ。

https://clocks.dev/clock/35bb1995bc5d

スイス鉄道時計がちゃんと動作してるのを見られて嬉しいよ :)

リンクをクリックしてコメントを読むのに、一体どれだけの時間を使ったんだろう？どれだけ経ったかほとんど見当もつかないっていうのが最高にいい。