— Story / 開発背景

なぜHTMLひとつで
無限キャンバスを作ったのか。

木下スタジオ(木下貴博 / 滋賀・琵琶湖)による開発背景と設計思想

— 01

問いは「なぜフレームワークを使わないのか」だった。

Reactは速い。でもHTMLより速くはない。

ブラウザは最強のランタイムだ。Canvas API、IndexedDB、Web Audio API、PointerEvents——これだけのAPIが標準で使える。フレームワークが何かをしてくれると思っていたが、実はブラウザがすでにやってくれていた。

「依存はいつか裏切る。だからゼロにした。」

npmのエコシステムは素晴らしい。でも、今日使っているパッケージが3年後もメンテされているかはわからない。BMBoardが依存しているのはブラウザAPIだけだ。W3Cが標準化した仕様——10年後も動く。

— 02

499KBに詰め込んだもの。

HTMLファイルひとつ。そこに全部入っている。

描画エンジン

Canvas 2D API
コーナー検出付きquad-midpoint smoothing

保存

IndexedDB
オフライン自動保存

Terminal Magic

$sakura / $scatter / $make-img
ClaudeでJSON生成→貼るだけ拡張

書き出し

PNG / SVG / PPTX / GIF
全てクライアントサイドで完結

— 03

Terminal Magicとは何か。

テキストボックスに $sakura と打つと、キャンバスに桜が降り始める。$scatter で選択中のオブジェクトが爆発する。$make-img biwako 4 で琵琶湖の写真が4枚飛んでくる。

spellは1行のJSONだ。ClaudeやChatGPTに「こういう動きをするspellを作って」と依頼すると生成してくれる。それをターミナルに貼るだけで登録される。Enterも不要。

「コマンドラインとキャンバスが合体した感じ。デザイナーが呪文を唱えるイメージで作った。」

自分のツールをAIで育てていく体験——これがTerminal Magicの本質だ。

— 04

シンプルにするのが一番難しかった。

機能を削ることは、追加することより10倍難しい。「これも必要かも」という誘惑に負け続けると、いつの間にかファイルサイズが膨らむ。499KBというサイズは、削った結果だ。

制約は敵じゃない。「1ファイルで全部入れる」という制約が、依存を持ち込まない習慣、ランタイムコストへの敏感さ、APIの理解の深さ——これらを全部鍛えてくれた。

琵琶湖のそばで、このツールを毎日使いながら作り続けた。

— Studio

Black Mirror Board(BMBoard)は、木下スタジオ(木下貴博 / 滋賀・琵琶湖)による個人開発プロダクトです。UX/UIデザイン・アートディレクション・個人開発を一人で担う体験翻訳家・木下貴博が、「届けたい体験と届いている体験のズレを揃える」という思想のもとに開発しました。

木下スタジオ(kinoshita.studio)→