Studioアニメーションの作り方 条件付きスタイルとLottieの設定手順

Studioは、ノーコードで高度なアニメーションの実装を可能にする、Web制作プラットフォームです。

条件付きスタイルによる状態変化制御、トリガーを用いたインタラクション設計、Lottieアニメーションとの連携など、ビジュアルデザインから実装まで一貫して完結できる点が強みとして広がりました。

本記事では、Studioで実現できるアニメーション技術を体系的に解説します。

UI表現の品質を高めたい方は、ぜひご参考ください。

Studioアニメーションの基本と条件付きスタイル

まずは、Studioアニメーションの基本と条件付きスタイルを解説します。

Studioアニメーションの基本をチェック

Studioでのアニメーション表現は、以下3つの機能を中心に構成されています。

機能名称	できること	主な用途
インタラクション	操作やスクロールに応じて動きを付与する	ボタンや要素の動作制御、演出強化
条件付きスタイル	状態変化に合わせてデザインを切り替える	ホバー時の色変更などの状態管理
トランジション	スタイル変更を滑らかにアニメーション化する	見た目の自然さ・UX向上

上記の機能が組み合わさることで、視覚的演出と操作感を高める、洗練されたUI動作を再現できます。

条件付きスタイルとは？ホバー・出現時の仕組み

STUDIOにおける条件付きスタイルとは、要素が特定の状態になった際に、自動でスタイル（色・サイズ・透明度など）を切り替える仕組みです。

状態名称	役割・用途の概要	代表的な適用例
ホバー	マウスオーバーした瞬間の視覚フィードバック	ボタンの色変更／画像の拡大／シャドウ表示
出現時	要素が画面内に入った時点でスタイルを発火	セクションのフェードイン／スクロールアニメーション

つまり、「ホバー」はマウスポインタが要素上に乗った際だけスタイルが有効になる仕組みです。

また、「出現時」はユーザーの視界に入ったタイミングでスタイルを適用する仕組みなので、効果的に活用していきましょう。

STUDIOでアニメーションをつける手順をマスターしよう

STUDIOでアニメーションをつけるときは、以下の手順で進めます。

• STEP1｜要素を配置してクラスを付与

• STEP2｜条件付きスタイルでトリガーを指定

• STEP3｜トランジションで時間・遅延・イージングを調整

• STEP4｜ライブプレビュー＆公開前チェック

以下で詳しく解説します。

STEP1｜要素を配置してクラスを付与

アニメーションを適用する要素を配置し、再利用しやすいようにクラスを設定します。

クラスとは、複数の要素に共通のデザイン・動きをまとめて適用するスタイルのまとまりを指す言葉です。

特に「出現時」を使う場合、アニメーションさせたい要素を親のラッパー要素にまとめておくと管理がしやすくなります（要素を一括で動かせるため）。

【ポイント】

• アニメーション対象の要素を明確にする

• ラッパーを用意し、まとめて動かせるようにする

• 役割のわかるクラス名に統一する（例：fadeIn/card-hoverなど）

クラスは、STUDIOのデザインとアニメーションを効率的にコントロールするための基本単位になります。

アニメーションを多用するほど、クラス設計の良し悪しが仕上がりと作業効率に直結するため、ここでは丁寧に設計しましょう。

STEP2｜条件付きスタイルでトリガーを指定

次に、アニメーションを発動させるタイミング（条件）を設定します。

STUDIOでは、要素の状態に応じてスタイルを自動で切り替えることで、動きが生まれます。

【設定の基本】

1. 対象クラス（または要素）を選択

2. 条件付きスタイルでトリガーを追加

3. 初期状態と変化後の状態（到達後）のスタイルを作る

ここでは、「いつアニメーションさせるか」と「どの状態に切り替えるか」を決めておきましょう。

動きの出方（速度・緩急）は、次のSTEP3で調整します。

STEP3｜トランジションで時間・遅延・イージングを調整

トランジションとは、スタイルが変更される際の変化を滑らかに見せるためのアニメーション制御を指す言葉です。

条件付きスタイルで変化させるスタイルに、どれくらいの速さで／どんな緩急で切り替えるかを設定します。

