動画ストリーミング設計ガイド -- "Cinema Noir"
Netflix や Disney+ に代表される動画ストリーミングプラットフォームの設計は、「コンテンツが全て」という哲学に支配される。UIはコンテンツの背後に溶け込み、ユーザーの意識はサムネイルとトレーラーに集中する。ビンジウォッチングを誘発する没入型インターフェースが、このカテゴリの競争優位を決定する。
本記事では、Netflix のダークテーマと Disney+ のブランド力から着想を得た「Cinema Noir」というデザインシステムを解説する。VODサービス、映画レビューサイト、動画配信プラットフォーム全般に適用可能な実践テンプレートだ。
核心となる設計思想
コンテンツが全て。UIは映像コンテンツの背後に溶け込み、視聴者の意識は16:9のサムネイルとトレーラーに集中する。#141414 の漆黒が映画館の暗闇を再現し、Netflix Red (#e50914) のCTAだけがUIの存在を主張する。
1. デザイン哲学 -- 「深夜の映画館」
コンテンツに溶けるUI
このテンプレートの根底にある考え方は「映画館のスクリーン」だ。
暗い空間の中でスクリーンだけが輝き、周囲の全てが消える。#141414 のピュアダーク背景はコンテンツ画像を最大限に引き立て、16:9のヒーローバナーが画面の60%以上を占有する。水平スクロールのカルーセルが「無限のライブラリ」を暗示し、「もう一本」の衝動を生む。
ストリーミングホーム プレビュー
以下はこのテンプレートを適用したストリーミングホーム画面の実例だ。大型ヒーロー、コンテンツカルーセル、カテゴリナビゲーションが統合されている。
2. カラーパレット
背景色の4層構造
ストリーミングUIの背景は「映画館の暗闇」を4段階で表現する。
アクセントカラー
3. コンポーネント詳細
ヒーローバナー
ストリーミングUIの最重要コンポーネント。画面の56vh以上を占有し、グラデーションオーバーレイでテキストの可読性を確保する。
- 背景: 16:9サムネイル画像
- オーバーレイ: 下方向
linear-gradient(to top, #141414 0%, transparent 60%)+ 左方向linear-gradient(to right, #141414 30%, transparent 70%) - タイトル: 56px / weight 700 / white
- 説明文: 16px / #b3b3b3 / max 3行
- CTAボタン: 白い「再生」+ グレーの「詳細」
コンテンツカルーセル
水平スクロールで無限のライブラリを示唆する。
- カードサイズ: 約250px幅、16:9比率
- ギャップ: 8px
- ホバー:
transform: scale(1.3)+ 情報パネルフェードイン - 矢印: ホバー時のみ表示、高さ100%
Top 10 表示
巨大な数字とサムネイルが重なる独特のレイアウト。
- 数字: 140px / weight 900 / italic / text-stroke
- カード: 16:9 サムネイル
- レイアウト: 数字左、カード右、重なり配置
4. レスポンシブ戦略
| 画面サイズ | ヒーロー高さ | カルーセル列数 | ナビゲーション |
|---|---|---|---|
| Desktop (>1024px) | 56vh | 6列 | 横並びリンク |
| Tablet (640-1024px) | 48vh | 4列 | 横並びリンク |
| Mobile (<640px) | 40vh | 2列(スワイプ) | ハンバーガー |
5. 実装チェックリスト
- [ ] ダーク背景4層 (#141414 / #1a1a1a / #222222 / #000000)
- [ ] ヒーローバナー (56vh + グラデーションオーバーレイ)
- [ ] 白い再生ボタン + グレー詳細ボタン
- [ ] 水平スクロールカルーセル (gap 8px)
- [ ] カードホバー (scale 1.3 + 情報パネル)
- [ ] Top 10 巨大数字レイアウト
- [ ] ナビゲーションバー (transparent -> solid on scroll)
- [ ] Netflix Red (#e50914) はロゴとハイライトのみ