> ## 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.

# パーツ｜ボタンへのアニメーション設定

> ページビルダーのボタンパーツにアニメーション効果（シャドウ・シャイン・拡大）を設定する方法を説明します。

この記事では、ボタンパーツにアニメーション効果を設定する方法をご案内します。

<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" />
</Frame>

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

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

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

**再生タイミング**：

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

**その他の設定**：

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

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

## 操作方法

<Info>
  **アクセス経路**

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

<Steps>
  <Step title="ボタンパーツの設定パネルを開く">
    ページビルダーでアニメーションを設定したいボタンパーツを選択して設定パネルを開いてください。

    <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" />
    </Frame>
  </Step>

  <Step title="アニメーション効果を選択する">
    設定パネル内のアニメーションの選択肢から「シャドウ」「シャイン」「拡大」のいずれかを選んでください。

    <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" />
    </Frame>
  </Step>

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

    <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" />
    </Frame>
  </Step>
</Steps>