20/40 サイト刷新 5案

knct.party トップページを「関係者に展開するためのリッチ版」にするための方向性比較。各カードの OPEN で実際に動くモックが開きます(スマホでも開けます)。文言・バンド名・伏せ字の位置は現行サイトと同じです。タイムテーブルは「仮」として時刻だけ載せ、各枠のバンド名は伏せています(開演 15:30 仮)。GA4 は未設定、会費は未定のままです。各案とも、和文の見出しで全セクションを統一し、固定ナビに現在地を出しています。

現行サイトのPC表示

現行(2026-10-02 更新)

MV全面背景のヒーロー+ストーリー+ポスター型ラインナップ+PASS。配色は黒・赤・金、見出しは Anton / Bebas Neue。スマホではナビ項目が画面外にはみ出し、キャッチコピーが「40 / 歳。」で折れる。5案はいずれもこの2点を解消している。

案A PC案A スマホ
APOSTER
festival poster / 黒・赤・金 / Anton + Bebas + Noto Sans JP 900

ヒーロー=ラインナップポスター。日付と会場を最大に、バンド名を階層で積む。上端にティッカー。

NEWS 3件、タイル型 LINE-UP、空の TIMETABLE グリッド、半券型 INFO、固定 ENTRY バー。夏フェス公式サイトの文法に一番忠実。情報密度が高く、現行からの連続性も強い。

OPEN A
案B PC案B スマホ
BLAMINATE
tactile / premium merch / 黒・金箔・少量の赤 / Bebas + JetBrains Mono + Noto Sans JP

実物大のバックステージパス。ホログラム箔がポインタ(PC)や時間(スマホ)で光り、3Dチルトする。

INFO は紙の半券(ミシン目・KEEP THIS STUB)、LINE-UP はパスの裏面、PASS は3枚の実物カード。「グッズ感」が強く、Tシャツ・ステッカー展開と相性がよい。

OPEN B
案C PC案C スマホ
CZINE
zine / photocopy collage / 紙色・黒インク・赤スタンプ / Anton + Zen Kaku Gothic New + Special Elite

部室の壁に貼ったフライヤーの重なり。MV を1枚の貼り紙として傾け、テープ・ハーフトーン・日付スタンプで囲む。

唯一のライト案。LINE-UP は対バンフライヤー、伏せ字は黒マジック、PASS はスタンプカード。AIR JAM 世代の手触りに寄せ、ダーク一辺倒から意図的に外した。

OPEN C
案D PC案D スマホ
DKINETIC
kinetic typographic / 黒・赤・白の色面反転 / Anton 極大 + Bebas + Noto Sans JP

スクロールで「20|06 / 18」が「20|26 / 40」に数える巨大数字。2画面目で MV が一度だけ全面に現れ、赤面に切り替わる。

セクションごとに背景が黒・赤・白と反転。バンド名の巨大マーキー、白面の巨大「11.28 SAT / STARNITE」、回転リングの ENTRY ボタン。一番「動く」案。

OPEN D
案E PC案E スマホ
ESTAGE
cinematic stage lighting / 黒・タングステン暖色・赤 / Bebas + Noto Sans JP + Noto Serif JP(引用のみ)

開いた瞬間の暗転から 1.2 秒でスポットライトが入り、MV が「ステージ奥の幕」として照らされる。開演日までのカウントダウン。

LINE-UP は舞台袖のセットリスト紙、TIMETABLE は RUNNING ORDER ボード、PASS はリストバンド3本。演出はロード時の1回だけで、以降は静か。

OPEN E

第2期 拡張案

A の情報構造を土台に、D の「20年の歩み」を説明なしで読めるギミックに作り直し、E のスポットライトを MV(TRUST OVER 40 まで)を欠けさせずに使った 3 案。卒業は 2007 年 3 月(20 歳)、2026 年 11 月に 40 歳。

案F PC案F スマホ
FTIMELINE
A の構造 + スクロール連動の年表 / 黒・赤・金

スクロールすると赤いピックが 2006 → 2026 の目盛りを進み、「2013年 27歳」のように年号と年齢が全桁で更新される。2026 に着くと MV にスポットライトが入る。

節目は 2006 卒業・2016 30歳・2026 40歳・再集結。reduced-motion と JS 無効では到達済みの静止状態。

OPEN F
案G PC案G スマホ
GFLIP BOARD
A の構造 + 発車標のパタパタ式ボード / 黒・赤・暖色ランプ

開いた瞬間に「2006 卒業 → 2026 再集結」「20歳 → 40歳」が 1 年ずつめくれて確定する(約 2.5 秒)。同じボードに日時・会場・受付状況。

タイムテーブル(仮)もフラップ表示で、伏せ字は赤いフラップ。MV はランプの下に全体表示。

OPEN G
案H PC案H スマホ
HSTRATA
A の構造 + 20 年ぶんの層が積み上がる / 黒・赤・金・暖色

2006(卒業・20歳)の土台の上に 1 年 1 層、20 層が 2 秒で積み上がって「厚み」になり、その上の MV にスポットライトが入る。各層に年号と年齢。

CSS だけで動き、JS 不要。reduced-motion では積み上がり済みで表示。

OPEN H

推奨(deep-review 3ラウンド収束後): 第一候補 A POSTER、次点 E STAGE。折衷は「A を土台に、E のロード時点灯とカウントダウン、B のラミネートパスを PASS セクションへ」。詳細は output/redesign_wow_proposals_2026-10-27.md。

共通で守ったこと