SWELLで作ったサイトに、スクロールに合わせて見出しや画像がふわっと現れる演出を加えたいと感じることはありませんか。動きを少し加えるだけでも、サービスの特徴や伝えたい順序が見えやすくなり、サイト全体の印象を整えやすくなります。
ただし、SWELLのページ表示時アニメーションと、要素ごとのスクロールアニメーションは別の仕組みです。目的を整理せずにプラグインやコードを追加すると、思った動きにならない、スマートフォンで表示が遅い、編集画面で設定項目が見つからないといった迷いにつながります。
この記事では、SWELLで使えるアニメーションの違いを整理し、初心者向けのプラグイン設定と、CSS・JavaScriptによる実装方法を順番に解説します。まずは小さな範囲で試し、読みやすさを保ちながら自分のサイトに合う演出を見つけてみてください。
SWELLのスクロールアニメーションは3つの方法から選ぶ
最初に押さえたいのは、SWELL標準の動き、プラグインによる動き、独自コードによる動きの違いです。どこを動かしたいのか、更新作業を誰が担当するのかを整理すると、必要以上に複雑な方法を選ばずに済みます。
SWELL標準機能はページ表示時の演出に向いている
SWELLには、ページを開いたときの表示やメインビジュアルに動きを付ける機能があります。例えば、ページ全体がふわっと表示される演出や、メインビジュアルの画像がゆっくり拡大する演出です。サイト全体の第一印象を柔らかくしたい場合は、まず標準設定を確認するとよいでしょう。
一方で、記事をスクロールしたときに個別の見出し、画像、ボタンを順番に表示する機能とは用途が異なります。「画像が画面内に入った瞬間だけ動かしたい」という場合は、プラグインまたは独自コードが必要です。標準機能だけで何でも設定できると考えないことが、迷わないための第一歩です。
初心者はブロック対応プラグインを使うと設定しやすい
コードを編集せずに要素ごとの動きを付けたい場合は、ブロックエディター対応のアニメーションプラグインが扱いやすい方法です。代表例のBlocks Animationは、有効化するとブロック設定のサイドバーにアニメーション項目が追加され、対象ブロックを選んで効果を指定できます。
見出しや画像をクリックし、フェードインなどの種類、速度、遅延時間を選ぶ流れなので、サイト制作を始めたばかりでも操作を把握しやすいでしょう。ただし、WordPress本体、SWELL、プラグインの対応状況は更新で変わります。導入前にWordPress.orgのプラグインページで必要なWordPressバージョン、最終更新日、サポート情報を確認してください。
細かく調整したい場合はCSSとJavaScriptを使う
表示位置、移動距離、速度、対象範囲を細かく決めたい場合は、CSSとJavaScriptによる実装が向いています。CSSで最初の透明度や位置、表示後の状態を定め、JavaScriptで要素が画面内に入ったタイミングにクラスを追加する仕組みです。
例えば、「画像は下から20pxだけ移動させる」「ボタンは0.2秒遅らせる」といった調整ができます。その反面、コードの記述ミスや他の機能との競合が起きたときに、自分で原因を切り分ける必要があります。個人や小規模サイトでは、まずプラグインで必要性を確かめ、自由度が不足した段階で独自コードへ移る方法が現実的です。
| 方法 | 向いている目的 | 難易度 | 注意点 |
|---|---|---|---|
| SWELL標準設定 | ページ全体やメインビジュアルの演出 | 低い | 要素ごとのスクロール表示とは異なる |
| ブロック対応プラグイン | 見出しや画像を手軽に動かす | 低い | 対応バージョンと競合を確認する |
| CSS・JavaScript | 速度や位置を細かく調整する | 高い | バックアップと保守が必要になる |
具体例として、サービス紹介ページの写真を3枚だけフェードインさせたい場合は、プラグインから始めると便利です。サイト全体で共通する独自演出を長期運用したい場合は、子テーマやコード管理の体制を整えたうえで独自実装を検討します。
- ページを開いた直後の演出はSWELL標準設定を確認する
- 要素ごとのスクロール表示はプラグインか独自コードを使う
- 初心者は設定画面で操作できるプラグインから試す
- 細かな制御や長期運用には保守できる体制が必要になる
プラグインでスクロールアニメーションを設定する手順
3つの方法の違いがわかったところで、まずはコードを書かずに設定する流れを見ていきます。公開中のページを一度に変更せず、テスト用の固定ページや下書きで動きを確認すると安心です。
インストール前にバックアップと動作環境を確認する
WordPressの管理画面から新しいプラグインを追加する前に、サイトのバックアップを取得します。少なくともデータベースとwp-content内のファイルを復元できる状態にしておくと、表示崩れや編集画面の不具合が出た場合に元へ戻しやすくなります。
続いて、利用中のWordPress、SWELL、PHPのバージョンを確認します。Blocks Animationなどの公式配布ページには、必要なWordPressバージョンや更新状況が掲載されています。法人サイトの場合は、ステージング環境で検証し、担当者や制作会社の運用ルールに沿って反映するとよいでしょう。
対象ブロックを選びアニメーションを指定する
管理画面の「プラグイン」から「新規プラグインを追加」を開き、目的のプラグイン名を検索してインストール、有効化します。投稿または固定ページの編集画面を開き、動かしたい画像、見出し、グループなどのブロックを選択してください。
右側のブロック設定にAnimationなどの項目が表示されたら、最初はフェードインのような控えめな効果を選びます。複数のブロックをまとめて動かしたい場合は、グループブロックで囲んでから設定すると管理しやすくなります。装飾済みの複雑なブロックでは見た目が崩れる場合もあるため、1種類ずつ試してください。
速度と遅延は短めから調整する
アニメーションの速度が遅すぎると、読みたい情報が表示されるまで待たされる感覚が生まれます。最初は短めの速度と小さな遅延に設定し、実際のスマートフォンでスクロールしながら確認するとよいでしょう。
例えば、3つの特徴を横並びで見せる場面では、すべてを同時に動かす方法と、0.1秒程度ずつ順番に表示する方法があります。後者は流れを作りやすいものの、項目数が多いと最後の情報が遅れて表示されます。動きの楽しさよりも、内容をすぐ読めることを優先してください。
PCとスマートフォンの両方で公開画面を確認します。
問題がなければ対象を少しずつ増やしてください。
具体的には、「サービス紹介ページの冒頭画像」「実績を示す数字」「申込み前の案内」の3か所だけに限定すると、演出の目的が伝わりやすくなります。本文中のすべての段落を動かす設定は避け、重要な情報を補助する範囲から始めてみてください。
- 変更前にファイルとデータベースをバックアップする
- 公式配布ページで対応環境と更新状況を確認する
- 最初はフェードインなど控えめな効果を選ぶ
- 速度と遅延は短めに設定して実機で確認する
- 公開ページ全体ではなくテストページから始める
CSSとJavaScriptでフェードインを実装する方法
プラグインで基本的な動きを試したあと、調整範囲が足りないと感じたら独自実装を検討します。ここでは、対象要素にCSSクラスを付け、画面内に入ったときだけ表示状態へ切り替える基本的な考え方を整理します。
CSSで表示前と表示後の状態を作る
CSSでは、対象要素の初期状態を透明にし、少し下へ移動させます。その後、JavaScriptによってis-showなどのクラスが追加されたときに、透明度を1、移動量を0へ戻します。transitionを使うと、2つの状態の間が滑らかにつながります。
例えば、対象クラスをscroll-fade、表示後のクラスをis-showと決めると管理しやすくなります。移動距離を大きくすると派手になりますが、画面が揺れるように感じる人もいます。10pxから30px程度の控えめな移動から試し、文章を読む邪魔にならない値へ調整するとよいでしょう。
Intersection Observerで表示タイミングを判定する
JavaScriptでは、要素がビューポートと交差したことを非同期で監視できるIntersection Observer APIを利用できます。対象要素が指定した割合まで画面内へ入ったときにis-showクラスを付ければ、スクロール位置に応じた表示が可能です。
スクロールイベントを常時監視して位置を計算する方法もありますが、処理の書き方によっては負荷が増えます。Intersection Observerは、対象が見える場面で処理やアニメーションを実行する用途に利用でき、複数の要素をまとめて監視しやすい仕組みです。ただし、テーマやプラグインが生成するHTML構造は更新で変わる場合があるため、SWELL固有の内部クラスへ過度に依存しない設計が扱いやすくなります。
追加コードは子テーマや管理しやすい場所へ置く
親テーマのファイルを直接編集すると、SWELLの更新時に変更内容が失われる可能性があります。継続的にコードを管理する場合は子テーマを使い、CSSやJavaScriptの読み込み場所を明確にします。小規模なCSSだけなら追加CSSを使う方法もありますが、JavaScriptを含む場合はバックアップと変更履歴を残してください。
コードを追加したあとは、キャッシュ系プラグイン、SWELLのキャッシュ設定、ブラウザーキャッシュを順番に確認します。古いファイルが残っていると、コードを修正しても表示に反映されないことがあります。制作会社へ依頼している法人サイトでは、保守契約やカスタマイズ範囲を確認してから変更してください。
| 調整項目 | 役割 | 最初の考え方 |
|---|---|---|
| opacity | 透明度を変える | 0から1へ切り替える |
| transform | 位置や大きさを変える | 小さな移動量にする |
| transition-duration | 変化にかかる時間 | 待たされない長さにする |
| threshold | 表示を始める交差割合 | 早めに表示される値から試す |
明日すぐ試すなら、下書きの固定ページを作り、画像1枚へscroll-fadeクラスを付けてください。表示前後のCSSと監視用JavaScriptを追加し、公開プレビューで動きを確認します。問題が出たときに戻せるよう、追加したコードの場所と日時もメモしておくと便利です。
- CSSで透明度と移動位置の2状態を作る
- Intersection Observerで画面内への進入を監視する
- 親テーマを直接編集せず更新で消えない場所に保存する
- キャッシュを削除して公開画面を再確認する
- 独自コードの場所と変更履歴を残す
動かないときの確認点と読みやすくする注意点
実装方法を押さえたら、最後にトラブルを減らす確認手順を見ていきます。アニメーションは編集画面だけで判断せず、公開画面、複数の端末、モーションを減らす設定を使う閲覧者の視点まで含めて確認することが大切です。
編集画面と公開画面の両方を確認する
ブロックエディター上で動いていても、公開画面では動かないことがあります。反対に、編集画面では効果がわかりにくくても、プレビューでは正常に表示される場合があります。まず対象ブロックに設定やクラスが付いているかを確認し、更新後の公開ページを別タブで開いてください。
次に、シークレットウィンドウやログアウト状態でも確認します。管理者としてログイン中だけ読み込まれるファイルや、キャッシュの影響を切り分けやすくなるためです。設定項目そのものが表示されない場合は、プラグインの有効化状況、対象ブロックの種類、WordPressとプラグインの対応バージョンを順番に見直します。
スマートフォンで遅い場合は対象数を減らす
PCで滑らかでも、スマートフォンでは表示開始が遅れたり、スクロールが重く感じられたりする場合があります。大きな画像、動画、複数のアニメーション、外部スクリプトが同じページに重なると、原因の切り分けが難しくなります。
まずはアニメーション対象を1つに減らし、画像を適切なサイズへ圧縮して再確認してください。続いて、キャッシュや遅延読み込みの設定を一時的に見直します。すべての高速化設定を無計画に変更するのではなく、1項目ずつ変更して結果を記録すると、元へ戻しやすくなります。
動きを減らしたい閲覧者への設定を用意する
強い拡大縮小、長い移動、繰り返し続ける動きは、人によって不快感や負担につながることがあります。CSSのprefers-reduced-motionを使うと、端末側で動きを減らす設定を有効にしている閲覧者に対し、アニメーションを短くする、移動をなくす、即時表示へ切り替える対応ができます。
例えば、通常は下からフェードインし、モーション軽減時は最初から表示する設定にします。アニメーションがなくても情報の意味や操作方法が伝わる設計にしておけば、演出を見られない環境でも内容を届けられます。申込みボタンや注意事項は、動きが完了するまで読めない状態にしないでください。
スマートフォンでは対象数と画像容量を減らして比較します。
動きを減らす端末設定にも対応すると読みやすさを保てます。
Q. アニメーションを全ページに付けてもよいですか。
必要な情報がすぐ表示される範囲なら使えますが、本文の段落をすべて動かすと読みづらくなる場合があります。トップページやサービス紹介ページの要点に限定するとよいでしょう。
Q. プラグインと独自コードは併用できますか。
併用自体は可能ですが、同じ要素に複数の効果が重なると表示崩れや原因不明の動作につながります。役割を分け、同じブロックには原則として一方だけを設定してください。
- 編集画面だけでなくログアウトした公開画面を確認する
- スマートフォンで遅い場合は対象数と画像容量を減らす
- キャッシュ設定は1項目ずつ変更して結果を記録する
- 動きがなくても情報を読める構造にする
- prefers-reduced-motionによる軽減設定を検討する
まとめ
SWELLのスクロールアニメーションは、標準機能、ブロック対応プラグイン、CSS・JavaScriptの違いを理解すると、自分の目的に合う方法を選びやすくなります。
最初はテストページの画像1枚に控えめなフェードインを設定し、PCとスマートフォンで表示速度や読みやすさを確認してください。
動きは多いほどよいわけではありません。あなたのサイトで特に見てほしい情報を絞り、内容を伝えるための補助として取り入れてみてください。
本記事は一般的な情報提供を目的としており、起業・副業による収益や成果を保証するものではありません。税務・法務に関する判断は、国税庁や税理士など専門家・公的機関の情報を必ずご確認ください。