【調整する項目】

• Duration（時間）：変化が完了するまでの長さ

• Delay（遅延）：発動タイミングを少し後にずらす

• Easing（イージング）：動きの緩急（自然さの演出）

トランジションの調整が整うと、デザイン全体の滑らかさが一段上がります。

STEP4｜ライブプレビュー＆公開前チェック

設定したアニメーションが意図通りに動作しているか、実際の表示環境で確認します。

特に スクロール発火タイミングやスマホ表示での挙動は要チェックです。

【確認項目の例】

• 発動タイミングが早すぎ／遅すぎないか

• スマホで 遅延しすぎて見えない状態になっていないか

• 複数アニメーションが重なってカクつきが出ていないか

• ユーザー操作を阻害する動きになっていないか（アクセシビリティ）

最後に、ページ全体のリズム感が自然に保たれているかを判断し、必要に応じてSTEP2・3に戻って調整します。

StudioでLottieアニメーションを埋め込む方法

ここでは、StudioでLottieアニメーションを埋め込む方法を解説します。

• Lottieとは？JSON形式で軽量な動きを実現

• STUDIOへの読み込み手順と注意点

• 再生条件・ループ・スピードをカスタマイズ

Lottieはよく使われる技術なので、以下を抑えておきましょう。

Lottieとは？JSON形式で軽量な動きを実現

Lottie（ロッティ）とは、After Effects（AE）で制作したアニメーションを、JSON形式のデータとして書き出し、Webサイトやアプリに埋め込める技術です。

従来のGIFや動画に比べ、次のような大きなメリットがあります。

• 超軽量：画像や動画より容量が小さく、ページ表示が速い

• 高解像度表示：拡大しても劣化しにくい（ベクターデータ）

• 透明背景OK：UIの一部として自然に配置できる

• インタラクション対応：スクロール連動やクリック再生なども可能

• マルチプラットフォーム対応：iOS / Android / Web で動作

Lottieは、Airbnbが開発した「LottieFiles」というライブラリをもとに広がりました。

今では、デザイナー・エンジニア問わず、モーションを手軽にプロダクトへ活かせる技術として広く利用されています。

Studioへの読み込み手順と注意点

Studioでは、Lottie JSONファイルを直接アップロードして配置することで、簡単にアニメーションを追加できます。

基本的な流れは以下の通りです。

1. Lottie JSONファイルを準備する
   After Effects + Bodymovinで書き出すか、LottieFilesでダウンロード
   （拡張子が .json であることを確認）

2. STUDIOを開き、「メディア」 → 「ファイルを追加」を選択する
   → JSONファイルをアップロード

3. 配置したい位置に 「アニメーション」＞「Lottie」 ブロックを追加する

4. 右側のプロパティパネルでアップロード済みのLottieファイルを選択する

5. 表示サイズ・位置・再生設定を調整して完成！

画像数が多い・複雑なパスが多いと、読み込みが重くなり表示遅延の原因になるので注意しましょう。

再生条件・ループ・スピードをカスタマイズ

Lottieは、再生タイミングと動き方を細かく制御できるのが大きなメリットです。

Studioでは以下の設定が可能です。

設定項目	内容の例
再生トリガー	ループ再生／スクロール連動／ホバー／クリックなど
ループ設定	ONで繰り返し再生（回数指定は不可）
再生スピード	0.1〜3倍速の調整が可能
再生方向	順方向／逆再生
初期状態	自動再生／停止から開始

再生条件をユーザーの行動に合わせることで、「意味のあるアニメーション」に進化します。

Studioの出現アニメーションの作り方

Studioの出現アニメーションの作り方として、以下が挙げられます。

• スクロールと同時にテキストを表示

• 下からせり上がるカードレイアウト

シーンに合うアニメーションにするために、取り入れてみましょう。

スクロールと同時にテキストを表示

スクロールと同時にテキストを表示するやり方は、ファーストビュー直下の説明文や、セクションタイトルの表示演出に有効です。

以下の手順で設定できます。

1. 初期状態を非表示に近づける
   例：不透明度 0%、Y方向に少し下げる（+10〜20px）

