WordPressコンテンツにクールなCSS3アニメーションを追加する方法【Animate It!プラグイン活用術】

物語を語るという芸術は、ホモ・サピエンスが言葉を話せるようになるずっと前から存在していたのかもしれません。ストーリーテリングは私たちとともに進化し、その時代に使える道具へと適応してきました。口承によって世代から世代へと語り継がれてきた物語は、手書きの本から大量印刷、デジタルワープロへと進化を遂げ、近年ではインターネットへと舞台を移しています。人類の進化の歴史から見ると、現代のテクノロジーの潜在能力をまだ十分に引き出せていないように感じられます。動画がすでに仮想世界での覇権争いを始めている一方で、ウェブコンテンツの大部分は今なおテキスト中心なのです。

現代のウェブコンテンツはインタラクティブであるべきであり、プレーンなテキストに加えてさまざまなメディアを取り入れることが求められます。ストーリーテリングをワンランク上のレベルへと引き上げてくれるツールも存在します。そして、WordPressユーザーであれば「Animate It!」プラグインを使うことで、コンテンツにクールなCSS3アニメーションを簡単に追加できます。

CSS3アニメーションで何ができるのか?

HTML5と並んで、CSS3はモダンなウェブデザインを語るうえで欠かせないキーワードです。簡潔に言えば、CSSとはレイアウト、配置、フォント、色など、ウェブページの見た目をコントロールするための構成要素です。その最新版であるCSS3は、コードだけで画像やアニメーションを作成できるほど高機能になっています。

幸いなことに、WordPressサイトでCSS3を活用するために、高度なコーディングスキルは必要ありません。「Animate It!」プラグインを使えば、エディター内のボタンをクリックするだけで、投稿・ウィジェット・固定ページにCSS3アニメーションを適用できます。さらに、アニメーションを発火させるトリガーも細かくコントロール可能です。たとえば、スクロール・クリック・ホバーのタイミングでアニメーションを実行したり、個々のアニメーションブロックごとに異なるスクロールオフセットを設定したりできます。このプラグインには、以下のような豊富な機能が搭載されています。

• 50種類以上の登場・退場・注意喚起アニメーション
• 遅延機能と再生時間のコントロールにより、洗練されたアニメーションシーケンスを作成可能
• アニメーションを無限に、または任意の回数だけ繰り返し再生できる
• 個々のアニメーションブロックにカスタムCSSクラスを追加するオプション
• スマートフォンやタブレットでのアニメーションの有効/無効を切り替えるオプション

Animate It!プラグインを使えば、記事に手軽なインタラクティブ性を加えたり、魅力的なセールスページを作成したり、小説の情感を深めたり、さらにはインパクトのあるビジネスプレゼンテーションを作ることさえ可能です。ただし、やりすぎには注意が必要です。訪問者に過剰なアニメーションを見せつけるのは、忠実な読者を獲得するための最善の方法ではありません。

Animate It!を使い始める

プラグインをインストールして有効化すると、WordPressエディターにアニメーション追加用のボタンが表示されます。このボタンはビジュアルモードでのみ表示されますが、ショートコードの書式を覚えれば、テキストモードから直接コードを挿入することも可能です(詳細は後述します)。

ボタンを押すとオプションウィンドウが開き、3つのタブからアニメーションをカスタマイズできます。最初のタブは「Entry(登場)」です。ここでは、特定の条件を満たしたときに画面へ入ってくるアニメーションを設定します。4つのドロップダウンオプションでアニメーション効果を細かく調整できます。

• Animation(アニメーション):使用したいアニメーションの種類を選択します。
• Delay(遅延):アニメーションが開始されるまでの待ち時間を調整します。
• Duration(再生時間):アニメーションが最初から最後まで再生される長さです。数値が大きいほど、アニメーションはゆっくりと動きます。
• Timing(タイミング):一度に再生されるアニメーションの割合です。たとえば「easeIn」効果を選ぶと、アニメーションは開始時にゆっくり動き、終盤に向けて加速します。

「Animate It!」ボタンでプレビュー再生すれば、効果の組み合わせを実際に確認できます。結果に満足したら「Insert(挿入)」ボタンを押して、コンテンツに反映させましょう。

「Exit(退場)」タブはEntryタブとほぼ同じ構成ですが、こちらは画面から消えていくアニメーションを追加するためのものです。この2つを組み合わせれば、画面に現れてから消えていくオブジェクトを表現できます。

「Options(オプション)」タブでは、アニメーションの全般的な設定を行います。ここでは、アニメーションをループ再生するか1回限りにするかの指定、要素の最終状態の保持、カスタムCSSコードの追加、そしてアニメーションを開始するトリガーの設定が可能です。トリガーについて具体的に説明すると、「Animate On」設定で「Scroll」を選択した場合、その領域が画面内に表示されたときにのみアニメーションが開始されるようになります。

アニメーションさせたいコンテンツを追加する

「Insert」ボタンを押すと、コンテンツエリアに数行のショートコードが挿入されます。このショートコードこそが、アニメーションをコントロールする仕組みです。コードは単純な値の集まりなので、コーディングに自信がある人は手動で編集しても問題ありません。しかし、特別な理由がない限りは、Animate It!ボタンを使う方が確実で効率的です。

また、「Please add your content in this area.(このエリアにコンテンツを追加してください)」というテキストも表示されます。ここに、アニメーションさせたい要素を自由に記述します。テキスト、画像、アイコン、ロゴ、音声、動画はもちろん、他のショートコードを埋め込むことも可能です。筆者はTyped Jsプラグインで生成したタイプライター風エフェクトのショートコードを組み込んでみましたが、非常に良い仕上がりになりました。

Animate It!プラグインの使い方を一言でまとめるなら、ずばり「実験してみること」です。いろいろと触りながら、さまざまな組み合わせを試して、理想の演出を見つけましょう。それ自体がとても楽しい作業です。以下は、筆者が1分足らずで作成できたサンプルです。Animate It!プラグインとTyped Jsプラグインを組み合わせたものになります。

あなたのウェブコンテンツにも、インタラクティブな要素を追加するタイミングが来ていると思いませんか?このプラグインを試してみる予定はありますか?あるいは、アニメーションには別のプラグインをお使いですか?ぜひ下のコメント欄で体験談をシェアしてください。