Irodori ai
あなたが描く、AIで彩る。画像を1枚あげると、AIが言葉と音楽と3Dアニメーションを組み合わせて「体験」に仕立てるウェブアプリ。
公開中できること
- 画像から体験をつくる … アップロードした1枚の画像をAIが読み取り、キャプションやショートストーリー、雰囲気に合う音楽、動く3Dアニメーションをまとめて生成します。
- ギャラリー … ほかの人の作品をランダムに流し見できます。作品の切り替えにもトランジションが付きます。
- アトリエ … 作った作品を保存して、限定公開のURLを発行できます。
- クリエイタープロフィール … 公開ページに作品とSNSリンクを並べられます。
- ヒーリング体験・鑑賞ジャーナル … 見た作品とそのときの気分を記録して、カレンダーで振り返れます。
- 日本語・英語 … 2言語に対応しています。
つくり
| フロント | Next.js 16（App Router）+ React 19 + TypeScript + Tailwind CSS。Vercel にデプロイしています。 |
|---|---|
| AI | Google Gemini API。画像を解析して、表示する文章と 3D アニメーションの設定（JSON）を生成します。 |
| 3D | three.js。パーティクル16プリセット、動きのパターン21種、カメラ9モードを組み合わせて描いています。 |
| 音楽 | wavesurfer.js。20以上のジャンルから、画像の雰囲気に合うトラックを自動で選びます。 |
| 認証・データ | Supabase（Auth + PostgreSQL）。Google ログインに対応しています。 |
| 画像の保存 | Cloudflare R2。署名付きURLでアップロード・配信しています。 |
| 共通処理 | 認証、言語の切り替え（next-intl）、CSRF対策、メンテナンスモードを Next.js のミドルウェアにまとめています。 |
| 運用まわり | 生成のレート制限とクォータ、監査ログ、コンテンツの通報と自動隔離、権限管理。 |
| テスト | Vitest（ユニット）と Playwright（E2E）。 |
技術的におもしろいところ
AIの出力を「仕様」として受け取る
生成AIの自由な文章をそのまま画面に流すのではなく、3Dアニメーションの設定を表すJSONの形をこちらで先に決めておき、 その形で答えてもらうようにしています。返ってきたJSONはスキーマ検証を通してから 3D の描画へ渡すので、 形の壊れた出力が描画まで届きません。AIに任せる範囲と、こちらが保証する範囲をはっきり分けるための作りです。
失敗しても体験が止まらない
外部サービス（AIや画像ストレージ）がどこで失敗しても、利用者には必ず成立した体験を返す方針で組んでいます。 AI生成に失敗したときは、あらかじめ用意したフォールバックの体験に差し替わるので、 画面がエラーで止まってしまうことがありません。
表現は組み合わせで作る
AIが絵そのものを描くのではなく、用意してあるパーティクル・動きのパターン・カメラワーク・音楽ジャンルの中から 「どれを選ぶか」を決めさせています。見た目の品質を保ちながら、画像ごとに違う体験になるようにするための分担です。
プライバシー・お問い合わせ
Irodori ai のプライバシーポリシーと利用規約は、サービス内に掲載しています。
ご意見・不具合のご報告は、Sizu dev のお問い合わせページからもご連絡いただけます。