okuyuki

写真を重ねて飾る、奥行きのあるペーパークラフトの印刷データを作るアプリです。

ReactTypeScriptViteThree.jsZustandClaude
okuyuki の画面(デスクトップ)

作ったもの

写真を重ねて飾るペーパークラフトの、印刷データを作るアプリです。写真を切り抜き、タイトルの枠、前景、背景の紙に分けて重ねることで、奥行きのある立体作品になります。

編集している間も、画面には組み上がった作品が 3D で表示され続けます。最後に A4 の PDF として書き出し、印刷して組み立てます。

写真の切り抜きには AI を使いますが、ブラウザの中で動くため、写真はどこにも送られません。

作り方

画面のデザインを先に固め、印刷して組める形になるよう、紙の間隔や枠の幅といった制作データの仕様を決めました。そのうえで、機能の設計、状態の設計、実装の順に進めています。

切り抜きのモデルは、試作で比べて選び直しました。画面も一度作り直しています。設計と実装は Claude Code で進めました。

0:00