WordPressにスクロールアニメーションを実装する3つの方法

カレンダーDate: | カテゴリーCategory:WordPressテーマのカスタマイズ方法【HTML・CSSの基礎も】
※景品表示法に基づく表記:本記事には商品の広告が含まれています

この記事では、WordPressサイトにスクロールアニメーションを実装するための3つの方法を解説しています。

記事を書いた私の自己紹介をしておきます。

SEO検定1級およびwebクリエイター能力認定試験上級合格者のWordPressテーマ専門家『塩川 武士(しおかわ たけし)』の自己紹介 SEO検定1級およびwebクリエイター能力認定試験上級合格者のWordPressテーマ専門家『塩川 武士(しおかわ たけし)』の自己紹介

結論から言うと、WordPressサイトにスクロール実装する3つの方法とは下記のとおりです。

  • 最適なWordPressテーマ5選を使用
    →オーソドックスであり最も簡単で安全
  • Animate.cssとwow.jsを使って実装
    →今使ってるテーマを変更したくない場合
  • 無料WordPressプラグインを利用
    →今使ってるテーマを変更したくない場合

それぞれを詳しく解説していきますので、最もあなたに合う方法をご参考くださいね。

スクロールアニメーションに最適なWordPressテーマ5選を使用する

スクロールアニメーションに最適なWordPressテーマ
テーマ名 特徴 デモサイト確認
GENESIS スタイリッシュ企業サイト 無料でデモサイトを確認
ISSUE 革新的な採用サイト 無料でデモサイトを確認
HORIZON 日本初の横スクロール 無料でデモサイトを確認
DROP カッコイイLPサイト 無料でデモサイトを確認
STORK19 おしゃれなブログ 無料でデモサイトを確認

スクロールアニメーションを実装したい人に最適なWordPressテーマを表にまとめました。

実際のアニメーションの動きは、表のデモサイトリンクから確認いただけます。

では、それぞれのWordPressテーマの特徴などを紹介していきますね。

スクロールアニメーション向けWordPressテーマ①:GENESIS(ジェネシス)

スクロールアニメーション向けWordPressテーマ①:GENESIS(ジェネシス)

WordPressテーマ「GENESIS(ジェネシス)」は、企業のブランドイメージを格上げする洗練されたデザインと、直感的な操作性を兼ね備えたテーマ。​

特に、スクロールアニメーションを簡単に設定できる機能が特徴で、訪問者の視線を自然に誘導し、印象的なユーザー体験を提供します。​

このテーマは、ベンチャー企業から大企業まで、幅広いビジネスシーンで活用できる柔軟性を持っています。

主な特徴は下記のとおりです。

  • スクロール演出を簡単設定し、印象に残る動きが実現できる
  • トップページを自由に構成でき、企業の個性を表現しやすい
  • サービス内容を整理して紹介でき、信頼感のある印象を与える
  • スマホでも美しく表示され、快適な閲覧で離脱を防げる
  • 配色や書体を簡単に変更でき、ブランドの統一感が出せる

スクロールアニメーションを活用することで、訪問者に強い印象を与えるサイトを構築したい人は、今すぐ以下のリンクからGENESISの特徴やデモサイトを確認してくださいね。

「GENESIS」の詳細やデモはこちら

スクロールアニメーション向けWordPressテーマ②:ISSUE(イシュー)

スクロールアニメーション向けWordPressテーマ②:ISSUE(イシュー)

WordPressテーマ「ISSUE(イシュー)」は、採用サイト向けに設計されたテーマ。

ただ、その洗練されたデザインと柔軟な機能性により、企業のコーポレートサイトとしても汎用的に活用が可能です。​

特に、アニメーションを簡単に設定できる点が特徴で、訪問者の視線を自然に誘導し、印象的なユーザー体験を提供できますよ。​

特徴は次のとおりです。

  • アニメーションを簡単に設定でき視覚的な魅力で訪問者を惹きつける
  • トップページのレイアウトを自由にカスタマイズでき、企業の個性を際立たせられる
  • インタビューページでスタッフの魅力を伝え、信頼感を高められる
  • スプリットページでサービスや商品を効果的に紹介し、訴求力を向上
  • スマートフォンでも美しく表示され、どのデバイスでも快適な閲覧体験を提供

アニメーションを活用して、訪問者に強い印象を与えて企業のブランドイメージを高めるサイトを作成したい人は、下記からISSUEの詳細を確認しましょう。

「ISSUE」の詳細やデモはこちら

スクロールアニメーション向けWordPressテーマ③:HORIZON(ホライズン)

スクロールアニメーション向けWordPressテーマ③:HORIZON(ホライズン)

WordPressテーマ「HORIZON(ホライゾン)」は、日本初の横スクロールを実現した革新的なデザインで、訪問者に新鮮な体験を提供できます。

アニメーションの設定も簡単で、視覚的なストーリー性を高め、ブランドの世界観を効果的に伝えることが可能です。​

企業のコーポレートサイトやクリエイターのポートフォリオなど、幅広い用途に対応し、他と一線を画すサイトを構築できますよ。