2. 「条件付きスタイル」で出現トリガーを設定
   　・ 「出現時」を選択
   　・ 不透明度 100%
   　・ 位置を元に戻す（Y 0px）

3. トランジションで自然な動きに調整
   　・Duration（速度）：0.4〜0.8s
   　・Delay（遅延）：要素が多い場合は0.05〜0.2sで段差をつける
   　・Easing：「ease-out」など加速・減速の曲線が◎

また、「次のコンテンツを読みたくなる」導線効果が高い手法でもあるので、CVを狙うWebコンテンツとも相性抜群です。

下からせり上がるカードレイアウト

 カード型UIが連続するセクションで、視線を上方向へ誘導しながら情報を整理できるアニメーションです。

以下の手順で設定できます。

1. 初期スタイルを設定

   ・不透明度：0%

   ・Y位置：+20〜40px（少し下に配置）

   ・クラスを必ず付与（複数カードを一括制御）

2. 「出現時」 条件付きスタイルを作成

   ・不透明度：100%

   ・位置：0pxに戻す

3. トランジションを最適化

   ・Duration：0.4〜0.7s

   ・Easing：ease-out／ease

   ・Delaysを0.05〜0.15sでずらして、段階的に表示

商品紹介やサービス比較など、CTA前の重要セクションと相性が良い手法です。

アニメーションを洗練させる｜トランジションとイージング

アニメーションを洗練させたいときは、トランジションとイージングを活用するのがおすすめです。

• Duration／Delayの最適値とUXへの影響

• イージングプリセットを使い分けよう

ここでは、上記について解説します。

Duration／Delayの最適値とUXへの影響

アニメーションは「スピード設計」で印象が大きく変わります。

Studioでは、主に「Duration（変化の時間）」と「Delay（開始遅延）」を調整します。

UI対象	Duration	Delay	UX意図
テキスト出現	0.3〜0.6s	0〜0.1s	自然で読みやすく
カードレイアウト	0.4〜0.7s	0.05〜0.15s	連続性・リズム感
モーダル表示	0.2〜0.4s	0s	クイックアクセス
CTAボタン／ホバー	0.1〜0.25s	0s	操作感の即時性

スピードが早すぎると気づかれないアニメーションになってしまい、遅すぎるとストレスのあるアニメーションになってしまうので注意しましょう。

イージングプリセットを使い分けよう

イージングは、動きの加減速カーブを定義する設定です。

同じ距離の移動でも、イージング次第で「軽さ」や「自然さ」が大きく変わります。

イージング	特徴	推奨シーン
ease-out	最初が速く終盤で減速	出現アニメーション、カード表示
ease-in	最初ゆっくり→加速	モーダル解除、UI消失
ease	中間が滑らか	汎用（迷ったらこれ）
linear	加減速なし	進捗バー、ローディング等の機能表現
ease-in-out	始まりと終わりがゆっくり	ページ遷移要素、視線誘導

アニメーションはデザインコンセプトの一部でもあります。イージングの統一は、ブランドの動きの言語化につながります。

Transformでできること

Transformでできることは、主に以下の通りです。

• Translate（移動）で方向を指定

• Rotate（回転）でダイナミックな演出

• Scale（拡大縮小）とSkew（傾き）の組み合わせ

より効果的なアニメーションにするため、以下を組み合わせてみましょう。

Translate（移動）で方向を指定

Translateは、要素をX軸・Y軸方向に移動させるプロパティです。

アニメーションで最も使用頻度が高く、UXを壊さず自然な動きを実現できます。

軸	例	効果
X方向	左右に ±10〜40px	スライド表示／並列UIの強調
Y方向	上下に ±10〜40px	出現演出（下からフェードイン）

Translateは、OpacityやEasingと組み合わせることで、情報への注目度をユーザーに自然に委ねる強力なツールになります。

Rotate（回転）でダイナミックな演出

Rotateは、要素を中心軸を基準に回転させるTransformプロパティです。

用途例	回転量の目安	UI効果
矢印の向き変更	±90°	動線を直感的に誘導
ワンポイント装飾	±10〜30°	アクセント演出
ローディング表現	360°	進行中の視覚化
カードホバー演出	±2〜5°	軽い浮遊感を付与

