Sakura Miko 2nd Live “Blooming Parade!!”

1. 01

   ヒーロー

   白地に角を切り欠いた角丸のKV枠。夜の城と桜を背にしたさくらみこの立ち絵、左上に手書き風ロゴ、左端に縦組みの「SAKURA MIKO 2ND LIVE」、右上に桜形のMENU。赤とピンクのリボンが画面を横切る。

2. 02

   公演概要

   雲と星のあしらいの中に「2026 10.29 THU」「K-ARENA YOKOHAMA」、会場と配信それぞれのOPEN / STARTをリボン状の帯で示す。

3. 03

   LATEST NEWS

   タブ付きの横長ニュース帯に日付と見出しを並べ、右端にゴールドの「もっとみる」。

4. 04

   メッセージ

   左右をストライプの幕、中央を夜空のグラデーションにして、縦書きの札を段違いに吊るす。「さぁ、一緒に行こう」とロゴ、「未来へ続く 私たちの行進を」で締める。

5. 05

   ALBUM

   2nd Album「Blooming Cinderella」のジャケットと紹介文を額縁風のカードに収め、「もっとみる」へ。

6. 06

   MERCH・DIGITAL MESSAGE BOARD

   受注生産グッズとデジタルメッセージボードの告知バナーを、見出しと飾り枠で順に並べる。

7. 07

   PROFILE・VIDEO

   神殿風の柱の線画に囲まれた立ち絵とプロフィール、動画セクション。

8. 08

   フッター

   権利表記と関連リンクで締める。

• 右端の「TICKET」バッジと桜形の「MENU」はスクロール中も固定表示され、どこからでもチケットとメニューに届く
• リボンはセクションをまたいで配置された画像やSVGと思われる。スクロールに合わせて描き足す演出は SVG の stroke-dashoffset で再現可能
• ニュースは横長の帯に並ぶ構成で、Swiper によるスライドと思われる
• Lenis の慣性スクロールで、装飾の多い長いページでも滑らかに流れる

スクロールのコマ撮りLenis · 300–20000ms

検出された技術:LenisSwiperWordPressGoogle Fonts

• 011本のリボンをセクションの境目をまたいで配置し、ページ全体を1つの流れとしてつなぐ
• 02縦書きのメッセージは writing-mode: vertical-rl の札に分け、高さをずらして吊るす
• 03固定ボタンは丸や花びらなど衣装・モチーフ由来の形にして、UIも世界観の一部にする
• 04赤・ピンク・ゴールドに夜空の青を1か所だけ挟み、メッセージの章を際立たせる

1---
2title: "Sakura Miko 2nd Live “Blooming Parade!!” デザイン分析書"
3source: https://blooming-parade.hololivepro.com/
4katapick: https://katapick.com/sites/sakura-miko-blooming-parade
5category: イベント / ライブ
6region: 国内 (JP)
7tags: [イラスト, 縦書き, 手書き文字, ロングページ, 固定CTA, レッド基調]
8launched: 2026-08
9verified: 2026-10-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12generator: Katapick
13---
14 
15# Sakura Miko 2nd Live “Blooming Parade!!” — デザイン分析書
16 
17> 赤いリボンが、ページの端から端まで走ってる。さくらみこの2nd Live特設サイト「Blooming Parade!!」は、KVからフッターまでリボンを通し、縦書きのメッセージとともに長いページをパレードの行列に仕立てている。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22