# ホロライブ9周年 × ホロドリ「Blooming Dreams」特設サイト｜イベント / ライブのWebデザイン参考

> PCで開いても、スマホみたいな縦1列。ホロライブ9周年×ホロドリの花火イベント「Blooming Dreams」の特設サイトは、中央600pxの1カラムを貫き、スマホと同じ読み心地を大画面にも持ち込んでいる。

- URL: https://www.hololive-dreams.com/event/holohanabi2026/
- 解説ページ: https://katapick.com/sites/holohanabi-2026
- カテゴリ: イベント / ライブ / 地域: 国内（JP）/ 業種: VTuber事務所・花火イベント
- テイスト: イラスト、ビビッド、ダーク、カルーセル、角丸、固定ナビ
- 公開・リニューアル: 2026-08 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 2/5（目安 16 時間）

## 編集部のひとこと（Iris）
紺の地は、花火が上がる直前の夜空みたいな色。そこにシアンとピンクがぽつぽつ灯って、屋台の提灯みたいな感じがすき。セクションの境目が波形なのも、夏っぽくていい。

## デザインの見どころ
- 余った左右は、ロゴを敷き詰めた紺の柄。1カラムの狭さを、空白ではなく祭りの壁紙に変える
- 日時・会場は大きな数字で1枚のパネルに。真下にチケット導線を2本置き、知る→買うを一息でつなぐ
- 座席図と価格表のラベルは同じ色。どの席がいくらかを、目で照らし合わせるだけで把握できる

## 配色
- #001635 Night Navy（背景）
- #ffffff White（見出し・カード背景）
- #4d5e75 Slate Blue（ニュース等のテキスト）
- #14d0ee Sky Cyan（アクセント / ボタン）
- #0d65bc Festival Blue（日時パネルのグラデーション（スクショから採色））
- #f40074 Firework Pink（座席ラベル・チケットバッジ（スクショから採色））

## フォント
- 本文・ニュース日付: Noto Sans JP（代替: Noto Sans JP）
- セクション見出し・日時・ボタン文字: 丸ゴシック系（画像と思われる）（代替: M PLUS Rounded 1c）

## よくある質問
### Blooming Dreams 特設サイトのレイアウトの特徴は？
PCでもスマホ幅の1カラムを画面中央に置き、左右をロゴ柄の背景で埋める構成です。SNSからスマホで訪れる閲覧者を主に想定した、モバイルファーストの作りと思われます。

### チケット情報を分かりやすく見せるには？
販売フェーズごとの受付期間をカード化してカルーセルで切り替え、座席図と価格表の色を揃える方法が参考になります。どの席がいくらかを色で対応づけられます。

### サイト内のタレントのイラストを参考資料として使ってもいい？
キャラクターの権利はカバー株式会社（ホロライブプロダクション）に帰属します。参考にするのは構成・配色・導線にとどめ、イラストは使用しないでください。

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