要約：WordPressでテキストアニメーションを作成する方法
3つの方法で、コーディングなしでテキストアニメーションを追加できます。ページの構築方法に基づいていずれかを選択してください。
- SeedProd – SeedProdのビジュアルエディターにあるアニメーション見出しブロックを使用して、ランディングページやテーマにタイピング、ローテーション、ハイライト効果を追加します。
- アニメーションテキストブロックプラグイン – Gutenbergブロックエディターにネイティブブロックをドロップして、投稿やページにアニメーション見出しを追加します。
- Animate It! プラグイン – クラシックWordPressエディターでテキストをショートコードで囲み、CSS効果を適用します。
- ユースケース別に選択 – ランディングページにはSeedProd、ブロックエディターにはアニメーションテキストブロック、クラシックエディターサイトにはAnimate It!。
- コーディング不要 – 3つの方法すべて、CSSやPHPに触れることなく機能します。
CSSに触れることなくヒーロー見出しを目立たせようとすると、行き詰まることが多いでしょう。ほとんどのチュートリアルでは、Elementorを使用しているか、コードの編集に慣れていることを前提としています。
このガイドでは、SeedProdのアニメーション見出しブロック、無料のGutenbergプラグイン、Animate It! CSSプラグインの3つの方法を使用して、WordPressにテキストアニメーションを追加する方法を説明します。ご自身の環境に合ったものを選択し、手順に従ってください。
アニメーションテキスト効果とは何か、そしてなぜそれらを使用するのか？
WordPressのアニメーションテキスト効果とは、見出し、ボタン、その他のテキスト要素に適用できる小さなモーションデザインのことです。静的なテキストの代わりに、タイピング、スライド、バウンス、ハイライトなどのスタイルを追加して、すぐに注目を集めることができます。
これらの効果は最新のCSSによって強化されており、高速で軽量、そしてすべての主要ブラウザでサポートされています。
区別する価値のあるテキストアニメーションには2種類あります。ページ読み込み時に実行されるエントランス効果と、訪問者がスクロールするにつれてトリガーされるスクロール連動アニメーションです。このガイドでは、ローテーションやハイライトされた見出しを含むエントランス効果について説明します。
SeedProdのスクロール表示機能は、スクロール連動アニメーションが必要な場合に対応します。以下の手順は、ページ読み込み時に自動的に実行される効果に焦点を当てています。
WordPressサイトでテキストアニメーションを実用的に使用するいくつかの方法を以下に示します。
- 特別なオファーを料金表で目立たせる
- アニメーションハイライトで製品の特徴を紹介する
- 訪問者を引き付けるローテーションまたはタイピングの見出しを作成する
- 重要な行動喚起（CTA）ボタンに注意を向ける
- ユーザーがコンテンツをスクロールする際に、微妙な動きを追加する
CSSアニメーションはビデオやFlashと比較して軽量であるため、正しく使用すればサイトを遅くすることはありません。WordPressアニメーションプラグインやSeedProdのようなドラッグアンドドロップビルダーを使用すれば、コーディングなしで数回のクリックでこれらの効果を追加できます。
WordPressでアニメーションテキスト効果を追加する方法：3つの方法
WordPressにアニメーションを追加するにはいくつかの方法があります。WordPressプラグインを使用するか、CSS効果を手動で追加できます。
初心者がテキストエフェクトを手動で作成するのは難しいため、SeedProdのドラッグ＆ドロップウェブサイトビルダー、無料のアニメーションプラグイン、およびGutenbergブロックエディターを使用してテキストアニメーションを作成する方法を紹介します。
| 方法 | 最適 | 費用 |
|---|---|---|
| SeedProd | ランディングページ、カスタムテーマ、セールスページ | 有料（Pro） |
| アニメーションテキストブロック | Gutenbergの投稿とページ | 無料 |
| アニメート！ | クラシックエディターサイト | 無料 |
方法1. SeedProdでアニメーション見出しを作成する
最初のアプローチでは、WordPressの最高のウェブサイトビルダーであるSeedProdを使用します。ドラッグ＆ドロップのウェブサイトビルダーとアニメーション見出しブロックを使用すると、数回のクリックでエキサイティングなトランジションエフェクトを追加できます。
SeedProdを使用すると、コードを書いたり開発者を雇ったりすることなく、カスタムWordPressテーマやレスポンシブレイアウトを作成できます。ページをカスタマイズするための強力なコンテンツブロック、eコマースストア向けのWooCommerceサポートが含まれており、人気のWordPressプラグインとシームレスに統合されます。
さらに、このプラグインは軽量でブロートフリーなので、ページの読み込み時間を速く、ユーザーフレンドリーに保ちます。
以下の手順に従って、SeedProdでWordPressのテキストアニメーションを作成してください。
ステップ1. SeedProdプラグインのインストールと有効化
まず、SeedProdの料金ページにアクセスしてライセンスを選択してください。高度な機能については、SeedProd Proをお勧めします。
その後、SeedProdアカウントエリアにログインし、プラグインをダウンロードしてください。「ダウンロード」タブの下でライセンスキーを同時にコピーできます。
次に、プラグインをインストールし、WordPressサイトで有効化してください。ヘルプが必要な場合は、WordPressプラグインのインストール方法の手順に従ってください。
SeedProdを有効化した後、SeedProd » 設定に移動し、ライセンスキーを入力して、キーの検証ボタンをクリックしてください。
これで、アニメーションエフェクトを使用してページを構築する準備が整いました。
ステップ2.ランディングページテンプレートの選択
SeedProdを使用して、単一のWordPressページ、WordPressテーマ、またはビジュアルエディターを使用してランディングページを作成できます。このガイドでは、セールスページにテキストアニメーションを追加します。
まず、SeedProd » ランディングページに移動し、新しいランディングページを追加ボタンをクリックする必要があります。
ここでは、180以上のモバイル対応ランディングページテンプレートから選択できます。
私たちはセールスページを作成しているので、セールスタブをクリックしてさまざまなセールスページテンプレートを表示してください。気に入ったテンプレートを見つけたら、カーソルをテンプレートの上に移動して画像ホバーエフェクトが表示されるまで動かし、オレンジ色のチェックマークアイコンをクリックしてください。
次に、ランディングページ名とURL情報を追加できるポップアップウィンドウが表示されます。その後、保存してページ編集を開始ボタンをクリックします。
ステップ3. ランディングページコンテンツのカスタマイズ
ランディングページのテンプレートがSeedProdのドラッグ＆ドロップビジュアルエディターで開かれます。ここでコンテンツやスタイリングをカスタマイズし、さらに多くのページ要素を追加できます。
たとえば、現在の画像ブロックをクリックしてWordPressメディアライブラリまたはコンピューターからファイルをアップロードすることで、カスタムロゴを追加できます。
また、CTAボタンをクリックして左側の高度な設定パネルにアクセスすることで、異なる色、テキスト、スタイリングで編集することもできます。
新しい要素の追加も同様に簡単です。左側のブロックパネルからブロックをドラッグしてデザインにドロップします。たとえば、カウントダウンタイマーは、ページに緊急性を加え、機会を逃すことへの恐れからユーザーに行動を促すことができます。
カスタマイズが完了したら、次にヘッドラインテキストをアニメーション化する方法を見てみましょう。
ステップ4. アニメーション見出しブロックの追加
ランディングページのメインヘッドラインをアニメーション化したいとします。そのためには、アニメーションヘッドラインブロックを見つけて、ページデザインにドラッグする必要があります。
ブロックをクリックして設定を表示すると、ヘッドラインをアニメーション化する2つの方法が表示されます。
- ハイライト
- 回転
ハイライトスタイルは、テキストに形状アニメーションを追加します。形状には以下が含まれます。
- 円
- カーリー
- 下線
- ダブル
- ダブルアンダーライン
- 下線ジグザグ
- 斜め
- 取り消し線
- X
対照的に、ローテーションスタイルは、ヘッドラインにトランジション効果を追加します。これには以下が含まれます。
- タイピング
- クリップ
- フリップ
- バウンス
- ロール
- ズーム
- フェード
- 光速
- スライドダウン
さらに、アニメーションテキストの前後にテキストを追加したり、無限ループを有効にしたり、アニメーションの持続時間を変更したり、配置、フォント、見出しレベルを調整したりできます。
この例では、ハイライトドロップダウンメニューから「下線」形状を使用しています。
アニメーションテキストの効果に満足したら、右上隅にある保存ボタンをクリックします。
ステップ5. 設定を構成する
次のステップは、公開する前にランディングページの設定を構成することです。
ページ設定タブをクリックして、ページ名、URL、オンページSEO設定を編集し、Googleアナリティクスプラグインに接続します。
SeedProdでは、メールマーケティングサービスを接続し、ページにドメインマッピングを構成することもできます。詳細については、SeedProd統合ドキュメントを参照してください。
次のステップに進む前に、保存をクリックすることを忘れないでください。
ステップ6：ランディングページを公開する
デザインに満足したら、保存ボタンのドロップダウンメニューをクリックし、公開を選択します。
これでページを表示し、テキストアニメーションが機能していることを確認できます。
方法2. Animate It! CSSプラグインでテキストアニメーションを追加する
次の方法では、無料のWordPressアニメーションプラグインを使用して、ウェブサイトにアニメーションテキスト効果を追加します。これは、ページビルダーやWordPressブロックエディターの代わりに、従来のWordPress WYSIWYGエディターを使用している場合に良い解決策です。
（注意：Animate It!プラグインは2021年に最後に更新されました。クラシックエディターユーザーには引き続き機能します。現在のサポート状況については、WordPress.orgプラグインページを参照してください。）
まず、WordPressウェブサイトにAnimate It!プラグインをインストールして有効化します。設定なしでそのまま動作するはずです。
次に、新しいページを作成すると、WordPressエディター内に新しいボタン「Animate It!」が表示されます。
ボタンをクリックするとポップアップウィンドウが開き、アニメーションスタイルを選択できます。アニメーションスタイルは多数用意されているので、ドロップダウンメニューからお好みのものを見つけてください。
その後、遅延時間と持続時間、アニメーションを表示したいタイミングを選択できます。アニメーションをロード時、クリック時、ホバー時、またはスクロールオフセット時に実行することもできます。
設定に満足したら、Animate Itボタンをクリックしてアニメーションのプレビューを確認します。
次に、挿入ボタンをクリックして、投稿またはページにアニメーションを追加します。プラグインは、投稿エディターにいくつかのダミーコンテンツを含むショートコードを追加します。
そのコンテンツを、見出し、画像、カスタムテキストにカスタマイズして置き換えることができます。
これで変更を公開し、WordPressサイトでアニメーションテキストをライブでプレビューできます。
方法3. Gutenbergブロックエディターでアニメーションテキストを追加する
Animated Text Blockプラグインは、テキストアニメーション効果のためのネイティブGutenbergブロックを追加します。WordPressブロックエディターでページや投稿を作成している場合、これはショートコードや別のビルダーなしで他のブロックのように機能するため、最も直接的なオプションです。
長年多くのアニメーションプラグインをテストしてきましたが、そのほとんどは正しく機能するためにクラシックエディターまたは専用のページビルダーを必要とします。このプラグインは、ネイティブブロックとしてGutenbergに直接統合されているため、他のコンテンツと一緒に管理するのが簡単です。
ステップ1. アニメーションテキストブロックプラグインのインストール
WordPressダッシュボードでプラグイン » 新規追加に移動し、「Animated Text Block」を検索します。今すぐインストールをクリックし、次に有効化をクリックします。
プラグインは、有効化後に設定不要でそのまま動作します。
ステップ2. ページにブロックを追加する
Gutenbergブロックエディターで任意の投稿またはページを開きます。+ブロックインサーターボタンをクリックし、「Animated Text」を検索して、コンテンツエリアにブロックを追加します。
ページセクションの上部やカバーブロック内など、アニメーション見出しを表示したい場所に配置します。
ステップ3. アニメーションの設定
ブロックを選択した状態で、ブロック内に直接アニメーションテキストを入力します。右側の設定パネルを使用して、アニメーションスタイルを選択し、速度を設定し、アニメーションがループするかどうかを制御します。
プラグインは、タイピング、フェード、バウンス、スライド効果など、複数のスタイルをサポートしています。ほとんどのサイトで、控えめでプロフェッショナルな外観にするには、「タイピング」または「フェード」から始めてください。
ステップ4. プレビューと公開
プレビューをクリックして、公開前にアニメーションを確認します。効果に満足したら、公開または更新をクリックして変更を保存します。
WordPressのテキストアニメーションに関するFAQ
テキストアニメーションはGutenbergブロックエディターで機能しますか？
はい。Animated Text Block pluginは、アニメーションテキストエフェクト用のネイティブGutenbergブロックを追加します。インストールして有効化したら、インサーターでブロックを見つけて、任意の投稿またはページにドロップします。複数のアニメーションスタイルをサポートしており、ショートコードや別のページビルダーなしで動作します。
テキストアニメーションは、Core Web Vitalsやページ速度に影響しますか？
CSSベースのアニメーションは軽量であり、控えめに使用する場合、一般的にCore Web Vitalsに影響しません。リスクは、1つのページでアニメーションする要素が多すぎることによって発生し、レイアウトシフトを引き起こしたり、レンダリングを遅延させたりする可能性があります。ほとんどのモダンブラウザは、アニメーションを好まないユーザーのためにアニメーションを削減または無効にするprefers-reduced-motionメディアクエリをサポートしています。
WordPressでローテーションヘッドラインとスクロールアニメーションの違いは何ですか？
ローテーションヘッドラインは、通常ヒーローセクションで、ページ読み込み時に単語やフレーズを循環させます。スクロールアニメーションは、ユーザーがページを下にスクロールすると、特定の要素がビューポートに入ったときにトリガーされます。このガイドでは、読み込み時に実行されるローテーションおよびハイライトされたヘッドラインエフェクトについて説明します。SeedProdのスクロール表示機能は、スクロールトリガーアニメーションを別途処理します。
Animated Headlineブロックを使用するためにSeedProd Proが必要ですか？
はい。Animated HeadlineブロックはPro機能であり、SeedProdの無料バージョンでは利用できません。有料プラグインなしでテキストアニメーションが必要な場合は、Gutenbergブロックエディター用のAnimated Text Block pluginまたはクラシックエディター用のAnimate It! pluginを使用してください。どちらも無料です。
プラグインなしでWordPressにテキストアニメーションを追加するにはどうすればよいですか？
テーマの追加CSSパネル（外観 » カスタマイズ » 追加CSS）を通じて適用されるCSSキーフレームアニメーションを使用できます。@keyframesルールを記述し、animationプロパティを使用してテキスト要素に割り当て、カスタムHTMLブロックまたはテーマのマークアップにクラスを追加します。このアプローチには基本的なCSSの知識が必要であり、初心者よりも開発者により適しています。
WordPressページにテキストアニメーションを追加する準備はできましたか？SeedProdを試して、Animated Headlineブロックを使用して、ヒーローヘッドラインを数分で目立たせましょう。
こちらもWordPressでダイナミックなランディングページを作成するガイドが役立つかもしれません。
お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。
