# Sakura Miko 2nd Live “Blooming Parade!!”｜イベント / ライブのWebデザイン参考

> 赤いリボンが、ページの端から端まで走ってる。さくらみこの2nd Live特設サイト「Blooming Parade!!」は、KVからフッターまでリボンを通し、縦書きのメッセージとともに長いページをパレードの行列に仕立てている。

- URL: https://blooming-parade.hololivepro.com/
- 解説ページ: https://katapick.com/sites/sakura-miko-blooming-parade
- カテゴリ: イベント / ライブ / 地域: 国内（JP）/ 業種: VTuber・ソロライブ（ホロライブプロダクション）
- テイスト: イラスト、縦書き、手書き文字、ロングページ、固定CTA、レッド基調
- 公開・リニューアル: 2026-08 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 4/5（目安 32 時間）

## 編集部のひとこと（Pip）
え、待って、左端にずーっと縦組みで「SAKURA MIKO 2ND LIVE BLOOMING PARADE」が流れてるの気づいた？？どこまでスクロールしても推しの名前がそばにいる安心感、神すぎる！！

## デザインの見どころ
- 赤とピンクのリボンが全セクションを縫う。長いページでも、1本の行列を追いかけている感覚が続く
- メッセージは縦書きの札を夜空に段違いで吊るす。一行ずつ目で追う順番が、そのまま演出になる
- TICKETはレースの丸バッジ、MENUは桜の花びら形。固定ボタンまで衣装の意匠で揃えている

## 配色
- #ffffff Parade White（背景）
- #fedcea Sakura Pink（背景グラデーション・リボン）
- #ce3347 Ribbon Crimson（日付・見出し・アクセント）
- #d9aa78 Parade Gold（ボタン・ニュース帯・細リボン）
- #113f95 Night Castle Blue（メッセージセクションの夜空）
- #231815 Cocoa Ink（本文）

## フォント
- 約物（明朝系の和文と組み合わせて句読点を詰める）: YakuHanMPs（代替: YakuHanMP（オープンソース））
- 縦書きメッセージ・ニュース・本文: 明朝体（Google Fonts・書体名未特定）（代替: Shippori Mincho）

## よくある質問
### Blooming Parade!!の特設サイトで使われているフォントは？
和文は明朝系の書体に、約物を半角に詰める YakuHanMPs を組み合わせています。無料で再現するなら Shippori Mincho などの明朝体と YakuHanMP の組み合わせがおすすめです。

### リボンがページ全体を横切る演出はどう作る？
リボンをセクションごとの画像やSVGに分け、境目で端がつながるように配置します。スクロールに合わせて描かれる動きをつけたい場合は、SVGのパスを stroke-dashoffset でアニメーションさせる方法が使えます。

### VTuberのライブ特設サイトを作るときの参考になる点は？
キービジュアルの意匠（リボン・桜・城）をボタンや見出し枠にまで持ち込んで統一している点と、チケットとメニューを固定ボタンで常に見せている導線が参考になります。

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