Phase Con 2026 - A Phase Connect Convention

1. 01

   ヘッダー

   黒い帯の左に縦書きの「2026」を添えたロゴ、中央に ATTEND / PROGRAMMING / ACTIVITIES / MEET & GREET / MERCH HALL / INFO、右に YouTube・Twitter のアイコン付きリンク。

2. 02

   ヒーロースライダー

   ステージ上のアバターを写した画像を全面に敷き、走査線とグレーのオーバーレイで暗くしたうえで、中央にシェブロン型のイベントロゴと開催日を配置。

3. 03

   サイド要素

   左端に縦組みの「PHASE CONNECT」、左下に下向き矢印、右端に10個のドットページネーションを置く。

4. 04

   スクロール後のヘッダー

   フルページ撮影では、ヒーロー上に Phase Connect ロゴの別ヘッダーが重なって写っており、スクロール後に固定ヘッダーへ切り替わると思われる。

5. 05

   フッター

   黒地中央にコピーライトとプライバシーポリシーの1行、右下に上へ戻るボタン。

• ヒーローは右端のドットで切り替える10枚構成のスライダー。抽出フォントに sr7-txt タグがあり、WordPress の Slider Revolution 7 で作られていると思われる
• 走査線は repeating-linear-gradient の細い縦縞を半透明で重ね、横方向のノイズ線は数本の色付き罫線をアニメーションさせると近い表現になる
• stack に Three.js があるが、トップページ上で3D表現は確認できなかった。スライダーのトランジション演出に使われている可能性がある

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

検出された技術:Three.jsWordPressGoogle Fonts

• 011画面にロゴ・日程・ナビだけを置き、詳細は各ページに振り分ける
• 02背景映像はグレーのオーバーレイと走査線で彩度と明度を落とし、白いロゴを最前面で読ませる
• 03ロゴの「20」は線抜き、「26」は塗りにしてシェブロンと組み合わせ、白1色でも強弱をつける
• 04ナビは太めの幾何学サンセリフ（Montserrat）の大文字で短く並べる

1---
2title: "Phase Con 2026 - A Phase Connect Convention 再現用デザイン仕様書"
3source: https://con.phase-connect.com/
4katapick: https://katapick.com/sites/phase-con-2026
5category: イベント / ライブ
6region: 海外 (US)
7tags: [ダーク, 大胆なタイポ, カルーセル, 映像主体, モノクロ]
8launched: 2025-12
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 2/5
12estimated_hours: 10
13generator: Katapick
14---
15 
16# Phase Con 2026 - A Phase Connect Convention — 再現用デザイン仕様書
17 
18> トップはロゴと開催日だけで、スクロールいらず。Phase Connectのコンベンション特設サイト「Phase Con 2026」は、トップをスライダーとロゴと会期だけに絞り、必要な情報を一撃で届ける。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22