PR
Laravel × バイブコーディングで作る吹奏楽曲DB

Day1:仕様書作成【Laravel × バイブコーディングで作る吹奏楽曲DB】

Laravel × バイブコーディングで作る吹奏楽曲DB
この記事は約9分で読めます。

Laravelを勉強しながらバイブコーディングをやってみよう!というこの挑戦。
まずは仕様書を作成していきたいと思います。

作りたいもののイメージがある程度固まっているので、下記をchatGPTに投げます。

  • 吹奏楽の曲をまとめたデータベース的なもの(吹奏楽に特化したWikipedia)
  • ユーザー投稿などは考えず、私個人が登録した情報を見れる辞書的なイメージ
  • LaravelとTailwind CSSを技術として使いたい

この内容を投げた結果、その他の技術スタックやデータベースの提案を出してくれたので、さらに壁打ちをして仕様を詰めていきます。
WordPressの構築はしたことがあったのですが、データベースの設計を自分で考えたことがなかったので、提案してくれた設計内容に違和感があったものは理由を確認しながらまとめました。

ある程度、仕様についてが固まったところで、仕様書を出してもらう前にこのサイトで一番大事なものを相談しました。

そう、このサイトの名前です。

ちょっと遊びを入れたかったので、吹奏楽とわかりつつユニークさもある名前の提案をしてもらいました。

この初回の提案で良さそう!と思った名前があったのですが、すでに似た名前のサイトがあり…。
数回の壁打ちを経て、自分的にもしっくりくる名前を決めることができたので、すぐドメインを確保しました。
Web業界で働いている人、お茶買うくらいの感覚でドメイン取りがち!笑

そして、2時間くらい壁打ちをして、かなりしっかりとした仕様書にまとめられました。

# 🎼 吹奏楽曲データベースサイト 仕様書(Laravel)

## 1. サイト概要
- **目的**: 吹奏楽の楽曲データベースを構築し、利用者が「曲との出会い」を楽しめる場を提供する。  
- **対象**: 吹奏楽愛好家、学生、指導者。  
- **収益化**: Google AdSense、アフィリエイト(楽譜販売先リンク、書籍リンク)。  
- **運用体制**: 管理者(1名)のみが登録・編集を行う。(管理者だけが知っている管理画面から情報登録を行う)

---

## 2. 技術スタック
- **フレームワーク**: Laravel (PHP)  
- **DB**: MySQL or PostgreSQL  
- **フロント**: Bladeテンプレート + Tailwind CSS  
  - Tailwindで基本のレイアウトとスタイルを構築  
  - 必要に応じてAlpine.jsやVueを導入(検索フォーム・モーダルなど)  
- **認証**: 管理者のみ(シンプルなBasic Auth or ログイン画面)  
- **デプロイ環境**: VPS or レンタルサーバー 

---

## 3. データモデル設計

### 3.1 曲テーブル(`repertoires`)
サイトの中心となるテーブル。

| カラム名       | 型       | 必須 | 説明 |
|----------------|----------|------|------|
| id             | bigint   | PK   | 曲ID |
| title          | string   | ○    | 曲名(日本語) |
| title_en       | string   | △    | 原題や英語タイトル |
| composer       | string   | △    | 作曲者 |
| arranger       | string   | △    | 編曲者 |
| category       | enum     | ○    | {クラシック, ポップス, オリジナル, 行進曲, その他} |
| difficulty     | tinyint  | △    | 難易度(1〜5など) |
| description    | text     | △    | 曲の簡単な解説(補足やメドレー曲名もここに記載) |
| youtube_url    | string   | △    | YouTube埋め込み用URL |
| created_at     | timestamp| ○    | 作成日時 |
| updated_at     | timestamp| ○    | 更新日時 |

---

### 3.2 リンクテーブル(`links`)
曲に関連する外部リンクをすべて管理する汎用テーブル。  
販売リンク、参考YouTube、その他リンクを種類で区別可能。

| カラム名   | 型     | 必須 | 説明 |
|------------|--------|------|------|
| id         | bigint | PK   | リンクID |
| repertoire_id    | bigint | ○    | 対応する曲ID(外部キー: repertoires.id) |
| type       | enum   | ○    | リンクの種類(例:purchase, youtube, reference, その他) |
| label      | string | △    | ボタン表示名(例:Amazon、公式演奏、学生演奏) |
| url        | string | ○    | リンク先URL |

---

### 3.3 タグテーブル(`tags`)
| カラム名 | 型     | 必須 | 説明 |
|----------|--------|------|------|
| id       | bigint | PK   | タグID |
| name     | string | ○    | タグ名(例:ディズニー、映画音楽、コンクール課題曲) |

**中間テーブル(`repertoire_tag`)**  
- repertoire_id  
- tag_id  

---

## 4. 機能仕様

### 4.1 管理者機能
- 曲データの登録・編集・削除  
- タグ付け管理  
- 外部リンク(販売リンク / YouTube / 参考リンク)の登録・編集・削除  
- 簡易ログイン(ID/パスワード) 

### 4.2 ユーザー機能(一般公開)
- 曲検索(タイトル / 作曲者 / タグ / 難易度 / カテゴリー)  
- 曲詳細ページ閲覧(曲情報・解説・リンクボタン)  
- タグによる絞り込み検索 

---

## 5. UI/UX設計
- **トップページ**: 新着曲、タグ一覧、検索窓  
- **検索結果ページ**: 一覧表示(曲名・作曲者・カテゴリー・タグ抜粋)  
- **曲詳細ページ**:  
  - 曲名、作曲者/編曲者  
  - 難易度、カテゴリー  
  - 簡易解説  
  - リンクボタン(販売リンク・参考YouTubeなど)  
  - タグ一覧(リンク付き)  

---

## 6. SEO/収益化
- 各曲ページのタイトルタグ・メタディスクリプションに自動反映  
- Schema.org構造化データ(MusicComposition, MusicRecording)対応  
- Google AdSense埋め込み(曲詳細ページ下部、サイドバー)  
- アフィリエイトリンク(出版社公式 or Amazon)  

---

## 7. 今後の拡張
- 吹奏楽関連書籍DB追加(出版社テーブル流用)  
- 楽譜難易度レビュー機能(管理者レビューのみ or 将来的にユーザー投稿可)  
- スマホ最適化(レスポンシブ対応)  

ふわっとしたイメージもきちんと仕様書に書き起こしてみると、書いている間にアイデアが出てきて固まるものですね。
そして、その壁打ち&マークダウン形式にまとめてもらうところにAIの力を借りたので、サクッとまとめられたのではないかと思います。

次はこの仕様書をもとに構築開始…!
壁打ちしながら進めるよりはスムーズに構築できるかな?と思っているのですが、どうなるのか楽しみです。

ではまた!

参考書籍
タイトルとURLをコピーしました