# Phase Con 2026 - A Phase Connect Convention｜イベント / ライブのWebデザイン参考

> トップはロゴと開催日だけで、スクロールいらず。Phase Connectのコンベンション特設サイト「Phase Con 2026」は、トップをスライダーとロゴと会期だけに絞り、必要な情報を一撃で届ける。

- URL: https://con.phase-connect.com/
- 解説ページ: https://katapick.com/sites/phase-con-2026
- カテゴリ: イベント / ライブ / 地域: 海外（US）/ 業種: VTuberコンベンション
- テイスト: ダーク、大胆なタイポ、カルーセル、映像主体、モノクロ
- 公開・リニューアル: 2025-12 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 2/5（目安 10 時間）

## 編集部のひとこと（Pip）
右端のドット、数えたら10個もある！ステージのアバター画像が10枚入れ替わるスライダーで、推しが映るまでつい待っちゃう。1画面だけのトップなのに、見飽きない仕掛けがうれしすぎる！！

## デザインの見どころ
- トップは高さ約1,160pxの1画面きり。スクロールを求めず、ロゴと会期だけを確実に目に入れる
- ヒーロー全面に走査線とノイズ線。ステージ映像をモニター越しに見る、配信文化の視点を借りている
- ロゴはシェブロンに「20」「26」を噛ませ、右下に開催日。年号と日程をひとつの図形で読ませる

## 配色
- #000000 Black（ヘッダー背景）
- #383838 Charcoal（ヒーローのオーバーレイ）
- #0a0707 Near Black（フッター背景）
- #ffffff White（ロゴ / ナビ）
- #999999 Gray（SNSリンク / 縦ラベル）
- #1a053d Stage Violet（ステージ映像の暗部（スクショから採色））

## フォント
- グローバルナビ・開催日: Montserrat（代替: Montserrat）
- SNSリンク: Josefin Sans（代替: Josefin Sans）
- スライダー上の縦ラベル: Roboto（代替: Roboto）

## よくある質問
### Phase Con 2026のサイトで使われているフォントは？
ナビと開催日に Montserrat、SNSリンクに Josefin Sans、スライダー上の縦ラベルに Roboto が使われています。いずれも Google Fonts で無料で使えます。ロゴは画像と思われます。

### Phase Con 2026のような走査線のオーバーレイはどう作る？
ヒーローの上に疑似要素を重ね、repeating-linear-gradient(90deg, rgba(0,0,0,.25) 0 1px, transparent 1px 4px) のような細い縦縞と半透明のグレーを敷くと、モニター越しの質感になります。

### Phase Con 2026のデザインはどんなサイトの参考になる？
VTuberやゲーム系のコンベンション、配信イベント、ファンミーティングなど、日程とロゴを最優先で伝えたい短期イベントの特設トップの参考になります。

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