# VHS City — VTuber High School City｜VTuber / 配信者のWebデザイン参考

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

- URL: https://vhs-city.com/
- 解説ページ: https://katapick.com/sites/vhs-city
- カテゴリ: VTuber / 配信者 / 地域: 国内（JP）/ 業種: VTuberコミュニティ・ポータル
- テイスト: イラスト、ネオン/グロー、ビビッド、グリッド、固定ナビ、マーキー
- 公開・リニューアル: 2026-06 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 24 時間）

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

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

## 配色
- #121218 Night Ink（背景（ABOUT・フッター））
- #ffffff White（カード / ヘッダー / テキスト）
- #2c2a2a Charcoal（暗部背景 / テキスト）
- #f0f0f0 Grid Gray（GROUP・PARTNERS の方眼背景）
- #e72f34 Signal Red（アクセント / YouTube誘導・MEMBERSボタン）
- #2cbedb Neon Cyan（アクセント）

## フォント
- ナビ・本文・ボタン: M PLUS 1（代替: M PLUS 1）
- 和文本文・補足テキスト: Noto Sans JP（代替: Noto Sans JP）

## よくある質問
### VHS Cityのサイトで使われているフォントは？
抽出データでは M PLUS 1 と Noto Sans JP が使われています。どちらも Google Fonts で無料で使えます。ロゴやLED風の見出しは画像か装飾処理と思われます。

### VHS Cityのような複数グループを束ねるポータルの構成は？
コンセプト説明（ABOUT）のあと、参加グループと協力クリエイターを同じカード型で並べ、最後にリンク集で各公式サイトへ送る構成です。グループが増えてもカードを足すだけで拡張できます。

### VHS Cityのキャラクター画像を参考資料として使ってよい？
キャラクターやキービジュアルの権利は各事務所・グループに帰属します。レイアウトや配色の研究に留め、画像そのものを自分のサイトに使うことは避けてください。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「再現用Markdown」は https://katapick.com/sites/vhs-city からダウンロードできます。
出典: Katapick（https://katapick.com）