Figmaでスライスツールを使う方法

Figma のスライスツールを使って、アイコン、UI要素、セクションなど、デザインの特定の部分を書き出す方法を学びましょう。この簡単なチュートリアルに従って、Trupeer でガイドを作成してください。

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

無料で始める

ステップごとのガイド:Figmaでスライスツールを使う方法

ステップ1

始めるには、Figmaの書式設定メニューに移動し、リージョナルツールのオプションをクリックします。

To begin, navigate to the formatting menu in Figma and click on the regional tools option.

ステップ2

利用可能なオプションから、スライスオプションを選択してツールを有効にします。

From the available options, select the slice option to activate the tool.

ステップ3

マウスを使って、スライスしたいオブジェクトを選択します。

Using your mouse, select the object you want to slice.

ステップ4

続行するには、エクスポートオプションをクリックします。

Click on the export option to proceed further.

ステップ5

スライスを書き出すためのオプションが表示されます。

You will be presented with an option to export the slice.

Figma の Slice ツールを使いこなすためのプロのコツ

  1. ショートカットで素早く有効化
    キーボードの S を押すだけで、メニューをたどらずに Slice ツールをすぐに有効化できます。

  2. スライスにわかりやすい名前を付ける
    書き出す前に、レイヤーパネルで各スライスに説明的な名前を付けましょう。これにより、書き出したファイルを整理しやすくなります。

  3. バッチ書き出しにスライスを使う
    デザインのさまざまな部分に複数のスライスを配置し、それらをまとめて書き出すことで、アセット作成をより素早く行えます。

  4. スライスをピクセルグリッドに揃える
    鮮明に書き出すために、スライスの境界が整数ピクセルに合うようにしてください。ピクセルグリッド(Ctrl + ‘ / Cmd + ‘)で位置を確認できます。

  5. 書き出しプリセットと組み合わせる
    スライス用に書き出しプリセット(例: PNG @2x、JPG)を設定しておけば、毎回調整しなくても設定を再利用できます。

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

  1. 全画面に対してむやみにスライスを使う
    フレーム全体を書き出すのにスライスは不要です。時間を節約するため、フレーム上の書き出しオプションを直接使いましょう。

  2. スライス境界の位置ずれ
    スライスがピクセルグリッドに合っていないと、書き出し結果がぼやけることがあります。書き出す前に必ずグリッドへの整列を確認してください。

  3. スライスレイヤーの選択を忘れる
    スライスを選択せずに書き出そうとしても動作しません。レイヤーパネルでスライス自体がハイライトされていることを確認してください。

  4. うっかりスライスが重なる
    重なりは、重複したり紛らわしい書き出しの原因になります。意図がない限り、スライスは分けておきましょう。

  5. 背景を確認せずに書き出す
    スライスはその下にあるものを正確に切り取ります。背景が選択範囲に含まれていない場合、書き出されたファイルが不完全になることがあります。

Figmaでスライスツールを使う際のよくある質問

  1. スライスツールは何に使いますか?
    レイアウトに影響を与えずに、デザイン内の特定の書き出し範囲を定義できます。アイコン、ボタン、またはカスタムセクションの書き出しに最適です。

  2. 作成後にスライスのサイズを変更できますか?
    はい、スライスは図形と同じように編集できます。角をドラッグするか、プロパティパネルでサイズを調整してください。

  3. スライスはデザインに影響しますか?
    いいえ、スライスは書き出し用のマーカーにすぎず、最終的なデザインには表示されません。

  4. 複数のスライスを一度に書き出せますか?
    はい、レイヤーパネルで複数のスライスを選択してまとめて書き出せます。

  5. Figmaのブラウザ版でもスライスは使えますか?
    はい、Figmaのデスクトップ版とブラウザ版の両方でスライスを作成・書き出しできます。

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

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

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

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

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

おすすめの読み物

技術ドキュメント生成ツール

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

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

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

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

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

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

Figmaで背景をぼかす方法

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

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

デモを予約する

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

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

デモを予約する

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

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

デモを予約する