Figma と Photoshop から鮮明な画像をエクスポートする方法

問題：デザインは鮮明なのに、エクスポートするとぼやける

何時間もかけて Figma や Photoshop で完璧なデザインを作成しました。キャンバス上ではすべてピクセル完璧に見えます。しかし、JPG または PNG としてエクスポートし、ブラウザで確認すると、ソフトでぼやけている、あるいは「何かが違う」ように見えてしまいます。

これはデザイナーがよく直面する悩みです。ぼやけの原因は主に2つあります：解像度が間違っている、またはエクスポート設定が不適切です。このガイドでは、Figma と Photoshop の両方で確実に鮮明な結果を得るための手順を紹介します。

現代の高解像度スクリーン（Apple の Retina ディスプレイなど）で鮮明な画像を得る鍵は、実際に表示するサイズの2倍のサイズでエクスポートすることです。

例：ウェブサイトで 1200px 幅で表示されるヒーローバナーがある場合、デザインツールから 2400px 幅でエクスポートします。その後、HTML または CSS で幅を 1200px に制限します。

<!-- 画像ファイルは2400px幅だが、ブラウザに1200px幅で表示するよう指示 -->  
<img src="my-banner-2400px.jpg" alt="説明的な代替テキスト" width="1200">

この手法により、ブラウザは2倍のピクセル密度を活用し、高解像度ディスプレイでより鮮明な画像を実現します。

Figma はベクターベースのツールであるため、鮮明なリソースのエクスポートが容易です。

ステップバイステップガイド：

フレームまたはリソースを選択： エクスポートしたい項目（アイコン、コンポーネント、フレーム全体など）をクリックします。
エクスポートパネルを開く： 右サイドバーの「Export」セクションで + アイコンをクリックします。
エクスポートサイズを選択： これが最も重要なステップです。「Export」設定で 1x を 2x に変更します。これにより、Figma はキャンバスサイズの2倍でリソースをレンダリングします。ロゴなど超重要なグラフィックには、3x を選択することも可能です。
フォーマットを選択：
- JPG： 写真や複雑な画像に最適。品質を 80-90% に設定します。
- PNG： 鋭い線、テキスト、透明度が必要なグラフィック（ロゴやアイコン）に最適です。
- SVG： 単純なロゴやアイコンに最適。ベクターフォーマットのため、どんなサイズでも完璧に鮮明です。
「Export」をクリック： ファイルを保存します。最終画像をウェブサイトにアップロードする前に、画像圧縮ツールなどで圧縮することを忘れないでください。

Photoshop はラスターベースのため、最初から高解像度のドキュメントで作業することが重要です。

ウェブ用グラフィックにはこの方法が推奨されます。ファイル > エクスポート > Export As... に進みます。

サイズを設定： 右側の「Image Size」セクションで、幅と高さが正しいことを確認します。2倍ルールに従っている場合、ドキュメントは既に表示予定サイズの2倍になっているはずです。
フォーマットを選択：
- JPG： 「Quality」スライダーを使用します。70-85 の値が、品質とファイルサイズのバランスに最適です。
- PNG： 透明度が必要な画像に使用します。限られたカラーパレット（シンプルなロゴなど）の場合は、「Smaller File (8-bit)」をチェックするとファイルサイズが大幅に削減できます。
カラースペースを sRGB に設定： ダイアログ下部の「Color Space」で、「Convert to sRGB」 がチェックされていることを確認します。これはウェブの標準カラープロファイルで、ブラウザで色がくすんで見えるのを防ぎます。
「Export All」をクリック： 画像を保存します。

古い Photoshop バージョンでは、ファイル > エクスポート > Web 用に保存（旧式） が有効です。

プリセットを選択： 右上隅で「JPEG 高」や「PNG-24」などのプリセットを選択します。
品質を調整： JPEG の場合は「Quality」スライダーを使用します（70-80 が理想的です）。PNG の場合は、PNG-8（ファイル小/限定色）と PNG-24（高品質/フルカラー）を選択できます。
画像サイズを確認： 右下隅で最終サイズを確認します。
sRGB を確認： 「Convert to sRGB」オプションがチェックされていることを確認します。
「保存」をクリックします。

2倍サイズでエクスポートし、リソースを sRGB カラースペースで適切に圧縮することで、ぼやけた画像にさよならを告げ、デザインがキャンバス上と同じく鮮明にウェブで表示されるようになります。