# 橘ひなの ワンマンライブ「Progress」特設サイト｜イベント / ライブのWebデザイン参考

> PCで開くと、ステージの幕の真ん中に縦長の画面。ぶいすぽっ！の橘ひなの初ワンマンライブ「Progress」特設サイトは、ピンクと水色の幕を固定背景にし、スマホ幅のカラムに全情報を収めて舞台を再現している。

- URL: https://event.vspo.jp/Tachibana-Hinano-Progress/
- 解説ページ: https://katapick.com/sites/tachibana-hinano-progress
- カテゴリ: イベント / ライブ / 地域: 国内（JP）/ 業種: VTuberのワンマンライブ
- テイスト: イラスト、固定ナビ、ビビッド、ロングページ、角丸
- 公開・リニューアル: 2026-05 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 28 時間）

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

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

## 配色
- #ffffff Spotlight White（本文パネル背景）
- #d8b6ff Lavender Haze（背景グラデーション）
- #8cdaff Sky Glow（項目ラベル / 枠）
- #ff97ce Idol Pink（アクセント文字）
- #5b3b2f Cocoa（本文テキスト）
- #757575 Curtain Call Gray（販売終了のボタン）

## フォント
- 和文の見出し・本文: LINE Seed JP（代替: LINE Seed JP）
- ナビの英字: Crimson Pro（代替: Crimson Pro）

## よくある質問
### 橘ひなの「Progress」特設サイトで使われているフォントは？
和文に LINE Seed JP、ナビの英字に Crimson Pro が使われています。どちらも Google Fonts で無料で利用できます。

### PCでスマホ幅のカラムを中央に置くレイアウトはどう作る？
コンテンツ全体を max-width で500px前後に絞って中央寄せし、背景に position: fixed のイラストを敷きます。SPとデザインを共通化できるため、制作の手間も抑えられます。

### どんな業種の参考になる？
VTuberやアイドルのワンマンライブ、ファンミーティング、ソロアーティストの記念イベントなどの特設サイトの参考になります。

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