EventJapanPicked 2026.10.09

あおぎり高校入学祭2026！～『好き』なことしかしたくない！～

イベント / ライブのWebデザイン参考 — VTuberグループ・オフラインイベント

サイトを見るvhs-city.com

vhs-city.com/aogirihighschool/entrancefest2026-ev開く ↗

あおぎり高校入学祭2026！～『好き』なことしかしたくない！～のPC版ファーストビュー

サイトを開く ↗

あおぎり高校入学祭2026！～『好き』なことしかしたくない！～のスマホ版ファーストビュー

Editor's note — 編集部の視点

告知ページなのに、まるごと学校行事ノリ。

あおぎり高校の単独イベント「入学祭2026」のLPは、校舎と桜、黒板風パネルで設定を貫き、画面下の切替タブで2公演のどちらにも一手で届かせる。

BrunoStructure & IA

概要、チケット、アンケート、グッズ、注意事項って、来場までにファンがやることの順番そのままなんだよね。目次がそのまま準備リストになってる。これはうまい。

1画面下に「入学祭／後夜祭」の切替タブを固定。いまどちらの公演を見ているかが、常にはっきりする
2概要は木枠と画鋲で留めた黒板パネルに。日程や会場という硬い情報まで、学校の設定に溶け込ませる
3ナビ項目の上に「UP」「NEW」の小さなバッジ。再訪したファンが、更新箇所へ真っ直ぐ向かえる

Color

あおぎり高校入学祭2026！～『好き』なことしかしたくない！～の配色

Typography

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

見出し・本文・ナビ

Aa あア

使用: VDL V7ゴシック（VDL-V7Gothic）
代替: Zen Kaku Gothic New

切替タブ・ボタン

Aa あア

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

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

見出しKatapick 型39px · 1.5 · 800
小見出しKatapick 型18px · 1.8 · 700
本文The quick brown fox — 参考を型にする13px · 1.8 · 700
ボタンKatapick 型18px · 1.8 · 800

Structure

ページ構成（上から順）

01
ヘッダー
白い半透明のピル型バーにイベントロゴ、6項目のナビ（上に UP / NEW バッジ）、黒い「シェアする」ボタンを並べ、画面上部に固定する。
02
ヒーロー
校舎・桜・入学式の看板を背景に、制服姿のメンバーの集合イラストを全面に配置。中央下にイベントロゴとサブタイトル、英字表記を重ねる。
03
入学祭／後夜祭の切替タブ
画面下端に紺のバーを固定し、左に青い角丸の「入学祭 2026」とミニキャラ＋「現在選択中！」の吹き出し、右にライム色の月アイコンと「後夜祭 2026」の切替ボタン。
04
イベント概要
木枠と画鋲で留めた緑の黒板風パネルに、日程・時間・出演者（色違いのピル型ラベル）・会場と地図を2カラムでまとめる。
05
チケット情報
白い角丸パネルに、券面を模したチケット画像、アイコン付きの販売期間リスト、価格を右端に置いたピンク枠のチケット種別カード、青いピル型の購入ボタンを縦に積む。
06
アンケート募集
白いパネルに募集内容を短くまとめ、緑のピル型ボタンでフォームへ誘導する。
07
グッズ情報
緑の黒板風に描かれたグッズ一覧画像を2枚並べ、虫眼鏡アイコンで拡大表示できることを示す。
08
注意事項
公演に関する注意事項を開いた状態で見せ、持ち込み禁止物・禁止行為・グッズ販売などを「＋」付きのアコーディオンで折りたたむ。
09
クレジット
クレジットの見出しまではキャプチャで確認できる。フルページが9000pxで切れているため、以降は抽出データの見出しのみで確認。

Interaction

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

ヘッダーと下部の切替タブはどちらも position: fixed で常駐する。タブの切替は同一ページ内の表示切替またはページ遷移と思われる（静止画からは不明）
各セクションの左右にメンバーのミニキャラを配置しており、スクロールに合わせて表示される演出の可能性がある
グッズ画像は虫眼鏡アイコンからモーダルで拡大表示すると思われる。dialog 要素と画像の遅延読み込みで再現できる
注意事項は details / summary 相当のアコーディオンで、＋／−のアイコンが開閉状態を示す

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

あおぎり高校入学祭2026！～『好き』なことしかしたくない！～をスクロールしたときのフレーム1 — 01

あおぎり高校入学祭2026！～『好き』なことしかしたくない！～をスクロールしたときのフレーム2 — 02

あおぎり高校入学祭2026！～『好き』なことしかしたくない！～をスクロールしたときのフレーム3 — 03

あおぎり高校入学祭2026！～『好き』なことしかしたくない！～をスクロールしたときのフレーム4 — 04

あおぎり高校入学祭2026！～『好き』なことしかしたくない！～をスクロールしたときのフレーム5 — 05

あおぎり高校入学祭2026！～『好き』なことしかしたくない！～をスクロールしたときのフレーム6 — 06

検出された技術:NuxtGoogle Fonts

Reproduce

再現するときのポイント

01「黒板」「チケットの券面」「入学式の看板」など、学校行事のモチーフをUIパーツ（パネル・カード・背景）に置き換える
02下部固定の切替タブで、同じイベントの2公演（入学祭／後夜祭）を行き来できるようにする
03情報パネルは白い角丸で統一し、背景の水色〜ピンクのグラデーションとイラストの上に浮かせる
04ナビに UP / NEW バッジを付け、告知ページの更新箇所を示す運用を前提に設計する

デザイン分析MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全9セクションの仕様 / AIっぽさを消すルール / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 盗作を避ける差し替えリスト

Katapick のデザイン分析MDは何がすごい？ →

aogiri-entrancefest-2026.katapick.md

1---
2title: "あおぎり高校 入学祭2026！ ～『好き』なことしかしたくない！～ デザイン分析書"
3source: https://vhs-city.com/aogirihighschool/entrancefest2026-ev/
4katapick: https://katapick.com/sites/aogiri-entrancefest-2026
5category: イベント / ライブ
6region: 国内 (JP)
7tags: [イラスト, ライト, 角丸, 固定ナビ, 固定CTA, ロングページ]
8launched: 2026-02
9verified: 2026-10-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12generator: Katapick
13---
14 
15# あおぎり高校 入学祭2026！ ～『好き』なことしかしたくない！～ — デザイン分析書
16 
17> 告知ページなのに、まるごと学校行事ノリ。あおぎり高校の単独イベント「入学祭2026」のLPは、校舎と桜、黒板風パネルで設定を貫き、画面下の切替タブで2公演のどちらにも一手で届かせる。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22