VTuberJapanPicked 2026.09.26

GΔ59（ジゴク）公式サイト

VTuber / 配信者のWebデザイン参考 — VTuberアイドルグループ

出典: g59.tokyo.jp

Editor's note — 編集部の視点

FVだけ光らせて、あとは白でスッキリ。

VTuberアイドルグループGΔ59（ジゴク）の公式サイトは、発光するキービジュアルで惹きつけたあと、白とグレーの面だけで情報を静かに整理する。

IrisColor & Brand

ずっと白とグレーで静かなのに、フッターだけ急に赤い警告バナー。火災報知器のランプみたいで、ジゴクって名前にぴったりな感じがすき。最後にちょっと不穏なのがいい。

1FVは4人のビジュアルを縦の帯で横一列に並べる。誰か1人に偏らない構図が、そのままグループの顔になる
2見出しは字間を広げたMontserratの英字だけ。飾らない章の区切りが、FVの熱を引き立てる
3MEMBERはピル型タブで4人を切り替え、選択中を青で塗る。1人ずつ、じっくり知ってもらう設計

Color

GΔ59（ジゴク）公式サイトの配色

Typography

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

英字見出し・ナビ・タブ

Aa あア

使用: Montserrat
代替: Montserrat

和文本文・メンバー名・ニュース

Aa あア

使用: Noto Sans JP
代替: Noto Sans JP

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

見出しKatapick 型42px · 1.6 · 700
小見出しKatapick 型52px · 1.6 · 900
本文The quick brown fox — 参考を型にする16px · 1.6 · 400
注釈The quick brown fox — 参考を型にする16px · 1.6 · 900

Structure

ページ構成（上から順）

01
ヘッダー
左にロゴ、中央に HOME から FAQ までの7項目の英字ナビ、右に X・YouTube・TikTok・Discord のアイコン。半透明の白地でスクロール中も固定される。
02
ヒーロー
メンバー4人のビジュアルを縦の帯で横並びにし、光の粒とノイズで発光感を加える。中央に白い線画のロゴ、下に細線で挟んだ「Jigoku」、デビュー日と「debut」を配置。
03
ABOUT
白地の中央に字間の広い英字見出し、下にプロジェクトの説明とコンセプト文を中央揃えで短く置く。
04
NEWS
薄いグレーの地に、日付と見出しを1行ずつ罫線で区切ったシンプルな一覧。
05
MEMBER
4人の英字名をピル型タブで並べ、選択中は青の塗り。下に立ち絵と、名前・青字の肩書き・青い縦線付きのプロフィール表・紹介文を2カラムで表示する。
06
MEDIA
角丸のサムネイル画像を横一列に並べ、左右の画像を見切らせたスライダー。
07
フッター
赤地に白い警告アイコンと文言を載せた二重枠のバナーを中央に置き、コピーライトで締める。

Interaction

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

ヘッダーは position: fixed と半透明の白背景（backdrop-filter: blur 相当）で、FVの画像の上でも読めるようにしていると思われる
MEMBERのタブは、選択中のボタンだけ背景を #2a9eff にし、下のパネルを切り替える。aria-selected と hidden 属性の付け替えで実装できる
MEDIAは左右が見切れた横並びのスライダーで、Swiper の slidesPerView: 'auto' と centeredSlides 相当の構成と思われる（ライブラリは抽出データでは未検出）
FVの発光感は画像に焼き込まれていると思われる。CSSで近づけるならノイズ画像を mix-blend-mode: screen で重ねる

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

検出された技術:Google Fonts

Reproduce

再現するときのポイント

01FVだけにビジュアルの情報量を集中させ、以降は白と #f9f9f9 の2色の面で情報を整理する
02英字見出しは Montserrat の太字を letter-spacing: 0.2em 程度まで広げ、中央揃えで統一する
03メンバー紹介はタブ＋立ち絵＋プロフィール表の型にして、人数が増えても同じ構造で足せるようにする
04アクセントは青（#2a9eff）1色に絞り、赤はフッター上のバナーだけに使う

再現MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全7セクションの仕様 / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 差し替え必須リスト

Katapick の再現MDは何がすごい？ →

g59-tokyo.katapick.md

1---
2title: "GΔ59（ジゴク）公式サイト 再現用デザイン仕様書"
3source: https://www.g59.tokyo.jp/
4katapick: https://katapick.com/sites/g59-tokyo
5category: VTuber / 配信者
6region: 国内 (JP)
7tags: [イラスト, ネオン/グロー, ライト, ミニマル, 固定ナビ, カルーセル]
8launched: 2026-04
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 2/5
12estimated_hours: 12
13generator: Katapick
14---
15 
16# GΔ59（ジゴク）公式サイト — 再現用デザイン仕様書
17 
18> FVだけ光らせて、あとは白でスッキリ。VTuberアイドルグループGΔ59（ジゴク）の公式サイトは、発光するキービジュアルで惹きつけたあと、白とグレーの面だけで情報を静かに整理する。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22