> For the complete documentation index, see [llms.txt](https://support.charlla.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://support.charlla.io/jp/users-guide/motion-thumbnail.md).

# モーションサムネイル

### 1.モーションサムネイルとは 

モーションサムネイルは、商品のサムネイル画像を動画へと変換する機能です。

専用のスクリプトを1回挿入するだけで、特別なコーディングを行わずに、\
わずか数クリックの操作で動くサムネイルを適用できます。

モーションサムネイルでお客様の目を引き、購入率を高めましょう！

{% hint style="success" %}
このような方におすすめ

* HTMLの知識がなくても、手軽にサムネイルへ動画を活用したい方
* ご利用中のECショップやホームページのプラットフォームを問わず、商品画像に動画を取り入れたい方
* 商品動画を活用して、クリック率や購買意欲を高めたい方
  {% endhint %}

### ![](https://3627017617-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgHfZL4HYwO19vNYjGhjS%2Fuploads%2FeuRblOffmeOd37GWq2Am%2F20260826_Motion%20thumbnail_8.jpeg?alt=media\&token=57f04fc5-253d-473c-a767-41b59868cdc0)

### 2. 主な特徴

#### 1回のインストールで手軽に導入

* スクリプトを1回挿入するだけで、複雑なコーディングなしに画像と動画を簡単に連携できます。

#### すべてのプランで利用可能

* ご利用中のプランを問わず、自由に活用いただけます。

#### どんな商品でも柔軟に対応

* Charllaに商品を登録後、対象の商品画像へ手軽に動画を適用できます。

### 3. 導入手順

{% stepper %}
{% step %}

#### スクリプトを挿入する

* 案内に沿って、Charllaから提供されるスクリプトコードを自社ECショップへ挿入してください。

<figure><img src="https://3627017617-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgHfZL4HYwO19vNYjGhjS%2Fuploads%2FaxGmzDp58oJou7eyTQHA%2F20260825_motion%20thumbnail%204.png?alt=media&amp;token=0ff1f361-904b-4edb-b989-8789054c5499" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}

#### **`</body>`** タグを簡単に見つける方法

HTML編集画面で **`Ctrl + F`**(Macは **`Command + F`**)を押した後 **`</body>`**&#x3092;検索してください。&#x20;

検索した <mark style="color:$primary;">**`</body>`**</mark> <mark style="color:$primary;">タグの直前に</mark>コピーしたスクリプトコードを貼り付けます。
{% endhint %}
{% endstep %}

{% step %}

#### 商品と動画を連携する

* モーションサムネイルを適用する商品を登録または選択し、商品画像に動画を紐付けます。

<figure><img src="https://3627017617-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgHfZL4HYwO19vNYjGhjS%2Fuploads%2Fqyzv2UjLUuMw3E5MQDFN%2F20260825_motion%20thumbnail%205.png?alt=media&amp;token=75a47417-5e98-4f41-903f-260a9c53e045" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
画像URLを簡単にコピーする方法&#x20;

* 画像上で右クリックし［画像アドレスをコピー］を選択すると手軽にコピーできます。

<img src="https://3627017617-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgHfZL4HYwO19vNYjGhjS%2Fuploads%2FxK83PlXimCN4l7VU2XgZ%2F20260824_Charlla%20Motion%20Thumbnail_1.png?alt=media&amp;token=3d34ba86-70ea-4d88-a589-5c3bbf3d5506" alt="" data-size="original">
{% endhint %}
{% endstep %}

{% step %}

#### モーションサムネイルを設定する

* 動画連携設定で、モーションサムネイルを適用する画像を選択し、設定を変更できます。

<figure><img src="https://3627017617-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgHfZL4HYwO19vNYjGhjS%2Fuploads%2FJjxouMzTC6dCF8sanNJ1%2F20260825_motion%20thumbnail%206.png?alt=media&amp;token=33cd50dd-6040-44fc-85e8-37441a999bdb" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### 自社ECショップで表示を確認する

* スクリプトを挿入したページで、モーションサムネイルが適用されていることを確認してください。
  {% endstep %}
  {% endstepper %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://support.charlla.io/jp/users-guide/motion-thumbnail.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.