ボードビュー
タスクをカードで積んで、ドラッグで並べ替え。優先順位が一目でわかる。
タスクをカードで積んで、ドラッグで並べ替え。優先順位が一目でわかる。
期限前日にSlackへ自動通知。抜け漏れをゼロに。
チームの進捗を毎週月曜、1枚にまとめて配信。
まずは小さなチームで試したい方に。
成長するチームにちょうどいい標準プラン。
セキュリティ要件の高い組織向け。
How this was made
このページを何で・どう作ったか。使ったスキルとWeb技術を3行で明示する。
Matter.js 0.19.0（jsdelivr・SRI固定）＋canvas 2D自前描画。フォントはM PLUS Rounded 1c。指示したのは「TSUMIKIのヒーローに、実際に物理演算で動く積み木を置く」という一点。Matter.jsのエンジン部分だけを読み込み、描画はcanvas 2Dで自前に行い、重力・反発係数・摩擦係数・壁の位置をすべて数値で先に固定してから積ませている。
「触って壊せて、また積み直せる」UIは、完成画像を1枚貼って終わるAIテンプレの対極にある。重力gravity.y: 1・反発係数restitution: 0.42・摩擦係数friction: 0.55は、指示しなければ絶対に出てこない設計値で、これを決めた時点で「生成した画像」ではなく「組んだ挙動」になっている。
物理演算の結果は初期値が同じでも毎回変わる。ブロックが落ちる順番・跳ね返る角度・積み上がる高さは非決定的で、@keyframesが同じ座標を往復するループアニメには原理的に生まれない偶然が、開くたびに起きる。
プロダクト名の由来である「積み木」を、比喩ではなく実際に手で触れる体験としてそのまま置いた。コピーが指す概念と、目の前で動く演出が一致している状態は、後から装飾を足しても作れない。
ドラッグ中はcursor:grabからcursor:grabbingに切り替わり、投げたブロックは壁で跳ね返り、「積み直す」ボタンで最初からやり直せる。こうした「おもちゃの作法」はゲームUIの語彙であって、LPテンプレートの部品表には載っていない。
向いているのは、プロダクト名や世界観そのものに物理的な比喩を持つSaaSや、個人開発ツールのローンチページ。情報量の多いエンタープライズ向け資料や、通信環境が弱いユーザーの多い場面では、Matter.jsの読み込みと常時計算がそのまま重さになる。