> ## Documentation Index
> Fetch the complete documentation index at: https://help.mosh.jp/llms.txt
> Use this file to discover all available pages before exploring further.

# ページビルダー画面｜ボタンにシャドウ・シャイン・拡大のアニメーション効果を設定できるようになりました

> ページビルダーのボタンパーツに、アニメーション効果を設定できるようになりました。シャドウ・シャイン・拡大の3種類のエフェクトから選び、再生タイミングや速度もカスタマイズできます。

ページビルダーのボタンパーツに、**アニメーション効果**を設定できるようになりました。シャドウ・シャイン・拡大の3種類のエフェクトから選び、再生タイミングや速度もカスタマイズできます。

<Frame>
  <img src="https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/819aed8a-9ec9-4db5-9e06-f24405fc5da7/image/w=1920,quality=90,fit=scale-down" alt="ボタンアニメーション効果" />
</Frame>

## ボタンアニメーション設定とは？

ボタンパーツの設定パネルから、以下の設定が可能になります。

**アニメーション効果（3種類から1つ選択）**

* **シャドウ**：影でボタンを浮かせて見せる（影色はボタン色に関わらず黒系で固定）
* **シャイン**：光沢が走るエフェクト
* **拡大**：サイズが大きくなるエフェクト

**再生タイミング**

* **常時**：ループ再生（ホバー時は一旦停止→再生し直し）
* **マウスオーバー**：ホバー時のみ再生
* **どちらも**：常時・ホバーの両方を適用

**その他の設定**

* **速度**：常時／どちらも選択時にスライダーで調整可能。画面上でプレビューしながら設定できます
* **拡大倍率**：「拡大」選択時のみ設定可能。固定値選択または100%～200%の範囲でカスタム入力できます

<Tip>
  ホバー時にボタンが明るくなる効果は、アニメーション設定の有無にかかわらず**デフォルトで適用**されます。
</Tip>

## 操作方法

**アクセス経路**

[ログイン](https://mosh.jp/authentication/login?openExternalBrowser=1) → メニュー → [ページビルダー](https://mosh.jp/creator/landing-pages) → 対象LPの編集 → ボタンパーツを選択 → 設定パネル

### 1. ボタンパーツの設定パネルを開く

ページビルダーでアニメーションを設定したい**ボタンパーツ**を選択して設定パネルを開いてください。

<Frame>
  <img src="https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/0a837a67-6b2f-41b5-9051-eb6d510c744a/image/w=1920,quality=90,fit=scale-down" alt="ボタンパーツの設定パネルを開く" />
</Frame>

### 2. アニメーション効果を選択する

設定パネル内の**アニメーション**の選択肢から「シャドウ」「シャイン」「拡大」のいずれかを選んでください。

<Frame>
  <img src="https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/269123f3-9909-43ab-9b4e-81a48960b83a/image/w=1920,quality=90,fit=scale-down" alt="アニメーション効果を選択する" />
</Frame>

### 3. 再生タイミング・速度を設定する

**再生タイミング**（常時／マウスオーバー／どちらも）を選び、必要に応じて**速度**や**拡大倍率**をプレビューしながら調整して保存してください。

<Frame>
  <img src="https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/49141ada-428e-4310-a310-56a200b9e608/image/w=1920,quality=90,fit=scale-down" alt="再生タイミング・速度を設定する" />
</Frame>

## 関連ページ

* [ページビルダー](https://help.mosh.jp/33222b9b87e449ddb40a756320656c79/ページビルダー版)