WordPressにアニメーション付き数字カウンターを追加する方法（コード不要） 

統計、マイルストーン、または成果をより目を引く方法で見せたくありませんか？

アニメーション付き数字カウンターを使用すると、総顧客数、メール購読者数、または事業年数などの項目を強調し、リアルタイムで数字がカウントアップする様子で訪問者の注意を引くことができます。

このガイドでは、コードを必要としない2つのツールを使用して、WordPressにアニメーション付き数字カウンターを追加する方法を説明します。

アニメーション付き数字カウンターとは？

アニメーション付き数字カウンターとは、リアルタイムで数字が増減する（または減少し続ける）視覚効果であり、通常は総顧客数、完了したプロジェクト数、または事業年数などの統計情報を強調するために使用されます。

ビジネスやエージェンシーのウェブサイトで、お客様の声や事例紹介などの信頼性を高めるシグナルのすぐ隣に、このカウンターアニメーションが表示されているのを見たことがあるでしょう。

注意とウェブデザインに関する調査では、動きが目を引くことが一貫して示されています。アニメーションで表示される統計カウンターは、静的な数字では決して得られない注目を集めます。これは、「顧客数2,400人」がページに表示されているのと、それがライブでカウントアップしていくのを見るのとでは大違いです。

使用できる数字アニメーションの例をいくつかご紹介します：

• 支援した顧客の数を示す
• 完了したプロジェクトの数を強調する
• 総メール購読者数を表示する
• 事業年数や獲得した賞を祝う

うまく使用されたWordPressの統計ブロックは、実際の数字を表示することで、「このビジネスは自分が何をしているか分かっている」という静かなシグナルとして機能します。

どの方法を使用すべきか？

以下の両方の方法で、コードなしでアニメーション付きカウントアニメーションをサイトに追加できます。どちらを選ぶかは次のとおりです。

方法	最適	カスタマイズ
SeedProdカウンターブロック	新しいページやテーマを作成中で、フォント、色、間隔、モバイルレイアウトを完全に視覚的に制御したい場合	完全な視覚的制御、高度なスタイリング、コード不要
Counter Numberプラグイン	既存のテーマを維持し、ショートコードで簡単な統計カウンターを挿入するだけでよい場合	基本的なスタイリング、ショートコードベース

1. SeedProdで数字カウントアニメーションを追加する

最初の方法では、SeedProdを使用してWordPressサイトにアニメーション付き数字カウンターを追加する方法を説明します。

SeedProdはWordPress用のドラッグアンドドロップウェブサイトビルダーであり、コードなしで完全なサイト、ランディングページ、カスタムテーマをデザインできます。

SeedProdで作成した任意のページ、ランディングページ、またはカスタムテーマにカウンターブロックを追加できます。

完全なウェブサイトキットやランディングページテンプレートを使用すると、完成したデザインにすばやく到達できます。さらに、アニメーション付き数字カウンター、テキストアニメーション、コールトゥアクションボタン、レスポンシブギャラリー、1クリックカスタマイズなどのWordPressブロックを使用して、任意のデザインを視覚的にカスタマイズできます。

ステップ1. SeedProdのインストールと有効化

まず、SeedProdの料金ページにアクセスしてプランを選択してください。このガイドでは、ドラッグアンドドロップWordPressテーマビルダーのためにSeedProd Proを使用します。

次に、アカウントダッシュボードにログインし、ダウンロードタブをクリックします。この画面で、SeedProdプラグインをダウンロードボタンをクリックし、ライセンスキーをコピーします。

次にWordPressサイトに移動し、プラグインのzipファイルをアップロードします。この手順にヘルプが必要な場合は、WordPressプラグインのインストールと有効化の手順に従ってください。

プラグインをインストールして有効化した後、SeedProdの設定に移動し、先ほどコピーしたライセンスキーを入力します。

次に、キーを確認ボタンをクリックして、ライセンスの詳細を保存します。

ステップ2. WordPressレイアウトの作成

次のステップは、WordPressで新しいレイアウトを作成することです。SeedProdを使用すると、新しいWordPressテーマをゼロから構築するか、スタンドアロンのランディングページを作成することでこれを行うことができます。

どちらもSeedProdのビジュアルエディターを使用してデザインをカスタマイズします。また、テーマやランディングページでSeedProdのカウンターブロックを使用できます。

