ぶいすぽっ！バレンタイン2026 特設サイト

1. 01

   背景・フレーム

   PCでは中央に幅約580pxのカラムを置き、左に濃い赤、右に淡いピンクのストライプを配置。上端にレースの縁取りと吊り下げたハートの飾り、チョコのハートを散らす。

2. 02

   キービジュアル

   リボンを掛けた板チョコの地にメンバーの集合イラストを並べ、下にイベントロゴ。チョコ色の帯にピンクのキャッチコピー2行を置く。

3. 03

   クイズ企画

   「VSPO!QUIZ」の見出しと企画ロゴ、企画の説明、スイートモード／ビターモードの賞品をバッジ風の画像で示し、クイズ期間と終了の告知を載せる。

4. 04

   MEMBER

   濃い赤の地に、選択中のメンバーの立ち絵と名前、X・YouTube の丸ボタンを大きく表示し、下に丸いアイコンを5列のグリッドで並べる。

5. 05

   GOODS

   グッズのバナー画像を縦に並べ、それぞれに販売開始日時を添え、下にチョコ色の「グッズ購入ページへ」ボタン。

6. 06

   シェア

   「このサイトをシェアしよう！」の見出しと、赤いハート型の「Xでポスト！」ボタン。

7. 07

   フッター

   チョコ色の地にぶいすぽっ！ロゴ、プライバシーポリシーへのリンク、コピーライト。

• 左右のストライプ背景とレースの縁取りは、フルページキャプチャの各所に同じ位置で写っており position: fixed で固定されていると思われる
• MEMBER はアイコンをクリックすると上部の立ち絵・名前・SNSリンクが切り替わる仕組みと思われる。抽出データの Swiper の thumbs 機能や、data 属性で表示を切り替える JavaScript で再現できる
• 抽出データに GSAP と Lenis があり、セクションの出現アニメーションや慣性スクロールに使われていると思われる
• セクションの境界はレースやスカラップ（波形）の画像・SVG で区切られている

スクロールのコマ撮りLenis · 200–1200ms

検出された技術:GSAPLenisSwiperGoogle Fonts

• 01赤・ピンク・チョコ色の3系統に色を絞り、白はレースやカードの地に使う
• 02背景は repeating-linear-gradient の細いストライプに、ハートやチョコのモチーフを重ねる
• 03セクション境界をレースやスカラップの形で区切り、パッケージや包装紙のような質感を出す
• 04見出しは装飾ロゴにし、本文は M PLUS 1 の太めのウェイトで中央揃えにそろえる

1---
2title: "ぶいすぽっ！バレンタイン2026 特設サイト デザイン分析書"
3source: https://vspo.jp/valentine-2026/index.html
4katapick: https://katapick.com/sites/vspo-valentine-2026
5category: イベント / ライブ
6region: 国内 (JP)
7tags: [イラスト, レッド基調, 角丸, カルーセル, 固定ナビ]
8launched: 2026-02
9verified: 2026-10-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 2/5
12generator: Katapick
13---
14 
15# ぶいすぽっ！バレンタイン2026 特設サイト — デザイン分析書
16 
17> 板チョコにリボン、サイトまるごとプレゼント仕様。ぶいすぽっ！のバレンタイン2026特設サイトは、リボンを掛けた板チョコとレースの縁取りで、PCの画面全体をひとつの贈り物の箱に仕立てている。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22