毎日更新のWebデザイン参考サイト集 — 2026.09.26の3選09.2609.26SAT今日の3選

1---
2title: "ホロライブプロダクション10周年特設サイト 再現用デザイン仕様書"
3source: https://hololive10th-anniversary.hololivepro.com/
4katapick: https://katapick.com/sites/hololive-10th
5category: VTuber / 配信者
6region: 国内 (JP)
7tags: [カウントダウン, グリッド, ブルー基調, 固定ナビ, 周年]
8launched: 2026-09
9verified: 2026-09-26
10difficulty: 3/5
11estimated_hours: 24
12generator: Katapick
13---
14 
15# ホロライブプロダクション10周年特設サイト — 再現用デザイン仕様書
16 
17> 主役はキャラじゃなくて、カウントダウンの数字。ホロライブプロダクションの10周年カウントダウンサイトは、キャラクターを前に出さず、方眼とブルー1色のタイマーで“その日を待つ時間”そのものを演出している。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せる構成になっています（→「7. AI実装プロンプト」）。
21 
22## 1. 見どころ
23- タレントではなくタイマーを主役に。周年サイトの定石を外した判断が、待つ時間を特別にする
24- 見出しはモザイク柄の水色帯で統一。長いページでも、いまどこにいるかを見失わない
25- 右下の「Today hololive!」は毎日変わる入口。カウントダウンの間も、訪れる理由を絶やさない
26 
27## 2. デザイントークン（カラー）
28 
29| 変数 | HEX | 名前 | 役割 |
30| --- | --- | --- | --- |
31| `--bg` | `#ffffff` | White | 背景 |
32| `--color-2` | `#19aaff` | Holo Blue | メインカラー / 見出し帯・タイマー |
33| `--bg-3` | `#55555f` | Slate Gray | テキスト / フッター背景 |
34| `--bg-4` | `#eeeeee` | Light Gray | サーフェス / カード背景 |
35| `--border` | `#c2c2c2` | Silver | 方眼・区切り線 |
36| `--accent` | `#f49900` | Amber | アクセント / 固定バナー・NEW DEBUTラベル |
37 
38```css
39:root {
40  --bg: #ffffff; /* 背景 */
41  --color-2: #19aaff; /* メインカラー / 見出し帯・タイマー */
42  --bg-3: #55555f; /* テキスト / フッター背景 */
43  --bg-4: #eeeeee; /* サーフェス / カード背景 */
44  --border: #c2c2c2; /* 方眼・区切り線 */
45  --accent: #f49900; /* アクセント / 固定バナー・NEW DEBUTラベル */
46}
47```
48 
49## 3. タイポグラフィ
50 
51| 役割 | 使用フォント | 無料の代替 |
52| --- | --- | --- |
53| セクション見出し・ナビ・英字本文 | Outfit | Outfit |
54| カウントダウン数字・英字キャッチ | Big Shoulders | Big Shoulders |
55 
56```html
57<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;700&family=Big+Shoulders:wght@400;500;700&display=swap">
58```
59 
60## 4. レイアウト構成（上から順）