詳細設定 - アニメーションのカスタマイズ

  • 公開日 Nov 4, 2025
  • 1 分で読めます
Prev Next

ClickFunnels は、コンテナ (セクション、行、列、要素) の外観と機能を完全にパーソナライズするのに役立つ高度な設定を提供します。これらの設定により、コンテナのスタイル、アニメーション、  ロジックをより詳細に制御できます。この記事では、コンテナに動きや視覚効果を追加して、ユーザー エンゲージメントを強化し、よりインタラクティブなエクスペリエンスを作成できる詳細設定のアニメーション セクションに焦点を当てます。

必要条件

  • アクティブなClickFunnelsアカウント

  • ワークスペースで作成されたページ

  • エディターで追加されたセクション、行、列、または要素

アニメーションの有効化

コンテナのアニメーションを有効にするには、[ 詳細設定 ] タブに移動し、[ アニメーション] オプションを選択します。アニメーション設定を切り替えて、オプションをアクティブにします。有効にすると、アニメーションのプロパティをカスタマイズできます。

アニメーション設定

スタイル

[スタイル] ドロップダウンでは、要素またはコンテナーに適用するアニメーションの種類を選択できます。オプションには、グライドイン、フェードイン、パフインなどがあります。各スタイルは、要素がページに入る方法、またはページ上で操作する方法を定義します。たとえば、グライドインは要素を特定の方向からスライドさせて表示し、パフインは要素が表示されるときに微妙な拡張効果を作成します。これらのスタイルを使用すると、ページの視覚的な流れを強化する動的な動きを追加できます。

トリガー

この設定は、アニメーションの開始タイミングをコントロールします。以下から選択できます。

  • ページ読み込み時: ページが読み込まれるとすぐにアニメーションが開始されます。

  • ページスクロール中(表示されるようになる): ユーザーがスクロールしたときに要素がビューポートに入ると、アニメーションがトリガーされます。

タイミング機能

タイミング 関数(Timing Function )設定は、アニメーションの速度と流れに影響する時間の経過に伴うアニメーションの進行を決定します。以下は、利用可能なオプションの詳細な説明です。

  • 簡単: スムーズで自然なトランジションを提供します。アニメーションはゆっくりと始まり、途中で加速し、最後に減速し、流動的で有機的に感じられます。

  • リニア: アニメーション全体を通して、加速や減速のない一貫した速度を確保します。このオプションは、単純で均一なトランジションに最適です。

  • イーズイン: アニメーションをゆっくりと開始し、進行するにつれて加速します。これは、要素がページに入るときに蓄積感や期待感を生み出すのに最適です。

  • イーズアウト: アニメーションをすばやく開始し、最後に向かって速度を落とします。これにより優しい仕上がりが生まれ、自然に色あせたり落ち着いたりする必要がある要素に適しています。

  • イーズインアウト: イーズイン と イーズアウトのエフェクトを組み合わせます。アニメーションはゆっくりと始まり、途中で速度が上がり、最後に再び速度が遅くなります。ほとんどのトランジションに適したバランスのとれた洗練された効果を提供します。

プレイディレクション

アニメーションの方向と再生をコントロールします。オプションは次のとおりです。

  • [標準]: アニメーションが最初から最後まで再生されます。

  • リバース: アニメーションは、最後から最初まで逆方向に再生されます。

  • 代替: アニメーションは繰り返し前後に交互に変化します(ループが有効)。

  • 代替反転: アニメーションは逆方向に開始され、交互に再生されます(ループが有効)。

方向

[方向]設定は、バウンスインやグライドインなど、動きを伴うアニメーションスタイルで使用でき、アニメーションの発生元を指定できます。たとえば、バウンスイン アニメーションで 下 を選択すると、要素が下から跳ね返って表示され、グライドイン アニメーションで 左 を選択すると、要素が左からスライドします。この設定により、アニメーションのエントリ ポイントを正確に制御し、デザインのフローとインタラクティブ性が向上します。

期間

アニメーションの長さ(ミリ秒単位)を設定します。たとえば、 1200 ミリ秒 の持続時間は遅く、より目立つアニメーションを作成し、短い持続時間はより速くなります。

遅延

この設定により、アニメーションが開始されるまでに遅延(ミリ秒単位)が発生します。たとえば、 600 ミリ秒 の遅延は、複数の要素のアニメーションをずらして、レイヤー効果を作成するのに役立ちます。

一度だけアニメート

このオプションを有効にすると、要素が初めて表示されたときにのみアニメーションが再生されます。これは、後続のスクロールで繰り返さずに一度アニメーション化する必要がある要素に特に便利です。

ループ

このオプションを有効にすると、アニメーションが無期限に繰り返されます。これは、特定の要素に継続的に注意を引くのに役立ちます。

プレビューアニメーション

目的のアニメーション プロパティを設定したら、エディターの [アニメーションのプレビュー ] ボタンを使用して、アニメーションをコンテナに適用する前にアニメーションがどのように表示されるかを確認します。

実用

アニメーションは、ファネルにプロフェッショナルで魅力的なタッチを加えることができます。例えば：

  • ページの読み込み時に注目を集めるために、主要な見出しに 600 ミリ秒の遅延でフェードイン スタイルを使用します。

  • ページスクロールでトリガーされる グライドイン アニメーションを適用して、ユーザーの焦点を重要な要素に誘導します。

関連記事