パララックス

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

[ヒーローの背景]に、控えめなパララックスをつけてください。背景だけを、手前の半分の速さで動かす。CSS の animation-timeline を使い、対応していないブラウザと、動きを減らす設定の人には、背景をふつうに表示してください。

Add subtle parallax to [the hero background]: move only the background at half the speed of the foreground. Use CSS animation-timeline, and show a normal, static background in browsers without support and for people who prefer reduced motion.

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

3つのガイドとも、パララックスという言葉は見当たりませんでした。W3C の WCAG の解説と、web.dev の prefers-reduced-motion の記事には出てきます。^[14][15]

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

• 大きく拡大したり、大きな物を横に流したりする動きは、前庭障害（内耳の障害）のある人に負担になります。パララックスやズームで、乗り物酔いのようになる人もいます。^[11][15]
• 操作をきっかけに起きる動きは、なくても困らないなら、止められるようにします（WCAG 2.3.3、レベルAAA）。パララックスは、なくてもよいことが多い動きの例として名指しされています。^[14]
• animation-timeline は、まだ一部の主要ブラウザで使えません（MDN の表示は Limited availability）。使えないときの表示も用意します。^[10]
• will-change は最後の手段です。たくさんの要素につけると、メモリを使いすぎることがあります。^[16]

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「Using CSS animations」（外部サイト、新しいタブで開く）https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations
7. 7.MDN「Using CSS transitions」（外部サイト、新しいタブで開く）https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions
8. 8.MDN「View Transition API」（外部サイト、新しいタブで開く）https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API
9. 9.MDN「CSS scroll-driven animations」（外部サイト、新しいタブで開く）https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll-driven_animations
10. 10.MDN「animation-timeline」（外部サイト、新しいタブで開く）https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline
11. 11.MDN「prefers-reduced-motion」（外部サイト、新しいタブで開く）https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
12. 12.MDN「steps()」（外部サイト、新しいタブで開く）https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function/steps
13. 13.MDN「position」（外部サイト、新しいタブで開く）https://developer.mozilla.org/en-US/docs/Web/CSS/position
14. 14.W3C「Understanding SC 2.3.3: Animation from Interactions」（外部サイト、新しいタブで開く）https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html
15. 15.web.dev（prefers-reduced-motion の記事）（外部サイト、新しいタブで開く）https://web.dev/articles/prefers-reduced-motion
16. 16.MDN「will-change」（外部サイト、新しいタブで開く）https://developer.mozilla.org/en-US/docs/Web/CSS/will-change