FLOW ANATOMY #04 — 1サイトを縦に解剖する
NOCTILUCAは、
なぜこの順番か。
技法は「点」。サイトは「線」。
収録技法だけで作った架空アイドルサイト NOCTILUCA を章ごとに解剖して、
バラバラの演出が1本の“流れ”になる仕組みを読み解きます。
解説をスクロールすると、実物のライブプレビューが同じ場所まで自動でついてきます。
BLUEPRINT流れの設計図 — 章の役割と緩急
1ページ縦スクロールの中で、各章が担う役割はひとつずつ。「静」と「動」が交互に来るのがリズムの正体です。
- 00INTRO儀式 — 日常から切り離す静
- 01HERO没入 — 3秒で世界観を確定動
- 02持続レイヤー連続性 — ページを1本に縫う糸常
- 03TICKER蝶番 — 静と動をつなぐ細い帯流
- 04NEWS情報 — 世界観のまま読ませる打
- 05CONCEPT世界観 — いちばん静かな章静
- 06MEMBER人物 — 幅を変えて章替えを宣言流
- 07MUSIC体験 — 触らせて滞在を作る触
- 08LIVE行動 — 感情のピーク直後にCTA描
- 09JOIN / FOOTER帰属と余韻 — 伏線を回収して閉じる静
世界に入る「儀式」を置く
狙いいきなり中身を見せず、SYNC 00%→100% の暗転を1〜2秒だけ挟んで、読者を日常から切り離す。映画館の暗転と同じ役割で、このあとの没入の下ごしらえをする。
つなぎ「同期している」というカウント演出が、次章で電源が入るように光が立ち上がる予告になっている。ステージ左上の ↻ でいつでも再生できます。
3秒で世界観を確定させる
狙い脈打つスペクトラムと漂う夜光虫、グリッチするロゴ、コピーは1行だけ。情報量をほぼゼロに絞り、「どんな夜のサイトか」という空気だけを最初に確定させる。
つなぎイントロの暗闇をそのまま受けて、暗い画面に光が立ち上がる。下端の SCROLL キューと流れるメンバー名が「この下に続きがある」ことを静かに知らせる。
ページ全体を1本に縫う「消えない要素」
狙いカスタムカーソル・CRTスキャンライン・上端の読書進捗バー。この3つはどの章に移っても画面に残り続ける。セクションがいくら切り替わっても「同じ世界に居る」感覚が切れないのは、この持続レイヤーのおかげ。
つなぎ流れるサイトの最重要装置。章と章を糸で縫うように貫通させることで、次章以降のどんな場面転換も「別ページ」に感じさせない。
いちばん静かな章を、まんなかに置く
狙い動きの連続のあとに、文字だけの静寂を置く。「夜は、誰のものでもない。」が3節に分かれて時間差で立ち上がる。全章が動くと何も動いて見えない——この章の「静」が前後の「動」を生かす。
つなぎ直前のターミナルの細かい動きとの落差で言葉が立つ。章の最後に円形ゲージのカウントアップを置いて、静寂から次章の動きへ橋を架けて渡す。
感情のピークの直後に、行動を置く
狙いツアー日程を表にせず、地下鉄路線図風のSVGにする。到達すると線がスーッと引かれ、駅（公演）が順に点灯。SOLD OUT は消灯のままにして希少性まで演出で語る。
つなぎ「音楽を聴いた直後」に「会いに行ける場所」が来る配列。感情が上がりきったところに行動導線を置く、LP設計の基本形をエンタメの文法でやっている。
伏線を回収して、余韻で閉じる
狙い締めはFC入会。フォームを join --alliance のターミナルに偽装して、入会手続きを「同盟に入る」体験へ変換する。ACCESS GRANTED の演出そのものが入会の報酬になる。
つなぎ第04章のターミナルがここで回収される——モチーフの反復は伏線回収として効く。最後は巨大なグリッチロゴだけのフッターで、入口と同じ言語のまま余韻を残して終わる。
TAKEAWAY流れを作る5つの原則
NOCTILUCA から取り出せる、どのサイトにも持ち帰れる設計則。
章に役割をひとつずつ
没入→情報→世界観→人物→体験→行動→帰属。並び順はコンテンツの順番ではなく、読者の感情の順番で決める。
持続レイヤーで縫う
カーソル・進捗バー・質感オーバーレイなど「消えないもの」を貫通させると、どんな場面転換も同じ世界の続きになる。
静と動を交互に
全部が動くと何も動いて見えない。静かな章をまんなかに1つ置くだけで、前後の動きが倍効くようになる。
章替えは見た目で宣言
コンテンツ幅・配色・密度の切り替えがセクション境界のアナウンスになる。見出しより先に、レイアウトに語らせる。
モチーフを反復して回収
ターミナル・ネオン・夜光虫。冒頭で提示した言語を最後にもう一度使うと、1ページが1本の物語として閉じる。