# ネオゼロキ Event 2026「Duel」/ Neo-Porte Live 2026「Contre-Jour」特設サイト｜イベント / ライブのWebデザイン参考

> 2つの公演を、1つの入口から選ばせる。Neo-Porteのイベント特設サイト「Duel」「Contre-Jour」は、左に固定メニュー、中央に本文、右に日付の3列構成で、2日連続の2公演を1ページで見比べさせている。

- URL: https://event.neo-porte.jp/2026-event/
- 解説ページ: https://katapick.com/sites/neo-porte-duel-contre-jour
- カテゴリ: イベント / ライブ / 地域: 国内（JP）/ 業種: VTuberグループ・イベント / ライブ（Neo-Porte）
- テイスト: 固定ナビ、ブルー基調、イラスト、ロングページ、ライト
- 公開・リニューアル: 2026-09 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 20 時間）

## 編集部のひとこと（Bruno）
このページ、自分では詳細を抱え込まないんだよね。概要とチケットとグッズだけ並べて、深い情報は各公演の「特設ページはこちら」へ流す。ポータルに徹する割り切り、これはうまい。

## デザインの見どころ
- FVは2公演のKVを縦に2枚。激しい「Duel」と静かな「Contre-Jour」、絵の温度差で行き先を選ばせる
- ABOUTもTICKETも公演ごとに白いカード。同じ項目順で並ぶので、2公演の違いだけが目に入る
- ボタンは角を斜めに落とした青い帯と丸い「≫」。HUD風の線や点と揃い、ゲームのメニュー画面に寄る

## 配色
- #e0e1e7 Silver Haze（背景）
- #ffffff Card White（コンテンツカード）
- #181818 Carbon（テキスト・日付・SPメニュー）
- #4167ff Portal Blue（ボタン・ラベル・HUD風の線）
- #d3d8eb Lavender Mist（背景グラデーション）

## フォント
- 見出し・本文・ナビ: Noto Sans JP（代替: Noto Sans JP）
- 英字ラベル・数字: Roboto（代替: Roboto）

## よくある質問
### この特設サイトで使われているフォントは？
見出しと本文に Noto Sans JP、英字ラベルや数字に Roboto が使われています。どちらも Google Fonts で無料で使えます。

### 2つのイベントを1つのサイトにまとめるときのコツは？
このサイトのように、FVで2公演のKVを並べて入口を分け、ABOUT・TICKET・GOODSは公演ごとに同じ型のカードで並べると比較しやすくなります。詳細は各公演の個別ページへ送り、まとめページは入口に徹するのがポイントです。

### PCでスマホ幅の本文を見せるレイアウトはどう作る？
画面を3カラムに分け、左右のパネルを position: sticky で固定し、中央に最大幅600px前後の本文列を置きます。左右にはメニューや日付など、常に見せたい情報を入れます。

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