2026年2月15日

Nixie Tube Clock - 物理的質感を追求したニキシー管時計

JavaScriptでニキシー管をシミュレート。

「Webで表現するアナログ質感」をテーマに、勉強会用のデモンストレーションとして制作したデジタル時計です。単なる時計としての機能だけでなく、配信素材やデスクトップアクセサリーとしての実用性を見据え、徹底的にクオリティを追求しました。

ニキシー管の最大の特徴である「数字のプレートが物理的に重なっている構造」を、デジタル上でいかに違和感なく再現するかに注力しました。

0～9までの数字が物理的に前後に並んでいる様子を再現するため、非点灯状態の数字もうっすらと背景に見えるよう透過率を調整。点灯時の光が背後の数字を透過するような、リアリティのある質感を追求しました。

手前にある数字は大きくはっきりと、奥にある数字はわずかに小さく（scale）、そして僅かにボケる（blur）ように設定。時間が進み、光る数字が切り替わるたびに「奥行きが動く」視覚効果を実装しました。

保守性とパフォーマンスを両立させるため、静的サイトジェネレーター（11ty）の機能をフル活用しました。

ニキシー管の10段階の奥行きをCSSで一つ一つ記述すると、微調整のたびに数十箇所の書き換えが必要になります。そこでNunjucksのループ処理を用い、変数に基づいた動的なスタイル出力を行いました。

これにより、200行あったHTMLを20行に、20箇所のCSS記述をわずか2箇所に集約。数値を一つ変えるだけで全体の奥行き感を一瞬で再調整できる、柔軟な開発環境を構築しました。

<style>
/* 10段階の数字の深さをループで生成 */

  
  
  
  .nixie-bottle span.number_ {
    transform: scale(, );
    filter: blur(rem);
  }

</style>

完成した時計を実際の配信画面に合成してテストした結果、色調やフォントにさらなる汎用性が必要であるという気付きを得ました。今後はユーザーがブラウザ上で色やフォントを自由に変更できるカスタマイズ機能の実装を検討しています。

また、本プロジェクトの副産物として Rust + Tauri を導入しました。Web技術で作ったこの時計をデスクトップアプリケーション（.exe/.app）としてビルドし、現在は自分専用のPC時計として常用しています。

Webの枠を超え、Rustを用いたシステム開発への足がかりとなった、非常に収穫の多い実験プロジェクトとなりました。

後ほど公開します。