スライステキスト（斜め断ち）

text

sliced text / text slice / diagonal cut text

スライステキスト（斜め断ち）

見出しを浅い斜め線で断ち切り、断片を切り口と直角にずらして見せる演出。ずらすのは数pxで足りる。文字を読ませたまま「切れた」印象だけを足せるのが強み。

01 — Demo video

Play live →

02 — Prompt template

見出しに sliced text(斜め断ち)を実装してください。

- 同じテキストを {{slices}} 枚重ね、それぞれ clip-path: polygon() で横帯に切り分ける
- 帯の境界は水平ではなく傾ける。左右の高低差は文字高の {{tilt}}% とする
- 再生時、隣り合う断片を互いに逆向きへ {{offset}}px ずらす。向きは切り口と直角(上下)を主とし、
  切り口に沿った横滑りを 0.8 倍だけ混ぜる
- ずれは {{duration}}s のうち前半30%で最大に達し、残りで 0 に戻す。イージングは cubic-bezier(0.22, 1, 0.36, 1)
- 動かすのは transform のみ。top/left や margin は使わない(リフローさせない)
- 断片は aria-hidden にし、読み上げ用のテキストを1つだけ別に持たせる
- prefers-reduced-motion 時はずらしも走査線も出さず、断片を合わせた静止状態で表示する

見出しに sliced text(斜め断ち)を実装してください。

- 同じテキストを {{slices}} 枚重ね、それぞれ clip-path: polygon() で横帯に切り分ける
- 帯の境界は水平ではなく傾ける。左右の高低差は文字高の {{tilt}}% とする
- 再生時、隣り合う断片を互いに逆向きへ {{offset}}px ずらす。向きは切り口と直角(上下)を主とし、
  切り口に沿った横滑りを 0.8 倍だけ混ぜる
- ずれは {{duration}}s のうち前半30%で最大に達し、残りで 0 に戻す。イージングは cubic-bezier(0.22, 1, 0.36, 1)
- 動かすのは transform のみ。top/left や margin は使わない(リフローさせない)
- 断片は aria-hidden にし、読み上げ用のテキストを1つだけ別に持たせる
- prefers-reduced-motion 時はずらしも走査線も出さず、断片を合わせた静止状態で表示する

見出しに sliced text(斜め断ち)を実装してください。

- 同じテキストを {{slices}} 枚重ね、それぞれ clip-path: polygon() で横帯に切り分ける
- 帯の境界は水平ではなく傾ける。左右の高低差は文字高の {{tilt}}% とする
- 再生時、隣り合う断片を互いに逆向きへ {{offset}}px ずらす。向きは切り口と直角(上下)を主とし、
  切り口に沿った横滑りを 0.8 倍だけ混ぜる
- ずれは {{duration}}s のうち前半30%で最大に達し、残りで 0 に戻す。イージングは cubic-bezier(0.22, 1, 0.36, 1)
- 動かすのは transform のみ。top/left や margin は使わない(リフローさせない)
- 断片は aria-hidden にし、読み上げ用のテキストを1つだけ別に持たせる
- prefers-reduced-motion 時はずらしも走査線も出さず、断片を合わせた静止状態で表示する

03 — Params

slices(断片の数) — 範囲 2〜6 / 初期 2
2枚が最も上品で読みやすい。4枚以上はシュレッダー寄りの荒い表情になる。
tilt(切り口の傾き %) — 範囲 0〜60 / 初期 20
文字高に対する左右の高低差。15〜25%が「わずかに斜め」で品よく決まる。
offset(ずらし量 px) — 範囲 0〜40 / 初期 10
6〜14pxが目安。文字高の1/5を超えると断片が別物に見えて読めなくなる。
duration(断ち切りの時間 s) — 範囲 0.3〜1.6 / 初期 0.7
0.6〜0.8sが自然。ずれきるのは前半3割で、残りは戻りの余韻に使う。

04 — Vocab

clip-path: polygon() — 任意の多角形で要素を切り抜く指定。斜めの帯はこれで作る。border や mask 画像は不要。
切り口の傾き(tilt) — 断ち切り線の角度。度数ではなく「左右の高低差が文字高の何%か」で持つと、文字幅が変わっても見た目が崩れない。
直角ずらし — 断片を切り口と垂直方向へ動かすこと。切れ目が開いて見えるので「切った」と読ませられる。平行にずらすと段差にしか見えない。
走査線(sweep line) — 切り口に沿って一度だけ走る細い光の線。刃が通った瞬間を示す補助演出で、scaleX(0→1)で伸ばす。

05 — NG → OK examples

言い方: 「「見出しをスライスしたみたいに切って動かして」」

なぜNG: 「スライス」だけでは切る向き・枚数・ずらし量が決まらない。文字が真っ二つに分かれたまま戻らない実装や、単なるグリッチのRGBずれが返ってくることが多い。

言い方: 「「見出しを clip-path: polygon() で2枚の斜め帯に分け、上下を逆向きに10pxずらして0.7sで戻す。傾きは文字高の20%、transformのみ」」

なぜOK: 切り分け方(polygon)・枚数・傾き・ずらし量・戻す時間まで数値で指定している。「戻す」を明示しないと、ずれっぱなしの静止デザインとして実装されがち。