VTuber OfficialJapanPicked 2026.09.26

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

VTuber公式サイトのWebデザイン参考 — VTuber事務所

サイトを見るhololive10th-anniversary.hololivepro.com

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

実測タイプスケール1440px幅 · 2026-09-26 計測

見出しKatapick 型80px · 1.7 · 400
小見出しKatapick 型16px · 1.4 · 600
本文The quick brown fox — 参考を型にする13px · 1.5 · 600

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 で再現可能

スクロールのコマ撮り200–60000ms

ホロライブプロダクション10周年特設サイトをスクロールしたときのフレーム1 — 01

検出された技術:SwiperWordPressGoogle Fonts

Reproduce

再現するときのポイント

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

デザイン分析MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全6セクションの仕様 / AIっぽさを消すルール / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 盗作を避ける差し替えリスト

Katapick のデザイン分析MDは何がすごい？ →

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-10-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12generator: Katapick
13---
14 
15# ホロライブプロダクション10周年特設サイト — デザイン分析書
16 
17> 主役はキャラじゃなくて、カウントダウンの数字。ホロライブプロダクションの10周年カウントダウンサイトは、キャラクターを前に出さず、方眼とブルー1色のタイマーで“その日を待つ時間”そのものを演出している。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22