ヒーローセクションの動き6パターン｜業種別の選び方とAI指示文

「トップ、もうちょっと動きがほしいんですよね」とクライアントに言われる。参考に届いたのは、文字がばらばらに舞って、背景に動画が流れるサイトです。

でも、作っているのは税理士事務所のサイトだったりしますよね。

結論: 動きは業種に合うものを1つだけ、軽い作り方で入れる。公開前に表示速度と「動きを減らす設定」を確認する。

• 迷っているなら → フェードアップ1つから始める（どの業種にも合って、いちばん軽い）
• 世界観を見せたいなら → 文字の分割表示か背景動画を1つだけ足す
• 公開前に → LCP 2.5秒以内と、OSの「動きを減らす」設定で止まるかを確認する

この記事の目次

1. ヒーローの動きが重くなる原因は？3段階で見る
2. ヒーローの動きは何種類ある？6パターンの早見表
3. うちの業種にはどの動きが合う？
4. アニメーションを入れるとSEOや表示速度は落ちる？
5. AIにヒーローの動きを作らせる指示文は？
6. スクロール連動はCSSだけで作れる？
7. 動きが苦手な人への配慮は必要？
8. 公開前に何を確認すればいい？
9. よくある質問
10. この記事のまとめ

ヒーローの動きが重くなる原因は？3段階で見る

重さは「何を動かすか」でほぼ決まります。

Googleのweb.devは、アニメーションに次の2つを使うよう勧めています。

• transform（移動・拡大縮小・回転）
• opacity（透明度）

比較例では、top/leftで動かした版はフレームの50%を落としました。transform版は1%です。

同じ「下からふわっと出る」でも、書き方ひとつで軽くも重くもなる。AIに頼むときも、ここを指定するかで仕上がりが変わります。

ヒーローの動きは何種類ある？6パターンの早見表

迷ったら左から選んでください。右に行くほど派手になり、確認する項目も増えます。

← 表は横にスクロールできます →

選び方の基準：重さは、web.devの「transformとopacityは速い」「動画や画像はLCPの対象」という説明をもとに、編集部が目安として分けました。実際の数値は素材とコードで変わります。

個人的には、①だけで足りる案件が大半だと見ています。印象を決めるのは「何が出るか」より「どの順で出るか」です。

見出し→サブコピー→ボタンの順に少しずつずらす。それだけで「ちゃんと作ってある」感じが出ます。

うちの業種にはどの動きが合う？

決め手は「お客さんがヒーローで何を確かめたいか」です。

← 表は横にスクロールできます →

冒頭の税理士事務所なら、表の1行目。参考サイトがどれだけ派手でも、①で十分です。

アニメーションを入れるとSEOや表示速度は落ちる？

影響が出るのは主に「ヒーローの一番大きな要素が出るまでの時間」です。

この時間をLCP（ページで一番大きい画像や文字が出るまでの時間）と呼びます。web.devの目安は2.5秒以内。4.0秒を超えると「遅い」扱いです。

背景動画や大きな写真も、このLCPの対象になります。

地味に見落としがちなのが、見出しをopacity: 0で隠しておく作り方です。Chromium系のブラウザは、透明な要素をLCPの対象から外します。隠す時間は短くして、最初から少しだけ見せておくのが無難です。

← 表は横にスクロールできます →

AIにヒーローの動きを作らせる指示文は？

4点を書き添えるだけで、「重い・止まらない」コードが返ってくることが減ります。

下の共通条件は、どのパターンの指示文にも最後にそのまま貼ってください。

【共通条件】動かすのは transform と opacity だけにしてください。
prefers-reduced-motion: reduce のときは動きを止め、最終状態をそのまま表示してください。
5秒を超えて動き続けるものには、一時停止ボタンを付けてください。
点滅は1秒に3回を超えないようにしてください。

① フェードアップ
ヒーローの見出し・サブコピー・ボタンを、上から順に0.15秒ずつずらして、
下から16pxだけ上がりながら表示してください。CSSだけで。各0.6秒。

② 文字の分割表示
見出しを1文字ずつ0.03秒ずつずらして下から出してください。
CSSとJSだけで、ライブラリは使わずに。
見出し全体にaria-labelで元の文を付け、分割した文字はスクリーンリーダーから隠してください。

③ 背景の流れ
背景写真を12秒かけて1.0倍から1.08倍へゆっくり拡大してください（transform: scale）。
画像はimg要素で置き、object-fit: coverで。

④ 背景動画
背景にMP4動画を autoplay loop muted playsinline で流してください。
poster画像を指定し、文字が読めるよう半透明の黒を重ねてください。再生と一時停止を切り替えるボタン付きで。

