音楽ストリーミング設計ガイド -- "Midnight Studio"
音楽ストリーミングのUIデザインは、視覚と聴覚の境界を溶かす領域だ。ユーザーは耳で音楽を聴きながら、目でアルバムアートを鑑賞し、指で次の曲を探す。その三つの感覚を同時に満足させるインターフェースが求められる。UI自体はほぼモノクロームに徹し、アルバムアートが画面に色を提供するという逆転の発想が、この領域の設計を支配する。
本記事では、Spotify と Apple Music という二つの巨人から着想を得た「Midnight Studio」というデザインシステムを解説する。音楽再生アプリ、ポッドキャスト、オーディオブック、ラジオストリーミングなど、オーディオコンテンツ領域全般に適用可能な実戦レベルのテンプレートだ。
核心となる設計思想
コンテンツ（アルバムアート）が色を提供する。UI自体はモノクロームのダークテーマに徹し、アルバムアートやアーティスト画像が画面に彩りを与える。グリーンの再生ボタンだけが、UIが許された唯一の彩度だ。
1. デザイン哲学 -- 「深夜のスタジオ」
コンテンツが色を支配する
このテンプレートの根底にある考え方は、「レコーディングスタジオの暗闇」だ。
暗い部屋の中で、ミキサーのLEDとスピーカーの光だけが浮かぶ。音楽が主役であり、UIは音楽を操作するためのコンソールに過ぎない。#121212 のピュアダーク背景は色味を一切持たず、どんなアルバムアートの色も公平に引き立てる。唯一のアクセントカラーであるグリーン (#1ed760) は「再生」「アクティブ」を意味し、それ以外の用途には決して使わない。
音楽プレイヤープレビュー
以下はこのテンプレートを適用した音楽プレイヤーの実例だ。ダーク背景、アルバムカードグリッド、ボトムプレイヤーバー、グリーンの再生ボタンが統合されている。
2. カラーパレット
このテンプレートのカラーパレットは、完全にモノクロームのダークテーマだ。唯一の彩度を持つ色はグリーン (#1ed760) であり、「再生中」「アクティブ」を意味する。それ以外は全て白と黒のグラデーションで構成される。
パレットストリップ
#121212base#181818elevated#282828highlight#fffffftext#b3b3b3secondary#1ed760accent#f15e6cerror3. コンポーネントプレビュー
ボタンバリエーション
バッジ
プログレスバー & スライダー
アーティスト/アルバム画像の形状
4. 使用ガイドライン
適合するプロジェクト
- 音楽ストリーミングアプリ（Spotify, Apple Music風）
- ポッドキャストプレイヤー
- オーディオブックアプリ
- ラジオストリーミング
- DJ・ミキシングツール
- 音楽発見/レコメンデーションサービス
適合しないプロジェクト
- テキスト主体のブログ・メディア（タイポグラフィの方向性が異なる）
- 明るい印象が必要なコーポレートサイト
- 教育プラットフォーム（ゲーミフィケーション要素が不足）
- EC・ショッピング（商品情報の構造が異なる）
カスタマイズのポイント
- accent-primary: グリーン (#1ed760) は「再生」の象徴。変更する場合は彩度の高い色を推奨
- プレイヤーバー高さ: 72px がデフォルト。コンテンツ量に応じて 56-80px で調整可能
- アルバムグリッド: minmax(180px, 1fr) がデフォルト。画面サイズに応じて調整
- ダーク背景: #121212 が最も暗い面。より暗くする場合は #0a0a0a まで
テンプレートファイル
完全な9セクションの DESIGN.md テンプレートは以下に格納されている:
/Users/takehiro/Documents/WorkSpace/otani/Skills/create-design/templates/MUSIC_STREAMING.mdStitch への投入方法は MUSIC_STREAMING.md 内の「Agent Prompt Guide」セクションを参照のこと。