Figmaの書き出し画像サイズを調整する方法！解像度とスケール設定のポイント

Figmaでデザインした画像をWebや印刷物で使いたい時、いざ書き出してみるとサイズや解像度が合わず困ることがあります。適切な書き出し設定を理解しておけば、画像がぼやけたり重くなったりする問題を未然に防げます。この記事では「Figma 書き出し 画像 サイズ」というキーワードをもとに、スケール設定や解像度、フォーマットの選び方まで幅広く詳しく解説します。最新情報に基づいた実践的なポイントを抑えて、品質の高い画像を効率よく作成しましょう。

Figma 書き出し 画像 サイズの基本概念

Figmaで画像を書き出す際のサイズと解像度は、単にピクセル数だけでなく、スケール比、DPI、フォーマット、カラープロファイルなどが関係してきます。これらの基本概念を理解しないと、想定外にぼやけたりファイル容量が大きすぎたりする結果を招きます。ここではその基本構成要素を整理し、後で応用できるようにします。

スケール（1x／2x／3xなど）

Figmaではエクスポート時にスケールを指定できます。1xはオリジナルのピクセルサイズ、2xは縦横それぞれ2倍、3xは3倍といった具合です。Retinaなど高密度ディスプレイで綺麗に表示させたい場合は2xや3xの設定が一般的です。スケールを上げるとDPI（ドット密度）も比例して高くなり、よりシャープな画像になりますが、ファイルサイズにも影響します。

DPI（ドットパーインチ）と印刷との関係

Web用画像では72 DPIが標準とされることが多いですが、印刷や高精細ディスプレイ用には300 DPI以上が望まれます。Figmaでは書き出しサイズを指定したスケール倍数に応じてDPIが自動的に上がります。例えば2xで書き出すと144 DPI、3xだと216 DPIとなります。印刷用途を想定するなら、この関係を把握して使い分けることが重要です。

フォーマットごとの特徴（PNG／JPG／SVG／PDF）

画像フォーマットによって適する用途が異なります。PNGは透過やテキスト入り画像に適しており、画質劣化が少ないです。JPGはファイルサイズを小さくしたい時に便利ですが、透過はサポートされません。SVGはベクター形式で、どのサイズでも鮮明さが保たれます。PDFは書類共有や印刷物に向いています。用途に応じてフォーマットを選択することで、望ましい画像サイズとクオリティが得られます。

書き出し画像サイズを調整する具体的な手順

Figmaで実際に「書き出し画像サイズ」を調整する手順を学ぶことで、意図した通りの画像を生成できるようになります。ここでは選択から書き出しまでのプロセスを手順ごとに整理し、迷わず設定できるようにします。

内容を選択してエクスポート設定を開く

最初に、書き出したいレイヤー・フレーム・グループを選びます。必要ならスライスツールを使ってキャンバスの一部だけを切り取ることも可能です。その後、右側のプロパティパネルにあるエクスポート設定セクションで＋ボタンをクリックして書き出しフォーマットを追加します。どの要素を含めるか、背景透過かどうかなど選択肢があります。

スケールと寸法の指定

エクスポート設定画面でスケールを指定できます。デフォルトは1倍（1x）ですが、2x、3xといった倍数を使うことが多いです。また、幅幅指定（例：●●w）、高さ指定（例：●●h）で固定寸法にすることも可能です。これによって、高密度スクリーン用や特定の広告サイズなど用途に応じた寸法指定ができます。

画像書き出し時のカラープロファイルと補間方法

画像の色味を正確に保つにはカラープロファイル設定が重要です。Figmaではファイルのカラープロファイルをそのまま使うか、sRGB、Display P3などを選択できます。また、補間（リサンプリング）の方法も選択でき、「詳細（bicubic）」はグラデーションや影のある画像に向き、「基本（nearest neighbor）」はアイコンやテキストなど輪郭が重要な画像での鮮明さを保つのに適しています。

用途別に最適な画像サイズと設定例

Webページやアイコン、広告・印刷など用途によって求められる画像サイズと設定は異なります。ここでは代表的な用途ごとにおすすめ設定例を表で示し、それぞれに合わせた注意点を解説します。

Web用画像の軽量化と読み込み速度対策

Web用途では画像の読み込み速度がユーザビリティに直結します。高スケールで書き出すほどファイルサイズが大きくなるため、遅延読み込みや圧縮プラグインなどと組み合わせると効果的です。また、JPGで圧縮率を調整したり、Not許可透明PNGを使い分けたりすることで無駄なバンド幅を削減できます。

印刷用で高品質を確保する設定ポイント

印刷物向け画像は、色の再現やシャープさが求められます。300 DPI以上を目安にスケールを指定し、PDFフォーマットで書き出すと良いでしょう。フォントをアウトライン化するなどフォーマット特性を活かして、印刷時に文字がギザギザにならないように対策することも重要です。

