Advent VS Justice（hololive English 特設ページ）

1. 01

   グローバルヘッダー

   左にhololiveロゴとパンくず、右に白いピル型のバーに英字ナビと言語切替（日本語）を収める。SPでは水色の円形ハンバーガーボタンになる。

2. 02

   キービジュアル

   中央に幅1000px程度の横長ビジュアル。2グループのメンバーが左右から向き合う集合イラストの中央下に企画ロゴを重ねた1枚絵。

3. 03

   What is Advent VS Justice?

   極太の英字見出しに白い下線と交差した剣のアイコン。下に企画の概要を2段落、中央揃えで置く（本文はSPキャプチャで確認）。

4. 04

   Comic

   本のアイコン付きの見出しの下に、最新話のエピソード名と話数を太字で示し、あらすじを本文で続ける（SPキャプチャで確認）。

5. 05

   記事の後半

   抽出データでは記事本体が高さ約8100pxあるが、PCのフルページキャプチャは1画面分（900px）のみで、見出し要素も抽出されていないため内容は未確認。

6. 06

   フッター

   抽出データでは高さ約420pxのフッターに水色（#43c5f5）の背景が敷かれている。

• 抽出データに見出し要素（h1〜h3）がなく、「What is Advent VS Justice?」「Comic」などの極太見出しは画像で組まれていると思われる。テキストで再現する場合は太いディスプレイ書体に border-bottom の下線と SVG アイコンを添える
• 抽出データに Swiper があり、コミックの各話や関連グッズの切り替えに使われていると思われる（キャプチャ範囲外のため未確認）
• ヘッダーのナビは白い角丸バーで背景から浮かせており、ダーク地でも公式サイトの配色（青系の文字）を保てる
• フルページ取得が900pxで止まっていることから、ページ本体が内側のスクロール領域で描画されている可能性がある

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

検出された技術:SwiperWordPressGoogle FontsAdobe Fonts

• 01共通テンプレートの背景だけをダークグレー（#292929）に切り替え、企画の緊張感に合わせる
• 02見出しは極太の英字＋下線＋意味を持つアイコン（剣・本）の3点セットで統一する
• 03連載企画では最新話のタイトルとあらすじを先頭に置き、更新のたびに差し替えやすい構造にする
• 04キービジュアルは対決構図の1枚絵にし、HTML側は見出しと本文だけのシンプルな構成にする

1---
2title: "Advent VS Justice（hololive English 特設ページ） 再現用デザイン仕様書"
3source: https://hololive.hololivepro.com/en/special/17736/
4katapick: https://katapick.com/sites/hololive-advent-vs-justice
5category: イベント / ライブ
6region: 海外 (US)
7tags: [ダーク, イラスト, 大胆なタイポ]
8launched: 2025-09
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 2/5
12estimated_hours: 10
13generator: Katapick
14---
15 
16# Advent VS Justice（hololive English 特設ページ） — 再現用デザイン仕様書
17 
18> 公式ページを暗くしただけで、対決モード。hololive Englishの対決企画「Advent VS Justice」の特設ページは、公式サイト共通のテンプレートをダークグレーに反転させるだけで、対決の緊張感をつくっている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22