スクロールして、
作品の世界へ ×
Design × everyday craft
Design Practice I / II
デザイン演習 I・II
Digital Fabrication
デジタルファブリケーション
Design Practice III / IV
デザイン演習 III・IV
Design Practice V / VI
デザイン演習 V・VI
Independent Work
自主制作
University Projects
大学制作
作品カテゴリ
授業課題・自主課題を問わず、手を動かして残してきたものをカテゴリごとにまとめました。 各カテゴリには演習ノートや、実際に動くアプリ、制作プロセスが収められています。
デザイン演習 I・II
HTMLの基礎から観察・分析・インタビューまで、デザインの土台になる演習をまとめています。
詳しく見るデジタルファブリケーション
レーザー加工や3Dプリントなど、デジタル工作機械を使った演習と最終課題を収録。
詳しく見るデザイン演習 III・IV
Arduinoによるフィジカルコンピューティングと、Androidアプリ実装の足場づくり。
詳しく見るデザイン演習 V・VI
Coming Soon。これから取り組む演習の入り口。準備が整い次第、随時アップデートします。
詳しく見る自主制作アプリ
2Dホラー「消えた記憶」、3D物理ゲーム「消しバト！」、学習・家計簿・タスク管理まで。ブラウザで試せる30本を公開中。
詳しく見る大学制作
子ども向けワークショップ「プリ消しバトル」や「PLANT SPEAKER」など、レーザー加工・3Dプリントで形にしたプロダクト。
詳しく見る代表作
まず見てほしい4つ。手で触れるプロダクトから、毎日使う生活アプリ、ブラウザで動く 3D ゲームまで。 アプリはリンクからそのまま遊べます。
NEWきょうのおかね
「お昼ごはんに800円」と話すか書くだけで残せる家計簿。金額・内容・カテゴリは端末内の規則と辞書で読み取り、記録はサーバーに送りません。
使ってみる
プリ消しバトル
消しゴムに文房具パーツを付け替えて戦う、子ども向けワークショップ企画。レーザー加工のパーツと 3D プリントの本体で、昔の遊びを再設計しました。
プロセスを見る
消しバト！放課後カスタムアリーナ
プリ消しバトルの遊びをゲーム化した3代目。three.js と物理エンジン Rapier で、機体カスタムとステージエディタを備えた3D対戦に。
遊んでみる
原環の大地 ― ヴァルナ年代記 ―
世界観・物語・システムの設計書から起こした、オープンワールド ARPG の垂直スライス。Three.js でボス戦まで遊べます。
遊んでみる制作のあゆみ
6つのカテゴリを軌道に見立てたタイムライン。ノードをクリックすると詳細と、 つながりのあるカテゴリが見られます。背景をクリックすると回転が再開します。
使っている技術
画面の中だけでなく、手で触れるものまで。公開している作品で実際に使った技術です。
Frontend
アプリ30本の土台
- React
- TypeScript
- Vite
- Tailwind CSS
- Zustand
- IndexedDB
- PWA
3D / Game
ゲーム7本で使用
- Three.js
- Rapier（物理）
- Canvas 2D
- Web Audio
- Gamepad API
- Blender
Mobile / Quality
配布とテスト
- Capacitor
- Android APK
- Web Speech API
- Vitest
- Playwright
- GitHub Pages
Fabrication / Design
大学制作・演習で使用
- Illustrator
- レーザー加工
- 3Dプリント
- Arduino
- Python / Flask
- デザイン思考
手を動かしながら、暮らしを観察する
sh0zy（XBP）です。大学でのデザイン演習・デジタルファブリケーションと、自主制作のアプリ・ゲーム開発の両輪で、 日常の小さな違和感をプロトタイプにして残しています。 観察やインタビューで課題を見つけ、企画・UIデザイン・実装・公開までを一人で通して作り切ることを大切にしています。