VTuberJapanPicked 2026.09.26

ホロライブプロダクション10周年特設サイト

VTuber / 配信者のWebデザイン参考 — VTuber事務所

出典: hololive10th-anniversary.hololivepro.com

Editor's note — 編集部の視点

主役はキャラじゃなくて、カウントダウンの数字。

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

IrisColor & Brand

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

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

Color

ホロライブプロダクション10周年特設サイトの配色

Typography

使用フォントと無料の代替

セクション見出し・ナビ・英字本文

Aa あア

使用: Outfit
代替: Outfit

カウントダウン数字・英字キャッチ

Aa あア

使用: Big Shoulders
代替: Big Shoulders

Structure

ページ構成（上から順）

01
ヘッダー・ファーストビュー
左上にロゴを白いタブ状に置き、右上に About hololive / Message / 10th News / Video のピル型ナビと EN 切替。中央に「Countdown to the hololive 10th Anniversary」と残り日数・時間のタイマー。
02
Message
水色の見出し帯の下に「Messages for the 10th Anniversary」と小さな水色ラベル。円形アイコン4つを横一列に並べ、VIEW MORE ボタンで一覧へ誘導する。
03
10th News
サムネイル・日付・タイトルを持つニュースカードを3カラムで並べ、下に VIEW MORE。
04
Video
16:9の動画サムネイルを中央に大きく置いたカルーセル。下に動画タイトルと左右の矢印、VIEW MORE。
05
Today hololive
封筒をモチーフにした水色のカードに「What's Your Today hololive?」を置き、クリックでおすすめのタレントを表示する企画パート。
06
フッター
グレー（#55555f）の背景に Official SNS（YouTube / X / TikTok）の白いピルボタン、関連サイトのロゴバナー、SHAREアイコンを中央揃えで積む。

Interaction

アニメーション・インタラクション

カウントダウンは JavaScript で 2027年9月7日までの残り日数・時間を計算し、1桁ずつ白いパネルに描画する。縦長の Big Shoulders を使うとパネルの中で数字が大きく見える
「Today hololive!」バナーと「NEW DEBUT」カードは position: fixed で画面下の左右に常駐している（フルページキャプチャの各所に同じ要素が写り込んでいる）
Video のカルーセルは抽出データにある Swiper によるものと思われる。左右矢印の navigation だけのシンプルな構成で再現できる
Today hololive はクリックでおすすめタレントを1名表示する仕組みと思われる。タレント配列からランダムに1件選んで表示するだけなら数十行の JavaScript で再現可能

検出された技術:SwiperWordPressGoogle Fonts

Reproduce

再現するときのポイント

01背景は白に薄いグレーの方眼（background-image の linear-gradient を繰り返す）を敷き、その上に水色の線画を重ねる
02色は水色 #19aaff・白・グレーの3系統に絞り、オレンジは固定バナーなど行動を促す要素だけに使う
03セクション見出しを「水色の帯＋白抜き英字＋右下の角丸」の共通コンポーネントにして、長いページでも区切りを揃える
04欧文は Outfit と Big Shoulders の2書体に限定し、letter-spacing を広めにとる

再現MDに含まれるもの

CSS変数化したカラートークン / Google Fonts 読み込みタグ / 全6セクションの仕様 / つまずきポイント / Claude Code・Cursor・v0 用の実装プロンプト / 仕上げチェックリスト

hololive-10th.katapick.md

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. 見どころ