アニメ/マンガUI設計ガイド -- "Dynamic Color"
アニメ・マンガのUIは「エネルギー」そのものだ。Crunchyroll の鮮烈なオレンジ、ジャンプ+ のダイナミックなレイアウト。静止画でも動きを感じさせ、色彩の洪水がスクリーンを彩る。太いフォント、斜めのライン、鮮やかな色ブロック。
本テンプレートは Crunchyroll / ジャンプ+ から着想を得た「Dynamic Color」設計システムを定義する。ダークブルーブラックの没入感ある背景にアニメレッド、オレンジ、ブルーの鮮烈なアクセント。太く力強いタイポグラフィがエネルギーを生む。
核心となる設計思想
マンガのコマ割りのように大胆に区切り、アニメの彩度で画面を飾る。情報密度は高いが、各カードは明確な階層を持つ。ジャンルカラーで直感的に分類し、太いフォントで力強さを表現。斜めセクションでダイナミズムを加える。
1. デザイン哲学 -- 「鮮烈なダイナミズム」
Crunchyroll のアプローチ -- 色彩の洪水
Crunchyroll はオレンジを基調にした明るく活発なデザイン。作品サムネイルが画面を埋め尽くし、ジャンルタブで素早くフィルタリング。情報密度が高いが、カードの階層構造で視線を誘導する。
ジャンプ+ のアプローチ -- マンガ的レイアウト
ジャンプ+ はコマ割り風のグリッドレイアウトが特徴。斜めのバナー、大胆な色使い、太い文字。静的なWebページに「動き」を持ち込む日本独自のアプローチ。
アニメ配信ページプレビュー
このテンプレートの適用範囲
| カテゴリ | 適合度 | 具体例 |
|---|---|---|
| アニメ配信サイト | 最適 | Crunchyroll, dアニメストア, Abema |
| マンガアプリ | 最適 | ジャンプ+, マガポケ, コミックシーモア |
| ゲーム情報サイト | 適合 | ゲーム攻略、ニュースポータル |
| ファンサイト | 適合 | キャラクター紹介、作品まとめ |
| VTuber | 適合 | 配信者公式サイト |
| 一般ECサイト | 非推奨 | エネルギーが強すぎる |
2. 鮮烈な配色システム
ダークベース + 鮮やかアクセント
DYNAMIC COLOR PALETTE
#ff4757RED
#ffa502ORANGE
#3742faBLUE
#7c4dffPURPLE
#2ed573GREEN
#ff6b81PINK
ジャンルカラー
ActionComedyRomanceSci-FiFantasySportsSlice of Life
3. 力強いタイポグラフィ
Phantom Blade
Display -- Noto Sans JP, 48px, weight 900
Episode List
Heading 2 -- 24px, weight 700
闇の剣士が世界の真実を暴く壮大なダークファンタジー。
Body -- 15px, weight 400, #c8c8d4
01
Ranking Number -- 64px, weight 900, 10% opacity
4. コンポーネント詳細
ボタンスタイル
Play Now
+ My List
Subscribe
▶
5. レイアウト原則
| 要素 | デスクトップ | モバイル |
|---|---|---|
| 最大コンテンツ幅 | 1400px | 100% |
| 作品グリッド | 6列 | 3列 |
| ギャップ | 12px | 8px |
| サイドパディング | 32px | 12px |
| ヒーロー高さ | 500px | 300px |
| ベースユニット | 4px | 4px |
6. グロウエフェクト
ホバー時にアクセントカラーの淡いグロウ（box-shadow: 0 0 20px accent-muted）で浮上感。斜めセクション（clip-path skew）で動的印象。グラデーションオーバーレイでヒーロー画像に空間を作る。
7. Do's and Don'ts
Do
- キービジュアルを大きく鮮やかに
- 太いフォント (weight 700+) で力強く
- ジャンルタグにカラーコーディング
- 進捗バーで視聴状況を表示
- NEW バッジを目立たせる
- ダーク背景で没入感
Don't
- 背景を明るくしない
- パステルカラーを使わない
- セリフ書体を使わない
- 余白を大きくしすぎない
- 角丸を8px以上にしない
- ジャンルカラーを8色以上にしない
8. レスポンシブ対応
| 画面サイズ | 作品グリッド | ヒーロー | ジャンルタブ |
|---|---|---|---|
| Mobile (<640px) | 3列 | 200px高 | 横スクロール |
| Tablet (640-1024px) | 4列 | 350px高 | 横スクロール |
| Desktop (1024px+) | 6列 | 500px高 | 全表示 |
9. プロンプトガイド
クイックカラーリファレンス
Background: #0f0f14 | Card: #1a1a24 | Hover: #252530
Text: #ffffff | Secondary: #c8c8d4 | Muted: #8888a0
Red: #ff4757 | Orange: #ffa502 | Blue: #3742fa
Border: rgba(255,255,255,0.06)Stitch向けプロンプト例
「アニメ配信サイトのトップページを作成してください。
DESIGN.md の ANIME_MANGA プリセットに従ってください。
背景 #0f0f14。ヒーロー: 注目作品、左グラデーション、
タイトル 48px weight 900。ジャンルタブバー。
作品グリッド: 6列、ポスター比率 3:4、角丸 6px。
ジャンルタグ: 各色 15% opacity 背景。
エピソードリスト: サムネイル + 進捗バー (#ff4757)。」