# ホロライブプロダクション10周年特設サイト｜VTuber / 配信者のWebデザイン参考

> 主役はキャラじゃなくて、カウントダウンの数字。ホロライブプロダクションの10周年カウントダウンサイトは、キャラクターを前に出さず、方眼とブルー1色のタイマーで“その日を待つ時間”そのものを演出している。

- URL: https://hololive10th-anniversary.hololivepro.com/
- 解説ページ: https://katapick.com/sites/hololive-10th
- カテゴリ: VTuber / 配信者 / 地域: 国内（JP）/ 業種: VTuber事務所
- テイスト: カウントダウン、グリッド、ブルー基調、固定ナビ、周年
- 公開・リニューアル: 2026-09 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 24 時間）

## 編集部のひとこと（Iris）
文字もフッターも真っ黒じゃなくて、少し青みのあるグレーなのがすき。雨上がりのアスファルトみたいな色だから、ホロブルーとけんかしないの。画面ぜんたいがやさしい。

## デザインの見どころ
- タレントではなくタイマーを主役に。周年サイトの定石を外した判断が、待つ時間を特別にする
- 見出しはモザイク柄の水色帯で統一。長いページでも、いまどこにいるかを見失わない
- 右下の「Today hololive!」は毎日変わる入口。カウントダウンの間も、訪れる理由を絶やさない

## 配色
- #ffffff White（背景）
- #19aaff Holo Blue（メインカラー / 見出し帯・タイマー）
- #55555f Slate Gray（テキスト / フッター背景）
- #eeeeee Light Gray（サーフェス / カード背景）
- #c2c2c2 Silver（方眼・区切り線）
- #f49900 Amber（アクセント / 固定バナー・NEW DEBUTラベル）

## フォント
- セクション見出し・ナビ・英字本文: Outfit（代替: Outfit）
- カウントダウン数字・英字キャッチ: Big Shoulders（代替: Big Shoulders）

## よくある質問
### ホロライブ10周年特設サイトのフォントは？
欧文はセクション見出しやナビに Outfit、カウントダウンの数字と英字キャッチに Big Shoulders が使われています。どちらも Google Fonts で無料で使えます。和文には専用フォントの指定が見られず、端末標準のゴシック体で表示されていると思われます。

### カウントダウン型の周年特設サイトを作るには？
ファーストビューに残り日数のタイマーを置き、その下にニュース・動画・メッセージなど後から増やせるセクションを並べる構成が基本です。タイマーは JST 基準の Date 計算で実装し、ニュースは WordPress などの CMS から出力すると更新が楽になります。

### ホロライブ10周年サイトのデザインはどんな業種の参考になる？
エンタメ事務所やゲーム・アプリの周年サイト、発表日までの期待感をつくるティザーサイトなど、日付に向けて情報を段階的に公開していくキャンペーンの参考になります。

### サイト内のタレント画像やロゴを参考資料として使ってもいい？
タレントのイラスト・写真やロゴの権利はカバー株式会社（ホロライブプロダクション）に帰属します。デザインの参考にするのは構成や配色にとどめ、再現・モックアップではダミー画像に差し替えてください。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「再現用Markdown」は https://katapick.com/sites/hololive-10th からダウンロードできます。
出典: Katapick（https://katapick.com）