文字スクランブル
ランダム文字がパラパラ変化しながら目的の文字列に次第に確定していく。ボタンで再生。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- 見出しの切替をデジタルな演出で見せる
- ボタン操作で単語を次々に確定させる場面
- テック系サイトの短い英単語見出し
- 避ける場面
- 読ませたい本文・日本語の長文
- 自動で繰り返す装飾（中間文字が読まれる）
- 構成要素
- 見出し
- ランダム文字の中間表示
- 再生ボタン
- 持っている状態
- 通常
- ホバー
- フォーカス
- 無効
- キーボード
Tab で「再生」ボタンへ、Enter／Space で次の単語へスクランブル。再生中はボタンが無効
- 支援技術
ボタンに aria-label「スクランブルを再生」。動く文字は aria-hidden で、確定する単語だけを sr-only の aria-live で通知。reduced-motion では即座に確定文字を表示
- 動き
40ms 刻みでランダム文字を差し替え、左の文字から 160ms ごとに確定（6文字で約 1s）。文字が「決まる」瞬間を見せる
デザインの要点
- 確定は左から 160ms（4 回転）ごと。全文字が同時に決まると「差し替え」に見え、順に決まると「解読」に見える
- 差し替えは 40ms 刻み。60fps の 2〜3 フレームごとで、これより速いと文字が読めず灰色の帯になる
- 等幅フォント（Courier）と letter-spacing 0.1em。可変幅だとランダム文字の幅で単語が左右に揺れる
- 中間のランダム文字は支援技術に読ませない。確定した単語だけを aria-live で 1 回通知する
コード（コピーして使えます）
<div class="sc-wrap">
<p class="sc-text" id="scText" aria-hidden="true">DESIGN</p>
<p class="sr-only" id="scSr" aria-live="polite">DESIGN</p>
<button class="sc-btn" id="scBtn" aria-label="スクランブルを再生">再生</button>
</div>