ネオゼロキ Event 2026「Duel」/ Neo-Porte Live 2026「Contre-Jour」特設サイト

1. 01

   左固定メニュー

   [MENU] ラベルと TOP / ABOUT / TICKET / GOODS / MAP / ATTENTION、下に「Duel」「Contre-Jour」それぞれの公演バナー。

2. 02

   ヒーロー（中央列）

   「[PORTAL TOP] Neo-Porte Event & Live 2026」の見出しの下に、Duel（12.28 MON）と Contre-Jour（12.29 TUE）のKVを縦に2枚、それぞれ丸い「≫」ボタン付きで並べる。

3. 03

   右固定パネル

   「Neo-Porte Event & Live 2026」「12.28 MON 12.29 TUE」「TACHIKAWA STAGE GARDEN」と、X・YouTube の丸いボタン。

4. 04

   ABOUT

   公演ごとの白いカードにロゴ、キャッチコピー（「2人の“Duel” 決戦の地は立川で！」「光の向こうへ、12人で。」）、公演名・日時・出演者・会場、「特設ページはこちら」のボタン。

5. 05

   TICKET

   公演ごとに現地チケットと配信チケットの料金を並べ、「チケット詳細はこちら」のボタン。

6. 06

   GOODS

   2公演それぞれの「お品書き」画像と「グッズ詳細はこちら」のボタン。

7. 07

   MAP

   会場の地図。

8. 08

   ATTENTION・スポンサー・フッター

   観覧、祝花・お手紙、チケット、物販、よくある質問などの注意事項と、スポンサー、フッター。

• 左のメニューと右の日付パネルは固定され、中央の列だけがスクロールする。position: sticky か fixed の3カラムで再現可能
• Lenis の慣性スクロールで中央列が滑らかに流れる
• HUD風の線や点、カードの出現は GSAP のスクロール連動アニメーションと思われる
• ボタンは clip-path で角を斜めに落とした帯に、円形の「≫」アイコンを重ねた構成

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

検出された技術:GSAPLenisGoogle Fonts

• 01PCでは左右を固定パネル、中央をスマホ幅の本文列にした3カラムにする
• 022公演の情報は同じカードの型・同じ項目順で並べ、比較しやすくする
• 03アクセントは青1色に絞り、細い線・点・角を落としたボタンで近未来的なUIに寄せる
• 04各公演の詳細は個別の特設ページへ送り、このページは入口に徹する

1---
2title: "ネオゼロキ Event 2026「Duel」/ Neo-Porte Live 2026「Contre-Jour」特設サイト 再現用デザイン仕様書"
3source: https://event.neo-porte.jp/2026-event/
4katapick: https://katapick.com/sites/neo-porte-duel-contre-jour
5category: イベント / ライブ
6region: 国内 (JP)
7tags: [固定ナビ, ブルー基調, イラスト, ロングページ, ライト]
8launched: 2026-09
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 20
13generator: Katapick
14---
15 
16# ネオゼロキ Event 2026「Duel」/ Neo-Porte Live 2026「Contre-Jour」特設サイト — 再現用デザイン仕様書
17 
18> 2つの公演を、1つの入口から選ばせる。Neo-Porteのイベント特設サイト「Duel」「Contre-Jour」は、左に固定メニュー、中央に本文、右に日付の3列構成で、2日連続の2公演を1ページで見比べさせている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22