VTuberJapanPicked 2026.09.26

VHS City — VTuber High School City

VTuber / 配信者のWebデザイン参考 — VTuberコミュニティ・ポータル

出典: vhs-city.com

VHS City — VTuber High School CityのPC版ファーストビュー

VHS City — VTuber High School Cityのスマホ版ファーストビュー

Editor's note — 編集部の視点

グループ一覧を、看板だらけの街歩きにしちゃった。

VTuberコミュニティVHS Cityの公式ポータルは、看板が並ぶ街並みとLED電光掲示風の見出しで、そっけないグループ一覧を“街歩き”に置き換えた。

PipTrends & VTuber

え、待って、GROUPの背景って方眼に校舎の線画なの！？「Vtuber High School City」の名前どおり、ちゃんと学校なの芸が細かすぎる！！こういう小ネタ見つけると一気に推せる。

1ABOUTやLINKSの見出しはドットで描いたLED風の英字。街の看板と同じ語彙で、章を切り替える
2参加グループは白い角丸カードに同じ型で収める。にぎやかな街並みの中でも、一覧は平等に読める
3右下の赤い角丸パネルでYouTubeへの導線を固定。街を眺めている間も、配信への扉が開いたまま

Color

VHS City — VTuber High School Cityの配色

Typography

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

ナビ・本文・ボタン

Aa あア

使用: M PLUS 1
代替: M PLUS 1

和文本文・補足テキスト

Aa あア

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

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

本文The quick brown fox — 参考を型にする15.8px · 1.75 · 700
ボタンKatapick 型16px · — · 400

Structure

ページ構成（上から順）

01
ヘッダー
左にロゴ、右に ABOUT / GROUP / PARTNERS / MEMBERS / LINKS の英字ナビとXとYouTubeの丸アイコン。スクロール中も固定され、現在のセクション名が赤くなる。
02
ヒーロー
看板やビジョンが並ぶ街並みのイラストを全面に敷き、中央に立体ロゴとコピーを配置。右下に赤い角丸パネルでYouTubeチャンネルへの誘導を固定表示する。
03
ABOUT
暗い背景にLED風ドットの大きな英字見出し、中央揃えのコンセプト文、右に光の粒で描いた都市の画像。太陽と月のアイコンを四隅に添える。
04
GROUP
方眼と校舎の線画を背景に、参加グループを白い角丸カードで2列に並べる。各カードにグループ名・キービジュアル・ロゴ・SNSアイコン。
05
PARTNERS
GROUP と同じカード形式で個人・ユニットを並べ、下に赤いピル型の「MEMBERS」ボタンを置く。
06
区切りのマーキー
大きな袋文字の「Vtuber High School City」と小さな同文の繰り返しで帯をつくり、虹色の線で次のセクションに渡す。
07
LINKS
青いイラスト背景にLED風の見出し、公式ショップのバナーを中央に大きく、各グループ公式サイトへのロゴバナーを4列で並べる。
08
電光掲示ティッカー・フッター
黒地に黄色のドット文字が流れる帯のあと、ロゴ・SNSアイコン・ナビ・会社概要などのリンクをまとめたフッター。

Interaction

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

ヘッダーは position: fixed で常駐し、IntersectionObserver で現在表示中のセクションのナビ項目を赤に切り替えていると思われる
YouTube誘導の赤いパネルは画面右下（SPでは上部）に固定。position: fixed と片側だけの border-radius で再現できる
LED電光掲示風の帯は、ドット書体またはドット模様のマスクをかけた英字を CSS の @keyframes で translateX させる無限マーキーと思われる
LINKS のロゴバナーは右下の角を折ったような三角形の装飾があり、ホバーで反応する可能性がある（静止画からは不明）

スクロールのコマ撮り150–6800ms

VHS City — VTuber High School Cityをスクロールしたときのフレーム1 — 01

VHS City — VTuber High School Cityをスクロールしたときのフレーム2 — 02

VHS City — VTuber High School Cityをスクロールしたときのフレーム3 — 03

VHS City — VTuber High School Cityをスクロールしたときのフレーム4 — 04

VHS City — VTuber High School Cityをスクロールしたときのフレーム5 — 05

VHS City — VTuber High School Cityをスクロールしたときのフレーム6 — 06

検出された技術:NuxtGoogle Fonts

Reproduce

再現するときのポイント

01暗い背景（#121218）と明るい方眼背景（#f0f0f0）をセクションごとに交互に切り替え、境目に虹色の細線を引く
02見出しはドットで構成したLED風の大きな英字にし、下に小さな和文の説明ラベルを白い角丸帯で添える
03グループごとの情報は「キービジュアル＋ロゴ＋SNSアイコン」の同じカード型に揃え、2列グリッドで並べる
04YouTube誘導の赤（#e72f34）はCTAにだけ使い、他の要素と色で競合させない

再現MDに含まれるもの

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

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

vhs-city.katapick.md

1---
2title: "VHS City — VTuber High School City 再現用デザイン仕様書"
3source: https://vhs-city.com/
4katapick: https://katapick.com/sites/vhs-city
5category: VTuber / 配信者
6region: 国内 (JP)
7tags: [イラスト, ネオン/グロー, ビビッド, グリッド, 固定ナビ, マーキー]
8launched: 2026-06
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 24
13generator: Katapick
14---
15 
16# VHS City — VTuber High School City — 再現用デザイン仕様書
17 
18> グループ一覧を、看板だらけの街歩きにしちゃった。VTuberコミュニティVHS Cityの公式ポータルは、看板が並ぶ街並みとLED電光掲示風の見出しで、そっけないグループ一覧を“街歩き”に置き換えた。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22