よくあるトラブルとその対処法

書き出し画像サイズに関する典型的な問題とそれぞれの原因・解決策を理解しておけば、無駄なやり直しを減らせます。ここでは複数の実例から故障原因を探り、対処方法を明確にします。

ぼやけ・ピクセル化してしまう問題

Webサイトにアップしたり表示サイズを大きくしたりした際に画像がぼける理由は、低スケールで書き出したことが多いです。特にRetinaや4Kなど高解像度画面では1xでは足りません。2xあるいは必要に応じて3xで書き出すことでクリアさを維持できます。さらにフォーマットをPNGにし、詳細補間を使うことで輪郭の崩れを防止できます。

ファイルサイズが大きすぎて遅い

スケールを上げ過ぎたりPNGや高品質JPGを使いすぎたりするとファイルが重くなります。Web用途であれば品質と軽さのバランスを見て、必要なスケールだけを書き出す。JPGの圧縮率を適度に落とすか、画質の劣化が目立たないフォーマットに切り替えることも有効です。

DPIを上げたいのにサイズが変わってしまう問題

DPIを上げようとしてスケールを上げると、縦横のピクセル数も一緒に増えます。このため、指定サイズを保ちつつ高DPIにするのは原則として難しいです。どうしても必要な場合は外部ツールで再サンプリングするか、高スケールで出した後リサイズする方法が取られます。ただし画質やシャープネスの保持に注意が必要です。

Figmaの書き出し設定で最新の機能とオプションを活用する

Figmaは更新によりエクスポート機能も進化しています。最新情報を押さえ、効率的かつ質の高い画像作成を実現するためのオプションや使いこなしポイントを説明します。

複数スケール一括エクスポートの設定

複数のスケール（例1x、2x、3x）を一つの書き出し設定に追加しておくことで、一回で複数サイズの画像を出力可能です。これにより、各デバイス用や各用途用に個別で書き出す手間を省け、品質や寸法ミスのリスクを減らせます。最新のFigmaではこの機能が使いやすく改善されています。

ベクター形式（SVG）の詳細オプション

SVG書き出し時にはテキストのアウトライン化やID属性の付与、ストロークの単純化などのオプションがあります。これらを適切に設定することで、見た目の正確さや軽さ、編集しやすさのバランスをとることができます。特にアイコンやロゴなど、将来的に編集やスケーラビリティが必要な素材には有効です。

色の再現性を保つカラープロファイルの選択

Figmaでは書き出し時にカラープロファイルを「ファイルに準じる」「sRGB」「Display P3」などから選べます。Webでの表示を重視するならsRGB、特定のデバイスやディスプレイ品質を意識するならDisplay P3が適していることがあります。写真やビジュアルデザインでは色ずれを抑えるためにもこれらの設定を正しく行うことが大切です。

Figma 書き出し 画像 サイズを最大限活用するコツ

書き出し画像サイズに関しては、基本や設定だけでなく日頃のデザインワークにおけるコツを持っておくと、品質と効率の両立が可能になります。ここではプロの現場でも使われる実践的なコツを紹介します。

アートボード設計時に将来の サイズ を意識する

デザインを始める段階で、どのデバイスで使われるか、どのくらいのスケールが必要かを想定してアートボードを設計しておくと後の書き出しで無駄な作業を減らせます。例えばモバイルとデスクトップ両方で使うUIでは、高密度スクリーンに合わせてアイコンなどは3xを見越した設計をするのが効果的です。

プレビュー機能を活かして書き出し結果をチェックする

書き出し前にプレビュー機能を使用することで、ぼやけや不自然な切り取り、余白の問題などを確認できます。特に枠付きテキストなどは境界がトリミングされてしまうことがあるので、バウンディングボックス設定なども併せてチェックすると良いです。

必要以上の解像度を避けて無駄を省く

印刷以外では、3xより大きなスケールはほとんど不要になります。大きすぎる画像はファイルサイズが大きくなるだけでなく、アップロードや読み込み時間の増加につながります。必要な画質を見極め、用途に応じて最低限のスケールで書き出すようにしましょう。

まとめ

Figmaで書き出す際に画像サイズを正しく設定することで、Web表示が鮮明になり、印刷でも品質が保たれます。それにはスケールの選択、DPIの理解、フォーマットの使い分け、カラープロファイルや補間方法の調整など複数の要素が関わります。最新の機能を活用して、複数スケール書き出しやSVGオプションを使いこなすことも効果的です。

用途ごとに最適な設定を実践し、プレビューを習慣にし、必要以上の解像度を避けることで、効率よく美しいデザインを作成できます。この記事のポイントを押さえて、Figmaでの書き出し画像サイズ調整をマスターしてください。