デジタル時計デザインコレクション

 (clocks.dev)
1 ポイント 投稿者 GN⁺ 23 시간 전 | 1件のコメント | WhatsAppで共有
  • Clocks.devは、現在の時刻と日付をさまざまな方法で表現したデジタル時計デザインを一か所で探せるサイト
  • 幾何学的な形状、数字の配列、単語の組み合わせ、時計の針、円形ダイヤル、LCD など、異なる時刻表現の方式を比較できる
  • All time、This week、Newest を基準にデザインを見られ、新しい時計デザインも自分で作成できる
  • number-field、word-field、binary-signal、swiss-railway、corner-date のように、名前から表現方法やスタイルが分かる時計が含まれている
  • 登録されたすべての時計がオープンソースなので、デザイン鑑賞だけでなく実装アイデアの参考にも活用できる

さまざまな時間表現を探る

  • Clocks.devは、複数のデジタル時計デザインをまとめて提供している
  • All time、This week、Newest フィルターで一覧を探せ、Create new clock で新しい時計を作成できる

  • 形状と時計の針

  • 数字と単語

    • binary-signal: バイナリ信号を使ったデザイン
    • number-field: 1〜12 と 1〜60 の数字フィールドで時間を構成している
    • word-field: FIVE、TEN、QUARTER、HALF、PAST、TO などの単語の組み合わせで時間を表示する
    • mint-rounded, lock-screen, second-tilt: 数字ベースの時刻表示をそれぞれ異なるスタイルで構成している

  • 日付と追加情報

    • day-mood: It’s slow evening o’clock 22° のように、時間帯と気温を文として表示する
    • corner-date, orbit-date: 日付を時刻と一緒に表示する
    • カラー時計: 1日 86,400 秒を 16,777,216 色のいずれかに対応させ、現在のカラーコードを表示する
    • Galactic Standard Time: ゾーン・トラック情報とともに時刻を表す
    • Digital Quartz LCD: 1983、曜日、24H、アラーム・信号・照明・開始表示を含むデジタルLCDスタイル

  • 個別コンセプト

オープンソースと制作者

  • 登録されたすべての時計はオープンソースで提供されている
  • サイトは Lev Miseri が制作

関連記事

1件のコメント

 
GN⁺ 23 시간 전
Hacker Newsの意見

  • 面白半分でアナログ時計で構成されたデジタル時計を作ってみた: https://mikespeed.com/clock

  • AIブーム以前に、SVGとJavaScriptで実験的なウォッチフェイスをすべて自作した
    すごい作品ではないかもしれないが、デザイナーとして基礎的なコーディングを独学で身につけて完成させたことを誇りに思っている: https://watchface.netlify.app/
    制作過程も記事にまとめた: https://72mena.medium.com/designing-watch-faces-using-svgs-a...

    • この作品を見て、またハードウェアとPCB製作に飛び込んで壁に掛けるものを作りたくなった
      ウォッチフェイスが動くページで時刻を直接入力して見た目を確認できると、さらに良いと思う
    • Tokyoflashのデザインの話をしに来たが、ここで見られてうれしい

  • HNの時計愛好家を集めて、昔ながらのウェブリングを作ってもいい頃合いだ
    Lock Screen は、輪郭だけの数字を下から水で満たして秒を表す自分の Filling Digit時計 に似ている
    かなり面白い Alphabetical Clock もHNで話題になったし、ウェブリングの概念は Wikipedia で見られる

  • 初めて使ったSvelteで Voutilainen Vingt-8 ISO を再現してみた: https://clocks.dev/clock/3b254b2789ec

    • 初めて触れた概念だが、すぐ慣れそうだし、こんな腕時計が欲しくなる

  • Chrome 150.0.7871.115 と Windows で、ページの約3分の2あたりからスクロールバーが消えて、それ以上スクロールできない

    • いまは修正したが、より根本的な性能問題については追加調査が必要だ
    • ブラウザの標準スクロール動作に手を入れるのは、Web開発では大きなタブーだと思う
    • Windows 11 の Firefox 152.0.5 でも同じ問題が発生する

  • Number Field は、数字時計を空間的に表現する最良の方法のように感じる
    完璧にするなら24時間制に変えるべきだが、小さな修正にすぎず、12列構造のおかげでひと目でだいたいの時刻を把握しやすい

  • 日本式そろばんを使ったSoroban時計を作ったが、CSSベースのアニメーションを使っているためコレクションには追加できなかった: https://soroban-clock.netlify.app

  • John Maeda の 12 o’clocks もあわせて見る価値がある
    1996年の作品 を通して、時間がグラフィックとして表現される方法を新鮮に見直せたし、MoMA所蔵品 としても確認できる
    特に滑らかに動く作品のせいで、1秒ごとに止まる秒針が嫌いになり、家中の時計のムーブメントをすべてスイープ秒針方式に交換した

  • バイナリ時計 は、8の位の左側を一般的な16の位ではなく10の位として扱っているようだ
    そのため、10時は 1010 ではなく 00010000 と表示され、23時は 00100011 なので、バイナリとして解釈すると35になって奇妙に見える

    • 時刻全体を1つのバイナリ数に変換しているのではなく、10進数の各桁を4ビットずつ変換する方式だ
      つまり 23 → 2 3 → 0010 0011 → 00100011 になる

  • いくつかの時計には微妙にずれている部分が見える
    オレンジ色の Number Field は 12:10 と 10:12 を区別しにくく見えるし、Word Field は使われない文字を X で表示するため、元の Word Clock で単語が現れるときの神秘性が薄れている
    Temporal Exposure はぼやけた領域の帯が中心からずれており、Figure Hands はテキストが図の領域の外にはみ出している

    • Number Field では時が常に最上段に置かれるので、12:10 と 10:12 は異なる表示になる
    • Figure Hands のことなら、全体的なスタイルにはまだ改善の余地が大きい
      2色と異なるサイズ、そしてより適切なフォントを使えば良くなりそうだ