# ホロライブわちゃわちゃ学園祭｜イベント / ライブのWebデザイン参考

> 出演者紹介が、ぜんぶ学生証になってる。ホロライブ初のバラエティイベント「ホロライブわちゃわちゃ学園祭」の特設サイトは、方眼ノートの地に風船やガーランドを散らし、学園祭の小道具でページ全体を組み立てている。

- URL: https://stage-event.hololivepro.com/
- 解説ページ: https://katapick.com/sites/hololive-gakuensai
- カテゴリ: イベント / ライブ / 地域: 国内（JP）/ 業種: VTuber事務所のバラエティイベント
- テイスト: イラスト、ビビッド、固定CTA、マーキー、ロングページ
- 公開・リニューアル: 2026-08 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 32 時間）

## 編集部のひとこと（Pip）
え、待って、MEMBERSのノートに DAY1・DAY2 のインデックスタブ付いてる！！推しが何日目に出るか、ノートをめくる感覚で探せるの神すぎる…遠征組の気持ちわかってる！！

## デザインの見どころ
- メンバーは「STUDENT ID CARD」の証明写真風カードで並ぶ。出演者一覧が、そのまま学園祭の設定になる
- 見出しは太い立体文字、NEWSとPROGRAMは流れる帯に。方眼地の中でも章の切り替わりがすぐわかる
- 右下に「TICKETS」の丸いバッジを固定。どこまで読んでも、チケットの入口がついてくる

## 配色
- #fff6ec Notebook Cream（背景（方眼ノート））
- #ffc0b5 Peach Ribbon（セクション背景）
- #1c2757 Uniform Navy（見出し / 枠線 / 帯）
- #c9f5ff Soda Aqua（PROGRAM の背景）
- #ff8fae Strawberry Milk（アクセント（日付・ボタン））
- #3f8cb5 Pool Blue（ボタン / MOVIE の枠）

## フォント
- 英字見出し（SCHEDULE・MEMBERS など）: Climate Crisis（代替: Climate Crisis）
- 英字ラベル・ボタン・日付: Elms Sans（代替: Elms Sans）
- 和文の見出し・本文: Zen Kaku Gothic New（代替: Zen Kaku Gothic New）

## よくある質問
### ホロライブわちゃわちゃ学園祭のサイトで使われているフォントは？
英字見出しに Climate Crisis、英字ラベルやボタンに Elms Sans、和文に Zen Kaku Gothic New が使われています。いずれも Google Fonts で無料で利用できます。

### 学園祭のようなモチーフをサイト全体に出すには？
方眼ノートの背景、学生証風の出演者カード、リングノートの枠、ガーランドや風船のイラストなど、モチーフに沿った小道具をUIの部品に割り当てるのがポイントです。見出しやボタンの形までそろえると統一感が出ます。

### どんな業種の参考になる？
VTuberやアイドルのイベント、学園・部活モチーフのキャンペーン、文化祭やオープンキャンパスの特設サイトの参考になります。

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