ポートフォリオ
最終更新: 2026年5月
Life Units：カウントダウンタイマーを生きた3Dワールドに
Life Unitsは、カウントダウンタイマーを浮島の上の3Dボクセルオブジェクトに変える無料Webアプリです。日数が経つとパンケーキの山が一口ずつ減り、時間は木、分はコーヒーカップ、秒は卵からかえるヒヨコで表現されます。普通のブラウザタブで動くコンシューマー品質の3D表現の公開例として、Urbano DXが開発・運用しています。
判断ガイド
Life Units：カウントダウンタイマーを生きた3Dワールドにの確認ポイント
Life Units：カウントダウンタイマーを生きた3Dワールドには、Urbano DXの進め方を買い手が事前に確認できるようにするための証拠資料です。抽象的な「できます」ではなく、どのような成果物、判断材料、引き継ぎが残るべきかを具体化します。
証拠資料を見る時は、見た目のきれいさだけでなく、受入条件、データ前提、リスク、担当者、次の判断が明確かを確認してください。良いPoCやスプリントは、作業報告ではなく、購買判断に使える情報を残します。
このページの内容は、初回相談前の期待値合わせにも使えます。必要な資料、デモの見方、社内で確認すべき論点を事前に揃えることで、短いスプリントでも密度の高い判断ができます。
見るべき証拠
動く画面、デモ経路、リスク、受入条件。
社内で使う場面
稟議、予算判断、セキュリティ確認、次スコープ検討。
良い成果物
見せられるだけでなく、引き継げて再利用できるもの。
プロダクト概要
Life Unitsは、ログイン不要の無料Webアプリです。各カウントダウンタイマーが小さな3Dシーンとして表現され、雲が流れる浮島の上に並びます。チップチューン効果音とピクセルアートUIを備え、数字だけのタイマーでは物足りない人のためのプロダクトです。
- パンケーキ、木、コーヒー、ヒヨコ、角砂糖の5モデル
- 残り時間に応じてモデルが目に見えて減っていく
- 秒から日数まで、カスタム単位のカウンターにも対応
- 無料・アカウント不要・timers.urbanodx.comで公開中
構築したもの
react-three-fiberによる全画面3Dシーンと、残り時間をそのままジオメトリに反映させる減少システムを実装しました。タイマーはブラウザ内に保存されるため、バックエンドなしの静的バンドルとしてnginxから配信しています。
- three.jsによるプロシージャルなボクセルアバター
- 時間とジオメトリを連動させたアニメーション
- 統計ビュー、モデル選択、ピクセルUI
- 技術構成：Vite、React 19、TypeScript、three.js、react-three-fiber、nginx
この事例が示すこと
コンシューマー品質の3D表現、遊び心のあるプロダクトデザイン、細部へのこだわりは、ゲームエンジンではなくWebの技術で実現できます。マイクロインタラクション、パフォーマンス管理、使っていて楽しいUIという同じ姿勢を、業務ソフトウェアにも適用します。
- インストール不要、普通のブラウザタブでリアルタイム3D
- 遊び心と工学的な規律の両立
- 意図的な習慣としての磨き込み
- ダッシュボードやフォームにとどまらないフロントエンドの幅
同じ工房の公開プロダクト
Tab o' War
ブラウザのタブそのものがHUDになる放置型パイレーツRPG。タブを裏に置いている間も、タブタイトルと描き換えられたファビコンが戦況を伝えます。
Void Gacha
WebGLシェーダーで作られたシングルプレイのガチャ。レアリティの異なるシェイプを引き、Forgeで融合させてコレクションを育てます。アカウントもサーバーも不要です。
Love & Debt
ターミナル風インターフェースのローグライク人生シミュレーション。彼女の我慢が尽きる前に、ロンドンで1万ドルの借金を返済します。英語・スペイン語・日本語に対応。
CardFrame
トレーディングカード用のデジタル展示フレーム。ファウンダーズバッチの先行販売で、カードをカメラにかざすとコレクションに登録されます。