テキストの動き

WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。

その中でも特に勉強になったコードを紹介します。

コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。

あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！

テキストの動き

見出しの登場シーンを演出する、テキストアニメーションの16種デモ集です。1文字ずつバラバラに現れる、方向別に流れる、タイピング風、背景色がスイープして現れる――ブランドサイトやLPのファーストビューで使われる定番の語彙を一通り試しています。

テキスト演出は「読ませたい言葉に視線を集める」ための技術です。動き自体が主役になってしまうと本末転倒、というバランス感覚も含めて学べる分野です。

「テキストの動き」は見出しやキャッチフレーズといった「伝えたい言葉」を印象付けるために使用すると効果的です。

バラバラに出現

流れるように出現（左から右）

流れるように出現（右から左）

流れるように出現（上から下）

流れるように出現（下から上）

アルファベットがランダムに変化して出現

回転

ランダムに出現

じわっと出現

タイピング風に出現

背景色が伸びて出現（左から右）

背景色が伸びて出現（右から左）

背景色が伸びて出現（上から下）

背景色が伸びて出現（下から上）

滑らかに出現

ほのかに光りながら出現

実務メモ（2026年追記）

技術的に注意したいのは、1文字ずつ動かすために文字をspanで分割する手法の副作用です。分割された見出しは、スクリーンリーダーの読み上げやコピー&ペーストを壊すことがあるため、要素側にaria-labelで全文を持たせるのが現在の作法です。また「JSが動くまで文字を非表示にする」実装は、JSが失敗すると見出しが永遠に出ない事故につながります。初期状態は表示にしておき、演出はあくまで上書きで――守りを固めるほど、攻めた演出が安全になります。

• H1など最重要の見出しは速く（0.5秒以内に読み始められる状態へ）
• タイピング風など時間のかかる演出は、スキップできる程度の短さに
• prefers-reduced-motionでは即時表示に切り替える
• 基本の出現パターンはよく使う動きが土台になります

次回の予定

直感的に作成できるジェネレータを使用したGIFアニメ、PNGアニメ、SVGアニメの「イラスト・オブジェクトの動き」に挑戦してみます ＼＼٩( ‘ω’ )و //／／