カーブテキスト — 動きの伝え方辞典

scroll

text on path / curved text scrub

カーブテキスト

曲線に沿って組まれた文字列が、スクロールに合わせてその線の上を流れていく見出し演出。動かすのは字形ではなくパス上の「位置」だけなので、弧をどれだけ深くしても文字が歪まず、行送りも崩れない。

01 — Demo video

Play live →

02 — Prompt template

見出しに text on path（スクロール連動のカーブテキスト）を実装してください。

- SVGを1枚置き、defs に2次ベジェのパス（両端は画面外まで伸ばす／制御点のYを {{curve}}px 持ち上げて弓なりにする）を定義する
- 見出しは <text><textPath href="#パスのid" text-anchor="start"> で組み、パスに沿わせる
- スクロール進捗（0→1）を startOffset の % に写像し、70% から (70 - {{travel}})% まで動かす。単位は必ず%にしてパス長の実測に依存させない
- 開始は 0% ではなく「見出しの先頭が画面端に掛かる位置」(ここでは70%)にする。空の弧だけが固定表示される瞬間を作らないため
- セクションは position: sticky で画面に固定し、スクロール距離はステージ高の {{length}}

見出しに text on path（スクロール連動のカーブテキスト）を実装してください。

- SVGを1枚置き、defs に2次ベジェのパス（両端は画面外まで伸ばす／制御点のYを {{curve}}px 持ち上げて弓なりにする）を定義する
- 見出しは <text><textPath href="#パスのid" text-anchor="start"> で組み、パスに沿わせる
- スクロール進捗（0→1）を startOffset の % に写像し、70% から (70 - {{travel}})% まで動かす。単位は必ず%にしてパス長の実測に依存させない
- 開始は 0% ではなく「見出しの先頭が画面端に掛かる位置」(ここでは70%)にする。空の弧だけが固定表示される瞬間を作らないため
- セクションは position: sticky で画面に固定し、スクロール距離はステージ高の {{length}}

見出しに text on path（スクロール連動のカーブテキスト）を実装してください。

- SVGを1枚置き、defs に2次ベジェのパス（両端は画面外まで伸ばす／制御点のYを {{curve}}px 持ち上げて弓なりにする）を定義する
- 見出しは <text><textPath href="#パスのid" text-anchor="start"> で組み、パスに沿わせる
- スクロール進捗（0→1）を startOffset の % に写像し、70% から (70 - {{travel}})% まで動かす。単位は必ず%にしてパス長の実測に依存させない
- 開始は 0% ではなく「見出しの先頭が画面端に掛かる位置」(ここでは70%)にする。空の弧だけが固定表示される瞬間を作らないため
- セクションは position: sticky で画面に固定し、スクロール距離はステージ高の {{length}}

03 — Params

curve(弧の深さ px) — 範囲 0〜160 / 初期 90
パスがどれだけ弓なりに反るか。60〜110pxが「曲がっている」と読める範囲。0で直線送りになり、140px超は端の文字が縦に近づいて読みにくくなる。
travel(送り量パス長に対する%) — 範囲 60〜220 / 初期 110
スクロールを最後まで送ったときに文字列がパス上を進む距離。頭出し位置(startOffset 70%)から始めるので、110%で「先頭が右に掛かった状態」から「文末が左へ抜ける寸前」までを通しで見せられる。130%を超えると両端で見出しが完全に画面外に出て、文字の居ない«間»ができる。60%台では弧を渡りきらない。
length(スクロール距離ステージ高の倍数) — 範囲 1〜6 / 初期 4
この送りに何画面ぶんのスクロールを充てるか。3〜4倍で「読みながら送る」速度になる。1.5倍以下だと一瞬で流れ去り、5倍超はスクロールが重く感じる。スマホは画面が低いぶん同じ倍数でも速くなるので、ブレークポイントごとに見直す。

04 — Vocab

textPath — SVGのtextをpathに沿わせる要素。href で参照したパスの上に文字が流し込まれ、字形の向きはパスの接線に自動で追従する。
startOffset — 文字列をパスの始点から何%の位置に置くかの指定。ここだけを動かすと、組版はそのままに文字がパス上を送られる。
text-anchor — startOffset を文字列のどこに合わせるかの揃え。start なら先頭、middle なら中央。送りは start、静止表示は middle が扱いやすい。
pin(ピン留め) — セクションを画面に固定したままスクロール量だけを進める手法。送りの尺はこのピンの高さで決まるので、ブレークポイントごとの高さ指定が速度の設計そのものになる。

05 — NG → OK examples

言い方: 「「見出しをカーブさせて、スクロールで動かして」」

なぜNG: 「カーブ」がCSSのrotateによる1文字ずつの傾け実装で返ってくることが多く、字間が揃わず弧も歪む。送りの尺（何画面ぶんのスクロールか）も決まらないので、一瞬で流れ去るか、延々スクロールしても終わらないかのどちらかになる。

言い方: 「「SVGのtextPathで見出しを2次ベジェに沿わせ、スクロール進捗をstartOffsetの70%→-40%に写像。セクションはstickyでステージ高4倍ぶん固定。更新はstartOffset属性のみ、reduced-motion時は50%で静止」」

なぜOK: 組版はtextPathに任せる・動かすのはstartOffsetだけ、と実装方式を先に固定している。送りの範囲（%）と尺（4倍）が数値で入っているので速度が一意に決まる。開始を0%ではなく70%に置いている点も効いていて、ピンに入った瞬間から見出しが読める。