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

1. 01

   ナビ

   上端中央にピンクから水色へのグラデーションの角丸バーを固定し、About・Ticket・Goods・Info を英字と日本語の2段で並べる。

2. 02

   背景

   左にピンク、右に水色の幕、ライトと紙吹雪を描いたステージのイラストを画面全体に固定して敷く。

3. 03

   ヒーロー

   中央の縦長カラムに、ドット縁の枠で囲んだKVと「Progress」ロゴ。続けて「橘ひなの初のワンマンライブ開催！」、日程「2026 8.15–16」、会場名、リード文。

4. 04

   About（開催概要）

   ハート形の見出しバッジの下に、イベント名・出演者・日時・会場・アクセスを水色のラベルで区切って並べ、地図とタイムスケジュールの画像を添える。

5. 05

   Ticket

   現地チケットの価格と座席図、先行受付ごとのアコーディオン、配信チケットの販売期間とアーカイブ期間。

6. 06

   Goods

   会場販売・事前通販のグッズを、価格ラベル付きの商品カードで一覧にする。

7. 07

   Music・Info・Sponsor・Credit・フッター

   楽曲、注意事項、協賛、クレジットのパートが続き、シェアボタンとフッターで締める。

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

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

検出された技術:GSAPGoogle Fonts

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

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-10-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12generator: Katapick
13---
14 
15# 橘ひなの ワンマンライブ「Progress」特設サイト — デザイン分析書
16 
17> PCで開くと、ステージの幕の真ん中に縦長の画面。ぶいすぽっ！の橘ひなの初ワンマンライブ「Progress」特設サイトは、ピンクと水色の幕を固定背景にし、スマホ幅のカラムに全情報を収めて舞台を再現している。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22