ホロライブわちゃわちゃ学園祭

1. 01

   ヒーロー

   方眼ノート地に制服姿のメンバー集合イラストと「WACHA WACHA ♥」の斜めテープ、イベントロゴ、日程「2026.11.14–11.15 @KEIO ARENA TOKYO」。

2. 02

   SCHEDULE

   DAY1・DAY2 の日付と、会場・配信それぞれの開場／開演時刻を枠付きのカードで示し、風船のイラストを添える。

3. 03

   NEWS

   「NEWS」の文字が流れる紺の帯の下に、吹き出し型のニュースカードと View More ボタン。

4. 04

   MERCH・FOOD TRUCK

   リングノート風の枠に先行通販グッズの画像と購入ボタン。フードトラックは「Coming soon...」の枠を、はさみやマスキングテープのイラストで囲む。

5. 05

   コンセプト

   ガーランドの下に「ホロライブ初の大型バラエティイベント！」から始まるリード文を中央揃えで置く。

6. 06

   MOVIE

   黒板風のフレームにPVのサムネイルを入れたスライダー。

7. 07

   MEMBERS

   リングノートの枠に DAY1／DAY2 のタブを付け、「STUDENT ID CARD」風のメンバーカードを4列で並べる。

8. 08

   PROGRAM

   「PROGRAM」が流れる帯の下に DAY1／DAY2 の切替ボタンと、ピンで留めたメモ用紙風の企画カード。

9. 09

   SHARE・フッター

   SNSのシェアボタンとクレジットで締める。

• 右下の「TICKETS」バッジは全画面キャプチャの各位置に写っているため、position: fixed で常時表示されている。左上のロゴとハンバーガーメニューも同様に固定
• NEWS・PROGRAM の帯は同じ文字列を繰り返しているため、translateX でループさせるマーキーと思われる
• MOVIE のスライダーはスタックにある Swiper で組まれていると思われる
• PROGRAM の DAY1／DAY2 ボタンで企画カードを切り替えるタブUIと思われる

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

検出された技術:SwiperWordPressGoogle Fonts

• 01背景は #fff6ec のクリーム地に細い方眼を repeating-linear-gradient で敷き、ノートの紙を再現する
• 02英字見出しは Climate Crisis に紺の縁取りと影をつけ、立体的なワッペン風にする
• 03出演者カードは「STUDENT ID CARD」の帯・写真枠・名前の3段で統一し、証明書の形式にそろえる
• 04風船・ガーランド・はさみ・絵の具などの小物イラストを各セクションの端に置き、学園祭の小道具で統一する

1---
2title: "ホロライブわちゃわちゃ学園祭 再現用デザイン仕様書"
3source: https://stage-event.hololivepro.com/
4katapick: https://katapick.com/sites/hololive-gakuensai
5category: イベント / ライブ
6region: 国内 (JP)
7tags: [イラスト, ビビッド, 固定CTA, マーキー, ロングページ]
8launched: 2026-08
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 32
13generator: Katapick
14---
15 
16# ホロライブわちゃわちゃ学園祭 — 再現用デザイン仕様書
17 
18> 出演者紹介が、ぜんぶ学生証になってる。ホロライブ初のバラエティイベント「ホロライブわちゃわちゃ学園祭」の特設サイトは、方眼ノートの地に風船やガーランドを散らし、学園祭の小道具でページ全体を組み立てている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22