推しアイデア
自分の声を使って風流な庭を制作していくアプリ。 投稿や訪問も可能。
Kazenagare
風流なものに自分の声を録音して自分だけの庭を作って共有。
作った背景
windを風、waveを流れと捉えて、風流なプロダクトにしようと考えついた。鹿威しに自分の声を入れられたら面白そうだと思い、このプロダクトの作成に至った。
推し技術
Web Audio API（AnalyserNode）を用いてマイク入力をリアルタイムに解析し、声の音量をp5.jsの描画へ遅延なく連動させています。
プロジェクト詳細
プロジェクト詳細
「Kazenagare」は、ユーザーの「声」を日本の伝統的な情景（依代）の一部として溶け込ませる、Webアプリケーションです。 マイクから入力された音声が、風鈴やししおどしといった和のオブジェクトの音として変換され、視覚的なアニメーションとともに庭を彩ります。 自分だけの「庭」を作り上げ、他のユーザーと訪問し合うことで、「侘び寂び」を感じられる体験を提供します。
コンセプトと体験
- 和の情景（Yorishiro）との融合 日常の何気ない声や音が、和のオブジェクトを通して環境音へと変化します。
- 図鑑による収集と育成の楽しさ 探索で得たコインを使って新しいオブジェクト（音の器）を購入し、3秒間の音声を吹き込むことで図鑑を埋めていくコレクション要素を用意しています。
- 他者の庭とのつながり QRコードを生成して自分の庭を共有したり、他のユーザーの庭を訪問したりすることで、それぞれの音の情景を楽しむことができます。
主な機能
- 認証システム
・匿名ログインから、メール、Google、X（Twitter）連携まで幅広く対応。
- 庭ステージ（箱庭）
・2D空間でのキャラクター移動、カメラ追従機能。
・手に入れたオブジェクトの配置と、それに連動した録音の再生。
・探索や再生によるコイン報酬システム。
- 音の図鑑(収集)
・オブジェクトのカタログ表示と、コイン消費による購入。
・各オブジェクトに対する3秒間の音声録音と保存。
- 共有・ソーシャル機能
・専用URLおよびQRコードによる自分の庭のシェア。
・庭一覧画面から他者の庭への訪問
・他者のオブジェクトに声を重ねてハーモニーを奏でる
使用技術
リアルタイムな描画と音声処理をブラウザ上で滑らかに動作させるため、モダンなWeb技術を組み合わせています。
- Frontend: Next.js 16 (App Router), React 19, TypeScript
- Styling: Tailwind CSS 4（独自の和風カラーパレットを適用）
- Visual Engine: p5.js / react-p5（キャンバス上のキャラクターやオブジェクトの描画・アニメーション）
- Audio / Storage: Web Audio APIの仕組みを活用しつつ、ローカル保存（idb-keyval / localStorage）を中心とした高速なデータ読み込みを実装。
- Backend / BaaS: Supabase（認証基盤として利用）
- Hosting: Vercel
