Figmaで作成した時計デザインたちが、ついにブラウザの中で時を刻み始めました！
今回公開したのは、個性豊かな5つのWebアプリです。
開発はすべて「ノーコード」で 驚くべきは、これらの実装に私が一行もコードを書いていないこと。Figmaのデザイン画を元に、Googleの生成AI「Gemini」に指示を出してコーディングしてもらいました。 「このデザイン通りに動かして」「スマホでも見やすく調整して」まるで優秀なエンジニアとペアプログラミングをするように、対話だけでアプリが完成しました。

デザイナーの想像力が、AIの力で瞬時に「動くプロダクト」になる。そんな新しいクリエイティブ体験から生まれた時計たちです。ぜひ、PCやスマホでそれぞれの個性を楽しんでみてください。

◾️iconclock
ピクセルアートが可愛い「iconclock」がWebアプリになって帰ってきました。
かつて弊社でリリースし、そのシンプルで愛らしいデザインからご好評いただいたiOSアプリ「iconclock」。 この度、インストール不要で楽しめるWebアプリ版として復活しました！

時計背景をクリック（タップ）するたびに、シアン、イエロー、レッド、グリーンと、ポップな4色にランダムで切り替わります。その時の気分や部屋の雰囲気に合わせて色を変えられるのが、ちょっとした楽しみです。

PCのブラウザでも、スマートフォンの画面でも、アクセスするだけで現在の時を刻み始めます。 仕事の合間の癒やしとして、あるいはデスクサイドのデジタルインテリアとして。ぜひ、ブラウザで新しい「iconclock」の世界に触れてみてください。

iconclock

◾️fontclock
ただ時を刻むだけの道具ではなく、毎分訪れる新鮮な驚きを楽しむための「fontclock」は、1分ごとにフォントがランダムで切り替わる、少し変わったデジタル時計です。
レトロなドット絵風からエレガントな筆記体、あるいは極太のインパクト系まで、厳選された50種類の中から選ばれたフォントが00秒の瞬間にパッと姿を変える様子は、まさにフォントとの「一期一会」。ふと画面に目をやったその瞬間にしか出会えないデザインが、単調になりがちな時間の流れに彩りを添えてくれます。秒針の代わりに画面下部をスーッと滑らかに伸びていくプログレスバーは、1秒ごとのカクつきを排除した緻密な計算によって時の流れを美しく可視化し、分が変わる瞬間にバーの色が変化する演出も相まって、ただ画面を眺めているだけでも飽きることがありません。

もし心惹かれるフォントに出会ったら、それは新しいデザインのインスピレーションになるかもしれません。時刻の下にあるフォント名をクリックすればすぐにGoogle Fontsのページへ飛べるため、その偶然の発見を逃さずに済みますし、逆に今の気分に合わないフォントであれば、画面をタップして瞬時に次のフォントへ切り替える「フォントガチャ」のような遊び方も可能です。PCの作業用BGVとして、あるいは使っていないスマホをデジタルな置き時計として、流れゆく時と文字が織りなす偶然の出会いをぜひ楽しんでみてください。

fontclock

◾️ringclock
針は動かない。「盤面」が回る。没入感がすごいミニマルWeb時計。
この時計の最大の特徴は、「針が回るのではなく、文字盤そのものが回る」というユニークな機構です。

画面中央に大きく配置された「時」、その周りを「分」と「秒」のリングが囲む3層構造になっています。現在の時刻（分・秒）が常に右側の定位置（3時の方向）に来るように、リング全体が反時計回りに滑らかに回転し続けます。まるで世界が回っているような不思議な浮遊感が魅力です。

PCはもちろん、iPhoneなどのスマートフォンでも画面いっぱいに美しく収まるようレスポンシブ対応しています。ただ時間を知るためだけでなく、流れる時をぼんやりと眺めていたくなる、そんな「デジタルインテリア」のような作品に仕上がりました。

ringclock

◾️wordclock
「数字」ではなく「言葉」で時を刻む。そんな一風変わったWeb時計「wordclock」を作ってみました。
この時計の最大の特徴は、1分ごとに訪れる「呼吸」のような瞬間です。時刻が切り替わるその時、盤面の全文字が一斉にカッ！と強く発光します。その後、役目を終えた文字たちがパラパラとランダムに消えていき、新しい時刻だけが静かに浮かび上がる……。この「全点灯→余韻→静寂」という一連のアニメーションが、無機質な時間の経過をドラマチックな体験に変えてくれます。

また、文字の光り方にも隠れた遊び心があります。プログラムが次の文字を探す際、基本は横読みですが、時々「縦読みモード」が発動します。運良く文字が配置されていると、ストンと落ちるように縦に文字が繋がります。偶然が生む文字のパズルを探すのも、この時計ならではの楽しみ方です。
画面下部では、秒を刻むインジケータがミリ秒単位の計算でヌルヌルと滑らかに伸縮。静的な文字盤と動的なバーの対比が、画面全体に心地よいリズムを生み出しています。ただ時間を知るためだけでなく、「時を感じる」ためのデジタルインテリアとして、ぼんやり眺めてみてはいかがでしょうか。

wordclock

◾️flipclock
昔懐かしい「パタパタ時計」を、最新Web技術で完全再現しました。
こだわりのフリップ音は、音声ファイルを使わず「Web Audio API」でリアルタイムに合成。ノイズにフィルタ処理をかけてプラスチックの質感を出しつつ、複数桁が動く際の微妙な発音タイミングのズレまでプログラム制御することで、重厚で心地よい「コトッ」という機械音を生み出しています。

見た目はレトロですが中身はハイテク。Open-Meteo API（オープンソースの天気API）による天気予報や、設定の自動保存機能も完備。視覚と聴覚で楽しむ、実用的なデスクアクセサリです。

flipclock