ミュージックアーティストUI設計ガイド -- "Dark Stage"
アーティストサイトは「世界観そのもの」だ。Drake、The Weeknd、Kanye West。彼らの公式サイトに共通するのは、黒い無限の奥行きにアーティスト名だけが浮かぶミニマリズム。UIは存在しないかのように透明で、音楽と映像だけが語る。
本テンプレートは Drake / The Weeknd 公式サイトから着想を得た「Dark Stage」設計システムを定義する。純黒の背景に120px超のアーティスト名、フルブリードの写真、最小限のUI。アクセントカラーはアルバムごとに変わる動的システム。
核心となる設計思想
黒い空間は沈黙であり、アーティスト名は声だ。120px以上のタイポグラフィが画面を支配し、それ以外は全て控えめに。アルバムのキーカラーだけがアクセントとなり、リリースごとにサイト全体の雰囲気が変わる。
1. デザイン哲学 -- 「暗闇のステージ」
Drake / The Weeknd のアプローチ
Drake の公式サイトは究極のミニマリズム。黒背景にアーティスト名、最新アルバムのアートワーク、ツアー日程。それだけ。The Weeknd は更に映画的で、アルバムの世界観がサイト全体を包む。
アーティストページプレビュー
このテンプレートの適用範囲
| カテゴリ | 適合度 | 具体例 |
|---|---|---|
| ソロアーティスト | 最適 | Drake, The Weeknd, 米津玄師 |
| バンド | 最適 | King Gnu, ONE OK ROCK |
| レーベル | 適合 | レコード会社のアーティストページ |
| 音楽フェス | 適合 | ラインナップ・チケットページ |
| DJ/プロデューサー | 適合 | ミックステープ・ライブ情報 |
| ポッドキャスト | 非推奨 | 情報量が多い場合は DARK_THEME |
2. 純黒の配色システム
黒の5段階
BLACK DEPTH HIERARCHY
#000000
#0a0a0a
#111111
#1a1a1a
3. 圧倒的タイポグラフィ
MIDNIGHT
Artist Name -- 120px+, weight 700, uppercase, letter-spacing -3px
AFTER DARK
Album Title -- 48px, weight 700, uppercase
本文テキストは控えめに
Body -- Inter, 16px, #888888
4. コンポーネント詳細
ツアー日程リスト
Apr 15
Tokyo
Budokan
Tickets
Apr 22
Nagoya
Zepp Nagoya
Sold Out
ストリーミングボタン
Spotify
Apple Music
YouTube Music
Amazon Music
5. レイアウト原則
| 要素 | 値 |
|---|---|
| 最大コンテンツ幅 | 1200px |
| アルバムグリッド | 4列等幅 |
| ギャップ | 24px (desktop) / 16px (mobile) |
| サイドパディング | 48px (desktop) / 20px (mobile) |
| ヒーロー余白 | 120px上下 |
6. 影は使わない
黒背景では影が見えない。深度は明度の差（#000 → #0a0a0a → #111 → #1a1a1a）で表現する。アルバムカラーの淡いグロウだけが浮遊感を演出。
7. Do's and Don'ts
Do
- アーティスト名を120px以上で表示
- 黒背景を徹底
- uppercase + 負のletter-spacingで力強く
- テキスト量は最小限
- ストリーミングリンクを明確に
Don't
- 背景を明るくしない
- カラフルな装飾を入れない
- 角丸を使わない（ストリーミングボタンのみ例外）
- 影を使わない
- 情報を詰め込まない
8. レスポンシブ対応
| 画面サイズ | アーティスト名 | アルバムグリッド | ツアー日程 |
|---|---|---|---|
| Mobile (<640px) | 60px | 1列 | 縦積み |
| Tablet (640-1024px) | 80px | 2列 | 横並び |
| Desktop (1024px+) | 120px+ | 4列 | 横並び |
9. プロンプトガイド
クイックカラーリファレンス
Background: #000000 | Card: #111111 | Elevated: #1a1a1a
Text: #ffffff | Secondary: #888888 | Muted: #555555
Border: rgba(255,255,255,0.08)
Accent: (album color - dynamic)Stitch向けプロンプト例
「アーティストの公式サイトを作成してください。
DESIGN.md の MUSIC_ARTIST プリセットに従ってください。
背景 #000000。アーティスト名: 120px以上, weight 700, uppercase,
letter-spacing -3px, #ffffff。最新アルバムセクション、
ディスコグラフィー4列グリッド、ツアー日程リスト。
ストリーミングボタン: #111111 背景, border-radius 9999px。」