EventJapanPicked 2026.09.26

橘ひなのワンマンライブ「Progress」特設サイト

イベント / ライブのWebデザイン参考 — VTuberのワンマンライブ

出典: event.vspo.jp

Editor's note — 編集部の視点

PCで開くと、ステージの幕の真ん中に縦長の画面。

ぶいすぽっ！の橘ひなの初ワンマンライブ「Progress」特設サイトは、ピンクと水色の幕を固定背景にし、スマホ幅のカラムに全情報を収めて舞台を再現している。

IrisColor & Brand

本文を茶色で組んでるのがすき。ピンクと水色の甘い中で黒だと硬くなるところを、ココアみたいな #5b3b2f でやわらかく読ませてる感じ。お菓子の包み紙みたいでかわいい。

1左はピンク、右は水色の幕。2色を舞台装置に割り当て、どのセクションを読んでも会場の中にいられる
2見出しはハート形のバッジに名前入りのテープを交差させる。章の区切りが、そのままライブの装飾になる
3受付を終えた枠は「終了しました」のグレーのボタンに。色を抜くだけで、今動ける情報を見分けさせる

Color

橘ひなのワンマンライブ「Progress」特設サイトの配色

Typography

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

和文の見出し・本文

Aa あア

使用: LINE Seed JP
代替: LINE Seed JP

ナビの英字

Aa あア

使用: Crimson Pro
代替: Crimson Pro

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

本文The quick brown fox — 参考を型にする15px · 1 · 500

Structure

ページ構成（上から順）

01
ナビ
上端中央にピンクから水色へのグラデーションの角丸バーを固定し、About・Ticket・Goods・Info を英字と日本語の2段で並べる。
02
背景
左にピンク、右に水色の幕、ライトと紙吹雪を描いたステージのイラストを画面全体に固定して敷く。
03
ヒーロー
中央の縦長カラムに、ドット縁の枠で囲んだKVと「Progress」ロゴ。続けて「橘ひなの初のワンマンライブ開催！」、日程「2026 8.15–16」、会場名、リード文。
04
About（開催概要）
ハート形の見出しバッジの下に、イベント名・出演者・日時・会場・アクセスを水色のラベルで区切って並べ、地図とタイムスケジュールの画像を添える。
05
Ticket
現地チケットの価格と座席図、先行受付ごとのアコーディオン、配信チケットの販売期間とアーカイブ期間。
06
Goods
会場販売・事前通販のグッズを、価格ラベル付きの商品カードで一覧にする。
07
Music・Info・Sponsor・Credit・フッター
楽曲、注意事項、協賛、クレジットのパートが続き、シェアボタンとフッターで締める。

Interaction

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

背景のステージと幕は全画面キャプチャのどの位置でも同じ見え方のため、position: fixed で固定されている
スタックに GSAP があり、紙吹雪やテープの動き、見出しの出現演出に使われていると思われる
先行受付や注意事項は開閉式のアコーディオン。details / summary 要素で再現可能
PCでもコンテンツ幅をスマホ幅に絞っているため、SPとほぼ同じ1カラムのレイアウトを共有していると思われる

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

橘ひなのワンマンライブ「Progress」特設サイトをスクロールしたときのフレーム1 — 01

橘ひなのワンマンライブ「Progress」特設サイトをスクロールしたときのフレーム2 — 02

橘ひなのワンマンライブ「Progress」特設サイトをスクロールしたときのフレーム3 — 03

橘ひなのワンマンライブ「Progress」特設サイトをスクロールしたときのフレーム4 — 04

橘ひなのワンマンライブ「Progress」特設サイトをスクロールしたときのフレーム5 — 05

橘ひなのワンマンライブ「Progress」特設サイトをスクロールしたときのフレーム6 — 06

検出された技術:GSAPGoogle Fonts

Reproduce

再現するときのポイント

01PCでは中央のカラムを500px前後に絞り、左右の余白を固定のステージ背景で埋める
02カラムの枠は、ピンクと水色のドットを並べた電飾風のボーダーにする（radial-gradient の繰り返しで作れる）
03項目ラベルは #8cdaff の水色の帯にハートのアイコンを添え、本文は白地に #5b3b2f の茶色で読みやすくする
04和文は丸みのある LINE Seed JP、ナビの英字は Crimson Pro と、ゴシックとセリフを組み合わせる

再現MDに含まれるもの

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

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

tachibana-hinano-progress.katapick.md

1---
2title: "橘ひなの ワンマンライブ「Progress」特設サイト 再現用デザイン仕様書"
3source: https://event.vspo.jp/Tachibana-Hinano-Progress/
4katapick: https://katapick.com/sites/tachibana-hinano-progress
5category: イベント / ライブ
6region: 国内 (JP)
7tags: [イラスト, 固定ナビ, ビビッド, ロングページ, 角丸]
8launched: 2026-05
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 28
13generator: Katapick
14---
15 
16# 橘ひなの ワンマンライブ「Progress」特設サイト — 再現用デザイン仕様書
17 
18> PCで開くと、ステージの幕の真ん中に縦長の画面。ぶいすぽっ！の橘ひなの初ワンマンライブ「Progress」特設サイトは、ピンクと水色の幕を固定背景にし、スマホ幅のカラムに全情報を収めて舞台を再現している。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22