FLOW ANATOMY #18 — 1サイトを縦に解剖する
KAIROは、
なぜ電気の滑らかさを体で伝えられるのか。
技法は『点』、サイトは『線』。架空のEV／モビリティ『KAIRO／カイロ』は、「先進的です」と言葉で説明する代わりに、スクロールの向きそのものを変えることで先進性を伝えます。縦に転がしたホイールが、画面では横の章送りになる——この一手の意外性が、まず「ここは普通のLPではない」と体に知らせます。さらに背景では、車体を横切る電流のようなCanvasの流線が絶えず右へ流れ、スクロールの勢いに応じて速度を上げる。VELOX（#16）が放射状のワープ光条で“ハードな速さ”を叩き込んだのとは対照的に、こちらは途切れず滑らかに流れる“電気的な加速”を狙います。色はグラファイトの近黒に、エレクトリックオレンジをただ一点。滑らかな慣性のある横移動と、静かに速い数値で、EVという主題を章ごとに解剖します。解説をスクロールすると、実物のライブプレビューが同じ章まで自動でついてきます。
BLUEPRINT流れの設計図 — 章の役割と緩急
ローダー→イントロ→電気フロー層→走行体験→航続と充電→スペック→予約。縦スクロールが横の章送りに変換され、各章はパネルとして横に流れていきます。動きは常に滑らかで慣性があり、色はグラファイトとオレンジ一点だけに絞られています。
- 00LOADER起 — ワードマークとバーが一気に満ちる（CHARGING…）動
- 01INTRO主張 — DRIVE THE CURRENT／電気を流れとして走る動
- 02電気フロー層常 — 車体を横切る流線とカーソルが全篇を縁取る常
- 03DRIVE体感 — 走行体験を電流の波形で語る動
- 04RANGE安心 — 航続の弧と充電の円が満ちる動
- 05SPEC証明 — 目標諸元が静かに駆け上がる動
- 06RESERVE誘い — 最小フォームで試乗予約へ動
ワードマークとバーが、一気に満ちる
狙いグラファイト一色の画面に「KAIRO」のワードマークが立ち、その下でオレンジの一本バーが1秒で満ち、「CHARGING…」のモノスペース小字が添えられる。スピナーでぐるぐる待たせず、「充電が完了した＝出発準備OK」という体感を最初の1秒で作る。EVというテーマを、待ち時間のメタファーにまで一貫させる。読み込みに失敗しても必ず消えるフェイルセーフ付きで、コンテンツを恒久的に隠さない。
つなぎ「満ちる／出発する」という開幕の一手が、後続すべての“途切れず流れる”トーンをあらかじめ決めている。
DRIVE THE CURRENT ／ 電気を、流れとして走る
狙い近黒の地に、グロテスク書体（Sora）の超特大英字「DRIVE THE CURRENT」が立ち上がり、直下にゴシック極太の和文「電気を、流れとして走る。」——英字と和文で極端にジャンプ率を付ける。右下には車体のSVGライン画がうっすら浮かび、写真を一切使わずに「クルマ」を示唆する。最高出力・0–100・航続の3スタットを遅延を重ねて順に出し、左下では「SCROLL →／横に流れる」のヒントが横方向の操作を予告する。
つなぎ最初の一画面で「静かで滑らかな電気の加速」という世界観を宣言し、同時に“このサイトは横に流れる”という操作の作法を告知する。実写に頼らずラインとオレンジ一点で高級EVの気配を作るのがミソ。
車体を横切る流線とカーソルが、全篇を縁取る
狙い背景では生Canvas 2Dが、無数の光の粒子を左から右へ流し続ける。オレンジの電流に、氷灰・スチールの粒子を少量だけ混ぜ、加算合成（lighter）でわずかに発光させる。粒子はサイン波でゆらぎながら流れ、横スクロールで章が動くとその勢いに反応して速度が跳ね上がる。既定のカーソルは消し、オレンジの細いリングが“滑らかに”ポインターを追う（VELOXの俊敏な追従とは逆に、慣性を残す）。上端にはオレンジの進捗バーが常駐する。
つなぎ各章が切り替わっても、この電気的な流れとカーソルだけは消えない。「速さ」ではなく「途切れなさ・滑らかさ」を全章に敷き続ける持続レイヤー。WebGLを使わず生Canvasで軽く実装しているのもEVの“効率”に呼応する。
走行体験を、電流の波形で語る
狙い「アクセルは、スイッチではない。」——踏んだ瞬間から最大トルクが立ち上がる、変速の段差のない加速を言葉で示す。パネル下端にはSVGの波形（電流の脈）が横一線に走り、章に入ると stroke-dashoffset で左から右へ一気に描き切られる。瞬間最大トルク・車内音・回生強度の3つの数値も、ゼロから静かにカウントアップする。エンジン音の代わりに“流れ”を見せる章。
つなぎイントロで宣言した「流れとしての加速」を、ここで具体的な走行の質（トルク・静粛性・回生）に着地させる。波形を横に描き切る動きが、横スクロール全体のリズムと呼応する。
航続の弧と、充電の円が満ちる
狙い「遠くまで、ではなく気にせず遠くまで」。左に思想のコピー、右に2つのSVGインフォグラフィックを置く。大きな弧（アーク）が章に入ると時計回りに描かれ、中心の数字が0→620kmへ駆け上がる。その下ではバッテリーの円環が0→80%まで満ち、「10→80%を約18分」を添える。航続という不安を、満ちていくゲージの“安心”へ翻訳する。
つなぎ走行の質のあとに、EV最大の関心事＝航続と充電を、数字の羅列ではなく“満ちるビジュアル”で見せる。オレンジ一点で弧と円を揃え、他章と同じ視覚言語で語る。
目標諸元が、静かに駆け上がる
狙い「数字は、静かに速い。」最高出力480kW・0–100が3.4秒・航続620km…といった6つの目標諸元を、グロテスク書体の巨大数字で3×2グリッドに置く。章に入った瞬間、各値が easeOutQuart でカウントアップし、終盤でピタッと止まる。カードの上辺にはオレンジのラインが左から一気に伸びる。冒頭に「すべて開発上のターゲット値」と明記し、誇大な断定を避けているのも設計の一部。
つなぎ体感（走行）と安心（航続）を語ったうえで、最後に硬い数字で裏づける。オドメーター的なカウントアップが“計測された性能”という信頼の質感を作る。
最小フォームで、試乗予約へ
狙い「その流れを、体で確かめる。」名前・希望モデル・希望日だけの短いフォームを置き、送信すると「→ 受け付けました…まずは45分、流れを確かめに来てください（デモ）」とブランドの口調のまま静かに応える。下部にはスタジオ・営業時間・アクセスの誠実なメタと、実在メーカー・車種ではない旨、数値は架空の目標値である旨の免責を明記して締める。
つなぎ横に流れてきた全篇を、最後に“試乗予約”という一点へ着地させる。入力項目を絞り、勢いを保ったまま行動へ運ぶ。架空であることを隠さず明記するのが、ショーケースとしての誠実さ。
TAKEAWAY“電気的な滑らかさ”でつくる流れの5原則
KAIROから取り出せる、モビリティ・テック・プロダクト系のダイナミックなブランド全般に持ち帰れる設計則。#16 VELOX のハードな速さの作法と読み比べると、同じ「動き」でも目的によって質感がまるで変わることが分かります。
スクロールの“向き”を変えて意外性を出す
縦に回したホイールを横の章送りへ変換するだけで、「普通のLPではない」という先進性の第一印象が生まれる。ただし変換はスティッキーピンで実装し、ページ自体が横あふれしないよう overflow を厳密に管理する。
動きは“慣性のある滑らかさ”で統一する
横移動もカーソルも数値も、ハードカットではなく lerp（線形補間）で一拍かけて追従させる。EV・電気という主題には、鋭さより“途切れなさ”のほうが説得力を持つ。
背景の粒子で“流れ”を常時感じさせる
車体を横切る光の粒子を生Canvasで流し続け、スクロールの勢いに速度を連動させる。WebGLを使わず軽く実装することが、そのままブランドの“効率”のメタファーにもなる。
色は一点差しで規律をつくる
グラファイトの近黒に、エレクトリックオレンジをただ一点。差し色を絞るほど、弧・円・波形・数値がすべて同じ視覚言語で語られ、洗練と一貫性が増す。
速くても、置いていかない
reduced-motionでは横ピンも粒子も止めて静かな一枚に切り替え、タッチ端末では重いCanvasをスキップして素直な縦積みにフォールバックする。数値は「目標値」と明記し、誇大な断定を避ける。滑らかさは、全員が乗れる配慮とセットで初めて成立する。