決定を助けるために、ウェブサイトにどのような機能を持たせたいかを考えてみてください。

コードなしで、ゼロから完全なカスタムウェブサイトデザインを作成するには、テーマビルダーが優れた選択肢です。

ただし、現在のWordPressテーマを維持し、個々のページを作成するためにSeedProdを使用したい場合は、ランディングページビルダーが最適なソリューションです。

ウォークスルーが必要ですか？これらのガイドのいずれかに従ってレイアウトをセットアップしてから、ステップ3に戻ってカウンターブロックを追加してください：カスタムWordPressテーマの作成方法またはWordPressランディングページの作成方法。

注：このチュートリアルでは、ヘッドフォンショップのウェブサイトキットを使用してテーマビルダーを使用します。

ステップ3. SeedProdカウンターブロックの追加

次のステップは、カウンターブロックをランディングページまたはWordPressテーマのデザインに追加することです。そのため、カスタマイズしたいページでデザインを編集をクリックして、ビジュアルエディターで開きます。

WordPressテーマをカスタマイズしているので、まずホームページの編集テンプレートから始めます。

デザインを開くと、次のスクリーンショットに似たレイアウトが表示されます。

左側にはブロックとセクションがあり、右側にはページのライブプレビューがあります。

プレビューのどこかをクリックすると、コンテンツを編集したり、テンプレート要素をカスタマイズしたりできます。

ページに新しい要素を追加するのは数秒で完了します。左側のパネルからドラッグして、配置したい場所にドロップするだけです。

左側のパネルからカウンターブロックを検索し、WordPressのデザインにドラッグします。

ブロックが配置されたら、クリックしてさまざまなカスタマイズオプションを確認できます。

カウンターブロックを使用すると、次のことができます。

• 開始値と終了値を設定する
• 数値の接頭辞と接尾辞を入力する
• アニメーションの持続時間を設定する
• 小数点またはスペースの区切り文字を選択する
• カウンターのタイトルを追加する
• モバイルとデスクトップでの配置を編集する

さらに、詳細タブをクリックすると、カウンターのスタイリングに関するさらに多くの設定が表示されます。たとえば、カウンターとタイトルのフォントや色を変更したり、影の効果を追加したり、間隔を調整したり、モバイルおよびデスクトップデバイスの表示オプションを選択したりできます。

最も良い点は、カウンターを希望どおりに見せるためにカスタムCSS、HTML、jQuery、またはJavascriptを必要としないことです。ポイントアンドクリックで数値カウンターをスタイリングすると、スタイルシートは自動的に更新されます。

すべてが希望どおりに見えるようになるまでページをカスタマイズし続けます。次に、右上隅にある保存ボタンをクリックして、カスタマイズを保存します。

ステップ4.アニメーション数値カウンターを公開する

カスタムページにアニメーション数値カウンターを追加し、変更を保存したら、ウェブサイトの訪問者向けに公開する準備が整いました。

スタンドアロンのランディングページを作成している場合は、保存ボタンの下矢印をクリックして公開を選択します。ただし、テーマビルダーを使用している場合は、もう1つのステップがあります。

Xアイコンをクリックしてページビルダーを終了し、テーマビルダーダッシュボードから、SeedProdテーマを有効にするトグルを「はい」の位置に切り替えます。

これで完了です！デザインをプレビューして、数値カウンターのアニメーションが動作していることを確認できます。

カウントアニメーションの最適な場所は、ヒーローセクションのすぐ下、またはレビューブロックの横など、ソーシャルプルーフが訪問者の行動を促す可能性が最も高い場所です。

「2,400のお客様に対応」というカウンターをコールトゥアクションボタンの横に表示すると、それがない同じCTAよりも一貫して優れたパフォーマンスを発揮します。あなたの数字はすでにあなたのビジネスのために機能していますが、ページに表示するだけです。

2.カウンター番号を使用して数値カウントアニメーションを追加する

完全なウェブサイトビルダーなしでカウンターを追加したい場合は、コードを書かずにサイトに数値カウントアニメーションを追加する別の方法があります。

その場合、WPShopMartのCounter Number pluginのような無料のWordPress番号カウンタープラグインを使用できます。これにより、完全にレスポンシブなカウンターをウェブサイトに追加して、投稿、ページ、サイドバー領域に数値統計を表示できます。