主な特徴は以下のとおりです。

  • アニメーションを簡単に設定でき視覚的な魅力で訪問者を惹きつける
  • 横スクロールデザインで、他サイトと差別化し印象を強める
  • 縦横スクロールの使い分けで、コンテンツに最適な表現が可能
  • ギャラリーページで実績や作品を美しく紹介し、信頼感を高められる
  • LP作成機能で、キャンペーンや商品紹介ページを迅速に構築​

アニメーションや横スクロールを活用した独自のデザインで、訪問者に強い印象を与えるサイトを簡単に作成したい人は、次のリンクからHORIZONのデモサイトを確認してみてください。

「HORIZON」の詳細やデモはこちら

スクロールアニメーション向けWordPressテーマ④:DROP(ドロップ)

スクロールアニメーション向けWordPressテーマ④:DROP(ドロップ)

WordPressテーマ「DROP(ドロップ)」は、アニメーションを簡単に設定できるランディングページ(LP)特化型テーマです。​

視覚的な演出で訪問者の興味を引き、効果的なプロモーションを実現できます。​

製品の紹介やサービスの案内に最適なデザインと機能を備えています。

主な特徴は次のとおりです。

  • アニメーションを簡単に設定でき視覚的な魅力で訪問者を惹きつける
  • 1カラム構成で、情報をシンプルに伝え、理解を促進
  • グラフやチャートを活用し、データを視覚的に表現
  • カスタム投稿タイプ「お知らせ」で、最新情報を手軽に発信
  • スマートフォンでも美しく表示され、快適な閲覧体験を提供

アニメーションやグラフィカルな要素を活用して、訪問者に強い印象を与えるLPを構築したい人は、DROPのデモサイトをチェックしましょう。​

「DROP」の詳細やデモはこちら

スクロールアニメーション向けWordPressテーマ⑤:STORK19(ストーク19)

スクロールアニメーション向けWordPressテーマ⑤:STORK19(ストーク19)

WordPressテーマ「DROP(ドロップ)」は、アニメーションを簡単に設定できるランディングページ(LP)特化型テーマです。​

WordPressテーマ「STORK19(ストーク19)」は、アニメーションを簡単に設定できる機能を備え、視覚的な魅力を高めることで訪問者の関心を引きつけます。​

ブロックエディターに完全対応しており、直感的な操作で美しいデザインのサイトを構築できます。​

ブログやコーポレートサイト、ランディングページなど、さまざまな用途に適したテーマで、主な特徴は次のとおりです。

  • ブロックごとにアニメーション設定が可能で、視覚的な訴求力を高められる
  • プリセットパターンを活用して、デザイン性の高いページを簡単に作成できる
  • トップページのメインビジュアルに動画を設定でき、ダイナミックな演出が可能
  • モバイルファースト設計で、スマートフォンでも美しい表示を実現
  • テーマカスタマイザーで、HTMLやCSSの知識がなくても簡単にデザインを調整可能

ブログやコーポレートサイト、ランディングページなど、さまざまな用途に最適ですので、さっそく下記のリンクから詳細を確認してくださいね。

「STORK19」の詳細やデモはこちら

ということで、スクロールアニメーションに最適なWordPressテーマを紹介しました。

このような専用のテーマを使用すれば、当然HTML等コーディングは不要ですし、安全でお手軽にスクロールアニメーションを実装できます。

Animate.cssとwow.jsを使ってスクロールアニメーションを実装する

Animate.css WOW.js

上記のWordPressテーマを使用する方法が、一番簡単でオーソドックスなのですが、どうしてもテーマの変更はしたくない人もいると思います。

そこで、ここからは現在使っているWordPressテーマのままで、スクロールアニメーションを実装する方法を解説します。

まずは、有名なCSSライブラリAnimate.cssおよび、JSライブラリWOW.js(jQuery不要の優れもの)を使用する方法です。
(※LP作成とかで私自身、何度もお世話になっているライブラリです)

両ライブラリの役割は大まかに以下のとおりになります。

Animate.css
さまざまな種類(約60種)の中から指定したアニメーションを表現する。
WOW.js
スクロールに合わせてメソッド(今回ならAnimate.css用クラス名を付与)を発動。

WordPressサイトにこの方法を適用する場合、テーマファイルにHTMLやJSコードを記述するカスタマイズを行う必要があります。

それでは、Animate.cssとWOW.jsの実装方法を見てみましょう。

スクロールアニメーションCSS「Animate.css」の使い方とは?

まず使い方をザックリいうと、以下の3ステップです。

  1. CDNサイトから読み込みパスをコピー。
  2. 上記を<link>タグで読み込む。
  3. アニメーションを付与したいHTML要素に指定用のクラス名を記述。

では、具体的に!

以下のCDNサイトにて「Copy」ボタンをクリックし、読み込みパスをコピーします。(※最新版のanimate.min.cssを選択すると良いでしょう)

animate.css cdn

https://cdnjs.com/libraries/animate.css

