FLOW ANATOMY #20 — 1サイトを縦に解剖する
滔々 TOU-TOUは、
なぜ写真を止めて工程を送るのか。
技法は『点』、サイトは『線』。架空の漆工房『滔々／TOU-TOU』は、実物の見出しで「木を、漆で124日かけて包む。」と宣言する工程記録です。24の工程を木地・下地・塗り・呂色という4枚の"層"に畳み込み、写真をスクロールで次々と入れ替えるのではなく1枚をstickyで画面に留めたまま、工程の文章だけを静かに送ります。仕掛けは一つの連続値。「stickyが実際に貼り付いている区間」だけを取り出した進捗0..1(--lp)を自作し、そこから4章ぶんの連続進捗cp(0..4)を出す。この一本の数字だけで、写真の溶暗・本文の送り・右レールのドット強調を同時に動かします。解説をスクロールすると、実物のライブプレビューが同じ場所まで自動でついてきます。
BLUEPRINT流れの設計図 — 章の役割と緩急
入口(木を、漆で包む)→ヘッダーの読了バー→sticky工程エンジン(--lp)→写真と本文の非対称クロスフェード→漆の化学と数字→朱と黒の二色→24工程の履歴書。動くのは主に工程セクションの写真・本文・レールだけで、素材・色・履歴書は静かなreveal止まり。全篇を通して湿度の低い紙色(#efe9dd)の明るい静けさを保ち、暗い没入系の既存作品(暗海・星川)とは色調も温度も別人格です。
- 00HERO起 — 紙色の明るい静けさに、椀の写真が浮かぶ動
- 01PROGRESS常 — ヘッダーの読了バーが全篇でscrollYを刻む常
- 02ENGINE常 — sticky区間だけを0..1にする--lpが背骨になる常
- 03FRAMES動 — 写真は広い対称窓、本文は狭い非対称窓で入れ替わる動
- 04MATERIAL知 — 乾くのに湿気がいる、という逆説を数字で動
- 05COLOR観 — 朱と黒、顔料と磨きという別の仕組み動
- 06RECORD記 — 24工程・124日を履歴書として読み切る動
紙色の明るい静けさに、椀の写真が浮かぶ
狙い第一画面は黒でも藍でもなく、地の粉の紙色(#efe9dd)を基調にした明るい静けさ。椀の写真はdata-ck-parallax="0.12"でごくわずかに視差移動し、キッカー・見出し・リードがdata-ck-revealで順に淡くフェードインする。右下の「工程を見る」リンクはカーソルにdata-ck-magneticで吸い寄せられる。派手な演出を持ち込まず、明るい紙の上に「これは記録の場所だ」と静かに宣言する。
つなぎこの一枚が「木を、漆で124日かけて包む。」という結論を先に置く。以降の章は、その124日がどう積み上がるかの内訳を、写真と数字で解剖していく。
ヘッダーの読了バーが、全篇でscrollYを刻む
狙いヘッダー下の細い一本(#prog-fill)は、scrollY / (scrollHeight - clientHeight)をそのまま幅に変換するだけの、最も単純な進捗表示。次章から始まる工程エンジンの--lp(sticky区間だけの進捗)とは別物で、こちらはページ全体のread progress。工程セクションのように"止まって送る"演出は一切なく、ただ淡々とスクロール量に比例して伸びる。ナビの4項目は狭い画面では2つに絞られ、リンクはホバーで下線が朱色に染まる。
つなぎこの単純な全体進捗があるからこそ、次章の「sticky区間だけの特別な進捗値」との違いが際立つ。全体を測る物差しと、一区間だけを測る物差しを、サイトは意図的に使い分けている。
sticky区間だけを0..1にする--lpが、背骨になる
狙いこのサイトの背骨。共有基盤craft-kitが汎用的に提供するdata-ck-progressの--p(要素の入り〜抜け全体を0..1にする)を、この工程セクションだけはあえて使わない。それだと最後の章の滞留時間が、stickyが外れる直前で極端に短くなってしまうから。かわりに.proc-pinのgetBoundingClientRect()から「pin.topが0になった瞬間から(pin.height − vh)だけスクロールする間」だけを自前で0..1に切り出した--lpを作り、4倍してcp(0..4の連続値)にする。この一本の値だけを、写真・本文・レールへ配る。
つなぎ次章の「写真と本文の非対称クロスフェード」は、すべてこのcpの上に乗った"配り先"にすぎない。入力を自作してから配る、という一手間が背骨になっている。
写真は広い対称窓、本文は狭い非対称窓で入れ替わる
狙い4枚の工程写真(木地・下地・塗り・呂色)は、cpから求めた重みで隣り合う2枚が同時に半透明で重なる広い対称窓(CF_PHOTO=0.24)でクロスフェードする。額装のような静かな溶暗で、画像はほんの少し(1.035→1.0)ズームアウトしながら定着する。だが本文を同じ窓で重ねると、境界の瞬間に前後の段落が両方50%で表示され読めなくなる(実機検証で判明)。そのため本文だけは「前の段落が0まで消えてから、次が0から現れる」非対称窓(TEXT_FADE=0.16)にし、章の中を進むほど下→上へtranslateYで22px静かに送る。右レールのドットは写真と同じ広い窓の重みで追従し、いま画面を占めている工程を示す。
つなぎ同じ一本のcpから、写真・本文・レールという性質の違う3つの表現へ、それぞれ別のカーブで重みを作って配る。この"カーブの使い分け"が、単なる画像スライダーと一線を画す部分。
乾くのに湿気がいる、という逆説を数字で
狙い「ペンキと違い、漆は蒸発して乾くのではない」という一文のあと、湿度70〜85%・室温約25℃という二本のゲージバーを置く。数値はdata-count-toとIntersectionObserverで、画面に入った瞬間に0からイーズアウトで駆け上がる。24(総工程数)・124(のべ日数)・7(室で寝かせる回数)の3つの統計も同じ仕組みだが、こちらはdata-ck-staggerの子要素に自動で--iを振って時差表示する。図解や写真を増やさず、数字二段+ゲージ二本だけで「乾く」の常識を裏返す。
つなぎ素材の逆説を数字で腹落ちさせたところで、次章は色という、もう一つの逆説(顔料でなく磨きで生まれる黒)へ進む。
朱と黒、顔料と磨きという別の仕組み
狙い二枚のカードを左右に並べる。左の「朱」は弁柄という酸化鉄の顔料を生漆に練り込んだ色で、data-ck-reveal="left"で横から現れる。右の「黒」は顔料ではなく、鉄分と反応させた漆そのものの色で、仕上げの「呂色」という磨き工程がそのまま色の名になった逸話つきでdata-ck-reveal="scale"により中央から拡大して現れる。写真の縦横比もあえて変え(朱は横位置のマクロ、対の一枚は縦位置)、単調な2カラムグリッドに見えないようにしている。
つなぎ「乾くのに湿気がいる」「磨いて出す黒」と、この工房の常識は二重に逆説的。最後の章では、その逆説を積み重ねた124日を、年表として一気に読み切る。
24工程・124日を、履歴書として読み切る
狙い工房が椀の底裏に控えるという工程表を、そのまま24行の年表として書き出す。木取り2日から検品・銘3日まで、各行がdata-ck-revealで個別に現れながら積み上がり、最後に「計 完成 124日」で締める。フッターには屋号・所在・創業・工程・所要・主な仕事を定義テーブルで並べ、木地と布着せの2枚がローカル画像生成による補完である旨の開示も忘れず添える。
つなぎ入口の「木を、漆で124日かけて包む。」という一文が、ここで24行・124日という具体の記録に変わる。sticky工程エンジンが"体感"させた時間の流れを、履歴書が最後に"記録"として定着させる。
TAKEAWAY“写真を止めて、本文を送る”流れの5原則
滔々 TOU-TOUから取り出せる、工程記録・レシピ・製造プロセスなど「時間をかけて積み上がるもの」を扱うエディトリアル全般に持ち帰れる設計則。一本の連続値を作ってから配る点は#19 暗海研究所 ABYSS LABの深度エンジンと同じ設計思想の兄弟だが、暗海が「一つの数字を全レイヤーへ同じ重みで配る」のに対し、滔々は「写真とテキストで別のフェード窓を使い分ける」ところに違いがある。読み比べると、同じ"単一値駆動"でも配る相手の性質によってカーブの設計まで変える必要があると分かる。
汎用の進捗値をそのまま使わない
共有基盤の--pのような汎用進捗があっても、区間や要件が違うなら自前で計算し直す。ここでは「stickyが実際に貼り付いている区間」だけを0..1にする--lpを自作し、最後の章の滞留時間が短くなる問題を避けた。
写真とテキストは別のカーブで良い
同じcpから重みを作っても、写真は境界をまたいで重なる対称窓、テキストは重ならない非対称窓、と受け取り方を変える。全部を同じ窓で処理すると、テキストのように"重なると読めなくなる"表現は破綻する。
常時ではなく、区間限定の背骨を持たせる
読了バー(ページ全体)とsticky工程の--lp(1セクションだけ)という、粒度の違う2つの進捗を併存させる。全体を測る物差しと、見せ場を測る物差しを混同しない。
フォールバックは"消す"側で丁寧に
coarse pointer・reduced-motion・低い高さではCSSがstickyを解いて縦積みに戻すが、JSが残したinline styleを消し忘れると表示が壊れる。動的にモードが切り替わりうる条件は、開始/停止の両方を面倒がらずに書く。
逆説を数字と工程で二重に裏付ける
「乾くのに湿気がいる」「黒は磨いて出す」という直感に反する事実を、ゲージ・カウントアップ・履歴書という異なる見せ方で複数回裏付ける。一度の説明で終わらせず、角度を変えて念押しすると記憶に残る。