テキストグラデーションアニメーション

解説

この部品は、見出しテキストそのものに多色のグラデーションを流し込み、色がゆっくり左右に移動し続けるテキストグラデーションアニメーションです。仕組みは CSS だけで完結します。文字の背景に幅の広いリニアグラデーションを敷き、background-clip:text と -webkit-text-fill-color:transparent で文字の形に切り抜き、background-size を 400% に広げたうえで @keyframes が background-position を動かすことで色が流れて見えます。JavaScript は不要です。

向いている使い方

• ランディングページのファーストビューのキャッチコピー
• キャンペーンや新サービスの告知見出し
• 暗い背景のヒーローセクションで視線を集めたいとき

色は linear-gradient の各カラーを差し替えるだけで世界観を変えられます。速度は animation の秒数で調整し、落ち着かせたいなら長めにします。注意点として、グラデーションのコントラストが低いと文字が読みにくくなるため、背景との明度差を確保してください。動きが苦手なユーザーに配慮し、prefers-reduced-motion でアニメーションを止める分岐を足すと親切です。

使用例・適したシーン

• ヒーローのキャッチコピー
• 見出しの強調
• コーポレートのキービジュアル