Marker Highlight
マーカーハイライト
Stay focused
どんな動き？
テキストの背景に蛍光マーカーで線を引いたような色帯を、左から右へすっと伸ばして表示するアニメーション。スクロールで要素が画面に入ったタイミングで発火させるのが定番で、日本のサイトで特に頻出する演出のひとつ。重要なキーワードやキャッチコピーの一部を強調したいときに、視線を自然に誘導できる。
よく使う場所
キャッチコピー強調したい単語本文中のキーワード見出し
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Sweep a marker-style highlight color across the text background from left to right.Trigger:
When the element enters the viewport (Intersection Observer).
Initial state:
background-size: 0% 100% (no highlight visible)
Animation:
The highlight color background expands horizontally from left to right behind the text.
Final state:
background-size: 100% 100% (text fully highlighted)
Timing:
duration: 0.7–0.9s
easing: ease-out
Play only once.実装方法の候補
この動きは以下の技術で実装できます。
CSSIntersection ObserverGSAP
別名・関連ワード
Highlight TextMarker UnderlineText Highlight Sweep