---
url: "/ja/tinyimage/gif-ordering.md"
description: "カスタムの並べ替え、Figmaのレイヤー順、行・列での表示位置、レイヤー名を使って、GIFフレームの順序を指定します。"
---

# GIFフレームの並び順

> カスタムの並べ替え、Figmaのレイヤー順、行・列での表示位置、レイヤー名を使って、GIFフレームの順序を指定します。

### 動画チュートリアル：アニメーションGIFを作成する

この動画では、TinyImageプラグインを使って、自分のデザインからFigmaで直接GIFをアニメーション化してエクスポートする方法を紹介しています。
[Embedded media](https://www.youtube-nocookie.com/embed/FYlk5a69Ewc)
### 動画チュートリアル：FigmaでアニメーションGIFのエクスポートにトランジション効果を追加する

この動画では、TinyImageプラグインを使って、FigmaでアニメーションGIFのエクスポートにフェード、スライド、ワイプのトランジション効果を追加する方法を紹介しています。
[Embedded media](https://www.youtube-nocookie.com/embed/GwfVWRAS1qk)

[Video](/assets/videos/tinyimage/compress/gif-ordering.mp4)

TinyImageには、GIFフレームの順序を決めるための並べ替えオプションが複数あります。

## カスタム順で並べ替える {#sort-frames-by-custom-order}

サムネイルを左右にドラッグ＆ドロップすると、フレームの順序を手動で設定できます。

> **Note:** カスタムの並び順は保存され、**Sort frames by Custom Order**を選ぶといつでも元に戻せます。

## Figmaのレイヤー順で並べ替える {#sort-frames-by-figma-layer-order}

Figmaのレイヤーリストと同じ順序にするには、**Sort frames by Figma Layer Order**を使います。

## 列ごとに表示位置で並べ替える {#sort-frames-visually-by-columns}

**Sort frames visually by Columns**を使うと、表示位置をもとに列を優先して並べ替えます。

## 行ごとに表示位置で並べ替える {#sort-frames-visually-by-rows}

**Sort frames visually by Rows**を使うと、表示位置をもとに行を優先して並べ替えます。

TinyImageは、少しずれて配置されたフレームを同じ行や列としてまとめ、キャンバス上の絶対位置を使います。異なるFigmaのセクション内にあるフレームも対象になります。

## Figmaのレイヤー名で並べ替える {#sort-frames-by-figma-layer-name}

**Sort frames by Figma Layer Name**を使うと、レイヤー名で自然な順序に並べ替えます。たとえば、`Frame 2`のように番号の付いた名前は`Frame 10`より前に並びます。