スクロール連動

[ ] のところを書きかえて使ってください。英語のほうが伝わりやすいツールもあります。

ページの上に、スクロールした量に合わせて伸びる読了バーをつけてください。CSS の animation-timeline: scroll() を使い、transform: scaleX で伸ばす。対応していないブラウザと、動きを減らす設定の人には、バーを出さないでください。

Add a reading progress bar at the top that grows as the page scrolls. Use CSS animation-timeline: scroll() and grow it with transform: scaleX. Hide the bar in browsers without support and for people who prefer reduced motion.

ひとりAIラボ作成のテンプレートです（各社の公式ガイドの文ではありません）。

確認日 2026年11月2日。公式ガイドのページを開いて、本文にこの言葉（英語）が出てくるかを見ました。「公式記載なし」は、出典のページに見当たらなかったという意味です。

• animation-timeline は、まだ一部の主要ブラウザで使えません（MDN の表示は Limited availability）。使えないときの表示も用意します。^[7]
• 操作をきっかけに起きる動きは、なくても困らないなら、止められるようにします（WCAG 2.3.3、レベルAAA）。^[8]

1. 1.v0 Docs（トップ）（外部サイト、新しいタブで開く）https://v0.app/docs
2. 2.v0 Docs「Text Prompting」（外部サイト、新しいタブで開く）https://v0.app/docs/text-prompting
3. 3.v0 Docs「Design Mode」（外部サイト、新しいタブで開く）https://v0.app/docs/design-mode
4. 4.Lovable Docs「Prompting best practices」（外部サイト、新しいタブで開く）https://docs.lovable.dev/prompting/prompting-one
5. 5.Lovable Docs「Prompt library」（外部サイト、新しいタブで開く）https://docs.lovable.dev/prompting/prompting-library
6. 6.MDN「CSS scroll-driven animations」（外部サイト、新しいタブで開く）https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll-driven_animations
7. 7.MDN「animation-timeline」（外部サイト、新しいタブで開く）https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline
8. 8.W3C「Understanding SC 2.3.3: Animation from Interactions」（外部サイト、新しいタブで開く）https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html