ポッドキャスト設計ガイド -- "Midnight Booth"
ポッドキャストUIの設計は「聴く前に惹きつける」という命題と向き合う作業だ。音声コンテンツは視覚情報が極めて限られるメディアであり、だからこそショーアートとエピソードリストの設計が決定的に重要になる。ユーザーは耳で聴く前に、目でショーアートを見て、指でエピソードリストをスクロールして、次に聴く番組を選ぶ。
本記事では、Spotify Podcasts と Apple Podcasts から着想を得た「Midnight Booth」というデザインシステムを解説する。温かみのあるコーラルレッドと深いネイビーが、深夜のラジオブースを想起させるデザインだ。
核心となる設計思想
音声の世界への入り口。聴く前に惹きつける。ショーアートが唯一の視覚アンカーであり、コーラルレッド (#e94560) の再生ボタンが「押して」と囁く。深いネイビー (#1a1a2e) が集中と没入を促す。
1. デザイン哲学 -- 「深夜のラジオブース」
音声体験への入り口
このテンプレートの根底にあるのは「ラジオブースの親密さ」だ。
柔らかな間接照明に照らされたマイクとヘッドフォン。パープルの光がブースの隅に溶け込み、ウォームな雰囲気がリスナーを包む。#1a1a2e の深いネイビーは夜の静寂を表現し、#e94560 のコーラルレッドが「再生」への期待を高める。
ポッドキャストページ プレビュー
以下はこのテンプレートを適用したポッドキャストショーページの実例だ。
2. カラーパレット
背景色の階層
Deep Navy
#1a1a2e
Elevated
#16213e
Surface
#0f3460
アクセントカラー
Coral Red
#e94560
Purple
#533483
3. コンポーネント詳細
ショーアート
ポッドキャストの顔。1:1比率の大きな正方形で表示し、強い影で空間に浮かぶ印象を与える。
- サイズ: 280px x 280px (Desktop) / 200px (Mobile)
- 比率: 1:1 厳守
- 角丸: 16px
- 影:
0 12px 40px rgba(0,0,0,0.40)
エピソード行
各エピソードは「再生ボタン + 情報 + 再生時間」の3要素で構成。
- 再生ボタン: 44px円形、#e94560、白アイコン
- タイトル: 18px / weight 600 / white
- メタ: 日付 + 再生時間、13px / #7b8fa0
- 説明文: 14px / #b8c4d4 / 2行clamp
- プログレスバー: 4px / #e94560 fill
購読ボタン群
各プラットフォームの公式カラーを使用した横並びボタン。
4. レスポンシブ戦略
| 画面サイズ | ショーアート | エピソード | プレイヤー |
|---|---|---|---|
| Desktop (>1024px) | 280px 左固定 | 右カラム | 80px 全情報 |
| Tablet (640-1024px) | 200px 左小 | 右カラム | 80px 全情報 |
| Mobile (<640px) | フルワイド中央 | 下に展開 | 64px 簡略 |
5. 実装チェックリスト
- [ ] 深いネイビー背景 (#1a1a2e / #16213e / #0f3460)
- [ ] ショーアート 1:1 (角丸 16px, 影付き)
- [ ] エピソード行 (再生ボタン + タイトル + 日付 + 時間)
- [ ] コーラルレッド再生ボタン (#e94560)
- [ ] 途中再生プログレスバー
- [ ] 購読ボタン (プラットフォーム別カラー)
- [ ] ホスト情報セクション
- [ ] ボトムプレイヤーバー (80px)