Figmaからの書き出しで解像度を保つコツ！劣化させないデザイン保存法

Figmaでデザインを完成させた後、書き出し時に画像がぼやけたり荒くなってしまうのは多くのデザイナーが直面する悩みです。ディスプレイの高解像度化に伴い、Webサイトやモバイルアプリでは **Retina対応** や **2倍・3倍書き出し** が不可欠となっています。この記事では「Figma 書き出し 解像度」という観点で、書き出しの形式・倍率・カラー設定などあらゆる要素を網羅し、画質を最大限保つ最新情報をお届けします。

Figma 書き出し 解像度：基本を押さえる

まずは「Figma 書き出し 解像度」の基本的な仕組みと、それがなぜ重要かについて理解することがスタート地点です。Figmaではラスター形式のPNGやJPGと、ベクター形式のSVGなど複数のフォーマットがあり、解像度や倍率の設定次第で出力品質が大きく変わります。加えて、高密度ディスプレイ環境に適した書き出し設定を使うことで、ぼやけを防ぎ、シャープに見せることが可能です。書き出し時の解像度とは画面上のピクセル数やDPI（プリントや印刷用途）などを指しますが、Web用途では主に「倍率（スケール）」がキーとなります。

PNG・JPG・SVGの形式ごとの特徴

PNGとJPGはいずれもラスター画像形式で、デザイン内のピクセル情報がそのまま出力されます。PNGは可逆圧縮かつ透過対応があり、ロゴやテキスト入りグラフィックに適しています。JPGはファイルを軽くできますが圧縮による劣化が起きやすいため、写真や陰影のある画像に向いています。SVGはベクター形式で、どんな大きさにも拡大縮小しても劣化しないため、アイコンやロゴ、UIパーツに最適です。

形式ごとの設定では、PNG／JPGにはスケール（倍率）指定があり、SVGにはテキストをアウトライン化するかどうかやストロークの表現方式などを選べます。また、PDF書き出しには制限があり、倍率を変えることができないケースがあります。

倍率（スケール）指定が解像度を左右する

Figmaでは書き出し時に「1x」「2x」「3x」「4x」などの倍率を設定できます。例えばWebサイトで横幅1200pxで表示するバナーであれば、2x（2400px）で書き出して実際は1200pxで表示させると、高密度ディスプレイでもシャープな見た目を保てます。これはRetina対応などで不可欠な手法です。また、倍率を上げることでDPI相当が上がり、印刷用途にも応用可能です。

ただし、倍率を上げすぎるとファイルサイズが増大し、読み込みの遅さなどパフォーマンスに悪影響を与えることがあります。用途とディスプレイの特性を踏まえて最適な倍率を選ぶことが重要です。

カラー設定とサンプリング方法

色再現や滑らかなグラデーション表現にはカラー設定（sRGB、Display P3など）が影響します。Figmaの書き出し設定では、書き出し元のファイルのカラープロファイルを使うか、sRGBやDisplay P3に変更するか選べます。これによりディスプレイ間で色の誤差を減らせます。

また、ラスター形式のPNG/JPGなどにはリサンプリング方式の指定があり、デフォルトでは詳細な滑らかな補間がかかる方法が使われることが多いです。アイコンなどのシャープなエッジが求められる素材では、近傍法（nearest neighbor）などの方式を選ぶと輪郭がぼけにくくなります。

用途別に整理する書き出し解像度の目安

用途（Web、モバイル、印刷など）によって求められる解像度は異なります。「Figma 書き出し 解像度」を意識するユーザーは、自分がどの用途で使うかを明確にしておく必要があります。用途別の目安を把握することで、品質と効率のバランスの取れたデザイン書き出しが可能になります。

Webサイト・ブログ用の画像

Web用途ではディスプレイの幅や表示領域を基準にサイズを指定し、通常は1xで問題ないケースが多いですが、高密度ディスプレイでは2xが推奨されます。たとえばバナーやヒーローヘッダー、カード画像など視覚的にインパクトが求められる部分は、2x書き出しすることで見栄えが格段に向上します。

画像フォーマットは、透明が必要なロゴやUIパーツにはPNG、写真や背景画像など色調を重視するものにはJPGまたはWebP（プラグインを通じて利用する場合がある）を選ぶのが一般的です。

モバイルアプリ・アイコン素材

モバイルアプリでは各プラットフォームが異なるピクセル密度（DPI／PPI）を持っています。iOSやAndroidのアイコンやスプラッシュスクリーンなどでは、1x／2x／3xの複数サイズを用意する必要があります。たとえば1xのアイコンを3種類等倍で作成するのではなく、元を2x以上で作成し、必要に応じてスケールを落として書き出す方が品質を落としにくいです。

アイコン素材の場合、小さなサイズではエッジのシャープさが特に重要なため、アウトライン化したSVGやPNGで補間方法を調整することが推奨されます。

印刷用途（ポスター・パンフレットなど）

印刷用途ではDPIベースで解像度が重要になります。一般的には300DPIが印刷の標準とされていますが、ポスターなど大型出力ではそれ以上が望まれることがあります。Figmaは直接「DPI指定」する機能は限定的ですが、倍率を大きく（例：4x）し、書き出しサイズを実際の印刷物の寸法に合わせることで印刷用途に耐える解像度を確保できます。

また、書き出し後も印刷用ソフトでの色変換や最終チェックを行うことが品質を保つ鍵です。書き出し形式はPDFや高解像度PNGが選ばれることが多いです。

設定項目ごとの具体的な書き出し手順と注意点

「Figma 書き出し 解像度」に関する理解が進んだら、実際に設定を操作していく手順と、見落としがちな注意点を押さえておきましょう。形式・倍率・カラー設定・テキストやストロークの扱いなど、細部にわたる設定を理解することで意図した通りの出力が得られます。

