Dressing 
「SWELLってアニメーション機能あるの？」
「スクロールでふわっと出るサイト、どうやって作るの？」
そんなふうに気になって調べている方も多いと思います。
実は、WordPressテーマ「SWELL」には、ページ切り替え時にふわっと表示される標準アニメーション機能があります。
さらにプラグインを使えば、女性向けのサイトでよく見かける、スクロールに合わせて要素が柔らかく表示されるアニメーションも、簡単に実現できちゃいます。
- SWELL標準アニメーションでサイトをふんわり柔らかく見せる方法
- スクロールに合わせてふわっと動かすアニメーションの設定方法
- アニメーションで読者の視線を誘導するポイント
実際にSWELLで作ったサンプルページも紹介していますので、アニメーションのイメージや設定内容もご覧いただけます。
ちょっとした動きをプラスするだけで、あなたのサイトもふわっと心地よい印象になります。
ぜひサンプルを見ながら、楽しく設定してみてくださいね。
SWELLの標準アニメーション機能でできること
SWELLには、ページの切り替え時にふわっと表示される「フェードインアニメーション」機能が標準で備わっています。
ページが読み込まれるときに、ふわっと優しく現れる演出で、サイト全体が柔らかい雰囲気になります。
- サイト全体をふんわり優しい印象に見せたいとき
- ページの切り替えをゆっくりにして、落ち着いた雰囲気を出したいとき
- 写真やデザインをじっくり見せたいブランディング系サイトに
このアニメーションは、管理画面から数クリックで簡単に設定できます。
さっそく具体的な手順を見ていきましょう。
SWELLの標準アニメーションを有効にする方法
WordPressの管理画面にログインし、左メニューから「SWELL設定」をクリックし、
上部にある「機能停止」タブを開きます。
「SWELLの機能」の中にある『「ページ表示時のアニメーション」を停止する』という項目のチェックを外します。
画面下にある「変更を保存」ボタンをクリックして設定を反映させます。
これで、SWELLの標準アニメーション設定は完了です。
次にページを開いたとき、サイト全体がふわっと現れるアニメーションが自動的に反映されます。
もっと動きをつけたい！スクロールでふわっと表示させるには？
SWELLの標準機能で対応しているのは、この「ページ表示時のフェード表示」のみです。
「見出しや画像など、要素ごとに動きをつけたい」
「スクロールに合わせてふわっと表示させたい」
そんなときは、プラグインを使うことで簡単にアニメーションを追加できます。
次の章では、初心者でもすぐに使える「Blocks Animation」プラグインの使い方を詳しくご紹介します。
要素ごとに動きをつける「Blocks Animation」の使い方
「見出しや画像など、部分ごとにふわっと動かしたい」
そんなときにおすすめなのが 「Blocks Animation」 というプラグインです。
コードを書かなくても、 スクロールに合わせて見出しや画像がふわっと現れる、 今どきのおしゃれなアニメーションを簡単に追加できます。
「Blocks Animation」とは
コードを書かなくても、簡単にふわっと動くアニメーションを追加できるプラグインです。
スクロールに合わせて要素が現れる「今どき」のデザインが、 ブロックを選んで設定するだけで簡単に実現できます。
- 料金プランや3つの特徴を順番に見せたいとき
- お客様の声を会話のように見せたいとき
- ステップ形式の説明を順を追って伝えたいとき
どれも、動きをつけることで読者の視線を自然に誘導でき、 情報がすっと頭に入りやすくなります。
特に、柔らかく上品な動きは、女性向けサイトにぴったりです。
「Blocks Animation」のインストールと設定方法
WordPress管理画面 → 「プラグイン」→「プラグインを追加」で検索ボックスに「Blocks Animation」と入力します。
「Blocks Animation: CSS Animations for Gutenberg Blocks」を見つけたら「今すぐインストール」をクリック。
インストール後、「有効化」をクリックします。
❶投稿画面や固定ページで、動かしたい段落や画像などを選択してアニメーションを設定します。
ここでは、サービス紹介の見出しに「ふわっと現れる」アニメーションを設定してみます。
- アニメーション：フェードイン
- 遅延：200ミリ秒
- 速度：やや低速
「フェードイン」は透明から徐々に現れる、最もナチュラルな動きです。
どんな要素にも合わせやすく、初めてアニメーションを使う方にもおすすめです。
❷設定が終わったら「アニメーションを再生」で動きを確認します。
動かしたい要素（見出し、画像、ボタンなど）それぞれに、STEP4と同じ手順でアニメーションを設定していきます。
設定が完了したら、必ずプレビューや公開後のページで動きをチェックしましょう。
「Blocks Animation」を使ったおすすめ設定例
どんなアニメーションを選べばいいか迷ったら、この4パターンから始めてみてください。
女性向けサイトでも使いやすい、上品で優しい動きを厳選しました。
実際の動きが見られるサンプルページはこちら
①フェードイン｜どんな場面でも使いやすい基本の動き
- アニメーション： フェードイン
- おすすめ用途： 文章、画像、どんなブロックにも合う万能型
透明から徐々に現れる、最もナチュラルな動き。迷ったらこれを選べば間違いありません。
柔らかく上品な印象を出したい、女性向けのサービスサイトにおすすめです。
- トップページのメインビジュアル：キャッチコピー → 説明文 → ボタンの順にフェードイン
- サービス紹介「選ばれる理由」などの項目：横並びの項目を順にフェードイン
②スライドアップ｜下からふわっと浮き上がる
- アニメーション： 下からスライドイン
- おすすめ用途： 料金プラン、サービス紹介、チェックリスト
下から上へスッと現れる動き。複数の要素を順番に見せたいときに効果的です。
「3つの特徴」や「ステップ」を紹介する場面で、それぞれに少しずつ遅延時間をずらすと、リズム感が生まれます。
- 料金プラン：各プランのボックスが順番にスッと浮かび上がる
- チェックリスト：1項目ずつ下から現れて、読みやすく整理された印象に
- 画像ギャラリー：写真が順番にふわっと表示され、軽やかな動きを演出
③左からスライドイン｜自然な視線の流れを作る
- アニメーション： 左からスライドイン
- おすすめ用途： ステップ説明、会話風コンテンツ（吹き出し）、特徴・メリットなどのリスト
左から右へスライドする動きで、読み進める方向に自然に視線を誘導します。
文章や説明を順を追って伝えたい場面におすすめです。
- ステップ解説：各ステップが左から順にスライドして、流れがわかりやすく見える
- お客さまの声（吹き出し）：左右交互にスライドして、自然な会話のテンポを演出
- サービス紹介：文章と画像が左からふわっと現れ、やさしい導入感をプラス
④ボタンホバーアニメーション｜クリックを促す動き
- アニメーション： 脈打つ
- Play on Hover： ON
- おすすめ用途： お申し込みボタン、ダウンロードボタンなど
マウスを乗せたときに「ドクン」と脈打つように動く演出。
ボタンに視線を集めたいときに効果的です。
アニメーションを使うなら「固定ページ」がおすすめ
アニメーションは、ブログなどの読ませる記事よりも見せるページでこそ効果を発揮します。
特にこんなページで使うと、印象的で洗練された仕上がりになります。
- トップページ・LP：キャッチコピー → 説明文 → ボタンの順に表示して、視線を自然に誘導
- サービス紹介ページ：特徴や料金プランなどを順番に見せて、内容を理解しやすく
- プロフィールページ：自己紹介や経歴をフェードインで軽やかに演出
全てにアニメーションをつけると雑多な印象になるので、目立たせたい箇所だけに絞ると上品に仕上がります。
まとめ｜少しの動きで、あなたのサイトがふわっとやさしく
今回は、WordPressテーマ「SWELL」で使えるアニメーション設定についてご紹介しました。
まずはSWELL標準機能の「ページ切り替えアニメーション」をオンにするだけで、サイト全体がふんわり柔らかい印象になります。
さらに一歩進めたい方は、「Blocks Animation」プラグインでスクロールに合わせた動きをプラス。
トップページやサービスページなど、“見せるページ”に軽やかな動きを添えると、印象的で洗練されたデザインになります。
- サイト全体を柔らかく見せたいなら → SWELL標準アニメーションでOK
- スクロールでふわっと動かしたいなら →「Blocks Animation」プラグインで簡単に
- 使いすぎに注意 → 固定ページなど “見せたい部分だけ” に絞ると上品に
少しの動きをプラスするだけで、サイト全体の印象がぐっと柔らかくなります。
ぜひあなたのサイトにも取り入れて、心地よくおしゃれな雰囲気を作ってみてくださいね。
\ SWELLでアニメーションを使ってみる /
