---
url: "/ja/hypercrop/batch-cropping.md"
description: "プリセット、カスタムサイズ、スマートなフォーカルポイント、エクスポートのオプションを使って、画像を一括でトリミング・リサイズします。"
---

# 画像を複数のサイズに一括でトリミング・リサイズする

> プリセット、カスタムサイズ、スマートなフォーカルポイント、エクスポートのオプションを使って、画像を一括でトリミング・リサイズします。

### 動画チュートリアル：画像のトリミングとリサイズ

この動画では、HyperCropプラグインを使ってFigmaから画像を一括でトリミング・リサイズする方法を解説します。
[Embedded media](https://www.youtube-nocookie.com/embed/ysRuuEJvvYE)

Figmaのページを切り替えると、そのページに保存されたトリミングサイズとエクスポート設定が読み込まれます。トリミングサイズが保存されていないページでは、デフォルトのプリセットから始まります。

## 人気のサイズプリセットを選ぶ {#selecting-popular-size-presets}

[Video](/assets/videos/hypercrop/crop/selecting-presets.mp4)

HyperCropには数十種類のサイズプリセットが用意されているので、人気のプラットフォームやデバイスごとのサイズを自分で調べて入力しなくても、画像を簡単に一括トリミングしてエクスポートできます。

リストをスクロールし、各項目の横にある**チェックボックス**をクリックすると、サイズを追加（または削除）できます。サイズにチェックを入れると**selected sizes**リストに追加され、チェックを外すと削除されます。

### 収録されている人気のプラットフォームとデバイスのサイズ {#popular-platforms-and-device-sizes-included}

次のカテゴリにある数十種類のプリセットから選べます。

- Facebook
- Google Ads
- Instagram
- LinkedIn
- 用紙
- スマートフォン
- Pinterest
- スクリーン
- Snapchat
- タブレット
- Twitch
- Twitter (X)
- YouTube

## カスタムのトリミングサイズのプリセットを追加する {#adding-custom-crop-sizes-presets}

[Video](/assets/videos/hypercrop/crop/custom-sizes.mp4)

リストをスクロールし、各項目の横にある**チェックボックス**をクリックすると、サイズを追加（または削除）できます。サイズにチェックを入れると**sizes**リストに追加され、チェックを外すと削除されます。

### 幅または高さに「Auto」を使う {#using-auto-width-or-height}

幅と高さの*どちらか一方*だけを指定し、もう一方の値をHyperCropに自動で決めさせたい場合は、**Crop Width**と**Crop Height**の*どちらか一方*に入力し、もう一方は空欄のままにします。空欄の入力欄には、そのことを示す**Auto**というプレースホルダーが表示されます。固定する幅または高さが決まったら、**Add Custom Crop Size +** ボタンをクリックして、使用できるカスタムのトリミングサイズに追加します。

### カスタムのトリミングプリセットを削除する {#deleting-a-custom-crop-preset}

使用できるトリミングの一覧からカスタムプリセットを削除するには、カスタムのトリミングサイズの横にある**Trash**アイコンをクリックし、**Delete**をクリックして確定します。**selected sizes**リストから削除される*とともに*、使用できるトリミングの一覧からも完全に削除されます。

## 一括トリミングする画像を選ぶ {#selecting-images-for-batch-crop}

[Video](/assets/videos/hypercrop/crop/selecting-layers.mp4)

一括トリミングできる画像はすべて、HyperCropプラグインの右側に表示されます。リスト内の画像の横にある**チェックボックス**をクリックすると、その画像を一括トリミングの対象に含めるか除外するかを指定できます。

選択した画像の数に、選択した画像サイズの数を掛けたものが、HyperCropからエクスポートされる画像の総数になります。

> **Note:** **HyperCropに表示するには、画像にエクスポート設定が必要です**。Figmaの画像・レイヤーをHyperCropプラグインに表示するには、トリミングしたいレイヤーに少なくとも1つのエクスポート設定を追加してください。Figmaの右側の列にある**Export**見出しの下の **+** アイコンをクリックすると追加できます。

> **Tip:** **まとめて選択・選択解除する**。すべての画像の選択を一度に解除（または再選択）するには、リストの一番上にある**X of XX Images Selected**ラベルの横のチェックボックスをクリックします。

### トリミングのフォーカルポイントを指定する {#specifying-crop-focal-points}

デフォルトでは、HyperCropは**Center/Center**の基準位置で画像を一括トリミング・リサイズします。つまり、画像のフォーカルポイントは常に画像のちょうど中央になります。

フォーカルポイントを画像の別の位置、たとえば**Top/Left**や**Center/Right**に変えたい場合もあるでしょう。

その場合は、フォーカルポイントを切り替えたい画像にマウスを移動し、垂直（↕）と水平（↔）の**セレクトボックス**をクリックして、それぞれ目的のオプションを選びます。

### スマートトリミング機能を有効にする {#enabling-smart-cropping-features}

垂直（↕）と水平（↔）のセレクトボックスで手動でフォーカルポイントを指定したくない場合は、**Content Aware**と**Detect Faces**のトグルを使えます。

これらの機能は、どちらか一方（または両方）を有効にできます。有効（または無効）にしたい画像にマウスを移動し、それぞれの**トグルスイッチ**をクリックします。

#### Content Aware {#content-aware}

**Content Aware**オプションを有効にすると、HyperCropはスマートトリミングのモデルを使って、画像の中で重要な部分や注目すべき部分がどこにあるかを判断します。顔をトリミングするのが難しいサイズの組み合わせがない画像では、この設定を有効にする必要は*ありません*。有効にすると、画像のトリミングに時間がかかるためです。

#### Detect Faces {#detect-faces}

**Detect Faces**オプションを有効にすると、HyperCropは顔認識のモデルを使って、画像の中で顔がどこにあるかを判断します。画像に顔が含まれていない場合や、顔をトリミングするのが難しいサイズの組み合わせがない場合は、この設定を有効にする必要は*ありません*。有効にすると、画像のトリミングに時間がかかるためです。

> **Note:** **ブラウザの対応状況**。ブラウザの互換性の問題により、HyperCropの**Detect Faces**機能は**Safari**では*サポートされていません*。別のブラウザ（[Chrome](https://www.google.com/intl/en_us/chrome/)など）か、[Figmaデスクトップアプリ](https://www.figma.com/downloads/)でプラグインを実行してください。

## 一括トリミングのエクスポート設定を行う {#configuring-batch-cropping-export-settings}

[Video](/assets/videos/hypercrop/crop/open-settings.mp4)

トリミングサイズと画像を選び、画像ごとのトリミング設定に問題がなければ、画像を一括でトリミングしてエクスポートする準備ができました。

設定パネルを開くには、HyperCropのヘッダーにある**Batch Crop**ボタンをクリックします。

一括トリミングの設定パネルを開いたら、**Image Format**（JPGまたはPNG）、**Image Compression**（画像の品質・サイズを指定）、**Image Fill**（スマートトリミング以外にのみ適用）などを選べます。

### カスタムのファイル名形式を追加する {#adding-a-custom-filename-format}

一括トリミングでは、エクスポートするすべての画像に適用されるカスタムのファイル名形式を指定できます。命名規則をそろえたり、画像をわかりやすい**サブフォルダ**構成にまとめたりするのにとても便利です。

このフィールドは任意です。空欄のままにすると、デフォルトの **#{collection}/#{name}\_#{width}x#{height}** が使われます。

#### ファイル名に使える変数 {#available-variables-for-your-filenames}

下の変数は*どれでも*、通常のテキストや文字（アンダースコアや英数字など）と一緒に、カスタムのサブフォルダ・ファイル名のパターンに**自由に組み合わせて**使えます。

- **#{name}** Figmaのレイヤー名（例：「My Figma Layer Name」）
- **#{collection}** サイズプリセットのコレクション名（例：「facebook」）
- **#{label}** サイズプリセットのコレクションのラベル（例：「profile」）
- **#{width}** リサイズ後の画像の幅（例：「1024」）
- **#{height}** リサイズ後の画像の高さ（例：「768」）

> **Tip:** **サブフォルダを作成する**。サブフォルダを作成するには、カスタムのファイル名形式の任意の位置に「**/**」を追加します。たとえば **#{collection}-crops/#{width}x#{height}/#{name}** とすると、**facebook-crops/1024x768/my_figma_layer_name.jpg**のような動的なフォルダ構成が作成されます（変数はコレクションと幅・高さの組み合わせごとに置き換えられます）。

## 一括トリミングした画像をパソコンにダウンロードする {#downloading-your-batch-crop-images-to-your-computer}

[Video](/assets/videos/hypercrop/crop/batch-crop-download.mp4)

すべてのオプションとファイル名形式を思いどおりに設定したら、**Crop & Download Images**ボタンをクリックして、「HyperCrop」による画像の一括トリミング・リサイズ処理を開始します。

この処理では、選択した*すべての*画像について、選択したサイズを*すべて*処理します。そのため、画像やサイズが多いほど時間がかかります。

一括トリミングの処理が完了すると、画像をダウンロードできることを知らせる確認画面が表示されます。Figmaからパソコンに`.zip`ファイルをダウンロードするには、HyperCropプラグインの**Download your .zip file**ボタンをクリックします。

> **Tip:** **Figmaからダウンロードしたファイルの保存** Figmaの**デスクトップアプリ**を使っている場合は、ファイルをダウンロードするためのダイアログが表示されます。一方、**Webブラウザ**でFigmaを使っている場合は、デフォルトでファイルが自動的にパソコンにダウンロードされます（通常はパソコンの**Downloads**フォルダに保存されます）。

### エクスポートした.zipファイルを開く {#opening-your-exported-zip-file}

Figmaからパソコンに`.zip`ファイルをダウンロードしたら、ファイルエクスプローラーで保存先のフォルダを開きます。エクスポートした`.zip`ファイルを**ダブルクリック**すると、すべての画像とサブフォルダを含むフォルダに展開されます（HyperCropのエクスポート設定で指定したサブフォルダ・ファイル名のパターンに従います）。

## 一括トリミングした画像を現在のFigmaファイルに挿入する {#inserting-your-batch-crop-images-into-your-current-figma-file}

[Video](/assets/videos/hypercrop/crop/batch-crop-insert.mp4)

または、すべてのオプションとファイル名形式を思いどおりに設定したあとで、**Crop & Insert to Figma**ボタンをクリックすると、トリミングした画像をFigmaに直接挿入できます。現在のFigmaファイルにまったく新しいページが作成され、トリミングしたすべての画像レイヤーがそのページに挿入されます。