AIとの自然な会話からプロフェッショナルな動画を生成できるWebアプリケーション。Claude APIを活用した日本語対話と音声入力に対応し、Remotionフレームワークによるプログラマブルな動画生成を実現。バージョン管理・リアルタイムプレビュー・自動保存機能を搭載し、直感的な操作で高品質な動画制作が可能。
この作品の要点
| 困っていたこと | 動画制作には専門的なスキルと複雑なソフトウェアの習得が必要。 |
|---|---|
| やったこと | AIとの自然言語対話で動画コードを自動生成し、技術的ハードルを解消。 |
| 起きたこと | プログラミング知識がなくても、プロ品質の動画制作ができるようになった。 |
どこでつまずいたか
01動画制作には専門的なスキルと複雑なソフトウェアの習得が必要
02コードベースの動画制作は技術的ハードルが高い
03制作過程のバージョン管理や履歴保存が煩雑
どう解いたか
01AIとの自然言語対話で動画コードを自動生成し、技術的ハードルを解消
02音声入力対応で、声だけで直感的に動画を作成可能に
03自動保存・バージョン管理機能で制作履歴を完全追跡
マンガでわかる
できあがったもの
できあがった画面
結果
| 01 | プログラミング知識がなくてもプロ品質の動画制作が可能に |
|---|---|
| 02 | 音声入力による直感的な操作でワークフローを効率化 |
| 03 | TypeScriptによる型安全な開発とuseCallbackを活用したパフォーマンス最適化を実現 |
この作品でできること
- Claude APIを活用した日本語の自然な会話から動画コードを自動生成
- Web Speech APIによるリアルタイム音声認識で声だけで動画を作成
- 生成したコードの履歴を自動保存、ワンクリックで過去バージョンに復元
- 生成されたコードを即座にプレビュー表示するリアルタイムプレビュー機能
- Supabase連携でプロジェクトとチャット履歴を自動保存
- RLS（Row Level Security）によるセキュアなデータ管理
どう作ったか
担当と道具
| 担当 | 企画・設計・フルスタック開発・AI連携・動画処理 |
|---|---|
| 使った技術 | Next.js 16・React 19・TypeScript・Remotion・Claude API・Supabase・Web Speech API・Tailwind CSS・Vercel |
この作品のきほん
| 種類 | Webアプリ |
|---|---|
| いまの状態 | 公開中 |
| 規模 | 担当5領域 / 技術9種類 |
| 公開先 | remo-code.nextcode.ltd |
数字で見る
89
更新した回数
45
足した機能
22
直したところ
8日
作っていた日数
2026-01-20に作りはじめて、いちばん新しい更新は2026-01-28です。
相談する
おなじものが作れます
同じ仕組みを、あなたの商品でも作れます。
この作品の開発記録・お客様の声
作っているときに考えていたこと、詰まったところをそのまま書いています。
同じカテゴリの制作実績（Webアプリ）
似た課題を解いた他の事例です。
