Affinity は無料でありながら、書き出し設定が細かく調整でき、実務でも十分通用するグラフィックソフトです。

今回はWeb制作で広く使われる WebP の実用的なエクスポート設定を整理します。
Webサイトの表示速度（パフォーマンス）と見た目の美しさのバランスを高水準で両立し、バナー・写真・透過素材まで、ほとんどの用途をカバーできる標準設定です。ぜひ参考にしてください。

WebP 書き出し「最強」設定リスト

Webサイト制作やデジタルマーケティングにおいて、バナー、写真、一般的なアイコンをWebPで書き出す場合、下記の設定が「95%のケースでそのまま使える絶対的な最適解」になります。

• リサンプル: Lanczos 3 (分離不可)
• 非表示レイヤーをエクスポートしない: オン
• ピクセル形式: RGB 8ビット （※背景が透明な画像でもこのままでOK）
• ICCプロファイル: sRGB IEC61966-2.1
• 品質: 85 （必要に応じて90〜95）
• ロスレス: オフ

各設定の理由と知識（なぜこれを選ぶのか？）

1. リサンプル：Lanczos 3 (分離不可)

• 理由: 画像を縮小する際の「最高画質」の計算式だからです。
• 詳細: バナー広告などの小さなキャンバスに縮小する際、文字の輪郭や製品のエッジがぼやけず、最もシャープでカリッと仕上がります。バイリニアは少しぼやける可能性があります。

2. 非表示レイヤーをエクスポートしない：オン

• 理由: 事故防止とデータクリーン化のためです。
• 詳細: 作業中に隠しておいたメモや没案のレイヤーが、意図せず書き出されるのを防ぎます。

3. ピクセル形式：RGB 8ビット

• 理由: Webにおける最も標準的で安全なデータ形式だからです。
• 詳細: Affinityの賢い仕様により、「RGB 8ビット」を選んでおけば、ドキュメントの背景が透明な場合は自動的に透明なWebP（アルファチャンネル付き）として書き出されます（一般的なRGBA 8ビットを兼ねるということ）。 そのため、透明・不透明に関わらず、Web用であれば常にこの設定で問題ありません。

4. ICCプロファイル：sRGB IEC61966-2.1

• 理由: 世界中のあらゆるデバイス（スマホ、PC）で「色を統一」するための絶対ルールだからです。
• 詳細: 広色域のプロファイルを選んでしまうと、Webブラウザ上で見た際に色がくすんだり変色する原因になります。Web用＝sRGB一択です。

5. ロスレス：オフ

• 理由: WebPの最大の強みである「超軽量化」の恩恵を受けるためです。
• 詳細: オン（可逆圧縮）にしてしまうとファイルサイズがPNG並みに重くなります。表示速度を重視するWeb制作においては、オフ（非可逆圧縮）が基本です。例外については後述します。

6. 品質：85 （ベース設定）

• 理由: 画質劣化とファイルサイズの「黄金比」だからです。
• 詳細: 品質85であれば、人間の目には劣化がほとんど分かりません。もし書き出した後に「文字の周りにモヤモヤ（ノイズ）が出ている」と感じた時だけ、90〜95に微調整して書き出し直すという運用が最も効率的です。

例外：この設定を変える「残り5%」のケースとは？

95%のケースで上記の設定が使えます。例外があるとすれば、色数が極端に少ないベタ塗りのロゴや、絶対にドットをにじませたくないアイコンなどの場合です。以下の設定を試してください。

• 文字が中心のロゴやバナーなどで、品質95にしても輪郭のモヤモヤがどうしても気になる場合のみ、特例として ロスレス：オン にします（ただしファイルサイズが重くなることがあります）。

最終の仕上げとして重要な設定のため、WebPのロスレス圧縮について少し深堀ってみます。
文字メイン、アイコン、ベタ塗り、アニメ塗りなどで、ロスレスをオフ（非可逆）にして品質を下げると、文字周りや色の境界線に「モヤモヤ（圧縮アーティファクト/JPEGノイズのようなもの）」が発生することがあります。

特に、クッキリとした文字が多いバナーなどでロスレスをオフにすると、この「モヤモヤを表現するためのデータ量」が増えてしまい、結果的に「ロスレス（オン）の方が軽くて綺麗」という現象が起こり得ます（上のサンプル画像などがその例）。

ベクター由来のフラット画像で色数が少ないロゴや、エッジがシャープな文字やアイコンは、ロスレス圧縮と非常に相性が良く、色数が少ないほど圧縮率が上がります。
lossy WebP は写真向けの圧縮アルゴリズムなので、フラットなグラフィックには効果が薄く、むしろロスレスの方が軽くなるケースはよくあるのです。

最後は自分の目とファイルサイズ

迷った時や容量ギリギリを攻めたい時は、ロスレスの「オン」と「オフ（品質85）」の両方で書き出してみて、ファイルサイズが小さくて綺麗に見える方を採用するのがプロの現場の正解です。

最後は結局、自分の目を信じてみるのが良いと思います。まずは、この記事の『最強設定』で保存してみて、「なにか物足りないな」「ちょっと文字がぼやけてる？」「ファイルサイズ、もうちょっといけるかな？」など、自分の目で見て感じることがプロのデザイナーへの第一歩です。

【予告】次回は、Affinity の SVG エクスポートについて解説します。