サイトに動きをつけると何が変わる？
「あなたのサイト、ちょっと単調じゃないですか？」
Webサイトにアニメーションを加えると、ユーザーの目を引き、滞在時間が伸びることがわかっています。
適切な動きを加えることで、プロフェッショナルな印象を与え、コンバージョン率を向上させることも可能です。
例えば、CTAボタンが軽く揺れたり、スクロール時にコンテンツが滑らかに表示されるだけで、ユーザーの直帰率が減少します。
では、どうやって実装するのでしょうか？
CSSアニメーションの基本
CSSアニメーションは、@keyframes ルールと animation プロパティを使うことで、要素をスムーズに動かすことができます。
例: フェードインアニメーション
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.element {
animation: fadeIn 1.5s ease-in-out;
}
このコードを適用すると、要素がフェードインするアニメーションが追加されます。
例: スライドインアニメーション
@keyframes slideIn {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.box {
animation: slideIn 1s ease-in-out;
}
このコードでは、左側から要素がスライドインする効果が得られます。
WordPressでアニメーションを適用する方法
WordPressでCSSアニメーションを適用するには、以下の方法があります。
- カスタムCSSを使う
- WordPressの「カスタマイズ」→「追加CSS」にコードを追加。
- 子テーマのCSSファイルに追加
style.cssに直接記述。
- プラグインを活用する
- 「Animate It!」や「Elementor」などのプラグインを使えば、コード不要で簡単にアニメーションを追加できます。
Elementorを使ったアニメーションの追加方法
- Elementorのエディタを開く。
- 任意のウィジェットを選択。
- 「高度な設定」→「モーション効果」から、アニメーションを選択。
プラグインを活用すれば、コーディング不要で手軽にアニメーションを追加できます。
簡単なコードサンプル
以下のコードを適用することで、ボタンをホバーした際に拡大するアニメーションを作成できます。
.button {
transition: transform 0.3s ease;
}
.button:hover {
transform: scale(1.1);
}
このコードを適用すると、ボタンにカーソルを乗せた際、少し拡大するアニメーションが加わります。
まとめ
アニメーションを活用すると、サイトの魅力がアップし、ユーザーの関心を引きつけることができます。
ポイント:
- CSSの基本的なアニメーションを理解する。
- WordPressで適用する方法を学ぶ。
- 実際にコードを書いて試してみる。
- プラグインを活用して、簡単にアニメーションを追加。
あなたのサイトにも、ぜひアニメーションを取り入れてみてください！
コメント