FLOW ANATOMY #06 — 1サイトを縦に解剖する
VESTIGEは、
なぜめくりたくなるのか。
技法は『点』、サイトは『線』。架空ファッションブランド『VESTIGE』のサイトは、ファッション誌を めくるような編集設計。静で魅せる#05 あわいとは逆に、 速いカットと大きな余白の対比でリズムを刻みます。その"間"と"カット"の編集を章ごとに解剖します。 解説をスクロールすると、実物のライブプレビューが同じ場所まで自動でついてきます。
BLUEPRINT流れの設計図 — 章の役割と緩急
断ち切る→言葉→めくる→溢れる→映像→記事→巨大タイポ。速いカットと大きな余白の対比が、誌面のリズムです。
- 00HERO断 — いきなり断ち切る断
- 01持続レイヤー常 — 反転カーソルと粒子の膜常
- 02MANIFESTO言 — 1行ずつ立ち上げる言
- 03LOOKBOOK頁 — 縦を横に変えてめくる頁
- 04COLLECTION視 — 触れると写真が溢れる視
- 05FILM映 — 映像の間を止めて見せる映
- 06JOURNAL記 — 余白で読み物に切替記
- 07STORE・FOOTER結 — 巨大な名前で余韻結
ローダーを捨て、いきなり断ち切る
狙いローダー無しで即ヒーロー。モノクロ写真がハードカットで次々差し替わりながら、タイトル文字にはサインウェーブのイタリック波が走り、右下に実時間のタイムコードが点滅する。「燃え尽きた後に残るものだけを纏う」というブランドのマニフェストを、演出の文法そのものに織り込んでいる。
つなぎエディトリアルの緊張感は、溜めずに断ち切ることから生まれる。掴みは"間"でなく"カット"——この出だしがサイト全体のリズムの基準値になる。
反転カーソルと、粒子の膜
狙いmix-blend differenceのカスタムカーソルがモノクロ画面を横断し、フィルムグレインのcanvasオーバーレイが全画面に薄く被さり、acid yellowの細い進捗バーが上端を走り、スクロールでblur化する追従ヘッダが章を仕切る。どれも主張しすぎない0.5枚の厚みで積まれている。
つなぎモノクロの誌面を、反転カーソルと粒子の膜が全章で締める。速いカットの下に常に揺らぎがあることで、静止した写真が生きて見える。
縦を横に変え、誌面をめくる
狙い縦スクロールをsticky固定でhorizontal translateXに変換するルックカルーセルが、LOOK 01から08まで見開きのように横に流れる。手を離せばそのルックで止まり、誌面の見開きをめくる感覚そのものをスクロールの操作に重ねている。
つなぎ単調な縦読みに横の"見開き"を割り込ませる。静→速→静→横——リズムの変拍子が読み進める理由になる。#05あわいの横スクロールと同じ緩急の技法だが、目的は余白でなくカットのテンポ。
行に触れると、写真が溢れる
狙い普段はアイテム名を並べたテキスト行のリスト。ホバーで全画面のフルブリード写真と巨大な番号がフェードイン——情報は最小限に畳まれ、触れた瞬間だけ画面を溢れさせる。コレクションのアイテム数と写真の迫力を両立するための編集の解法。
つなぎ普段は引き、操作に大きく応える緩急。ルックブックで誌面の広がりを見せた後に、今度は能動的な操作で一着ずつ溢れさせる。読む体験から触る体験へ。
映像の間を、止めて見せる
狙いダミープレーヤーがタイムコードを走らせ、RECインジケータが赤く点滅し、静止画がハードカットで切り替わる。クリックで再生と一時停止が切り替わるUIが、動画の"間"を誌面に持ち込む。実際の動画ではなく映像の文法をレイアウトで演出している。
つなぎコレクション(04)で一着ずつ見せた後に、ブランドのムードをフィルムの文体で総括する。写真の静から映像の動へ、トーンを一段上げる章。
余白で、読み物に切り替える
狙い3枚のグリッドカードがスクロール連動でfadeUpし、エディトリアル記事の入口として並ぶ。写真→フィルムの視覚的な連続から、テキストを中心とした読み物へとトーンが切り替わる。余白の効いた静かなグリッドが、速いカットの後の「呼吸」を作る。
つなぎ速いカットの後に、余白の効いた静かな章を挟む——これが編集のリズムの正体。ファッション誌でも特集の後に読み物を挟む、あの緩急。
巨大な名前で、余韻を残す
狙いフラッグシップ「VESTIGE AOYAMA」と取扱店リストの2カラムがシンプルに並ぶ。その下のフッターには超特大の「VESTIGE」装飾文字が鎮座し、2列逆方向の無限マーキーが流れ続ける。最後に語られるのはコピーでも価値訴求でもなく、ブランド名そのもの。
つなぎ語りすぎず、ブランド名そのものを最後の一枚にする——VESTIGEの流れはここで完結する。巨大な余韻がスクロールを止め、名前を記憶に刻む。
TAKEAWAY"編集"でつくる流れの5原則
VESTIGEから取り出せる、エディトリアル設計全般に持ち帰れる設計則。#05 引き算・#04 足し算 など他の作法と読み比べると、"間"の使い方の違いが際立ちます。
つかみは"間"でなく"カット"で
ローダーを捨て、ハードカットで即始める。緊張感は溜めずに断ち切ることから。冒頭の文法がサイト全体のリズムの基準になる。
言葉は1行ずつ立ち上げる
マニフェストを段落で流さずclip-pathで一行ずつ。読む速度をレイアウトで制御することが、言葉の重みを生む。
縦を横に変えてリズムを割る
ルックブックで横スクロール。単調な縦読みに見開きの感覚を差し込む。変拍子が読み進める動機になる。
触れたときだけ、溢れさせる
コレクションは行リストに徹し、ホバーで全画面写真。普段は引き、操作に大きく応える。溢れさせることの効果は、引きの量に比例する。
余白と巨大タイポで閉じる
最後に超特大の名前を置く。ブランド名そのものを最後の一枚にする。語りすぎない閉じ方が、余韻を生む。