ローディング風アニメーションを作成する

Point：Studioでアニメーションやエフェクトを設定する

Studioでは、アニメーションやエフェクトなど、動きのある表現を条件付きスタイルを利用して設定します。

サイト内のボックス要素に、通常時のスタイルと条件付きスタイルの両方を設定すると、その差分がアニメーションとして再生されます。アニメーションの動き方は「イージング」「時間」「遅延」の3項目で調整します。

条件付きスタイルの「スクロール」では、スクロールに伴って要素が動くエフェクト表現を設定できます。

ローディング風アニメーションを作成する手順

ローディング風アニメーションは、画面全体にかぶせたボックスに条件付きスタイルを設定して実現します。

表示時にボックスを一時的に前面に出し、不透明度や遅延時間を調整することで、サイト読み込み中のようなスプラッシュスクリーン表現を作成できます。

デザインエディタを開き、ページパネルからページを追加、または既存ページを開きます。
ページ内にボックスを追加します。追加パネルを開き、[基本]タブから[box]を選択してページに追加します。
右パネルで[ボックス]タブを選び、[レイアウト]設定でボックスサイズ（幅・高さ）を設定します。パネルが閉じている場合は、右パネルを開いてください。
- 幅：100%
- 高さ：100vh

手順1で追加した親ボックス内に、背景用のボックスを追加します。
追加パネルを開き、[基本]タブから[box]を選択してページに追加したら、手順1で追加したボックス内に移動して親子ボックスの構造にします。
右パネルで[ボックス]タブを選び、[レイアウト]設定でボックスサイズ（幅・高さ）を設定します。パネルが閉じている場合は、右パネルを開いてください。
- 幅：100%
- 高さ：100%
[外観]設定の[背景色]をカラーパレットを利用して黒に設定します。

手順2で追加したボックス内に、表示したいテキストやロゴを追加します。
レイヤーパネルで追加するレイヤーを確認しながら、追加したい要素に合わせたボックスを追加します。
必要に応じて、追加した要素に条件付きスタイルを付与してアニメーションを設定します。
この記事で示した例のようなアニメーション表現を設定する場合は、以下の記事を参考に設定してください。
- タイピング風テキストを作成する

手順2で追加した背景のボックスを選択します。対象のボックスの選択がうまくできない時は、レイヤーパネルを利用します。
通常時のスタイルを設定します。
右パネルで[ボックス]タブを選択し、[外観]の[不透明度]を0%に設定します。パネルが閉じている場合は、右パネルを開いてください。
次に、条件付きスタイルを設定します。
- 右パネル右上の[条件スタイル]をクリックし、[出現時] を選択します。
- パネルを上部にスクロールして[カスタム設定]を選択し、以下の設定をします。アニメーションの時間は仮で設定しているため、設定確認時に微調整してください。
  - [外観]の[不透明度]を100%
  - [アニメーション]の時間を3秒、遅延を3秒

この設定で、親ボックスが表示直後に前面に表示され、その後、通常時の状態へ戻り、背面へ移動します。

手順1で追加した親ボックスを選択します。
通常時のスタイルを設定します。
ボックスのポジション（位置）と重ね順を以下のように変更します。
- 位置：固定
- 重ね順：-3
次に、条件付きスタイルを設定します。
親ボックスを選択したまま、右パネル右上の[条件スタイル]をクリックし、[出現時] を選択します。
パネルを上部にスクロールして[カスタム設定]を選択し、以下の設定をします。アニメーションの時間は仮で設定しているため、設定確認時に微調整してください。
- 重ね順：5
- [アニメーション]の時間を0秒、遅延を5秒

エディタの右上の矢印ボタン（プレビューボタン）をクリックして、ライブプレビューを見ながら、設定を微調整します。

その他のデザインも含めて全ての設定が完了したら、サイトの公開または更新をして、公開サイトへ反映します。

スプラッシュ

スプラッシュスクリーン

ローディングページ