この方法では、前の方法ほど多くのカスタマイズオプションは含まれていませんが、ショートコードを使用して簡単なアニメーション数値カウンターをウェブサイトに追加する簡単な方法です。

開始するには、Counter Numberプラグインをダウンロード、インストール、およびWordPressサイトにアクティブ化してください。

次に、WordPress管理エリアからCounter Numbers » All Countersに移動し、Add New Counterボタンをクリックします。

次の画面で、シンプルなドラッグアンドドロップカウンタービルダーが表示されます。カウンターのタイトルを入力してから、下にスクロールしてカウンター番号を追加セクションに移動します。

デフォルトで3つのカウンターがすでに設定されています。ゴミ箱アイコンをクリックして2つ削除し、残りのカウンターを編集します。

カウンターの設定では、タイトルを追加したり、カウンターアイコンを選択したり、数値を入力したりできます。

次に、右側で以下を変更できます。

• アイコンの色とサイズ
• カウンタータイトルの色とサイズ
• カウンター番号の色とサイズ
• フォントの太さ
• フォントファミリー

必要に応じてカウンターアイコンを非表示にすることもできます。カウンターの外観に満足したら、ショートコードをコピーして公開をクリックします。

これで、投稿またはページにカウンターを追加する準備ができました。WordPressのページまたは投稿を作成または編集します。次に、ページの目的の部分を見つけ、新しい段落ブロックにショートコードを直接貼り付けます。

最後に、更新または公開をクリックします。ページをプレビューすると、数値カウンターが自動的にカウントアップします。

WordPressアニメーション数値カウンターに関するFAQ

SeedProdのCounterブロックを使用するには、どのプランが必要ですか？

CounterブロックはPROブロックであり、SeedProdのPlus、Pro、Eliteプランで利用できます。SeedProdの無料バージョンにはCounterブロックは含まれていません。

無料プランをご利用で、アニメーション付きの統計カウンターが必要な場合は、Counter Numberプラグイン（上記の方法2）が優れた無料の代替手段です。

アニメーション付きカウンターは、任意のWordPressページに追加できますか、それともランディングページのみですか？

SeedProdを使用すると、完全なWordPressテーマテンプレート、ランディングページ、近日公開ページ、カスタム404ページを含む、あらゆる種類のページにCounterブロックを追加できます。

Counter Numberプラグインを使用すると、生成されたショートコードを使用して、カウンターを任意の投稿、ページ、またはウィジェット領域に追加できます。

番号カウンターが表示されたときにのみアニメーションするようにするにはどうすればよいですか？

SeedProdのCounterブロックは、ブロックがビューポートに入ると自動的にアニメーションします。切り替える追加の設定はありません。セクションが表示されるとすぐに、カウントアニメーションが開始されます。

カウンターが表示される前にトリガーされる場合は、通常、キャッシュプラグインがビューポートトリガーをクリアしています。公開後にサイトキャッシュをクリアしてみてください。

アニメーション付きカウンターはモバイルデバイスで動作しますか？

はい。SeedProdのCounterブロックは完全にレスポンシブです。また、Counterブロックの設定パネルでモバイルとデスクトップの個別の配置オプションを直接設定できます。

Counter Numberプラグインも完全にレスポンシブと説明されていますが、SeedProdよりもデバイス固有の制御が少なくなっています。

完全なテーマを作成せずにSeedProdのCounterブロックを使用できますか？

はい。CounterブロックはスタンドアロンのSeedProdランディングページで機能するため、テーマビルダーをまったく使用する必要はありません。

SeedProdで新しいランディングページを作成し、Counterブロックをキャンバスにドラッグして公開します。既存のWordPressテーマは、サイトの他のすべての場所でそのまま使用されます。

統計情報は、ページ上の静的な数字以上の価値があります。上記のいずれかの方法で、10分以内に動作するアニメーションカウンターをライブにすることができます。

コードなしでカスタム数値カウンターを作成する準備はできましたか？

以下のWordPressチュートリアルも役立つかもしれません。

• WordPressに営業時間追加する方法
• CSSなしで背景画像を暗くする方法
• WordPressサイトにTwitterウィジェットを追加する方法
• WordPressでテキストアニメーションを追加する方法
• ビジネスウェブサイト向けの最高のWordPressプラグイン

お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。