hololive SUPER EXPO 2026 & hololive 7th fes. Ridin' on Dreams

1. 01

   固定ヘッダー

   左上の白いタブに2イベントのロゴ、続けてシアンの EXPO・グリーンの fes.・グラデーションの Photo Report のタブ。右に白いピル型ナビ（News / Info / Video / Special）と色付きの Merch / Ticket、円形の EN ボタン。

2. 02

   ヒーロー

   ドット状に加工した暗い写真の上に、字間を大きく空けた白い英字タイトルを5行で左寄せ。下に円形の矢印ボタンとお知らせのバナー、最下部にシアン〜ライムのグラデーションのティッカー帯。右下に円形の TICKET バッジ。

3. 03

   イベント切替

   枠線付きの2枚のカードに EXPO と 7th fes. のロゴを置き、それぞれシアンとグリーンのグラデーションの「TOP」ボタンを付ける。背景には淡い色の軌跡状グラフィック。

4. 04

   DATE&VENUE

   黒い見出しバー（右端にドットのグラデーション）の下に大きな日付、イベントごとの色ラベルと会場名を英字・和文で並べる。

5. 05

   PHOTO REPORT

   EXPO と4つのステージのフォトレポートへのサムネイルカードを5枚横に並べる。

6. 06

   NEWS

   日付・EXPO / fes. の色付きカテゴリタグ・タイトル・矢印の記事リストと、グラデーションの「VIEW MORE」ボタン。

7. 07

   リンクパネル

   2イベントへの大きなグラデーションカードの下に、SPECIAL・MERCH・TICKET の紫グラデーションのカードをアイコン付きで3つ並べる。

8. 08

   VIDEO

   中央の動画サムネイルを大きく、左右に前後のスライドを覗かせるカルーセル。下にドットのページネーションと矢印、VIEW MORE。

9. 09

   ポータル導線・スポンサー・フッター

   ピンク系グラデーションのポータルサイトへのバナーの後、黒地のフッターに公式リンク、プラチナスポンサー・ブース協賛・広告協賛のロゴ、X / LINE などのシェアボタンを中央揃えで積む。

• ティッカー帯はイベント名とアイコンが横に流れるマーキー。同じ内容を2回並べて translateX(-50%) までループさせる CSS animation で再現できる
• 右下の TICKET バッジはフルページキャプチャの各所に写っており position: fixed で常駐している。外周の文字は SVG の textPath で円形に配置し、回転アニメーションを付けていると思われる
• FVのドット加工は、写真の上に radial-gradient の小さな円を繰り返した背景を重ねる（または mask-image で抜く）ことで LED ビジョン風にできる。PCとSPで写っている写真が異なり、スライドショーと思われる
• VIDEO のカルーセルは抽出データにある Swiper の centeredSlides・pagination・navigation の組み合わせで再現できる
• ヘッダーの EXPO / fes. / Photo Report タブには下向きの矢印があり、各イベントのページを開くドロップダウンと思われる

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

検出された技術:SwiperWordPressGoogle Fonts

• 012つのイベントにシアンとグリーンを割り当て、タブ・ボタン・ラベルをすべてその色で塗り分ける
• 02ボタンや帯はシアン→ライムなど隣り合う色のグラデーションにし、白地でも発色を保つ
• 03見出しは黒いバーに白抜きの英字、右端にドットのグラデーションを入れた共通パーツにする
• 04チケット導線は円形バッジで右下に固定し、どのセクションからでも購入へ進めるようにする

1---
2title: "hololive SUPER EXPO 2026 & hololive 7th fes. Ridin' on Dreams 再現用デザイン仕様書"
3source: https://hololivesuperexpo.hololivepro.com/2026/
4katapick: https://katapick.com/sites/hololive-super-expo-2026
5category: イベント / ライブ
6region: 国内 (JP)
7tags: [ビビッド, マーキー, 固定CTA, 固定ナビ, カルーセル]
8launched: 2025-12
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 28
13generator: Katapick
14---
15 
16# hololive SUPER EXPO 2026 & hololive 7th fes. Ridin' on Dreams — 再現用デザイン仕様書
17 
18> EXPOとfes.を色で分けて、どっちの話か迷わない。ホロライブの展示とライブの合同特設サイト「hololive SUPER EXPO 2026 & 7th fes.」は、EXPOをシアン、fes.をグリーンに染め分けている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22