こんにちは！私はピアノが大好きな文系大学生で、Webエンジニアを目指して日々勉強中です。最近はフロントエンドだけでなく、バックエンドにも興味を持ち始めて、個人開発を通して少しずつ理解を深めています。
今回紹介するのは、自分の趣味と毎日使いたくなるような要素を組み合わせて開発した「音感ラボ」というWebアプリです。
楽しみながら絶対音感を鍛えられることをテーマに、Next.jsやSupabaseなどの技術を活用して作成しました。
アプリ概要 - 音感ラボ
音感ラボは、楽しみながら絶対音感を鍛えることができるWebアプリです。
デプロイURL: https://absolute-pitch-ten.vercel.app/
リポジトリURL:→ https://github.com/tensho1026/absolute-pitch-app
ホーム画面
こんな感じのデザインで構成されています。
📌 このアプリを作った理由と工夫した点
絶対音感を確かめるサイトやアプリは他にもいくつか存在していましたが、他ユーザーのスコアや自分の正解・不正解データを振り返れるような本格的なアプリが他になかったため、「あったら良いのでは」と思って制作しました。
実装中は、useStateで管理する状態が1ページに7つ以上ある場面もあり、if文で複雑な条件分岐を行うのが難しく、状態管理や構造に悩みました。また、ホーム画面のデザインはファーストビューとして重要なため、何度も修正してこだわって作成しています。
特に苦労したのは、自己分析ページのデータベース設計です。音階が全部で12個あるため、正解・不正解のデータをどう構造化するかに悩みました。
このアプリで最もこだわった点は、「各音階に対する自分の正答率を可視化すること」です。これにより、自分の得意な音・苦手な音を認識し、演奏時にその音を意識して聴く・弾くことで、音階への理解をより深められるようになることを目指しています。
主な機能一覧
- ピアノ演奏ページ：仮想キーボードで自由に演奏できる
- 絶対音感クイズページ：ランダムな音を聴いて音名を当てる
- チャレンジモード：10問の連続クイズでスコアを競う
- スコアランキング：他ユーザーと成績を比較できる
- 自己分析ページ：自分の得意・苦手な音を視覚的に確認できる
使用技術スタック
- フレームワーク：Next.js, TypeScript
- スタイリング：Tailwind CSS, shadcn/ui
- 認証管理：Clerk
- データベース：Supabase
- 音声処理：Tone.js
- グラフ描画：Recharts
- その他：framer-motion, lucide-react, react-hot-toast, react-icons
各ページの紹介
Play Piano
自由に仮想キーボードを演奏できるページです。音を確かめたり、自主練習に使ったり、耳を慣らすための基礎トレーニングに活用できます。
Challenge
ランダムに鳴る音を聴き取って答えるクイズ形式のモードです。正答数に応じてスコアが決まり、集中力と音感が試されます。
Ranking
チャレンジモードで獲得したスコアのランキングが表示されます。他のユーザーと自分の成績を比較して、モチベーションを維持できます。
My Data
自分がこれまでチャレンジしたクイズの記録を確認できます。正解・不正解の傾向をグラフで視覚的に把握し、得意な音・苦手な音を分析できます。
Tech Info（技術紹介ページ）
このアプリで使われている技術スタックや、技術選定理由をまとめた技術紹介ページです。開発者や技術に興味のある方向け。
🎯 対象ユーザー
- 音楽が好きな方！
- 音感を鍛えたい音楽初心者・中級者
- 音楽教育を行っている先生や指導者
- 絶対音感に興味のあるすべての方
💻 利用環境について
本アプリはPCでの使用を前提に設計されています。
演奏体験や操作性を重視しているため、スマートフォンやタブレットなどのモバイル端末には対応していません。
今後のアップデートでモバイル対応も検討予定です。
🛠 今後のアップデート予定
- モバイル対応（レスポンシブ対応）
- チャレンジモードの難易度選択追加
- 実力に応じた「音感級・音感段」制度の実装（例：初級〜1級、1段〜5段など）
- 練習履歴グラフの可視化
🙌 最後に
音感ラボは、音楽が好きな人にとって役立つだけでなく、自分自身の成長を“見える化”することを意識して作ったアプリです。
ここまで読んでいただきありがとうございました！