アイコンや装飾要素にアクセントを付けたい場合に有効です。

ただし、過剰な回転は視認性の低下を招きやすいので、特にテキスト要素には最小限の適用が推奨されます。

Scale（拡大縮小）とSkew（傾き）の組み合わせ

ScaleとSkewは、視覚的なインパクトや動きの明確化に効果的なTransformです。

プロパティ	推奨値	適用シーン
Scale	1.02〜1.12倍	CTAボタン、アイキャッチ画像
Skew	1〜3°	バナー装飾、動きのアクセント

Scaleは「誘導」、Skewは「演出」として、役割を分けてデザインしてみましょう。

特にホバー演出との相性が良く、操作の手がかりを強調できます。

Studioでできるアニメーション実装アイデア集

Studioでできるアニメーションとして、以下が挙げられます。

• ボタンの色を変えるシンプル演出

• 画像が入れ替わるギャラリー風ホバー

• 動画ループ再生でGIF風に

オリジナリティの高いアニメーションにしたいときは、以下をご参考ください。

ボタン色を変えるシンプル演出

ボタン色を変える演出は一見シンプルですが、ユーザーが「このボタンは押せそう」と直感できる、UIデザインの基本アニメーションです。

ホバー時に色変化を付けることで、操作性とアクセシビリティを両立できます。

設定手順は、以下の通りです。

1. ボタンにクラスを付与

2. 通常時の背景色（Base）を設定

3. 条件付きスタイルで hover を追加
   hover状態で背景色・文字色を変更

4. トランジションを適用
   Duration：0.15〜0.25s
   Easing：ease-out 推奨

シンプルな演出ですが、「アニメに気付いてもらえる」＝「UXが成立している」と有効です。

画像が入れ替わるギャラリー風ホバー

ホバー時に別画像へ切り替えることで、商品の別アングルや使用状態を直感的に訴求できるアニメーションです。

ECサイトやポートフォリオで特に有効です。

設定手順は、以下の通りです。

1. 通常画像（A）とホバー画像（B）を同じ位置に重ねて配置

2. B画像は最初、Opacity 0%に設定

3. 要素にホバー条件を追加し、

A → Opacity 0%、B → Opacity 100% に切り替え

1. トランジションで滑らかさを調整

Duration：0.25〜0.4s

Easing：ease-out

「ユーザーが気になる変化」を見せられるため、クリック率向上の定番テクニックです。

動画ループ再生でGIF風に

商品機能やモーションUIを短く直感的に伝えるアニメーション手法です。

静止画像より訴求力が高く、Lottieを使わない場合の代替としても有効です。

設定手順は、以下の通りです。

1. ループ再生用の短い動画（.mp4 / .webm推奨）を用意

2. 要素としてStudioにアップロード

3. 自動再生（Autoplay） と ループ（Loop） をON

4. 音声がある場合は ミュート を設定（自動再生規制対策）

スクロールに応じた再生開始を設定することで、視線の集中を阻害せず自然な演出ができます。

ホバーで下線が左から伸びるテキストリンク

テキストリンクやグローバルナビの項目に、ホバーで下線がスッと伸びる演出です。
「リンクである」ことを主張しすぎずに伝えられるため、コーポレートサイトのナビゲーションと特に相性が良い手法です。

設定手順は、以下の通りです。

1. テキストの下に、高さ2px程度の細いボックス（下線用の要素）を重ねて配置し、クラスを付与する

2. 初期状態は下線の幅（Width）を0%、基準を左揃えにしておく

3. 親要素にホバー条件を追加し、ホバー時に下線のWidthを100%へ変化させる

4. トランジションでDurationをTransition0.2〜0.3s、Easingをease-outに設定する

下線を「右から縮む」動きにすればリンクの離脱、「左から伸びる」動きにすればアクティブ状態、と役割を分けて設計すると迷いません。

横方向に流れるマーキー（ロゴ・実績の連続表示）

