LP Creatorにローディングアニメーションを追加する方法を解説します。
ローディングアニメーションとは、ページが表示される時に最初に表示されるアニメーションのことです。
LP CreatorではLottieなどからダウンロードしたjsonファイルをアップロードして追加します。
Lottieを利用するにはLottieのアカウント登録が必要です。
以降の手順でjsonファイルの取得方法も解説しています。
カスタマイザーから追加する
「外観」＞「カスタマイズ」から「[LPC]共通設定」に進みます。
「[LPC]共通設定」のメニューから「ローディング設定(Lottie)」を選択します。
ここからjsonファイルのアップロードや、表示の大きさ、再生速度やループ回数、クローズアニメーションなどが設定できます。
表示範囲について
ローディングアニメーションを表示させたいページを選択します。
- 「なし」アニメーションを表示しません
- 「トップ（フロントページのみ）」は、トップページのみ表示します。
- 「全ページ」は、全てのページで表示します。
- 「LPテンプレートのみ」は、テンプレートを「LP」にしたページのみ表示します
- 「LPテンプレート以外」は、上記以外のページに表示します
ループ回数とローディング時間について
ループ回数は、アニメーションが指定した回数ループしたら終了します。
ローディングの最長表示時間は、アニメーションを表示する時間を指定します。
基本的にはどちらかのみを設定します。
- ループした回数で終了させる場合は、ループ回数に１以上を入力して、ローディング時間に０を設定して下さい。
下記の例は１回ループしたら終了になります。
- 指定時間で終わらせる場合は、ループ回数を０にして、ローディング時間（ミリ秒）に時間を設定します。
下記の例は1000ms(=1秒)で終了させます。
終了アニメーションについて
ローディングの終了時に表示させるアニメーションです。
終了アニメーション表示時間(ms)でスピードの設定が可能です。
冒頭のデモは「真ん中→円で開く」に設定しています。
不要な場合は「なし」に設定して下さい。
jsonがない場合は終了アニメーションのみ表示させることも可能です。
LottieのJSONファイルのダウンロード方法
IllustratorやFigmaなどで自作したアニメーションのjsonファイルもアップロードできます。
まずLottieにアカウント登録して下さい。
ここから利用したいアニメーションをクリックします。
王冠マークが付いているものは有料のものです。
著作権等の違反アニメーションは利用しないようにご注意下さい。
弊社は一切の責任を負いかねます。
クリックしましたら右上にある緑ボタン「Download」をクリックします。
下記の赤色の箇所で色味や速度の変更も可能です。
一番下に出てくる「Save」ボタンを押すと、次の画面が立ち上がります。
立ち上がった画面の右側に「Lottie JSON」が一番下にあるので、そこにカーソルを持っていくとDownloadが表示されますので押すとダウンロードされます。（Freeプランの場合）
Lottie JSONファイルの「ファイル選択」を選んでダウンロードしたファイルをアップロードします。
アップロード後も変更や削除が可能です。
