🐿️

バイブコーディング2026：UIモック起点で作るアプリ開発

に公開
React
TypeScript
AIエージェント
AI駆動開発
Claude Code
tech

こんにちは。村上と言います。音楽プロデューサーをやりながらフリーで開発業務をしています。

今回は非常にニッチなのですが、音楽制作におけるボーカルレコーディング用のテイク管理Webアプリというのを、思いついてから２日で開発してサービスインしてみました。
その制作の流れをご紹介します。

サービスのサイト


https://vocal-take-manager.web.app/

ポイント

  • 開発の方向性や枠組みは詳細に指示しているが、開発中、コードはほとんど見ていない。うまくいかない時だけ確認して、修正内容を指示。
  • 設計の起点はUIのモックです。事前準備はこの４枚の画像を作ることが9割で、画像をAIに読み取ってもらって、それをもとに要件定義を文章に落とし込んで開発をはじめます。
  • テストは書いていません。

UIモック





Adobe Illustratorで作成。このモックの作り込みがキモです。AIに読んでもらうことを意識して、できるだけシンプルに、必要なものだけをデザインします。

開発手順

  1. 最初にチャットAIと壁打ちしてイメージを固める　→使用ライブラリなど、技術的なリサーチを含む。相手はChatGPTでもGeminiでも気に入ってるやつで良いと思います。
  2. UIのモックアップイメージを作る　→個人的にUIの設計は好きなので、ここは完全に人力で行っていますが、AIを使っても良いと思います。
  3. 使用ライブラリを決めて、リポジトリをセットアップする　→これも、エージェントに投げるより、人間の検索とAIのリサーチを合わせて事前に決めておいた方が良いと思います。
  4. 指示書を書いて、最初に要件定義とデータモデル、スキーマの設計を行ってもらい、CLAUDE.mdを書いてもらいます。
    この時に投げる指示書の品質で、今後の開発がスムーズに進むかどうかが決まると思います。
    自分は今回、下記の様な指示を投げました。結構細かいですが、機能要件はUIのモックアップから逆算してもらう個所も多く、2026年現在は割と画像を読み取って何とかしてくれます。
要件定義のCLAUDE.mdをAIに書いてもらうための指示書
ボーカルレコーディングのテイク管理を行うためのアプリを開発します。
このアプリは、歌詞を読み込んで、各テイクでどこが良かったかマークし、
最終的にボーカルエディットして最高のテイクを作成するための、ボーカルレコーディングディレクター向けのWebアプリです。

最初に、実装を進めるための要件定義、モデル定義の設計書をCLAUDE.mdを作成して記述してください。


・主な使用ライブラリは下記です。すべてわたしがインストール済みです。
React 19 (React Compilerモード)
Vite
Vitest
playwrite
biome

mui

dexie
dexie-react-hooks

tanstack/react-virtual

zustand

zusandはアプリ全体のユーザー通知とインタラクションで使う、グローバルダイアログのみで使用してください。下記実装済みです。
src\components\GlobalDialog.tsx
src\stores\dialogStore.ts

Contextプロバイダーは使用しないようにしてください。useStateのみではどうしても厳しい場合のみzustandを使います


完成したアプリのデプロイはfirebaseに行いますが、形態素解析、ブラウザへindexedDBへの永続化を含めて、
すべてクライアント処理で完結します。ユーザーデータはサーバーには一切送信しません。

形態素解析のkuromoji.jsのみ、まだインストールしていません。

画面レイアウトを画像で4枚用意したので添付します。
1枚目、ホームページ
２枚目、歌詞入力画面
３枚目、レコーディング画面
４枚目、コンピング・画面

docs\01_Homepage.png
docs\02_LyricEdit.png
docs\03_Recording.png
docs\04_Comping.png
にも同じ画像が入れてあります。

レコーディング画面でのマーキングについて、キーボード1～5は、画面右下エリアでユーザーが設定したマークが使用されます。
デフォルトが、1は◎、2が〇、3が△というだけで、空に設定したりも出来ます。
キーボードショートカット0を押すと、設定した手動メモが記入できるようにします。

コンピング画面では、右下のエリアで、現在ロケートされている文節部分の各テイクのマーク状態が、
その個所の個所と一緒に表示され、テイク番号を選ぶとテイクが決定され、どんどん進んでいきます。

また、形態素解析結果そのまま使うのではなく、例えば
――――
おおきなのっぽの古時計
おじいさんの時計
百年いつも動いていた
ご自慢の時計さ
――――
を通常の形態素解析に書けると、
――――
Surface form	Part-of-Speech	Base form	Reading Pronunciation
おおきな	連体詞,*,*,*	おおきな	オオキナ
のっぽ	名詞,一般,*,*	のっぽ	ノッポ
の	助詞,連体化,*,*	の	ノ
古	接頭詞,名詞接続,*,*	古	コ
時計	名詞,一般,*,*	時計	トケイ
記号,空白,*,*	*	?
おじいさん	名詞,一般,*,*	おじいさん	オジイサン
の	助詞,連体化,*,*	の	ノ
時計	名詞,一般,*,*	時計	トケイ
記号,空白,*,*	*	?
百	名詞,数,*,*	百	ヒャク
年	名詞,接尾,助数詞,*	年	ネン
いつも	副詞,一般,*,*	いつも	イツモ
動い	動詞,自立,*,*	動く	ウゴイ
て	助詞,接続助詞,*,*	て	テ
い	動詞,非自立,*,*	いる	イ
た	助動詞,*,*,*	た	タ
記号,空白,*,*	*	?
ご	接頭詞,名詞接続,*,*	ご	ゴ
自慢	名詞,サ変接続,*,*	自慢	ジマン
の	助詞,連体化,*,*	の	ノ
時計	名詞,一般,*,*	時計	トケイ
さ	助詞,終助詞,*,*	さ	サ
――――
となりますが、ツールの性格上欲しいのが
――――
おおきな
のっぽの
古時計
おじいさんの
時計
百年
いつも
動いていた
ご自慢の
時計さ
――――
という結果を得たいです。


コンピングを完了したら、エンジニアに渡して作業してもらうための、テイクを書き込んだ歌詞カードを
印刷、PDFで出力、または編集済みの楽曲データオブジェクトをjson（拡張子は.vtm）で書き出すワークフローです。

ライブラリを事前にリサーチしておき、リポジトリに完全にインストールしておくことで、タイムロスが圧倒的に減ります。（これをやらないと、勝手に古いバージョンや、メンテされていないライブラリを使いだしたりして、余計な時間を食う）

指示書を基にAIが作成した要件定義が満足いくものになったら
ここから初めてエージェントを使って開発をはじめます(今回は、要件定義にCursorのエージェント（モデルはCODEX 5.2）、実装はClaude Code/Cursor併用)を使っています。

AIが書いたCLAUDE.mdは下記です。
https://github.com/Jun-Murakami/vocal-take-manager/blob/main/CLAUDE.md

  1. CLAUDE.mdの内容に基づいて実装していきます。Claude CodeにはChromeリモートのスキルを許可して、UIが要件通りになってるかなど、スクショなどを撮ってもらいながら開発ループを進めます。
  2. うまくいかなかったらコードを確認して指示。

まとめ

スピード感を持って、それなりに満足のいくアプリケーションが開発できました。このようなアプリ開発では、UIモックを最初に作ってから開発を進める手法はおすすめです。

今回のリポジトリはこちら。
https://github.com/Jun-Murakami/vocal-take-manager

Discussion