詳細設定 - アニメーションのカスタマイズ
公開日: 更新日:
ClickFunnels は、コンテナ (セクション、行、列、要素) の外観と機能を完全にパーソナライズするのに役立つ高度な設定を提供します。これらの設定により、コンテナのスタイル、アニメーション、 ロジックをより詳細に制御できます。この記事では、コンテナに動きや視覚効果を追加して、ユーザー エンゲージメントを強化し、よりインタラクティブなエクスペリエンスを作成できる詳細設定のアニメーション セクションに焦点を当てます。
-
アクティブなClickFunnelsアカウント
-
ワークスペースで作成されたページ
-
エディターで追加されたセクション、行、列、または要素
アニメーションの有効化
Section titled “アニメーションの有効化”コンテナのアニメーションを有効にするには、[ 高度な ] タブに移動し、[ アニメーション] オプションを選択します。アニメーション設定を切り替えて、オプションをアクティブにします。有効にすると、アニメーションのプロパティをカスタマイズできます。
アニメーション設定
Section titled “アニメーション設定”[Type] ドロップダウン(画面では英語で表示されます)では、要素またはコンテナーに適用するアニメーションの種類を選択できます。オプションには、グライドイン、フェードイン、パフインなどがあります。各タイプは、要素がページに入る方法、またはページ上で操作する方法を定義します。たとえば、グライドインは要素を特定の方向からスライドさせて表示し、パフインは要素が表示されるときに微妙な拡張効果を作成します。これらのタイプを使用すると、ページの視覚的な流れを強化する動的な動きを追加できます。
この設定は、アニメーションの開始タイミングをコントロールします。以下から選択できます。
-
なし: 公開ページでアニメーションは再生されません。フェードイン や グライドイン などの登場アニメーションでは、エディター上では通常どおり表示されていても、公開ページでは要素が非表示のまま、または本来の位置からずれたままになります。要素をアニメーションさせたくない場合は、なし を選ぶのではなく、アニメーションをオフにしてください。
-
ページロード時: ページが読み込まれるとすぐにアニメーションが開始されます。
-
ページスクロール時（表示される）: ユーザーがスクロールしたときに要素がビューポートに入ると、アニメーションがトリガーされます。
タイミング関数
Section titled “タイミング関数”タイミング関数 設定は、アニメーションの速度と流れに影響する時間の経過に伴うアニメーションの進行を決定します。以下は、利用可能なオプションの詳細な説明です。
-
イーズ: スムーズで自然なトランジションを提供します。アニメーションはゆっくりと始まり、途中で加速し、最後に減速し、流動的で有機的に感じられます。
-
リニア: アニメーション全体を通して、加速や減速のない一貫した速度を確保します。このオプションは、単純で均一なトランジションに最適です。
-
イーズイン: アニメーションをゆっくりと開始し、進行するにつれて加速します。これは、要素がページに入るときに蓄積感や期待感を生み出すのに最適です。
-
イーズアウト: アニメーションをすばやく開始し、最後に向かって速度を落とします。これにより優しい仕上がりが生まれ、自然に色あせたり落ち着いたりする必要がある要素に適しています。
-
イーズインアウト: イーズイン と イーズアウトのエフェクトを組み合わせます。アニメーションはゆっくりと始まり、途中で速度が上がり、最後に再び速度が遅くなります。ほとんどのトランジションに適したバランスのとれた洗練された効果を提供します。
アニメーションの方向と再生をコントロールします。オプションは次のとおりです。
-
ノーマル: アニメーションが最初から最後まで再生されます。
-
リバース: アニメーションは、最後から最初まで逆方向に再生されます。
-
オルタネート: アニメーションは繰り返し前後に交互に変化します(ループが有効)。
-
オルタネートリバース: アニメーションは逆方向に開始され、交互に再生されます(ループが有効)。
[方向]設定は、バウンスインやグライドインなど、動きを伴うアニメーションスタイルで使用でき、アニメーションの発生元を指定できます。たとえば、バウンスイン アニメーションで 下 を選択すると、要素が下から跳ね返って表示され、グライドイン アニメーションで 左 を選択すると、要素が左からスライドします。この設定により、アニメーションのエントリ ポイントを正確に制御し、デザインのフローとインタラクティブ性が向上します。
デュレーション
Section titled “デュレーション”アニメーションの長さ(ミリ秒単位)を設定します。たとえば、 1200 ミリ秒 の持続時間は遅く、より目立つアニメーションを作成し、短い持続時間はより速くなります。
この設定により、アニメーションが開始されるまでに遅延(ミリ秒単位)が発生します。たとえば、 600 ミリ秒 の遅延は、複数の要素のアニメーションをずらして、レイヤー効果を作成するのに役立ちます。
一度だけアニメーションする
Section titled “一度だけアニメーションする”このオプションを有効にすると、要素が初めて表示されたときにのみアニメーションが再生されます。これは、後続のスクロールで繰り返さずに一度アニメーション化する必要がある要素に特に便利です。
このオプションを有効にすると、アニメーションが無期限に繰り返されます。これは、特定の要素に継続的に注意を引くのに役立ちます。
Preview animation
Section titled “Preview animation”目的のアニメーション プロパティを設定したら、エディターの [Preview animation] ボタン(画面では英語で表示されます)を使用して、アニメーションをコンテナに適用する前にアニメーションがどのように表示されるかを確認します。アニメーションの再生中は、ボタンが [Stop animation] に変わります。
アニメーションは、ファネルにプロフェッショナルで魅力的なタッチを加えることができます。例えば：
-
ページの読み込み時に注目を集めるために、主要な見出しに 600 ミリ秒の遅延でフェードイン アニメーションを使用します。
-
ページスクロールでトリガーされる グライドイン アニメーションを適用して、ユーザーの焦点を重要な要素に誘導します。