なつありうむっ！ Varium 1st Live

1. 01

   ヒーロー

   空と海の背景に10人の集合イラストを全面に配置。下部を白い弧で切り、ロゴ、ピンクの日付「2026.8.22 ON STAGE!!」、水色の会場名と開場・開演時刻を中央に積む。右上に英字ナビ、右下にオレンジの固定CTA。

2. 02

   NEWS

   水色の背景に大きな円のパターンを敷き、白枠のお知らせカードを横に並べたカルーセル。下にドット型のページネーション。

3. 03

   ABOUT

   過去の配信画像を周囲に散らし、中央にすりガラス風の点線枠ボックスを置いて、グループの歩みとライブへの想いを中央揃えで綴る。

4. 04

   CAST

   水面模様の水色背景に、ポラロイド風の白枠カード10枚をわずかに傾けて並べ、各カード下部にメンバー名をピンクで表記する。

5. 05

   TICKET

   トロピカルな装飾で縁取ったパネルに「Tickets」の見出し。先行販売・一般販売・オンライン視聴・アーカイブ視聴の4区分を枠で分け、ピンクのピル型ボタンで購入へ誘導する。

6. 06

   GOODS

   砂浜のようなベージュの背景に、事前販売・当日販売のグッズを水色枠の中に一覧で並べ、価格を添える。ピンクのボタンで購入ページへ。

7. 07

   ATTENTION・フッター

   フルページキャプチャが9000pxで切れているため、以降は抽出データの見出しのみ確認。高さ約4500pxの注意事項セクション（現地販売グッズ、購入時の注意、ペンライトカラー等のお知らせ）とフッターが続く。

• NEWS のカード列は抽出データにある Swiper で、ドット型ページネーション付きのスライダーになっている
• ヘッダーの英字ナビとオレンジの「チケット購入はこちら」は position: fixed で常駐。CTAはオレンジ〜黄色の linear-gradient と白い縁取りでFV上でも目立たせている
• ABOUT の本文ボックスは背後の画像がぼけて見えるため、backdrop-filter: blur() を使ったすりガラス表現と思われる
• 抽出データに modalBG の要素があり、ニュースやキャストの詳細はモーダルで表示していると思われる
• キャストカードの傾きは transform: rotate() を1枚ずつ変えて付けると再現できる

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

検出された技術:SwiperGoogle FontsAdobe Fonts

• 01水色（#00bcff）と白を交互に使い、ピンクとオレンジは日付とCTAだけに絞る
• 02セクションの上下を波形の SVG で区切り、夏・水辺のモチーフを形で統一する
• 03キャスト一覧はポラロイド風の白枠＋わずかな回転で、ただのグリッドにしない
• 04開催日・会場・時刻をFV内でロゴの直下に並べ、最初の1画面で必要情報が揃うようにする

1---
2title: "なつありうむっ！ Varium 1st Live 再現用デザイン仕様書"
3source: https://summer-firstlive.varium.jp/
4katapick: https://katapick.com/sites/varium-1st-live
5category: イベント / ライブ
6region: 国内 (JP)
7tags: [イラスト, ビビッド, ブルー基調, 固定CTA, カルーセル, ロングページ]
8launched: 2026-05
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 26
13generator: Katapick
14---
15 
16# なつありうむっ！ Varium 1st Live — 再現用デザイン仕様書
17 
18> 開いた瞬間、青空と海でいきなり夏休み。VTuberグループVariumの初ライブ「なつありうむっ！」の特設LPは、青空と海を白い弧で切り、日付と会場を中央に積んで、高揚感と公演情報を一画面で両立させる。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22