アニメーションを使うと、見出しや画像、ボタンなどが画面に現れるときに、ふわっと浮かび上がる・横からすべり込むといった動きを付けられます。この記事では、アニメーションでできること、設定する場所、すべてのアニメーションに共通する設定と注意点を説明します。それぞれのアニメーションの見え方と設定項目は、種類ごとの記事で説明しています。
アニメーションの種類
アニメーションは4種類あります。どう見せたいかに合わせて選びます。
| 見せたいこと | 選ぶアニメーション | 詳しい記事 |
|---|---|---|
| ふわっと浮かび上がるように現れる | フェード | フェードを設定する |
| 横や下からすべり込むように現れる | スライド | スライドを設定する |
| 小さい状態から大きくなって現れる（または大きい状態から縮む） | ズーム | ズームを設定する |
| 色の幕がはがれるように中身が現れる | ワイプ | ワイプを設定する |
アニメーションを付けられる場所
見出し・テキスト・画像・ボタンなどのパーツのほか、パーツをまとめているインナー、コンテナ、セクションにも付けられます。インナーやセクションに付けると、中にあるパーツがまとまって動きます。
アニメーションは「こだわり」モードで設定します
アニメーションの設定は、右側のプロパティメニューで行います。「かんたん」モードではプロパティメニューが表示されないため、設定できません。編集画面上部の「こだわり」に切り替えてください。詳しくはAIエディターのモードを切り替えるをご覧ください。
設定のしかた
- アニメーションを付けたいパーツ（またはインナー・コンテナ・セクション）をクリックして選びます。
- 右側のプロパティメニューで「アニメーション」タブを開きます。
- 「アニメーション」で種類を選び、トリガーやタイミングを設定します。
- パーツの下に表示されるツールバーの右端の「▶」をクリックすると、編集画面のまま動きを確認できます。
アニメーションを外すときは、「アニメーション」で「なし」を選びます。
共通の設定
どの種類のアニメーションにも、次の設定があります。
トリガー（いつ動かすか）
| トリガー | 動くタイミング |
|---|---|
| ページ表示 | その部分が画面に入ったときに再生されます。ページを開いたときではありません。 |
| クリック | その部分をクリックするたびに、最初から再生されます。 |
| ホバー | マウスを乗せるたびに、最初から再生されます。 |
| スクロール | スクロールした量に合わせて動きが進みます。 |
「ページ表示」を選ぶと「ページ表示の条件」が表示され、画面のどこまで入ったら再生するか（発火位置）と、再生回数（1回のみ／毎回再生）を設定できます。「毎回再生」にすると、スクロールで画面の外に出して戻すたびに再生されます。「スクロール」を選ぶと、動きの始まりと終わりの位置（スクロール範囲）を設定できます。
タイミング（どのくらいの速さで動かすか）
| 項目 | 内容 |
|---|---|
| 継続時間 | 動きにかける時間（ms ＝ 1000分の1秒）。最大 2000ms です。 |
| 遅延時間 | 動き始めるまでの待ち時間（ms）。 |
| イージング | 動きの速さの変化。リニア（一定の速さ）／イーズアウト（はじめ速く、だんだんゆっくり）／イーズインアウト（ゆっくり始まり、ゆっくり終わる）／バウンス から選びます。 |
スタッガー（中のものを順番に出す）
インナー・コンテナ・セクションに付けたときは「スタッガー」を選べます。チェックを入れると、中にあるものが「要素ごとのずれ」（ms）ずつ時間をずらして、順番に再生されます。たとえば、見出し・テキスト・ボタンが入ったインナーに付けると、見出し→テキスト→ボタンの順に現れます。
うまく動かないときは
ページの一番上に置いた部分は、開いた瞬間に動き終わってしまう
「ページ表示」は、その部分が画面に入ったときに再生されます。ページを開いた時点で見えている部分（ページの一番上など）は、開いた瞬間に再生されるため、見る人が気付く前に終わってしまうことがあります。見せたい動きは、少しスクロールした先に置くと伝わりやすくなります。
継続時間を長くしても一瞬で終わるように見える
イージングが「イーズアウト」のときは、動きの大部分がはじめの短い時間で進みます。ゆっくり動かしたいときは、「リニア」に変えてみてください。
カードを並べたセクションにスタッガーを付けても、カードが順番に出ない
スタッガーは、付けた場所のすぐ内側に並んでいるものだけを順番に出します。カードがさらにひとつのかたまりの中に入っている場合、カードは同時に現れます。カードを1枚ずつ出したいときは、カード（インナー）ごとにアニメーションを付け、遅延時間を 0ms・500ms・1000ms のように少しずつずらします。
アニメーションの付けすぎに注意
多くの部分に動きを付けると、読みにくくなったり、ページが重く感じられたりすることがあります。見てほしい部分に絞って使いましょう。
スマートフォンでの動きを確認する
プレビューは、パソコンの表示で開きます。スマートフォンの画面幅での動きを確認したいときは、Google Chrome の場合、プレビューを開いたあと次の手順で確認できます。
- キーボードの F12 キーを押して、デベロッパーツールを開きます。
- Ctrl＋Shift＋M キーを押して、デバイスツールバーを表示し、機種や画面幅を選びます。
- F5 キーを押してページを再読み込みします。スマートフォンの画面幅で、アニメーションが最初から再生されます。