取引先ロゴや導入実績、キャッチコピーを横方向にゆっくり流し続ける演出です。
限られた面積で情報量を増やせるため、ファーストビューや実績セクションでよく使われます。

設定手順は、以下の通りです。

1. 流したい要素（ロゴ画像など）を横一列に並べ、同じ内容をもう1セット複製して連結する（途切れずループさせるため）

2. 並べた要素をまとめるラッパーにクラスを付与する

3. Translate（X方向）を使い、ラッパーを左方向へ1セット分だけ移動させるアニメーションを設定する

4. Easingはlinear、ループをON、Durationは20〜40sなど長めにしてゆっくり流す

速すぎると読めず、目が疲れる原因になります。「読ませたい情報」ならゆっくり、「賑わいの演出」ならやや速め、と目的で速度を決めましょう。

スクロールに連動してぬるっと動く視差（パララックス）

背景と前景で動く速度に差をつけ、奥行きを感じさせる演出です。
ブランドサイトのキービジュアルなど、印象を残したい場面で効果を発揮します。

設定手順は、以下の通りです。

1. 背景要素と前景要素を重ねて配置する

2. スクロールに連動するインタラクション（スクロール量に応じてTranslateのYを変化させる設定）を、背景側にだけ弱めにかける

3. 前景はそのまま、背景は動く量を小さく（例：スクロール量の20〜40%程度）して差を作る

動かしすぎるとCLS（レイアウトのズレ）やスマホでのカクつきにつながるため、動く量は控えめが基本です。効果を欲張らないほど上品に見えます。

スマホ最適化・パフォーマンス改善のポイント

Webコンテンツを作成する際は、スマホ最適化やパフォーマンス改善も意識しましょう。

• 長いアニメーションは避けよう

• SVG・WebP活用でデータ量を削減

上記のポイントを抑えることで、よりストレスフリーなコンテンツを作成できます。

長いアニメーションは避けよう

操作や読み込みのたびに長いアニメーションが入ると、ユーザーはストレスを感じます。

特にスマホでは回線状況や端末性能に左右されるため、動きが重く見える場合もあります。

アニメーションは「ユーザーの行動を助けるため」に必要な分だけ。

画面遷移やホバー演出など、短く・わかりやすい動きにとどめることで、離脱防止や操作性の向上につながります。

SVG・WebP活用でデータ量を削減

スマホでは通信量の制約があるため、画像やアイコンのサイズをできるだけ軽くすることが重要です。

SVGは拡大・縮小しても画質が劣化せず、ロゴやアイコンに最適です。

写真や複雑な画像は WebP を採用することで、従来形式よりも高画質かつ軽量にできます。

使用する画像フォーマットを適切に選ぶことで読み込み速度が向上し、離脱率の改善にもつながります。

StudioアニメーションがSEOに与える影響は？

StudioアニメーションがSEOに与える影響として、以下について解説します。

• Core Web Vitals（LCP・CLS・INP）との関係

• PageSpeed InsightsとLighthouseで確認

SEOで有利になれば、流入を増やせます。以下を意識して、対策しておきましょう。

Core Web Vitals（LCP・CLS・INP）との関係

アニメーションは視覚表現として有効ですが、Core Web Vitals に影響を与える場合があるので注意しましょう。

指標	内容	アニメーションが与える影響	改善のポイント
LCP	最大要素が表示されるまでの速度	画像や動画が重く、読み込みが遅くなると悪化	画像圧縮・遅延読み込み・軽いアニメ利用
CLS	レイアウトのズレの量	アニメで位置がズレる、読み込み後に動き出すと悪化	位置変化のある要素の事前スペース確保
INP	操作後のレスポンス速度	スクロール連動など重い処理が応答を遅くする	アニメ量の最適化・不要処理の削減

「動きが多い＝必ずしも悪い」わけではありませんが、UXを損なうアニメーションは検索評価にも影響することは知っておきましょう。

PageSpeed InsightsとLighthouseで確認

SEOに与える影響は、PageSpeed InsightsとLighthouseで確認するのがおすすめです。

