FLOW ANATOMY #16 — 1サイトを縦に解剖する
VELOXは、
なぜ速さを体で伝えられるのか。
技法は『点』、サイトは『線』。架空のパフォーマンスジム『VELOX／ヴェロックス』は、言葉で「速い」と言う代わりに、画面そのものを加速させることで速さを伝えます。AURELIAが引き算の静けさでもてなしたのとは正反対——ここでは中央から放たれるワープ速度の光条、スクロールの速さに反応して流れるマーキー、ハードに駆け上がる数値カウンターが、来訪者の身体に「加速」を叩き込みます。色はグラファイトの黒とアシッドライム一色だけ。凝縮ディスプレイ書体の巨大なキネティックタイポで、"数字で殴るジム"の熱量を章ごとに解剖します。解説をスクロールすると、実物のライブプレビューが同じ場所まで自動でついてきます。
BLUEPRINT流れの設計図 — 章の役割と緩急
ローダー→ヒーロー→速度レイヤー→種目マーキー→数値→プログラム→42分エンジン→料金→体験予約。各章が、静めるのではなく"加速させる"ことで熱量を上げるよう設計されています。動きは常に速く鋭く、色はグラファイトとライムだけに。
- 00LOADER起 — ワードマークとバーが一気に満ちる動
- 01HERO主張 — OUTRUN YOUR LIMITS／限界を更新動
- 02速度レイヤー常 — カーソルと進捗が全篇を鋭く縁取る常
- 03VELOCITY加速 — 種目マーキーがスクロール速度で流れる動
- 04STATS証明 — 数値がハードに駆け上がる動
- 05PROGRAMS設計 — 4本のエンジンをライムで塗り分ける動
- 06METHOD核心 — 42分エンジンを巨大数字で語る動
- 07PLANS選択 — 走り出す速度を選ばせる動
- 08JOIN誘い — 光暈のなかで無料体験へ動
OUTRUN YOUR LIMITS ／ 限界を、更新する
狙い背景ではCanvasが画面中央の消失点からライムの光条を放射状に噴き出し、床にはCSSの遠近グリッドが奥へ走る。前面には凝縮ディスプレイ書体（Bebas Neue）の超特大英字「OUTRUN／YOUR LIMITS」がわずかに斜めに立ち上がり、直下にゴシック極太の和文「限界は、更新するもの。」——英字と和文でジャンプ率を極端に付ける。心拍・消費・継続率の3スタットも遅延を重ねて順に出る。読ませる前に、まず速さを浴びせる一画面。
つなぎ最初の全画面で「ここは加速する場所だ」と体で分からせる。ライム一点に色を絞ることで、多色でにぎやかにするのではなく、規律ある一色の熱量として速さを見せる。
種目マーキーが、スクロール速度で流れる
狙い「STRENGTH／HIIT／SPRINT／MOBILITY」の巨大な種目名が上段は左へ、下段は縁取り文字で右へと、二層で逆向きに流れ続ける。ミソはスクロール速度への連動——ホイールを速く回すほどマーキーの速度が跳ね上がり、止めると自然に減速する。「スクロール＝アクセル」という関係を体で理解させる仕掛け。
つなぎヒーローで浴びた"速さ"を、ここで来訪者自身の操作に結びつける。読むための帯ではなく、自分の手が画面の速度を握っているという運動の実感を渡す章。
数値が、ハードに駆け上がる
狙いライムの心拍波形（ECG）が横一線に脈打ち、その下で「182 BPM／940 KCAL／+18 KG／3,400名」の4つの巨大数字が、画面に入った瞬間ゼロから一気にカウントアップする。イージングは easeOutQuart——序盤に速く、終盤でピタッと止まる"決めきる"曲線で、ダラダラ増えない。感覚ではなくデータで語る、というブランドの主張を数字の運動そのもので体現する。
つなぎマーキーの抽象的な速さを、ここで具体的な「成果の数値」に着地させる。波形と数字を同じライムで揃え、"計測されている身体"という世界観を一枚で立ち上げる。
4本のエンジンを、ライムで塗り分ける
狙い筋力・燃焼・加速・可動の4カードが、スクロールで下から硬めに立ち上がる。各カードの英字見出しは中抜き（縁取りのみ）で置かれ、ホバーするとライムの塗りが下から一気にせり上がってカード全体を満たし、文字色が黒へ反転する。触れた瞬間に"スイッチが入る"手応えを与える塗りの演出。
つなぎ数値で証明したあとに、その数字を生む具体的な設計（4つの軸）を見せる。ホバーの反転で1枚ずつ"点火"させ、情報の一覧を能動的な選択の場に変えている。
42分エンジンを、巨大数字で語る
狙い背後に「REDLINE」の超特大アウトライン文字が薄く敷かれ、スクロールに合わせて左右へ視差移動する。中央にはライムの巨大な「42 MIN」がカウントアップし、ウォーム6分・メイン30分・整理6分の帯グラフが、バンドに入った瞬間に横へ伸びる。「長さではなく密度」という主張を、たった一つの数字と3本のバーで殴るように言い切る章。
つなぎプログラムの"何を"に対して、ここは"どう回すか"の核心。背景の巨大文字を視差で動かして奥行きを出し、単一の数字（42）に視線と意味を一点集中させている。
光暈のなかで、無料体験へ
狙い上部から広がるライムのソフトな光暈を背景に、「その1回目は、今日から。」の見出しと、名前・希望プログラム・希望日だけの短いフォームを中央寄せで置く。送信すると「▸ 受け付けました…まずは45分、殴りに来てください（デモ）」と、ブランドの口調のまま静かに応える。入力項目を絞り、最後の一歩をできるだけ軽くする設計。フッターは誠実な免責で締める。
つなぎ加速で押し切ってきた全篇を、ここで具体的な予約という一点に着地させる。煽るカウントダウンではなく「今日から」の一語と最小フォームで、勢いを保ったまま行動へ運ぶ。
TAKEAWAY"速さ"でつくる流れの5原則
VELOXから取り出せる、スポーツ・フィットネス系やダイナミックなブランド全般に持ち帰れる設計則。#10 静けさ の引き算の作法と読み比べると、同じスクロールという素材が目的によって正反対に使われることが分かります。
スクロールをアクセルにする
マーキーやワープ速度を、スクロール量ではなく"スクロールの速さ"に連動させる。来訪者の手が画面の速度を握っている、という運動の実感が「速いブランド」を体で納得させる。
数字は"決めきる"曲線で走らせる
カウントアップは easeOutQuart のように序盤速く終盤でピタッと止める。ダラダラ増える数字は弱く見える。止まり方の鋭さが、成果の説得力そのものになる。
色は一色に絞って熱量を出す
グラファイトの黒とアシッドライムだけ。多色でにぎやかにするのではなく、規律ある一色を全篇で反復するほうが、かえって強く速く見える。差し色は"点火"のためだけに使う。
書体のジャンプ率で勢いを作る
凝縮ディスプレイ書体の超特大英字と、ゴシック極太の和文を極端な大小で同居させる。文字サイズの落差そのものが、静止画でもエネルギーを帯びさせる最短の手段になる。
速くても、置いていかない
reduced-motionではワープも数字の加速も止め、静かな一枚に切り替える。モバイルではキャンバスの粒子数を落とす。ローダーは失敗しても必ず消える。速さは、全員が乗れる配慮とセットで初めて成立する。