画像の出力（書き出し）はどの設定がおススメ？-Affinity Photo
も・く・じ
ここではAffinity Photoの数ある機能の中から主にブログサイトや商品・サービス紹介サイトでの利用を前提としたweb用画像の作成・加工についての使い方をご紹介します。
（記事中の画像もAffinity Photoで作成してます）
基本的な使い方はこの下にある「使い方記事一覧」をご覧ください。
それ以外の知ってればより効率アップのTips系記事はこちらにまとめてあります。
※Affinity Photo使い方記事一覧
Affinity Photoで編集・加工後の画像出力（書き出し）について、知っておくと効率アップにもつながる基本的なことをご紹介します。
よく使うJPEGとPNGの基本仕様
Affinity Photoで編集・加工が済んだらウェブサイトで表示可能なファイル形式に出力（”書き出し”とも言います）する作業が待ってます。
一般的にはJPEG（拡張子.jpg）かPNG（拡張子.png）での出力になるでしょう。
GIFでの出力もないことはないですが頻度としては少ないかと思われるので今回は割愛します。
JPEGとPNGの違いで一番大きいのはPNG画像は背景の透明化が可能ということでしょうか。
フリー素材配布サイトなんかでも同じ画像でJPEG画像とPNG画像がある場合、PNG画像の方は背景が透過してたりします。
イマイチわかりにくいという方のためにサンプルイメージをご用意しました。
左（スマホでは上）がJPEG画像を、右（スマホでは下）がPNG画像をウエブサイトで表示したときのイメージ画像です。
JPEG画像はたとえ透過部分を作ったとしても最終的には白の背景に強制的に置き換えられて出力されます。
一方PNG画像は”握手イラスト”だけが表示されてその周囲は完全に透明になってます。
もちろん画像全体が何らかのデザインで構成されてる（あるいは背景に白以外の背景色を付けてる）場合はJPEGもPNGも同じように表示されます。
こういう時はファイルサイズが大きくなりがちなPNG画像で出力する意味合いは全くないです。
背景が白になるJPEG画像なら背景が白のサイトで透明っぽい演出は可能です。
その代わりサイトの背景を白から変えると一転してデザイン崩れのような表示になることもあるので、背景が透明な画像は常にPNGで出力するなど自分なりのルールを作っておくとラクです。
透明な背景（透過情報）を持つPNG画像を作るためにはキャンバスを透明化しておく必要があります。
やり方は簡単。
メニューの【ドキュメント】→【透明な背景】にチェックが入っていたらクリックして解除します。
これで背景が透明になります。
（透明な背景時はキャンバスの背景が薄い格子状で表示されます）
新規ドキュメント作成時に透明な背景にすることももちろんできます。
新規ドキュメントの作成と保存…詳細はコチラ
JPEGで出力
実際の出力作業としては、メニューから【ファイル】→【エクスポート】を選択すると”どんな感じで変換したいのか”を決める設定画面が開きます。
JPEGもPNGも設定の9割方は同じで、ここではJPEGでの出力を例に設定画面を見ていきます。
①サイズ：編集・加工終了時のサイズがここに表示されます。
もしも別のサイズで出力したい場合はここの数字を変えます。
鍵マークは縦・横同比率での拡大・縮小用で、どちらか一方だけ入力すれば残りは自動計算で表示されます。
鍵マークをクリックしてロックを外したアイコンにすると、縦・横とも別々のサイズでの入力が可能になります。
仮に片方だけサイズを変更した場合は元の画像の縦横比率が崩れた形での表示になります。
（その需要ってどんなときなんでしょう）
②プリセット：予め設定を済ませたフォーマットがいくつか登録されてます。
基本的には品質の違いだけです。
既存のプリセットではなくオリジナルのプリセットを作って登録することもできます。（⑦「その他」参照）
③リサンプル：画像の圧縮時の変換処理におけるアルゴリズムの違いです…がその仕組みを覚える必要はありません。
ニアレストネイバー：一番シンプルな変換処理方法で、境界線とかがくっきり表示されるイメージです。
画質は決してよくはないです。（写真画像等には不向き）
その分変換にかかる作業時間が一番短い…のですが、そもそもweb画像程度のファイルサイズならどのリサンプルでやってもそう変わりはありません。
通常これを選択することはないですが、ドット絵などのカクカクした画像ならむしろこちらの方がそれっぽく表示できたりもします。
バイニリア＆バイキュービック：通常はこのどちらかを選べば問題ないです。
しいて言えばバイキュービックの方がより若干変換精度が高いと言われてます。
しかしながら”見較べてみたらなんとなくわかる”程度なのであまり気にする必要はないでしょう。
（既存のプリセットは全部バイリニアになってます）
Lanczos3分離可能＆Lanczos3分離不可：実はAffinity Photoで初めて見た変換方法でして、そもそも読み方すら知りません。（泣）
わかり次第更新します。
④品質：文字通り出来上がり画像の”品質”です。
単純には数字が大きいほど細かいところまできれいに表示されます。
ただし数字が大きいほどファイルサイズが大きくなるというデメリットもあります。
よって商品画像などきれいに見せたい場合は数字を大きくしてそれ以外はわかればいいぐらいの品質で出力するなど、このあたりはサイト運営者の思惑次第とも言えます。
⑤領域：どこを出力するかの設定なので通常は”全文書”のままで問題ないです。
画像の一部だけ範囲指定しておくと「選択エリア」などの選択肢が出てきます。
しかしそれをやるぐらいなら出力前に範囲指定して切り抜いておく方が早いし正確です。
⑥書き出しペルソナで非表示にしたレイヤーをエクスポートしない：何を言ってるのかさっぱりわかりません。（泣）
たぶん”書き出しペルソナ”っていうのはメニューの【ファイル】→【ペルソナ】→【エクスポート】のことかと思いますが、そこでレイヤーの表示・非表示をチェックしたら…みたいなことなんでしょうか。
いずれにしてもこれまでチェック無しのままで何らかの問題が出たことはないので無視してます。
⑦エクスポート：何も問題がなければ最終的にはここをクリック。
ダイアログが開くので保存先を指定して保存したら完了です。
⑧その他：ここをクリックするとさらに細かいオプション画面が開きます。
前の画面だけでも細かいのにさらにここでもって見てるだけでうんざりしますよね。
でもここは全く触らなくても大丈夫。
よく見ると大半が前の画面の情報が引き継がれて表示されてるだけですので。
⑨マット：画像編集で背景を透明化させといてもJPEG出力時は（何もしなければ）白で出力されます。
しかしながらこのマットを使えば背景に別の色を設定させることもできます。
「マット」の右脇をクリックするとカラー設定画面が出てくるのでそこで好きな色を指定します。
⑩ICCプロファイルを埋め込む（その画像特有のカラー情報）と⑩メタデータを埋め込む（画像の解像度や撮影日時、著者名といった固有情報）にチェックが入ってますが、これは相手にデータを渡す際に画像の固有情報などを入れ込む設定かと思われます。
よって単にweb画像を出力するだけならチェックを入れておこうが外そうが関係ないです。
（気になる方はチェックを外した状態のオリジナルプリセットを作っておくといいです）
⑪プリセットの管理：自分なりの設定を終えてオリジナルのプリセットを登録するにはここをクリックします。
「プリセットの作成」画面が出るので適当な名称を入力します。
次からはプリセットを開くと登録したオリジナルプリセットの名前が表示されるようになります。
PNGで出力
続いてPNG画像の設定画面です。
といっても設定内容はほぼほぼJPEG画像の時と同じです。
①プリセット：プリセットは2種類しかありません。
「PNG」も「PNG-8」もどちらも透過情報を持てます。
ただし「PNG-8」の方は変換に使える色数が256色と少ないため、グラデーションを使った画像や写真画像なんかには向いておらず、シンプルな画像の変換に向いてます。
その分ファイルサイズは軽くなります。
一方「PNG」の方はフルカラーで表示可能なのでどんな画像もきれいに表示されます。
その反面ファイルサイズはかなり大きくなるので、画像によって「PNG-8」と使い分けたり、オンラインwebサービスを使ってファイルサイズを減らすなどの工夫が必要になることもあります。
（”品質”の項目はありません）
②その他の設定を開いてみます。
JPEG画像の設定と違う点は”マット”の部分です。
マットがなし（赤斜線）になってるのがすなわち透明化設定というわけです。
PNGに関してはオリジナルフォーマットを作る意味はあまりないので既存の2種類の使い分けでいいと思います。
【Affinity Photo ver.1.9.2で検証済】
スポンサーリンク
記事はお役にたてましたか?
記事に興味をもっていただけたらソーシャルボタンでの共有お願いします^^
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