ツール名	主な用途	どこで確認するか	アニメーション関連で注目すべき指標例
PageSpeed Insights	ページ速度・Core Web Vitalsを解析	モバイル／PCでスコア表示	LCP / CLS / INP、画像最適化、遅延読み込み
Lighthouse	Web品質の総合評価	Chrome DevTools・拡張機能	パフォーマンススコア、CPU負荷、不要JS削減
Studio プレビュー / 公開ページ	実環境に近い動作を確認	実際の端末で操作テスト	カクつき・タップ反応・スクロール遅延

アニメーションはユーザー体験向上に寄与しますが、負荷が高いとSEO面で逆効果になる可能性もあるため、定期的な速度チェックが重要です。

出現アニメーションが動かない・意図通りにならないときの対処

「設定したはずのアニメーションが動かない」「スマホだけおかしい」といったつまずきは、原因がある程度パターン化しています。
ここでは、よくある症状と確認ポイントを整理します。

症状	よくある原因	確認・対処
出現時アニメが発火しない	初期状態と出現後で「同じスタイル」になっている	初期状態（不透明度0%・Yを少し下げる等）を明確に差をつけて設定する
動きがカクつく	幅・高さ・marginなど負荷の高いプロパティを動かしている	できるだけOpacityとTransform（Translate/Scale）で動かす
スマホだけ動かない・見えない	ホバー前提の設計になっている／発火位置が画面外	タッチ端末はホバー非対応。出現時やタップで代替する
複数要素が一斉に動いて雑然とする	Delayによる時間差をつけていない	0.05〜0.15sずつDelayをずらし、段階的に表示する
読み込み後に一瞬レイアウトがズレる	動く要素のスペースが確保されていない（CLS）	高さ・幅をあらかじめ確保し、位置ではなく見え方だけを変える

基本の考え方は「動かすのはOpacityとTransformだけにする」「差（初期→到達）を明確にする」「時間差はDelayで作る」の3つです。
この3点を押さえるだけで、発火しない・カクつく・雑然とするといったトラブルの大半は防げます。

よくある質問（FAQ）

最後に、Studioアニメーションに関する「よくある質問」を紹介します。

気になる項目がある方はご参考ください。

ホバーアニメーションはスマホでも動作する？

基本的に、ホバーアニメーションはスマホでは動作しません。

スマホやタブレットなどのタッチデバイスには「カーソルが乗る」という概念がないため、

ホバー状態が発生しないからです。

アニメーションを一時的に無効化する方法は？

アニメーションを一時的に無効化する方法は、以下の通りです。

方法	メリット	操作のポイント
トランジションを0sにする	すぐに動作を停止できる／設定は保持	Duration をすべて「0」に変更
条件付きスタイルをOFFにする	トリガーを残せる／管理しやすい	チェックを外す or 条件削除
SP・特定ブレイクポイントのみ無効化	表示デバイス別に最適化	ブレイクポイント範囲を限定
公開前は表示のみ確認	プレビュー環境でUX検証に便利	公開ページで動きを確認しながら調整

UXテストで「見やすさ」を検証したいときや、パフォーマンス測定（LCP/CLS/INP）時に比較したいときに活用しましょう。

同じ要素にホバーと出現アニメーションを重ねられる？

はい、Studioでは同じ要素にホバーと出現アニメーションを重ねられます。

ただし、前述の通り、スマホではホバーが効かないため無効化されてしまうので注意しましょう。

STUDIOでの制作・改善を相談したい方へ

アニメーションはあくまで手段で、最終的に大切なのは「成果につながるサイトかどうか」です。

STUDIOで成果の出るサイトを作りたい、既存サイトの表現や導線を改善したいという場合は、STUDIO制作代行サービスでご相談いただけます。

まとめ｜STUDIOアニメーションでサイト体験を向上させよう

アニメーションは装飾ではなく、UX（ユーザー体験）を最適化するための技術です。

Studioなら、条件付きスタイル、トランジション、Lottie、出現アニメーションなど、コード不要で表現の幅を広げられます。

目的のあるアニメーションを実装することで視線を導き、理解を助け、行動を促すサイトへと変えていきましょう。

凝ったアニメーションの実装まで含めて制作を依頼したい場合は、Studio制作代行もご検討ください。