このページでは、webサイト機能の自由にデザインおよびAIでデザイン（新エディタ）において、ページ内の「セクション」にスクロール時の動きや表示アニメーションを設定する方法について説明しています。視覚的な演出を加えることで、より印象的なページ表現が可能になりますので、webサイト作成の仕上げとして設定してみましょう。
🔰 アニメーションの設定とは
「アニメーション」とは、コンテンツの表示に滑らかな動きのある演出を加えることで、「今、何が起きたか」を直感的に伝える要素です。
※ アニメーション設定はセクション単位でのみ設定可能です。
※ 個別のパーツ（テキスト・画像など）には直接設定できません。
セクションをクリックして選択している状態で、右の設定画面の「詳細設定」のタブをクリックすると、アニメーションの設定が表示されます。
スクロール効果
スクロール時の要素の動き方を設定します。
◾通常スクロール
ページのスクロールに合わせて、セクションが一緒に移動します。
特別な動きはなく、一般的な表示方法です。
◾固定
スクロールしても、セクションが画面上の同じ位置に留まります。
背景画像や強調したいエリアに使用すると効果的です。
※一般的に「パララックス風」の表現として使われます
◾フェードアウト
スクロールに応じて、セクションが徐々に透明になり消えていきます。
※この設定はページ最上部のセクションのみ設定可能です
アニメーション
セクションが表示される際の動きやタイミングを設定します。
◾ 方向（表示の動き）
セクションがどの方向から現れるかを指定します。
※スクロールに応じて、指定した方向からスライドしながら表示されます
◾ 遅延時間
アニメーションが開始されるまでの時間を設定します。
単位：秒
例：0.5 → 表示開始まで0.5秒待機
複数のセクションで時間をずらすことで、段階的な表示演出が可能です。
◾ 再生時間
アニメーションが完了するまでの時間を設定します。
単位：秒
例：1 → 1秒かけて表示
値を大きくするとゆっくり、小さくすると素早く表示されます。
💡 一般的な使用例
ヘッダーのセクションを［スクロール効果：固定］、各セクションに［方向：下から上へ］と［再生時間：3秒］を設定した場合
注意
・アニメーションを多用すると、ページの表示が重く感じられる場合があります
・動きが多すぎると、かえって視認性が低下することがあります
・スマートフォンや一部の環境では動作や見え方が異なる場合があります
💭よくあるトラブル例
😣 アニメーションが動かない
→ セクションに設定されているか確認してください
→ すでに表示済みの状態では再生されない場合があります（再読み込みで確認）
😣 セクションを選択しているのにフェードアウトが設定できない
→ 最上部のセクション以外には設定できません
😣 動きが不自然・遅い
→ 再生時間が長すぎる可能性があります
→ 遅延時間とのバランスをご確認ください