ホロライブ9周年 × ホロドリ「Blooming Dreams」特設サイト

1. 01

   固定ヘッダー

   左上にイベントロゴ、右上に白いハンバーガーメニュー。いずれも中央カラムの外側に固定表示される。

2. 02

   キービジュアル・開催概要

   花火を背景にタレントのイラストを並べたKVの下に、ロゴ、「2026.10.15 Thu」の日付、開場・開演時刻と会場を載せた青いグラデーションパネル、現地チケット・配信チケットの2ボタンを積む。

3. 03

   News

   サムネイル・日付・タイトルを持つ白い角丸カードを縦に2件並べ、「NEWS一覧へ」のピルボタン。

4. 04

   Information（紹介）

   ロゴとイベント紹介文を花火背景の上に置き、右側にデフォルメイラストを添える。

5. 05

   Ticket

   販売フェーズごとの受付期間と当落発表日を白い角丸カードにまとめ、左右の矢印とドットで切り替えるカルーセル。

6. 06

   Map（座席表・価格）

   スタジアムの座席図を色分けし、その下にグラウンド席・S席・A席などのラベルと価格を1行ずつ並べた価格表を置く。

7. 07

   Goods

   グッズ告知のバナー画像と、先行販売ページへのピルボタン。

8. 08

   フッター

   紺地にロゴ、Xアイコン、権利表記を中央揃えで置く。

• Ticket の販売フェーズ切替は、抽出データにある Swiper によるカルーセル（navigation の矢印 + pagination のドット）
• ロゴとハンバーガーメニューは position: fixed で中央カラムの外側に常駐している（フルページキャプチャの各所に写り込んでいる）
• セクション境界は波形のシェイプで区切っており、SVG か波形の画像を上下に重ねて再現できる
• Astro で構築された静的サイトと思われ、演出は控えめで情報の読みやすさを優先している

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

検出された技術:SwiperAstroGoogle Fonts

• 01PCでも max-width 約600px の1カラムを中央に置き、body 背景に紺のロゴ柄を敷いてSPと同じ体験にする
• 02日時・時刻・会場は大きな数字とラベル枠でパネル化し、FV内に必ず収める
• 03価格表は座席区分の色ラベルと座席図の色を一致させ、左ラベル・右価格の2列で揃える
• 04セクション見出しは白の太い英字＋小さなカナ読みの組み合わせで統一する

1---
2title: "ホロライブ9周年 × ホロドリ「Blooming Dreams」特設サイト 再現用デザイン仕様書"
3source: https://www.hololive-dreams.com/event/holohanabi2026/
4katapick: https://katapick.com/sites/holohanabi-2026
5category: イベント / ライブ
6region: 国内 (JP)
7tags: [イラスト, ビビッド, ダーク, カルーセル, 角丸, 固定ナビ]
8launched: 2026-08
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 2/5
12estimated_hours: 16
13generator: Katapick
14---
15 
16# ホロライブ9周年 × ホロドリ「Blooming Dreams」特設サイト — 再現用デザイン仕様書
17 
18> PCで開いても、スマホみたいな縦1列。ホロライブ9周年×ホロドリの花火イベント「Blooming Dreams」の特設サイトは、中央600pxの1カラムを貫き、スマホと同じ読み心地を大画面にも持ち込んでいる。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22