画像フィルター
クリックまたはドラッグしてアップロード
JPG / PNG / WEBP / GIF
画像をアップロードしてここでプレビュー
オンラインで8種類のプロフェッショナルなフィルターを写真に適用:白黒、セピア、反転、ぼかし、明度、コントラスト、彩度、色相回転。すべて0-200%の強度調整とリアルタイムプレビューに対応。見たままをエクスポートできます。
関連おすすめ
画像フィルターとは?
画像フィルターは、数学的変換によってピクセル値を新しいピクセル値にマッピングする一連の手法です。Web とモバイルで最も一般的な標準は CSS filter プロパティ(blur / brightness / contrast / grayscale / sepia / saturate / hue-rotate / invert)。本ツールは Canvas の同じ API 群を基盤に構築されており、ワンクリックでフィルターを重ね合わせできます。
**画像編集ソフトとの違い:** プロ向け画像編集ソフト(Photoshop / Lightroom)は局所ブラシ、レイヤー、マスクをサポートします。本ツールは画像全体の色補正とバッチフィルター適用に特化しています。軽量で高速、局所的な精密編集が不要なシーンに最適です。
**白黒 vs セピア:** 白黒は知覚輝度(ITU-R BT.601 重み付け)で RGB を統一し、すべての色を除去します。セピアはグレースケールベースに褐色のティントを重ね、より強いノスタルジック感を生み出します。
**なぜこれほど多くの効果を重ねても歪まないのか?** フィルターはピクセル単位の数学処理で、ピクセル構造を変更しません。0-200% の範囲内ならどんな組み合わせでも画像は保たれますが、効果はドラマチックになり得ます。小刻みにテストしてください。
ユースケース
- 露出不足や色平淡な写真を明度・コントラスト・彩度で素早く補正
- ビンテージ・白黒・反転などのスタイルをSNS画像に加えて個性的に演出
- ECサイトのメイン画像や詳細ページ素材のトーンを統一したり素早く美しく
- 証明写真やアバターの彩度・色相を調整して背景色を変更
- デザインスケッチやUIスクリーンショットに反転効果を適用し視覚テスト
- ぼかしフィルターでスクリーンショット内の個人情報(電話番号、住所)をマスク
使い方
- フィルターを追加したい画像ファイル(JPG / PNG / WEBP / GIF)をアップロード
- サムネイルグリッドから8種の基本フィルター(白黒 / セピア / 反転 / ぼかし / 明度 / コントラスト / 彩度 / 色相回転)を選択
- 強度スライダーをドラッグして微調整(0% オフ、100% 標準、200% 最大)、リアルタイムでプレビュー確認
- 他のフィルターに切り替え強度を調整して重ね合わせ、理想的な色味を構成
- ダウンロードをクリックしてPNGとしてエクスポート、ファイル名には自動的に _filtered 接尾辞が付与
特徴
- 8種類の内蔵エフェクト:白黒、セピア、反転、ぼかし、明度、コントラスト、彩度、色相回転
- 0-200%の強度調整:各フィルターに独立スライダー、100%が標準、200%が最大
- リアルタイムプレビュー:切替と調整が即時反映、繰り返しの書き出し不要
- 全フォーマット対応:JPG / PNG / WEBP / GIF など主要な画像形式をサポート
- ワンクリックリセット:全フィルターをクリアしてオリジナルに復元、複数スタイルを試行可能
- ローカル処理:すべてのフィルターはブラウザの Canvas 内で実行、ファイルは端末から出ません
Best Practices
補正順:露出→色→スタイル の順で行う
推奨ワークフロー:まず明度とコントラストで露出を補正、次に彩度で色を修正、最後に白黒・セピア・色相回転などのスタイルフィルターを追加。これは Photoshop の色補正ロジックに沿っており、最初に強いスタイルフィルターを当てて露出問題を覆い隠してしまうのを防ぎます。
強度スライダーは50%から始め、いきなり200%にしない
多くのフィルターは50-150%の範囲で最良の効果を発揮します。いきなり200%にすると彩度のクリップ、色相の歪み、過度のぼかしが発生しやすいです。まず100%で評価し、±20%の刻みで微調整してください。
彩度は100-150%に保ち色クリップを防ぐ
彩度150%超で赤や黄が境界から漏れ出しディテールを失います。200%超では回復不能な色ブロックが発生することも。0-200%はクリエイティブ効果用に設計された範囲で、日常の補正には80-130%が最適です。
白黒+適度コントラスト = クラシックなドキュメンタリー風
純粋な白黒は平板に見えることがあります。白黒100% + コントラスト110-130% + 小さな明度調整(元画像の露出による)の組み合わせをお試しください。フィルム時代のドキュメンタリー作風を再現し、初期 Instagram で最も愛された白黒レシピです。
セピアは古い写真・ノスタルジー向き、現代の商品写真には不向き
セピアの褐色は色調を大きく変えるため、ノスタルジー、ドキュメンタリー作品、動画のサムネイルに合います。ECサイトのメイン画像、UIスクリーンショット、科技製品の写真に使うと、商品が時代遅れでプロフェッショナルに見え、商品のリアル感を損ないます。
ぼかし強度は30を超えると明確なボケ味が出る
ぼかしスライダー 0-200% は 0-20px のぼかし半径に対応します。強度30(3px)でわずかな柔らかさ。強度50(5px)は背景ボケのシミュレーション向き。強度100(10px)以上は個人情報のマスクや人物主題の分離に適します。
色相回転 0/360/720 は元の色に戻る
色相は循環する色空間です。0-200% の強度は 0°-360° の回転に相当します。強度100は180°(補色)、200で元に戻ります。クリエイティブ補正は10-30の範囲にとどめ、50を超えると物体本来の色が大きく変わります。
色補正後に画像圧縮をかけるとファイルサイズを削減できる
本ツールは可逆 PNG で書き出すため、ファイルが大きくなりがちです。Web ページ、メール添付、SNS アップロード用途には、画像圧縮ツールを後続で実行してください。PNG を JPG に変換することで、視覚的劣化なしに50-80%削減できることが一般的です。
よくある質問
どの画像フィルターがありますか?白黒やビンテージは作れますか?
8種類のプロフェッショナルフィルターを内蔵:白黒、セピア、反転、ぼかし、明度、コントラスト、彩度、色相回転。クリック一つでビンテージ風、芸術的な白黒写真、夢のようなぼかし効果を作成できます。すべてのフィルターは0-200%の強度をサポート。1%でも微妙な変化が見え、100%が標準、200%が最大です。
フィルターの効果を強くしたり弱くしたりできますか?
はい。各フィルターに独立した強度スライダーがあります。0%でオフ、100%が標準、200%が最大です。例えば、彩度50%は微妙に鮮やかになる程度、150%で一気にフィルム感が出ます。色相回転50は90°回転に相当し、200で元の色に戻ります。
写真が暗すぎる、色が薄い、このツールで修正できますか?
まさに最適なツールです。明度スライダーは露出不足の曇天写真を救い、コントラストは平淡な画像に深みを与え、彩度は色褪せた古い写真を修復します。色相回転と組み合わせれば、暖色と寒色の切替、夕暮れ時の雰囲気あるブルー、ネオンサイバースタイルなども作成できます。
複数のフィルターを重ねて使えますか?
はい。複数のフィルターを同じ画像に適用できます。例えば「軽いセピア+明度+高コントラスト+高彩度」を組み合わせてブランドの統一色味を素早く見つけられます。フィルターはピクセル単位の数学的処理なので重ね合わせても画像構造を壊しませんが、効果はドラマチックになり得ます。小刻みに調整してください。
対応している画像形式は?処理結果はどう保存しますか?
JPG、PNG、WEBP、GIFに完全対応しています。処理中はリアルタイムでプレビュー表示。満足したらダウンロードをクリックしてPNG(可逆、ファイルサイズ大)で書き出せます。小さなJPGが必要な場合は、本ツールで色調整後に画像圧縮ツールで再処理してください。
オンラインで画像フィルターを使うのは安全ですか?写真が漏えいしませんか?
完全に安全です。すべての画像処理はブラウザ内の Canvas filter API でローカルに実行されます。サーバーへのアップロードは一切なく、ソフトのインストールも不要です。家族の写真、契約書のスキャン、証明写真などのプライバシー性の高い画像も安心して処理でき、ブラウザを閉じればメモリが即座に解放されます。
色補正はファイルサイズに影響しますか?
少し影響します。明るくする、コントラストを上げる、彩度を強める操作はファイルをやや大きくします。暗くする、白黒やセピアは高周波ディテールを削除するためファイルサイズがやや縮小することがあります。さらに小さくしたい場合は、色補正の後に画像圧縮ツールを実行してください。まず補正、後から圧縮が標準的なワークフローです。
白黒フィルターとセピアの違いは何ですか?
白黒は RGB を輝度で統一する(ITU-R BT.601 重み付け:Y = 0.299R + 0.587G + 0.114B)処理で、完全に色を除去します。セピアはグレースケールベースに褐色のティントを重ね、19世紀写真の化学的調色を模倣するため、ノスタルジックな雰囲気が強くなります。
用語集
- CSS filter
- CSS プロパティで、ブラウザがネイティブサポートする画像フィルター群:blur / brightness / contrast / drop-shadow / grayscale / hue-rotate / invert / opacity / saturate / sepia。本ツールは Canvas filter API で同等のセットを実装しています。MDN - CSS filter
- セピア調
- 19世紀写真の化学的調色を模した、古典的なビンテージ色調。RGB 行列:R = 0.393R + 0.769G + 0.189B;G = 0.349R + 0.686G + 0.168B;B = 0.272R + 0.534G + 0.131B。
- 色相回転 (Hue Rotate)
- HSL 色空間で H(色相)チャネルを循環的に回転させる処理。360° 回転で元に戻る。本ツールの 0-200% 強度は 0°-360° 回転に対応します。
- BT.601 重み付け
- ITU-R BT.601 標準の輝度計算式:Y = 0.299R + 0.587G + 0.114B。白黒フィルターやテレビ信号はこの重み付けを使い、単純平均より人間の目の緑に対する高い感度を反映します。
- 露出
- 写真が受け取る光の総量。露出不足 = 暗すぎる;露出過剰 = 明るすぎる。明度フィルターで補正可能ですが、失われたハイライトのディテールは復元できません。
- 彩度
- 色の鮮やかさ。0% = 完全グレースケール;100% = 元の色;>100% = 強化。彩度が高すぎると色クリップやディテール損失が発生します。
8種内蔵フィルター一覧
| フィルター | アルゴリズム / 実装 | 典型的な場面 |
|---|---|---|
| 白黒 (Grayscale) | R=G=B=0.299R+0.587G+0.114B | ドキュメンタリー、アート、ビンテージテーマ |
| セピア (Sepia) | クラシックな Sepia Tone 行列 | ノスタルジー、古い写真風、動画サムネイル |
| 反転 (Invert) | 255から元値を RGB チャネル別に減算 | X線写真、アートポスター、ダーク UI |
| ぼかし (Blur) | Canvas filter: blur(radius) | 背景ボケ、被写体フォーカス、プライバシーマスク |
| 明度 (Brightness) | RGB へのオフセット加算 | 露出不足/過多の補正、曇天時の明るさ補正 |
| コントラスト (Contrast) | (RGB-128) × factor + 128 | 平板写真に深みを、HDR 風スタイル |
| 彩度 (Saturate) | HSL の S チャネルをスケール | 鮮やかさ調整、色褪せ修復、ブランドカラー統一 |
| 色相回転 (Hue Rotate) | HSL の H チャネルを回転 | クリエイティブシフト、色変更、視覚テスト |
強度スライダー 0-200% 効果対応表
| 強度 | 視覚効果 | 推奨用途 |
|---|---|---|
0% | 完全オフ、元画像と同等 | リセット、A/Bテスト |
1-30% | 非常に微妙、ほぼ見えない | 微調整、注意深く見る必要あり |
30-70% | 軽い効果 | 日常の写真色補正 |
100% | 標準強度 | 多くの場面でのデフォルト |
130-170% | 強化された効果 | スタイリング作品、ブランドカラー統一 |
200% | 最大効果 | 芸術的、抽象的な処理 |
Authoritative References
- ReferenceCSS filter - MDN
- ReferenceWikipedia - セピア (色)
- ReferenceWikipedia - カラー写真