⑤ スクロール連動
スクロールに合わせて背景が文字よりゆっくり動くパララックスを、
CSSの animation-timeline: scroll() で作ってください。
対応していないブラウザでは動かさず、普通に表示されるように @supports で分けてください。

⑥ マウス追従
カーソル位置に合わせて背景の図形が最大10pxだけ動くようにしてください。
タッチ端末（hover: none）では動かさないでください。

②をライブラリで作るなら、GSAPのSplitTextが手堅い選択です。

← 表は横にスクロールできます →

SplitTextは標準設定（aria: "auto"）で、元の文をaria-labelに入れ、分割した文字を読み上げから外してくれます。自前で分割すると、ここを書き忘れがちです。すると「ハ・ジ・メ・マ・シ・テ」と1文字ずつ読まれてしまいます。

この配慮が最初から入っている点が、個人的には一番ありがたいところです。

コードを書かないなら、Studioでも動きを付けられます。

Studioの公式ブログでは、次の3通りが紹介されています。

• 基本機能（ホバー時・出現時のスタイル）
• LottieFiles連携
• Embed（自作コードの埋め込み）

あなたがStudioで作っているなら、①はノーコードで済ませる。②⑤は、上の指示文で作ったコードをEmbedに入れる。この分け方が現実的です。

スクロール連動はCSSだけで作れる？

作れます。前提は「動かない環境でも普通に読める」作りにしておくことです。

← 表は横にスクロールできます →

Can I useでの世界の利用率は87.84%でした。ただ、MDNのFirefoxの実験的機能ページでは、正式版はまだ標準で無効の扱いです。

2つの情報源で見え方が違う。だから@supportsで分けておきます。そうすれば、どちらに転んでも崩れません。

Safari 26の対応は大きな変化だと感じました。「iPhoneで動かないからJSで」となっていた場面の多くが、CSSで済むようになります。

動きが苦手な人への配慮は必要？

必要です。しかもCSS数行で済みます。

← 表は横にスクロールできます →

prefers-reduced-motionは、OSで動きを減らす設定をしている人を見分ける仕組みです。2020年1月以降、すべての主要ブラウザで使えます。

MDNは、大きな拡大・縮小やパン（画面を横に流す動き）に注意を促しています。前庭障害（めまいの原因になる、体のバランス感覚の障害）の症状を引き起こしうるからです。

WCAG 2.2（Webアクセシビリティの国際的な指針）のレベルAも見ておきましょう。自動で始まり5秒を超えて続く動きには、一時停止・停止・非表示の手段が求められます。背景動画や、ずっと流れる文字帯が当てはまります。

公開前に何を確認すればいい？

次の6項目を通れば、動きが原因で困ることはまずありません。

• PageSpeed InsightsでLCPが2.5秒以内か（スマホ表示も）
• 見出しを長時間opacity: 0で隠していないか
• OSの「動きを減らす」をオンにして、動きが止まるか
• 5秒を超えて動くものに停止ボタンがあるか
• iPhoneの実機で背景動画が自動再生されるか（mutedとplaysinline）
• 点滅が1秒に3回を超えていないか

よくある質問

Q. ヒーローセクションとファーストビューは同じ？ ファーストビューは「スクロールせずに見える範囲」です。ヒーローセクションは、そこに置く見出し・画像・ボタンの部品を指します。現場では同じ意味で使われることも多いです。

Q. 背景動画がスマホで再生されません。 音を消すmutedと、Safariで必要なplaysinlineを付けてください。MDNによると、音が出ない動画は多くの場合、自動再生が許可されます。ただしブロックの条件はブラウザごとに違い、Firefoxは設定で消音動画も止められます。

Q. スライダー（自動で切り替わる画像）は入れていい？ 入れられます。ただ、自動で送るスライダーは、WCAGの「自動更新される情報」に当たりえます。自動更新には「5秒の例外」がありません。

送る時間に関係なく、一時停止・停止・非表示、または切り替えの間隔を調整できる手段を付けてください。迷ったら、1枚の画像＋フェードの方が軽く、作りも単純です。

この記事のまとめ

• ヒーローの動きは、業種に合うものを1つ選べば足りる
• 軽さは「transformとopacityだけで動かすか」で決まる
• 背景動画や写真もLCPの対象。2.5秒以内が目安
• AIへの指示文には「動かす対象・動きを減らす設定・停止ボタン・使う技術」の4点を入れる
• 次にやること：①の指示文に共通条件を足してAIに貼り、自分のヒーローで試してみてください

この記事は、Webサイトの動く部品集 AETHER Motion の制作チームが書いています。