書き出し設定パネルの使い方

まず、フレーム・レイヤー・グループの中から書き出したい要素を選択します。その後、右側のエクスポートセクションに移動し、「＋」を押して書き出し設定を追加します。形式を選び、スケール倍率や幅・高さを設定できるようになっています。複数設定を追加すれば、1x／2x／3xなど用途に応じた複数サイズを一度に書き出すことも可能です。

書き出しの対象範囲を正しく選ぶことも重要です。フレームの外にあるオブジェクトや重なり合うレイヤーがあると、意図しない部分が含まれたり切れたりすることがあります。またスライスを使うことで範囲を限定できます。

スケール指定と最大ピクセル制限

Figmaでは倍率をx表記（例：2x）や幅・高さ固定（例：512w／512h）などで指定できます。倍率型は選んだ要素のサイズをそのままスケーリングし、幅／高さ指定型は特定の寸法に合わせる形式です。倍率型は高密度スクリーン対応に便利ですが、幅／高さ指定を使うと用途に応じて調整しやすくなります。

ただしPNG/JPG書き出しには最大ピクセル数（例：4096×4096）が制限されていることがあります。非常に大きな画像を扱う際は、この制限に注意し、分割や分割フレームの使用を検討してください。

テキスト・ストロークのアウトライン化とベクター出力の扱い

SVG書き出し時にはテキストをアウトライン化するか否かを選べます。アウトライン化すれば見た目を完全に維持できますが、テキストとしての編集性は失われます。編集性よりも見た目を重視する場合はアウトライン化を有効にしましょう。ストロークの表現についても、ストロークをベクターの中心線として扱うか、内部／外部の重なりをマスク処理で表現するかなどの設定があります。

ラスター形式の場合、テキストをラスタライズして書き出すため、細いフォントなどは滑らかに見えにくくなることがあります。可能であればSVG形式で担当箇所を表現するか、PNGで高倍率を設定してシャープさを維持することが望まれます。

カラー空間とプロファイル設定の注意点

デフォルトではデザインファイルで設定されたカラー空間が書き出し時にも使われますが、特定のWebブラウザやOSでは sRGB が標準として期待されることが多いため、Web用途では sRGB を選択することで色のズレを抑えられます。高対比／鮮やかさが重要なデザインでは Display P3 の表示対応を考慮に入れると良いです。

また、書き出し後に他の環境で確認することを前提として、異なるデバイスで色味や明るさがどうなるかをプレビューする手順を含めておくとトラブルを減らせます。

トラブル事例と回避策：よくある「書き出し解像度」の失敗

「Figma 書き出し 解像度」を狙うユーザーが最も気にするのは、書き出した画像が想定よりぼやけたり粗かったりするケースです。この見出しでは具体的な事例を挙げて、それぞれの回避策を示します。最新の情報にもとづいた実践的な対策を知ることで、失敗を未然に防げます。

Webにアップしたら画像がぼける例

例として、Figmaで2xで書き出したPNGをWebサイトに配置したが、表示された際にぼやけていたという事例があります。原因として、ブラウザ上で画像をCSSで拡大表示していたり、コンテナサイズに合わせて画像を引き伸ばしたりしていることが挙げられます。これを防ぐには、Web表示の幅に合ったサイズで書き出すこと、そしてCSSやHTMLで画像の実際表示サイズを明確に指定することが有効です。

また、元画像そのものが小さいサイズで作られていた場合、どれだけ倍率で書き出してもシャープさを担保できないことがあります。元デザインのサイズを大きく確保しておくことが基本です。

印刷で文字が潰れる／不鮮明になるケース

タイトルやキャプションなど細い文字を含む印刷物では、解像度が不足すると文字が潰れたり輪郭がギザギザになることがあります。印刷用途では300DPI相当を目安にし、書き出し倍率を上げたり、文字をアウトライン化したりすると改善します。

さらに、PDF書き出しではエフェクトや影・ぼかしが期待通りに再現されないことがあり、その場合は画像形式で書き出すか、印刷用ソフトで最終チェックをすることが望まれます。

ファイルサイズが重くなるが画質があまり変わらない状況

倍率を過度に上げたり、高解像度の写真をそのまま使ったりするとファイルサイズが極端に大きくなるものの、実際の見た目がほとんど変わらないというケースがあります。特にWeb用途では読み込み速度への影響が大きく、UXを損なうリスクがあります。

このような場合は最初に必要な表示サイズを明確にし、それに見合う倍率や解像度で書き出すことがポイントです。場合によっては画像の圧縮やWebPなどの形式を併用して軽量化を図るのも有効な戦略です。

実践すべき最新情報を使ったチェックリスト

最新情報にもとづいて、「Figma 書き出し 解像度」で画質を保つための実践的なチェックリストを作成します。書き出し前に以下を確認すれば、後悔の少ない出力が可能になります。

比較表で見る：スケールと用途の関係

以下の表は、用途ごとの推奨スケール・形式・注意点を整理したものです。どの用途でどのスケールや形式を優先すべきか迷ったときの判断材料になります。

まとめ

「Figma 書き出し 解像度」を最大限生かすためには、形式・倍率・カラー空間など複数の要素を組み合わせて最適化することが重要です。Web用途では2xの書き出し＋表示幅の指定で鮮明さを保ち、印刷用途では実寸に近い大きさ＋高倍率で出力しましょう。テキスト・ストローク・アウトライン化の設定も重大なポイントです。最後に、ご自身の校正環境や表示環境でプレビューし、実際の見た目を確認して満足できる書き出しを心がけてください。