Studioでタイピング風にテキストが一文字ずつ表示されるアニメーションを設定する方法を紹介します。
Point：Studioでアニメーションやエフェクトを設定する
Studioでは、アニメーションやエフェクトなど、動きのある表現を条件付きスタイルを利用して設定します。
サイト内のボックス要素に、通常時のスタイルと条件付きスタイルの両方を設定すると、その差分がアニメーションとして再生されます。アニメーションの動き方は「イージング」「時間」「遅延」の3項目で調整します。
条件付きスタイルの「スクロール」では、スクロールに伴って要素が動くエフェクト表現を設定できます。
タイピング風テキストを作成する手順
この記事では、「BAKE SOMEONE HAPPY」という文字列を例に、タイピング風アニメーションを設定します。各文字を別ボックスに分けて配置し、文字ごとに遅延を増やすことがポイントです。
手順1. 親ボックスを追加する
デザインエディタを開き、ページを追加または既存ページを開きます。
ページ内にボックスを追加します。追加パネル
を開き、[基本]タブの[box]をページに追加します。
手順2. 一文字ずつテキストを追加して、条件付きスタイルを設定する
追加パネル
を開き、[基本]タブの[Text]をページに追加します。手順1で追加した親ボックスの中にテキストボックスを配置します。
テキストを「B」に変更します。
設定方法は、以下のヘルプ記事を参考にしてください。
テキストボックスを選択した状態で、右パネル右上の[条件スタイル]をクリックし、[出現時] を選択します。
[カスタム設定]を選択し、以下の設定をします。必要に応じて[時間]や[イージング]も調整します。
[外観]設定の[不透明度]を0%
[アニメーション]設定の[遅延]を0.8秒
手順3. 残りの文字を追加する
コピー＆ペーストをしながら、「BAKE SOMEONE HAPPY」まで同様の設定をします。
手順2で設定した「B」をコピー＆ペーストします。
親ボックスを選択し、配列方向を横並びに変更します。
テキストを「A」に変更します。
出現時スタイル設定モードで、以下の設定をします。
[外観]設定の[不透明度]を0%
[アニメーション]設定の[遅延]を0.9秒（「B」に+0.1秒追加）
「BAKE SOMEONE HAPPY」すべての文字に同じ手順を繰り返します。
各文字の[遅延]は、一つ前の文字より0.1秒ずつ増やします。
手順5. 親ボックスのサイズをautoに設定する
親ボックスのサイズをautoにして、レスポンシブに対応しやすくします。
[レイアウト]設定でボックスサイズ（幅・高さ）を以下のように設定します。
幅：auto
高さ：auto
手順4. 行ごとのレイアウトを調整する
「BAKE」「SOMEONE」「HAPPY」ごとに、テキストボックスをグループ化します。
親ボックスを選択し、ギャップを指定して余白を設定します。
さらに、「BAKE」と「SOMEONE」をグループ化します。
「BAKE SOMEONE」の下に「HAPPY」を配置します。
親ボックスを選択し、ボックスの配置を「水平：左揃え」「垂直：中央寄せ」に変更し、レイアウトを調整します。
手順6. 設定の確認をして、公開する
エディタの右上の矢印ボタン（プレビューボタン）をクリックして、ライブプレビューを見ながら、設定を微調整します。
その他のデザインも含めて全ての設定が完了したら、サイトの公開または更新をして、公開サイトへ反映します。