FLOW ANATOMY #01 — 1サイトを縦に解剖する
Sakuraは、
なぜ王道で引き込むのか。
技法は『点』、サイトは『線』。架空アイドル『Sakura』のサイトは、奇をてらわない王道の構成そのもの。 同じアイドルでも深夜系の#04 NOCTILUCAが足し算なら、Sakuraは直球。 『満開→散る→その先へ』という素直な感情の順番が、なぜこれほど引き込むのかを章ごとに解剖します。 解説をスクロールすると、実物のライブプレビューが同じ場所まで自動でついてきます。
BLUEPRINT流れの設計図 — 章の役割と緩急
ヒーロー→お知らせ→想い→メンバー→音楽→ライブ→入会。初めての人が知りたい順そのままが、王道の背骨です。
- 00HERO開 — 一字で世界に上げる開
- 01HERO咲 — 満開を最初に見せきる咲
- 02持続レイヤー常 — 世界観を貫く糸常
- 03NEWS報 — お知らせはリズムの刻み報
- 04ABOUT想 — 数字で一拍置く想
- 05MEMBER顔 — 主役を立体で触れさせる顔
- 06MUSIC音 — 楽曲を面で押し出す音
- 07LIVE会 — 会える場所を直後に会
- 08入会・FOOTER結 — 入口の言葉で閉じる結
一文字で、舞台に上げる
狙いローダーは「桜」の一文字とSAKURAのロゴタイプ、プログレスバーの3点だけ。読み込みが完了するとclip-pathで上へスライドアウトし、一瞬で本編へ切り替わる。「桜」一字で季節と世界観を最初の数秒に確定させる、シンプルで効果的な導入。
つなぎ暗転的なローダーが本編へ切り替わる、開幕の儀式。NOCTILUCAの「SYNC 100%」やあわいの「墨が滲む」と同じ役割を、桜一字でやっている。余計な情報をそぎ落とした点が王道の出発点。
世界観を貫く、消えない糸
狙い遅延追従リング付きのカスタムカーソル、桜ピンクから金へ変わるスクロール進捗バー、スクロールするとガラス化する追従ヘッダの3点が全章を通して存在し続ける。章が替わってもSakuraの世界観が途切れない仕組み。
つなぎ王道構成ほど、全章を貫く「消えない要素」が世界観の一貫性を支える。どの章にいてもSakuraのサイトにいると感じさせる糸であり、読者を迷子にさせない設計でもある。
数字で、説得を一拍置く
狙い「春は、何度でも巡る。」というコンセプトコピーがstaggerで1行ずつ立ち上がり、続いてメンバー数9・楽曲数12・結成年2024・公演数48の実績数値がカウントアップする。動きの連続に静を1つ挟む章。
つなぎここで数字の重さを一拍置くことで、次に登場するメンバーがより引き立つ。「グループを知る→人物を知る」という自然な読み手の欲求の流れに沿った配置。
主役は、立体で触れさせる
狙いメンバーカードがポインターの動きに反応して3Dティルトし、カード内部の画像と要素が奥行きを持って追従するパララックス効果を見せる。眺めるだけの人物紹介でなく、「触れる」人物紹介。
つなぎ自分が動かした感触が記憶に残る。王道構成の全章の中でここだけが能動的な山場であり、読者が最も強く関与できる唯一の場所。次の音楽セクションへの感情的な橋渡しにもなる。
楽曲は、面で押し出す
狙い最新シングル「春風ランウェイ」のキービジュアルを全幅バナーで先頭に置き、ジャケット特集・トラックリスト、続いてMV一覧グリッドへと続く。楽曲を1点ずつ小さく列挙するのでなく、大きな面で押し出す構成。
つなぎ人物への共感が生まれた直後に「作品」を見せるのが王道の並び。「この人たちの曲を聴きたい」という欲求が最も高まるタイミングに音楽を配置している。
入口の言葉で、出口を閉じる
狙い「桜の会」ファンクラブのCTAと、X・Instagram・YouTube・TikTokの4SNSリンク。フッターには超大型の「SAKURA」装飾が背景に敷かれ、免責テキストと共に静かに閉じる。「満開の、その先へ」で始めた物語を同じ語彙で閉じる。
つなぎ直球の構成ほど、最初と最後の一貫性が効く。ヒーローのキャッチコピーと同じ語彙でフッターまで貫くことで、1つの物語が完結する感覚をもたらす。
TAKEAWAY"王道"でつくる流れの5原則
Sakuraから取り出せる、定番構成を強く機能させるための設計則。#04 足し算・#05 引き算 など他の作法と読み比べると、"王道"の輪郭がより鮮明になります。
定番の順番には理由がある
ヒーロー→お知らせ→想い→人物→音楽→ライブ→入会は、初めての人が知りたい順。奇をてらう前にこの背骨を通す。逆に言えば、この順番を外す場合は明確な意図が要る。
世界観は一字・一色で先に決める
「桜」一文字のローダーと桜→金の進捗バーで、最初の数秒に色とモチーフを固定する。ページ全体の印象は、最初に見せたものに引っ張られる。
説得は静で一拍置く
動きの連続に数字の静かな章(ABOUT)を挟む。盛り続けないことが次の山場を際立たせる。緩急のリズムこそが「王道」に飽きさせない仕掛け。
主役は触れさせる
眺めるだけの人物紹介でなく、3Dティルトで指に反応させる。「動かした」感触が残る。王道の構成の中に1つの能動的な山場を置く。
入口の言葉で出口を閉じる
始まりのコピーでフッターまで貫く。直球ほど最初と最後の一貫性が効く。全章を通して新しい語彙を増やさず、同じ言葉を回収することで物語が完結する。