Tool Factoria

機能別・詳細解説

画像フィルターの効果・設定の違い

画像フィルター一括適用の基本操作から一歩進み、プリセットの中身、フィルターを重ねる順序、 プレビューに反映される補正と実行時だけ反映されるCanvas処理、出力形式と画質の選び方を整理します。

画像フィルターを開く基本操作に戻る

このページの使い方

画像の追加から実行までの5手順は、基本操作ガイドで説明しています。 ここでは、仕上がりを比較しながら設定を決めたいときに必要な情報だけを詳しく確認できます。

1. 仕上がりをまとめて選ぶ

プリセットは設定一式を切り替える

Vintage、Film、Warm、Cool、Softは写真向け、Retro、Cinematic、DramaticはSNS向けのプリセットです。 ボタンを押すと、CSSフィルター、明るさ・コントラスト・彩度、Canvasのビネットが用途に合う組み合わせへ切り替わります。 現在の設定に追加するのではなく、プリセットの内容へ置き換わるため、微調整を続ける場合は選択後に行います。

プリセットを選ぶと設定がまとまり、Before / Afterで仕上がりを比較できます。赤枠はプリセット選択部分です。クリックで拡大

写真向け

Vintage
セピア30・コントラスト+10・彩度-20・ビネット30。色あせた温かい写真風。
Film
明るさ+5・コントラスト-5・彩度-10・ビネット20。落ち着いたフィルム風。
Warm
セピア20・明るさ+5・彩度+20。人物や食べ物を暖かく見せたいとき。
Cool
色相回転180・明るさ-5・彩度-20。風景や夜景を涼しげに。
Soft
ぼかし1px・明るさ+5・コントラスト-10。ポートレートを柔らかく。

SNS向け

Retro
セピア40と色相回転350・コントラスト+20・彩度+10・ビネット25。濃いめのレトロ風。
Cinematic
コントラスト+20・彩度-15・明るさ-5・ビネット40。映画のような落ち着いたトーン。
Dramatic
コントラスト+40・彩度+10・明るさ-10・ビネット30。強いコントラストで印象的に。

プリセットを起点にするコツ

用途に近いプリセットを選び、Before / Afterの差が大きすぎないように強度や色調を調整します。選択前の状態へ戻す場合は、Undoボタンを使うか、各セクションのリセットを確認してください。

2. 組み合わせの違いを確認する

CSSフィルターは順序と強度で変わる

「＋ フィルターを追加」から行を増やし、各行のスライダーで強度を調整します。フィルターは上から順に適用されるため、同じ種類の組み合わせでも並び順が違うと仕上がりが変わります。 ▲▼で順序を入れ替え、Before / Afterで結果を確認してください。

行追加できる6種類

モノクロ 0〜100%セピア 0〜100%ぼかし 0〜20pxネガ 0〜100%色相回転 0〜360°不透明度 0〜100%

試す順番の目安

  1. 1. まずプリセットか1種類のCSSフィルターで方向性を決める
  2. 2. 2つ目以降は弱い強度から追加する
  3. 3. 並び替えたらBefore / Afterをもう一度確認する

明るさ・コントラスト・彩度を設定した場合は、フィルター行の処理に続いてCSSの補正として適用されます。値は-100〜+100で、0が初期値です。

3. プレビューと実行結果の違い

色調補正とCanvas補正を分けて考える

明るさ・コントラスト・彩度はCSS filterとしてプレビューに反映されます。一方、ビネット、シャープネス、モザイク、ホワイトバランスはCanvasでピクセルを再描画するため、設定してもプレビューには変化が出ず、実行後の出力画像で反映されます。

Before / AfterでCSSフィルターの仕上がりを確認しつつ、Canvas処理は実行後の画像で確認します。赤枠はプレビュー部分です。クリックで拡大

プレビューで確認できる

モノクロ、セピア、ぼかし、色反転、色相回転、不透明度、明るさ、コントラスト、彩度。

実行後に確認する

ビネット、シャープネス、モザイク、ホワイトバランス。個人情報を隠す目的のモザイクは、出力結果で隠れ方を必ず確認します。

4. 保存時の設定

出力形式・画質・ZIPを目的で選ぶ

出力設定では元形式維持、JPEG、PNG、WebP、AVIFから選べます。画質スライダーはJPEG・WebP・AVIFで使い、PNGでは圧縮品質の指定を行いません。容量を抑えたい場合はWebPまたはAVIFを試し、利用先が対応しているかを確認してください。

形式を選び、画質を調整してから実行します。赤枠は出力設定から実行までの範囲です。クリックで拡大

形式ごとの注意

  • 元形式維持：PNG・WebP・AVIFは同形式、JPEG・GIF・BMPはJPEGとして書き出します。
  • AVIF：ブラウザがエンコードに対応しない場合はWebPへフォールバックします。
  • GIF：入力は静止画として処理され、アニメーションは保持されません。
  • EXIF：Canvas再描画を経由するため、元画像のEXIF・メタデータは自動削除されます。

複数ファイルの受け取り

  • 結果一覧からファイルを個別に保存できます。
  • 複数画像はZIPにまとめてダウンロードできます。
  • 同名ファイルは連番付きの名前で重複を避けます。
  • AVIFの実出力がWebPへ変わった場合は、結果表示の形式を確認します。
処理完了後は、個別ダウンロードまたはZIPにまとめたダウンロードを選べます。赤枠は結果パネルです。クリックで拡大

5. 失敗を防ぐ確認

実行前後に確認する5項目

✓ 1ファイル10MB以内、合計20件以内に収まっている
✓ プリセット選択で既存の設定が置き換わったことを理解している
✓ Before / Afterで、色味・ぼかし・不透明度を確認している
✓ Canvas補正は実行後の結果画像で確認している
✓ 保存先の対応形式と、出力された実際の形式を確認している

うまくいかないとき

  • 画像が読み込めない場合は、対応形式か、ファイル容量、ブラウザのAVIF対応を確認します。
  • 処理に失敗した画像がある場合は、結果一覧のエラー表示を確認し、1枚ずつ試して原因を切り分けます。
  • プレビューと出力が違う場合は、Canvas補正が設定されていないかを確認してから、処理結果を見直します。

6. よくある疑問

設定を決めるときのFAQ

プリセットと個別フィルターはどちらを先に選ぶ？

まずプリセットで方向性を決め、その後に個別フィルターや色調補正を微調整する流れが分かりやすいです。プリセットを後から選ぶと設定一式が置き換わるため、順番に注意します。

Canvas補正がプレビューに表示されないのは不具合？

仕様です。シャープネス、モザイク、ホワイトバランス、ビネットは実行時のCanvas処理で適用されます。実行後の結果画像を開いて確認してください。

画質を下げれば必ず軽くなる？

JPEG・WebP・AVIFでは一般に容量削減につながりますが、画像内容や形式によって変わります。PNGでは画質スライダーを使わないため、形式を変える場合は出力後の容量を確認します。

関連する操作ガイド

画像フィルターの基本操作ファイル選択・追加の共通操作画像出力設定の共通ガイド画像圧縮も確認する

設定を比較しながら画像を加工する

画像はブラウザ内で処理され、サーバーへ送信されません。まずは基本操作ガイドで画像を追加して試せます。

画像フィルター一括適用を開く