｜はじめに｜
優れたテキストアニメーションは参加者の目を引くだけでなく、コンバージョン行動へと導く力があります。本記事では、発燒互動に内蔵されたアニメーションの使い方に加え、USALを活用してさらに個性的なビジュアル演出を追加する方法をご紹介します。
なぜウェブページにテキストアニメーションが必要なのでしょうか？
滞在時間の向上：インタラクティブなコンテンツはユーザーの滞在を促し、ページ滞在時間は平均で70%向上します。ブランドメッセージが最後まで読まれる機会が増えます。
コンバージョンの後押し：インタラクティブアニメーションを使用したページは、従来のページに比べてコンバージョン回数が2倍になります。ボタン（CTA）に動きを加えると、クリック率は15%から40%向上する余地があります！
強い訴求力：テキストアニメーションはページの「単調さ」を解消し、ユーザーの参加意欲を平均50%高め、訪問者がコンテンツとより積極的に関わるようになります。
出典：Demand Metric、Social Targeter、CleverQuokka
発燒互動 内蔵テキストアニメーション設定
発燒互動の管理画面には、よく使われるアニメーションがあらかじめ複数用意されています。コードを書かなくても、すぐに適用できます。
アニメーションはどこで設定できますか？
ウェブページエディターに入り、アニメーションを設定したいテキストを選択して、ツールバーの「もっと見る」をクリックし、続けて「アニメーション設定」をクリックすると設定できます。
発燒互動 内蔵アニメーション対照表
管理画面のメニュー名 | コードタグ |
フェードイン | data-usal="fade" |
右からフェードイン | data-usal="fade-l" |
左からフェードイン | data-usal="fade-r" |
垂直フリップ | data-usal="flip" |
水平フリップ | data-usal="flip-l" |
回転 | data-usal="flip-ul" |
拡大 | data-usal="zoomin" |
縮小 | data-usal="zoomout" |
応用設定
内蔵アニメーションでは物足りない場合、発燒互動はUSALで生成されたアニメーションコードのインポートに対応しています。
USALは強力なサードパーティ製アニメーション生成ツールで、以下のことが可能です。
より複雑なアニメーションの軌跡やカーブをカスタマイズできます。
アニメーションの「バウンド感」や「スピード感」を精密にコントロールできます。
軽量なコードを生成し、ページの読み込み速度に影響を与えません。
USALのウェブサイトでアニメーションを生成し、発燒互動にインポートするには？
【Step 1】USAL公式サイトで効果を設定する
公式サイトURL：https://usal.dev/#home
USALのウェブサイトに入ったら「Playground」を選択し、左側のメニューからアニメーションの種類（Animation Type)を選んでください。a. Fade（フェード系）： 要素が透明から不透明に変化します。
例：fade-u（上方向にフェードイン）、fade-dl（左下方向にフェードイン）。
b. Zoom In（拡大系）： 要素が小さい状態から大きくなって表示されます。
例：zoomin-r（右方向に拡大しながら表示）。
C. Zoom Out（縮小系）： 要素が大きい状態から小さくなって表示されます（奥行き感を伴うことが多いです）。
例：zoomout-ul（左上方向に縮小しながら表示）。
Ｄ. Flip（フリップ系）： カードをめくるような動きです。例：flip-l（左方向にフリップ）。
＊方向コードのメモ：u=上, d=下, l=左, r=右。
その他のアニメーション詳細を調整する
身構えなくても大丈夫です！全項目を調整する必要はありません。お好みの箇所だけ調整すればOKです！！
Animation Tuning（アニメーション調整）：
Value 1 (movement/angle)：数値1（移動距離または回転角度）。
Value 2 (Y/perspective)：数値2（垂直方向の移動または遠近感）。
Value 3 (intensity)：数値3（アニメーションの強度）。SPLIT OPTIONS（分割オプション）： テキストアニメーション用で、例えば文章を単語ごとに分割する際に使用します。
Split Delay (ms)：分割された各要素の間の遅延時間（ミリ秒）。TEXT EFFECTS（テキスト効果）： テキスト専用の特殊効果です。
COUNT ANIMATION（数字カウントアニメーション）
Target Number：目標数値（例：ここまでスクロールすると、数字が0からカウントアップして1000になります）
TIMING（タイミング関連）
Duration (ms)：アニメーションの持続時間。数値が大きいほど動きがゆっくりになります（図では1000は1秒を表します）。
Delay (ms)：遅延時間。その位置までスクロールしてから、動き出すまでの時間です。
Threshold (%)：発動しきい値。要素が画面内に入った割合がどのくらいでアニメーションが発動するか（図では10は10%入ったら動き出すことを表します）。EASING（イージング/緩急効果）
アニメーションの速度変化のカーブをコントロールします（例：最初は速く徐々に遅くなる、等速、バウンドするなど）。
TYPOGRAPHY（文字組み）
Default Font：フォントの選択。
Font Weight：フォントの太さ（Bold、Lightなど）。
Font Size (px)：フォントサイズ（ピクセル）。
MODIFIERS（修飾/追加効果）
Blur：ぼかし効果。表示時にぼかしを入れるかどうかを設定できます。
Once only：一度だけ実行。チェックを入れると、初めてスクロールして表示された時にのみアニメーションが発動し、戻ってから再度下にスクロールしても動きません。
Loop continuously：連続ループ。
Keep final state：最終状態を保持。アニメーション終了後、最後のコマで停止し、消えたりリセットされたりしません。
パラメーターを一つずつ調整するのが面倒な場合、USALにはプリセットテンプレートのワンクリック適用機能があります。
これらのボタンをクリックすると、定番のレイアウトアニメーションがすぐに確認できます：（時短の味方！）
Hero Title: メインタイトル効果（大きくゆったりとした動きが多いです）。
Card List: カードリスト（商品紹介エリアに適しています）。
Counter: 数字カウンター。
Shimmer Text: きらめくテキスト効果。
Fluid Text: 流体・滑らかなテキスト効果。
Split Paragraph: 段落の分割（文章全体を段階的に表示させます）。
Custom Timeline: カスタムタイムライン。
Tuned Animation: 細かく調整されたアニメーション。
Loop Animation: ループアニメーション。
Stagger Effect: 時間差効果。
【Step 2】USALで生成したHTMLコードをプレビューで確認し、問題がなければ発燒互動のコード欄にコピーすれば完了です！
USALアニメーション実装のコツ
コツ1：プレビューの内容を変更するには？（Hello USALのままにしない）
USAL Playgroundに入ったら、HTML編集エリアを見つけ、<div ...>Hello USAL!</div>を探してください。Hello USAL!を削除し、テストしたいテキスト（例：今すぐ購入、クリックして受け取る）に書き換えてください。修正すると、下のプレビュー画面がすぐにご自身のテキストに切り替わり、アニメーションのリズムが合っているか確認しやすくなります。
コツ2：気に入った効果を発燒互動のサイトにコピーするには？
すでにコンテンツの編集を終えていて、特定のテキストにアニメーションを設定したい場合、
例えば、あるボタン上のテキスト「今すぐ購入」にLoop Animation（ループアニメーション）を設定したいとします
まずUSALでLoop AnimationのHTMLコードを作成してください
続けてdata-usal="fade loop duration-1000"のこの部分だけをコピーしてください（data-usalの後ろの内容は選択したアニメーションによって異なります）
コピーしたら、発燒互動のウェブページエディターに戻り、アニメーションを適用したい要素のソースコードを開き、この内容をstyle属性の後ろに貼り付ければ完了です！