そしてコピーした読み込みパスを、下記のように<link>タグであなたのサイトに読み込ませます。

さらに以下のAnimate.css公式サイトにて、約60種類のアニメーションデモと付与用のクラス名を確認し、アニメーションを表現したいHTML要素に確認したクラス名を記述します。

公式サイト:https://daneden.github.io/animate.css/

実際には、こんな感じになります。
(※例では繰り返しアニメーション用のクラス名「infinite」も記載してます)

■アニメーション名「bounce」を付与!

■アニメーション名「fadeInDown」を付与!

■アニメーション名「zoomIn」を付与!

スクロールアニメーションJavaScript「wow.js」の使い方!

上記Animate.cssのみでは、スクロールに合わせるとか、アニメーションのスピード(何秒かけて動かすか?)や回数などの、細かい指定を行うことができません。

そこで必要となるのがWOW.jsです。

ザックリとした使い方は以下の4ステップです。

  1. CDNサイトから読み込みパスをコピー。
  2. 上記を<script>タグで読み込む。
  3. </body>のすぐ上に呼び出しコードを記述。
  4. アニメーションを付与したいHTML要素に指定用のクラス名とdata属性を記述。

先程と同様に以下のCDNサイトにて「Copy」ボタンをクリックし、読み込みパスをコピーします。

https://cdnjs.com/libraries/wow

そしてコピーした読み込みパスを、下記のように<script>タグであなたのサイトに読み込ませます。

次に</body>のすぐ上に、以下のように呼び出しコードを記述しましょう。

これでスクロールに合わせたアニメショーンの準備が完了しました。

で、アニメーションさせたい要素に、Animate.css用のクラス名と共にWOW.js用のクラス名、任意でdata属性を記述します。

ただし、上述のクラス名「animated」は記述しないことに注意してください。
スクロールに合わせてWOW.jsが書き出してくれるためです。

で、以下が実際の例です。

■スクロールで表示領域に至ったら「bounce」を3回!

■表示領域に至ったら、3秒かけてゆっくり「fadeInDown」!

■表示領域に至ってから、2秒後にアニメーション名「zoomIn」を付与!

なお、細かい調整用のdata属性は下記が用意されています。

data-wow-duration
指定した時間をかけて要素を動かす。
data-wow-delay
表示領域に入ってから指定した時間が経過の後にアニメーション開始。
data-wow-offset
画面下を基準値としてアニメーションを開始する距離を指定。
data-wow-iteration
指定した回数アニメーションを繰り返す。

以上、スクロールアニメーション実装のオーソドックスな方法である、Animate.cssとWOW.jsの使い方をお伝えしました。

一方この手法は、テーマのカスタマイズに抵抗がある場合など万人向けではないかもしれません。

そこで次に、スクロールアニメーションを実装できる無料のWordPressプラグインを利用する方法を紹介したいと思います。

スクロールアニメーション用の無料WordPressプラグインを利用する

WordPressプラグイン「Shortcodes Ultimate」

Animate.cssとWOW.jsをコーディングで適用することにも抵抗がある場合、「Shortcodes Ultimate(ショートコード アルティメット)」という無料のWordPressプラグインを使用するのが吉です。

「Shortcodes Ultimate」とは、アニメーションの他、見出し・リスト・アコーディオン・囲み枠などなど、様々なWeb部品を表現できるショートコードを使用するためのプラグイン。

Animate.cssとWOW.jsも組み込まれており、以下のような手順でアニメーションを設置することができます。

ショートコードを挿入

プラグインを追加し有効化すると、記事投稿や固定ページ投稿ページに「ショートコードを挿入」メニューが出力されるのでクリック。

アニメーション

設置できるWeb部品の一覧モーダルが出力されるので「アニメーション」をクリック。

アニメーションの詳細設定

本来であれば「Animate.cssやWOW.js用のコードを記述する必要がある」アニメーションの詳細設定を、モーダルUIから行うことが可能です。

「Shortcodes Ultimate」は人気のあるプラグインであり結構便利だと思いますが、現在のプラグイン使用状況によってはプラグイン同士の競合が発生する可能性もあります。

なので、適用してみて何か動きが変な場合は他の手段を選択いただければ幸いです。

WordPressにスクロールアニメーションを実装する方法のまとめ

以上、WordPressサイトにスクロールアニメーションを実装する3つの方法を紹介しました。

3つの方法の中で一番オーソドックスであり、初心者にもおすすめなのが、スクロールアニメーションに適したWordPressテーマを使用する方法です。

そして、どうしても現在使っているWordPressテーマを変更したくない場合にのみ、Animate.cssとWOW.jsの実装や無料プラグインの利用を検討しましょう。

下記のリンクをクリックすると、スクロールアニメーション向けWordPressの一覧表にジャンプできるので、各WordPressテーマをもう一度確認したい場合はクリックしてくださいね。

スクロールアニメーション向けWordPressテーマ一覧に戻る

Tags

Trackbacks & Comments

Trackback URL for this post:

Leave a Reply

flight