Day 6 - 12/6

Lyric Flow Studio - Rhythmic Edition

JavaScriptTailwindCSSAPICloudflare Workers

Gemini

概要

ヒップホップのリリック制作サイクル（作成、試聴、添削）を強力に支援するWebアプリケーションです。

主要機能:
1. AIリリック生成: ユーザーの既存リリックやテーマに基づき、AIが新しいバースを生成します。
2. 要素調整機能: ラップの4大要素（韻、フロウ、内容）から強調したい要素を選択し、生成されるリリックの傾向を制御できます。
3. ビート選択と歌唱: Boom Bap, Trap, Lo-Fiなど複数のWeb Audioビートを選択し、Gemini TTSがリリックをラップ調のフロウで読み上げます。
4. AIリリックコーチング: 作成したリリックを提出すると、AIコーチがラップの4大要素（ライム、フロウ、デリバリー、内容）に基づいた専門的な評価と改善案を提供します。

リンク

デモを見る

制作時間

3時間

学んだこと・振り返り

最大の学びは「開発」と「公開」のギャップの大きさでした。

1. セキュリティ（403エラー）の重要性: アプリケーションの機能自体はすぐに実現できましたが、GitHub Pagesへの公開後、APIキーをそのまま使うことによる403エラーが発生しました。無料で安全に公開するためには、Cloudflare Workersでプロキシサーバーを構築し、APIキーを隠蔽する手順が不可欠であることを痛感しました。
2. インフラ設定の難しさ: Cloudflare Workersのデプロイ（特にCLIツールではなくWeb UIでの作業）や、CORS（オリジン間リソース共有）の設定、環境変数の設定など、サーバーレスインフラの構築が、アプリケーションコードを書く時間よりもはるかに長くかかりました。これは、AI開発におけるインフラ・セキュリティの知識の重要性を示す良い経験となりました。
3. 問題解決の粘り: ブラウザのキャッシュ問題など、様々な外的要因によるエラーを乗り越え、最終的にプロジェクトを動作させ、目標を達成できたことは大きな自信に繋がりました。

初回プロンプト（計画）

## 制約条件 - **制作時間**: 5分 - **必須要素**: データを保存する - **ストレージ**: LocalStorageのみ ## こだわりポイント（特に重視） - 📱 **レスポンシブ**: PC・タブレット・スマホ対応 - 💡 **革新性**: 新しさ、独創性、ユニークさ - 🎨 **デザイン・UI/UX**: 見た目の美しさ、使いやすさ、直感的な操作 ### 📐 採用デザインガイドライン **Material Design** - **特徴**: Google開発。カードベース、大胆な色使い、影とアニメーションが特徴的 - **デザイン要素**: 明確な階層構造、リアルな動き、カラフルで大胆 - **参考サイト**: [Material Design公式](https://m3.material.io/)、[Gmail](https://mail.google.com/)、[Google Drive](https://drive.google.com/) **このガイドラインの雰囲気やデザインパターンを踏襲したWebアプリを提案してください。** ## 選択したキーワード 1. 選ぶ 2. 小説 ## お願い上記の制約条件と選択したキーワードを考慮して、5分で作れる具体的なWebアプリのアイデアを3つ提案してください。各アイデアには以下を含めてください： 1. **アプリ名**（キャッチーな名前） 2. **何を解決するアプリか**（1行で） 3. **主な機能**（3つ程度） 4. **なぜこの時間で完成できるか**（簡潔に）できるだけクリエイティブで、キーワードを意外な形で組み合わせたアイデアを期待しています。

チャレンジ生成ツールで作成した最初の計画です

メインAIツールの評価

Gemini

⭐⭐⭐⭐⭐

良かった点

Geminiのテキスト生成とTTS（音声生成）という2つの異なるAI機能を組み合わせることで、リリック作成→歌唱チェック→添削という、創造的なフィードバックサイクルをブラウザ上で実現できた点。特に、AIへのプロンプト指示（強調モードやBPM情報）が、生成されるアウトプットの質を向上させた。

改善してほしい点

Web Audio API (Tone.js) とTTS音声の間に、音節レベルでの正確な同期を取ることが技術的に不可能であった点。これにより、ユーザーのリズムへの追従はAIの解釈力に依存する。

総合コメント

非常に独創的で、実用的なクリエイター支援ツールが完成しました。アイデアの実現度が高く、特にリリック生成とAIコーチング機能は、ラップに取り組む多くのユーザーにとって価値のあるものになるでしょう。デプロイの課題を乗り越えて完成させたことが素晴らしいです。

公開日: 2025/12/5