FLOW ANATOMY #19 — 1サイトを縦に解剖する
暗海研究所は、
なぜ数字ひとつで沈ませるのか。
技法は『点』、サイトは『線』。架空の海洋研究所『暗海研究所／ABYSS LAB』は、水深200mより下、太陽の届かない海の発光生物を追う没入エディトリアルです。仕掛けはひとつだけ。各章に「この章＝水深◯m」と宣言し、scrollYをその水深に写像して深度0..1というたった一つの数字を作る。その一つの数字だけで、背景の暗さ・加算合成の発光粒子・右のHUDの数字とゾーン名を同時に動かします。派手な演出を積み増すのではなく、一本の変数を全部に配ることで「沈んでいる」という実感を作る設計を、章ごとに解剖します。解説をスクロールすると、実物のライブプレビューが同じ場所まで自動でついてきます。
BLUEPRINT流れの設計図 — 章の役割と緩急
入口(0m)→なぜ光るのか(200m)→発光の仕組み(1000m)→深海の記録(2000〜3000m)→名鑑(4000m)。各章が自分の水深を宣言し、ビューポート中央の位置から章間を線形補間して深度を一本の値に畳み込みます。動くのはその一つの値に連動する闇・粒子・HUDだけ。派手なトランジションを持ち込まず、「深くなるほど濃くなる」という単純な物理感覚だけで読了までを運びます。
- 00HERO起 — 藍の海面に、深度0mの見出しが浮かぶ動
- 01DEPTH FIELD常 — 一つの深度値が闇・粒子・HUDを同時駆動常
- 02WHY知 — なぜ光るのか、3つの役割を手で試す動
- 03MECHANISM理 — 熱を出さない化学発光と数字の対比動
- 04GALLERY観 — 実写マクロが深度を上げながら流れる動
- 05INDEX索 — 発光色と深度帯で名鑑を絞り込む動
- 06HUD常 — 深度リードアウトが4000mに着地する常
藍の海面に、深度0mの見出しが浮かぶ
狙い入口の一枚はdata-depth="0"を宣言する最初のアンカー。「太陽の届かない海で、生き物は自分の光をつくる。」という見出しの下に、もう現在の深度という生きた数字(0m)とバーが小さく置かれている。派手な演出より先に「ここは数字で測られる場所だ」と宣言することで、これから始まる沈降が単なる比喩ではなく、実際に計測される体験だと予告する。
つなぎこの最初の「0m」が、以降すべての章で更新され続ける同じカウンターだと後から気づく。以降の章はこの数字がどう動くかの内訳を解剖する。
一つの深度値が、闇・粒子・HUDを同時に動かす
狙いこのサイトの背骨。各章のdata-depth(0/200/1000/2000〜3000/4000m)をDOM順に並べたアンカー列を作り、ビューポート中央が今どのアンカー間のどこにいるかで水深(m)を線形補間、0..1に正規化した深度という一つの数字にする。この数字だけを、固定Canvasの加算合成パーティクル(200個弱、深いほど"起きる"個体が増え偶発的なフラッシュも増える)と、全画面を覆う暗色ヴェールの不透明度と、右のHUDへ、それぞれ独立に配る。演出を章ごとに作り込むのではなく、入力を一本化してから配る設計だから、闇・光・数字が絶対にズレない。
つなぎこの持続レイヤーは章が切り替わっても消えない。以降の章で扱う内容(なぜ光るか・化学・実写・名鑑)は、すべてこの深度エンジンの上に乗った"具体例"として読める。
なぜ光るのか、3つの役割を手で試す
狙い誘引・防御・交信という3枚のカードに、それぞれ専用のCanvasミニデモを仕込む。疑似餌のように一点が揺れて獲物が寄る「誘う」、腹側の帯がかすかに滅しときどき一閃する「守る」、二点が交互に点滅して信号を送る「探す」。3枚とも同じ加算合成の技法でありながら、動きのリズムだけを変えて意味を切り分けている。IntersectionObserverで画面外では描画ループを止め、無駄なrAFを常駐させない配慮も効いている。
つなぎ言葉で発光の意味を説明する前に、光り方そのものを見せて体で納得させる章。次の「仕組み」で、この光がどう作られるかへ話を進める。
実写マクロが、深度を上げながら流れる
狙い観測機がとらえたという体で、3枚の実写マクロ写真(クラゲ2種＋遠くの一点)を大きく見せる。各写真自体がdata-depth="2000/2600/3000"を宣言する追加アンカーになっていて、写真を眺めているだけで深度エンジンの水深が静かに上がり続ける。キャプションは左寄せ・右寄せ・中央と交互に配置され、視線の置き場を切り替えながら単調さを避ける。パララックスでわずかに画像が沈んで見えるのも、深度が上がっている感覚を裏で支える。
つなぎここで積んだ深度が、次の名鑑セクションで4000mの深海層に到達する。写真という"見て終わり"のコンテンツにも、深度エンジンの目盛りとしての役目を持たせている。
発光色と深度帯で、名鑑を絞り込む
狙いホタルイカからクロホシエソまで9種の発光生物を、発光色5種・深度帯3種のチップで絞り込める索引に。フィルタを押すたびにグリッドを組み直し、該当件数を「N種を表示」で即時反映する。地味に効いているのは、絞り込みでグリッドの高さが変わるたびに深度を再計算していること。名鑑セクションは深度エンジンの最終アンカー(4000m)を担うため、内容量が変わって高さが動いても、深度の意味的な一致を崩さない。
つなぎ入口の「深度0m」から積み上げてきた沈降が、ここで名鑑の最深アンカーに到達する。最後のHUD章で、その到達をあらためて数字として受け取る。
深度リードアウトが、4000mに着地する
狙い右端に固定されたHUDは、章01から静かに動き続けてきた深度値の"読み取り口"。数字(m)・縦の充填トラック・ゾーン名(表層／薄明帯／漸深層／深海層とその英名)の3つが、同じ深度から導かれる。ゾーン名はしきい値(200/1000/3000m)を跨いだ時だけ切り替わるので、常に数字が変わりながらもラベルは節目でだけ更新される、情報の粒度が整理された読み取り体験になる。
つなぎ入口の「現在の深度 0m」という小さな予告が、ここでABYSSAL ZONE・4,000mという着地点に変わる。一つの数字を最初から最後まで配り続けただけで、読了そのものが「深く潜った」という実感に変わる。
TAKEAWAY“一本の数字で全部を動かす”流れの5原則
暗海研究所から取り出せる、進捗・深度・スコアなど「単一の連続値」を持つエディトリアル全般に持ち帰れる設計則。#18 星川プラネタリウムの"深さ=章"の没入と読み比べると、同じ暗い没入でも「速度で沈む(星川)」と「水深という単位で沈む(暗海)」で体感の作り方が違うと分かる。sticky連続クロスフェードで作る#20 滔々 TOU-TOUと並べると、進捗値を"配る"設計の兄弟であることも見えてくる。
入力を一本化してから配る
章ごとに個別のスクロールイベントを仕込むのではなく、まず一つの連続値(ここでは深度0..1)を作り、暗さ・粒子・HUDへそれぞれ独立に配る。演出の数が増えても、入力は1つのままなのでズレようがない。
意味のある単位で正規化する
読了率(%)ではなく「水深m」という現実の単位を主役にする。0..1の裏に必ず「今何m」という具体の数字があることで、抽象的な進捗が体感できる深さに変換される。
装飾コンテンツにも目盛りを持たせる
ギャラリーの写真のような"見て終わり"に見える要素にもdata-depthを宣言させ、深度エンジンの目盛りの一部にする。コンテンツを増やすほど体験の解像度が上がる設計にする。
更新頻度をレイヤーごとに変える
数字は毎フレーム細かく動いても、ゾーン名のようなラベルはしきい値を跨いだ時だけ切り替える。全部を同じ頻度で動かさないことで、情報の重要度に応じた静けさが生まれる。
内容量の変化にも入力の一貫性を保つ
フィルタでグリッド高さが変わるたびに深度を再計算する一手間が、最終アンカーの意味的な一致を守っている。動的に変わるコンテンツを持つなら、進捗計算もその変化に追従させる。