MD-Blog_Web Creative

リフレッシュ休暇中に、ちょっとした大人の自由研究をしました。

うちの息子は執筆時点で2歳なのですが、iPadのDJアプリ「djay」が大好きで、親がプレイリストをセットしてやると、ループをかけたりフィルターを操作したりスクラッチをしたりと、なかなか器用に遊んでいます。
そろそろ将来の夢はDJと言い出しそう。

それは構わないのですが、ただ困るのは、遊ばせるたびにiPadを渡しっぱなしにしなければならないこと。
djayを起動した状態で渡しても、気づいたらYouTubeを開いている。2歳児のタップ精度は、侮れません。

だったら専用アプリを作ってしまえばいい。Fire HDタブレットがあるので、そこで動かせれば解決です。

コードを1行も書かずに、1日でデプロイまで完了しました。

1. アイデアの壁打ち

最初は市販の子供向けDJキットを探しました。Claudeに相談しながら調べると、それっぽいものはいくつかあるものの、iPadと接続して使う前提だったり、対象年齢が合わなかったりと、なかなかピタッとくるものが見つかりません。

ハードウェアを探していたはずが、気づけば「作る」という結論に向かっていました。

要件の核になったのは3点です。「子供が一人で遊べること」「プレイリストを親が簡単に管理できること」「YouTubeに飛べないこと」。

Claudeと話しながらこれを整理していく過程で、YouTube IFrame Player APIを使えばブラウザ上で音楽を再生するアプリが作れるだろうと、技術的な道筋が見えてきました。

2. 技術選定

技術スタックはシンプルに決まりました。

• フレームワーク： Vite + React
  Next.jsは今回の用途にはオーバースペック。Fire HDのSilkブラウザで軽快に動かすことを優先しました。

• 音源API： YouTube IFrame Player API
  プレイリストの楽曲をそのまま音源として使えます。

• SE再生： Web Audio API
  ホーンやサイレンなどのSEをIFrame APIの音声と同時に鳴らすために併用します。

• ホスティング： Cloudflare Pages
  サーバーサイド不要のSPAなので、静的ファイルをそのままホスティングするだけ。

3. 仕様策定

Claudeとの対話を通じて、機能の優先度を一つひとつ整理しました。

面白かったのは「子供向けのデザインにする必要はない」という判断です。djayを操作できる2歳児に、丸くてカラフルなキッズUIは不要です。むしろdjayやSeratoのようなクールで本格的なUIを目指す。

「幼児でも操作できる直感性は、デザインのチープさではなくシンプルさで実現する」という方針に決めました。

機能面では、2デッキ構成・クロスフェーダー・SEパッドを初期実装に含め、スクラッチやループは将来拡張に回しました。
ちなみにアプリ名はTINYSPIN。

最終的な要件定義書はClaudeに出力させました。

# TINYSPIN 要件定義　※抜粋

## ターゲット
- 利用者：幼児（2歳）だが、デザインは子供向けにしない
- UIコンセプト：djayやSeratoのようなクールで本格的なDJアプリを踏襲する
- 動作端末：Fire HD（横向き固定）

## 機能要件
- YouTubeプレイリストから楽曲を取得・再生する
- 2デッキ構成、各デッキ独立して再生・停止・曲選択
- 画面中央にクロスフェーダー
- SEパッド（ホーン・サイレン等をWeb Audio APIで即時再生）
    - 音素材はフリーのものをかき集める
- 設定画面でAPIキー・プレイリストIDを登録（LocalStorageに保存）

4. UI作成

コーディングはすべてClaude Codeに任せました。ポイントは「UIを先に固める」こと。

要件定義書を読み込ませて最初に指示したのは、実装ではなくインタラクティブなUIの作成です。 ダークテーマ・2デッキレイアウト・回転するレコード・SEパッドといった見た目をClaude Codeとすり合わせ、都度ブラウザで確認して調整しました。
実案件でのWebサイト制作フローも似たようなものですが、ガワが固まっていれば裏側の実装はサクサク進むものです。

5. 実装

UIが完成したら、あとは仕様書を読み込ませてPlanモードで実装計画を立てさせ、実装させるだけです。

あっという間にClaude Codeが実装した内容は以下の通りです。

• YouTube Data API v3でプレイリストの楽曲一覧を取得
• クロスフェーダーのポインタードラッグ実装（中央スナップ付き）
• SEパッドのWeb Audio API実装（本体再生と同時に鳴らせる）
• LocalStorageによるAPIキー・プレイリストIDの永続化

自分はコードを1行も書いていません。

6. デプロイ

無料で手早く静的Webアプリが構築できる環境として今回はCloudflare Pagesを選択しました。

vite buildでdistフォルダを生成して、Cloudflare Pagesのダッシュボードにドラッグ&ドロップするだけ。
5分で公開完了しました。
あとはFire HDのSilkブラウザでURLを開いて「ホーム画面に追加」。息子のタブレットに、専用DJアプリ『TINYSPIN』のアイコンが並びました。

実際の画面

なお、Youtube APIのキーは設定画面から入力してクライアント側に保存する仕様にしたので、サーバー側で認証情報を保つ必要がなく、セキュリティ的なリスクも回避しています。

7. 感想

息子は期待通り大ハマり。
今では「DJする！」と自分でアプリを立ち上げて遊んでいます。（ただしタブレットは1日1時間まで！）

今回あらためて実感したのは、AIとの対話が設計フェーズそのものになりうる、ということです。

「作りながら仕様を決める」という悪習は、おそらく多くのWeb制作者に身に覚えがあるはず。Claudeと話しながら要件を言語化していくプロセスは、その悪習を自然に回避させてくれます。壁打ちの相手として優秀なだけでなく、整理された要件定義書まで出力してくれるので、Claude Codeへの引き渡しもスムーズでした。

そしてこのフローは、生活のすき間にぴたりと収まります。お風呂の中でアイデアが浮かんで、寝る前にClaudeと対話しながら仕様を固める。翌朝の通勤電車で要件定義書を仕上げたら、あとはClaude Codeにバックグラウンドで実装を走らせておく。気づいたら動くものが手元にある、という感覚です。

次期アップデートはスクラッチとループを追加する予定です。
2つともユーザーの強い実装要望を受けているため......。

おわりに

モンスターダイブでは、AIを活用した制作プロセスの改善に日々取り組んでいます。

今回のような「AIと壁打ちしながら要件を固め、実装まで持っていく」という実験が、休暇中の個人プロジェクトでも業務の中でも自然に行える環境です。

「こういう試行錯誤が好きだ」「Webものづくりの現場でAIをもっと活用してみたい」という方、ぜひ採用ページを覗いてみてください。