Figmaで画像をトリミングする方法

Figmaで画像をすばやく効率的にトリミングする方法を学びましょう。このステップごとのガイドでは、トリミングツールの使い方、画像の境界の調整、そしてすっきりとしたデザインのためのヒントを紹介します。

ラフな画面録画から、AIで製品動画とドキュメントを即座に作成

無料で始める

ここでは、より詳細に説明します:

画像を選択する: トリミングしたい画像レイヤーをクリックします。 
トリミングモードに入る: ツールバーの「トリミング」ボタンをクリックするか、キーボードショートカット(Option/Alt + ダブルクリック)を使用できます。 
トリミングハンドルを調整する: 画像の周囲に青いハンドルが表示されます。
これらのハンドルをドラッグしてトリミング領域のサイズを変更します。 
画像を再配置する: トリミング領域内をクリックしてドラッグし、トリミングボックス内で画像を移動します。 
トリミングを確定する: 画像の外側をクリックするか、Esc/Return を押して変更を適用します。 
アスペクト比を維持する: ドラッグ中に Shift/Control を押し続けると、元のアスペクト比を維持できます。 
反対側の辺を同時に調整する: ドラッグ中に Option/Alt を押し続けると、画像の反対側の辺のサイズを変更できます。 

ステップバイステップガイド: Figmaで画像をトリミングする方法

ステップ 1

まず、Figma のテンプレートから画像を選択します。

Begin by selecting the image from the template in Figma.

ステップ 2

このメニュー内の画像セクションをクリックして、ポップアップウィンドウを開きます。

Click on the image section within this menu to open a pop-up window.

ステップ 3

ドロップダウンメニューをクリックします。

Click on the dropdown menu.

ステップ 4

トリミングオプションを選択します。

Select the crop option,

ステップ 5

これで画像のトリミング機能が有効になります。必要に応じてトリミングを調整してください。

The crop function will now be enabled for the image. Adjust the crop to meet your specific requirements.

Figmaで画像を切り抜くためのプロのコツ

  1. キャンバスに画像を取り込む
    画像ファイルをFigmaキャンバスにドラッグ&ドロップするか、File > Place Image オプションを使って挿入します。

  2. 画像レイヤーを選択する
    切り抜きたい画像をクリックします。画像だけが選択されており、他の要素とグループ化されていないことを確認してください。

  3. 「Crop」モードをクリックする
    上部ツールバーで「Fill」と表示されたドロップダウンを探します。クリックして、モードオプションから「Crop」を選択します。

  4. 切り抜き範囲を調整する
    端や角にある黒いハンドルをドラッグして、画像の表示範囲を指定します。

  5. フレーム内で画像の位置を調整する
    クロップボックス内で画像をクリックしてドラッグし、表示したい部分を調整します。

  6. 「Done」をクリックするかEnterキーを押す
    仕上がりに満足したら、Enterキーを押すか画像の外側をクリックして変更を適用します。

よくある落とし穴とその回避方法

  1. クロップオプションが表示されない
    画像ではなく図形やグループ化されたレイヤーを選択していないか確認してください。Cropツールは画像にのみ表示されます。

  2. 切り抜きではなく画像が伸びてしまう
    画像の一部を隠したい場合は、ScaleやFitオプションを使わないでください。必ずCropモードを使用します。

  3. フレーム全体を誤って移動してしまう
    外側の青いバウンディングボックスではなく、白いクロップハンドルを使って調整してください。青いバウンディングボックスを動かすとフレーム全体が移動します。

  4. サイズ変更後にクロップ範囲がリセットされる
    切り抜き後に画像フレームのサイズを変更した場合は、クロップ設定がそのまま保持されているか再確認してください。

  5. クロップが適用されない
    Enterキーを押すか画像領域の外側をクリックして、クロップを確定・完了してください。適用されない場合、変更が失われることがあります。


Figmaで画像を切り抜く際によくある質問

  1. Figmaで画像を切り抜くにはどうすればよいですか?
    画像を選択し、Fillのドロップダウンに移動してCropを選択し、切り抜きボックスを調整してからEnterを押して適用します。

  2. 一度に複数の画像を切り抜けますか?
    いいえ、切り抜きは各画像ごとに個別に行う必要があります。Figmaでは一括切り抜きはサポートされていません。

  3. Figmaでのcropとmaskの違いは何ですか?
    Cropは画像の一部を直接非表示にします。マスキングでは別の図形を使って表示領域を定義します。

  4. Figmaで切り抜きを元に戻せますか?
    はい、画像を選択し、Fillモードに戻して、切り抜き範囲をリセットまたは再調整します。

  5. 切り抜くと画像サイズは小さくなりますか?
    いいえ、切り抜きは画像の一部を見えなくするだけで、ファイルサイズを減らしたり、非表示のピクセルを削除したりはしません。

  6. Macで画面録画するには? 
    Macで画面録画するには、Trupeer AIを使用できます。画面全体をキャプチャでき、AIアバターの追加、ナレーションの追加、動画内でのズームイン・ズームアウトなどのAI機能を提供します。TrupeerのAI動画翻訳機能を使えば、動画を30以上の言語に翻訳できます。 

  7. 画面録画にAIアバターを追加するには?
    画面録画にAIアバターを追加するには、AI画面録画ツールを使用する必要があります。Trupeer AIはAI画面録画ツールで、複数のアバターを使った動画作成を支援し、動画用の自分のアバター作成もサポートします。

  8. Windowsで画面録画するには?
    Windowsで画面録画するには、内蔵のGame Bar(Windows + G)や、AIアバター、ナレーション、翻訳などのより高度な機能を備えたTrupeer AIのような高度なAIツールを使用できます。

  9. 動画にナレーションを追加するには?
    動画にナレーションを追加するには、trupeer aiのChrome拡張機能をダウンロードしてください。サインアップ後、音声付きの動画をアップロードし、Trupeerから希望のナレーションを選んで、編集した動画を書き出します。 

  10. 画面録画でズームインするには?
    画面録画中にズームインするには、Trupeer AIのズーム効果を使用します。これにより、特定の瞬間にズームイン・ズームアウトでき、動画コンテンツの視覚的なインパクトを高められます。

おすすめの記事

技術ドキュメントジェネレーター

ユーザーマニュアルガイド

ナレッジベースソフトウェア

Figmaでフレーム名を非表示にする

Figmaファイルを保存する方法

Figmaでグリッドを作成する方法

Figmaでグリッドを作成する方法

Figmaで背景をぼかす方法

動画編集者、翻訳者、脚本家が必要ですか?

Trupeerを無料でお試しください

デモを予約する

動画編集者、翻訳者、脚本家が必要ですか?

Trupeerを無料でお試しください

デモを予約する

動画編集者、翻訳者、脚本家が必要ですか?

Trupeerを無料でお試しください

デモを予約する