画像の明るさ調整｜コントラスト・鮮やかさをスライダーで補正
暗く写った写真、白っぽい商品撮影、読みづらいスキャン書類を、ブラウザだけで補正できる無料ツール。明るさ・コントラスト・鮮やかさをスライダーで動かすとプレビューにすぐ反映されます。画像はあなたの端末から外に出ません。
仕様の根拠（2026年6月時点）
- HTML Living Standard 4.12.5.1.20 Filters：Canvas 2D の
ctx.filterは CSS <filter-value-list> を受け付ける（whatwg） - MDN CSS filter：brightness() / contrast() / saturate() は線形乗数で 0%＝消失、100%＝変化なし、100%超＝強調（developer.mozilla.org/ja）
- MDN CanvasRenderingContext2D.filter：CSS の filter と同じ値を受け付け、Canvas 上の描画に適用される（developer.mozilla.org/ja）
最終更新：2026年6月16日
このツールでできること
- 明るさ（brightness）20〜200%：暗い写真の救出から、ほどよい明るさのトリミングまで
- コントラスト（contrast）20〜200%：白っぽい写真にメリハリ、灰色がかった書類の文字を強調
- 鮮やかさ（saturate）0〜200%：完全グレースケール（0%）から色味強調まで、3つのスライダーが独立して効く
- JPG／PNG／WebP の読み込み、PNG／JPG の保存。元解像度のまま書き出し
- ドラッグ&ドロップ・クリック選択どちらも可。プレビューは画面幅に自動フィット
- 「元に戻す」ボタンで全スライダーを100%にリセット。元のファイルは上書きしない
使い方（3ステップ）
- 画像を選ぶ（クリック）または点線枠にドラッグして読み込み
- 明るさ・コントラスト・鮮やかさのスライダーを動かして仕上がりを決める
- 「PNGで保存」または「JPGで保存」をクリックしてダウンロード
スライダーの具体的な目安
| 状態 | 明るさ | コントラスト | 鮮やかさ |
|---|---|---|---|
| 暗い室内・夜景 | 130〜150% | 110〜120% | 100〜110% |
| 白飛び（露出オーバー） | 80〜90% | 110〜120% | 110〜120% |
| 霞んだ風景 | 100% | 130〜150% | 110〜120% |
| スキャン書類 | 95〜105% | 130〜160% | 0〜30% |
| SNS投稿（華やか） | 105〜115% | 110% | 120〜140% |
| 印刷用（紙映え） | 110〜120% | 110% | 100% |
数値はあくまで出発点です。写真によって反応が変わるので、まず明るさを動かして、足りない部分をコントラスト→鮮やかさの順で調整するのが失敗しにくいコツです。
こんな場面で使えます
- 逆光・夜景・室内など、暗く写ってしまった写真の明るさ救出
- フリマアプリ・メルカリ・ハンドメイドサイトの商品写真の発色補正
- 料理写真をシズル感のあるトーンに調整してSNS投稿
- 古い紙資料・領収書・名刺をスキャンしたあと、文字を読みやすくする
- 印刷物の入稿前に「画面で見て明るすぎ」な状態に整えて、紙映えさせる
- ブログ・noteのアイキャッチ画像を、明暗を揃えて統一感を出す
日本の利用シーンに合わせた使い方
- メルカリ・ラクマの商品写真は白飛び補正と彩度上げで、実物に近い色味に
- 食べログ・Instagramの飲食店投稿は、室内照明の黄色被りを明るさ＋コントラストで補正
- 確定申告の領収書スキャンは、コントラスト上げ＋鮮やか下げで文字をくっきり
- マンション・賃貸物件の内見写真は、暗く写りがちな水回りを明るさ130%で救出
- 七五三・卒業式の屋外写真は、コントラストを下げて柔らかい雰囲気に
- 同人誌の入稿前グレースケール化は、鮮やかさ0%で簡易モノクロ化
使う前に知っておきたい注意点
- 白飛び・黒つぶれした部分は、明るさ調整で元の階調が戻ることはありません（失われた情報は復元できない）
- JPG保存は再エンコードが入るため、繰り返し保存すると劣化します。何度も補正するなら PNG で残しておくのが安全
- Exif情報（撮影日時・GPS・カメラ機種）は出力時に失われます。SNS投稿時にプライバシー保護にもなりますが、思い出として残したい場合は元ファイルを別途保管してください
- 商品撮影の色合わせは sRGB ベースで行っていますが、Adobe RGB や P3 の広色域モニタとは見え方が変わります。印刷用は別途プロファイル変換が必要です
- このツールは画像を一切送信しませんが、人物・他者の著作物が写った画像を加工して公開する際は別途、肖像権・著作権の確認をしてください
よくある質問
- Q. アップロードした画像はサーバーに送られますか？
- A. 送信されません。Canvas と JavaScript で完結しており、画像が端末から外に出ることはありません。タブを閉じれば結果はメモリから消えます。
- Q. 対応している画像形式は？
- A. JPG・PNG・WebP の読み込みに対応。出力は PNG（劣化なし）と JPG(容量小)が選べます。
- Q. 明るさを200%にしたら白飛びしました。
- A. brightness() は線形乗数で200%は元の明るさの2倍になります。160%を超えると階調が失われやすいので、120〜140%が現実的な上限です。
- Q. コントラストと鮮やかさの違いは？
- A. コントラストは明暗の差、鮮やかさ（彩度）は色味の濃さです。両方を上げすぎると不自然になりやすいので、片方ずつ調整するのが失敗しにくいです。
- Q. RAWファイルは扱えますか？
- A. 扱えません。ブラウザがデコードできる JPG/PNG/WebP のみ対応です。RAW は Lightroom や Darktable などの現像ソフトが必要です。
- Q. 印刷用の明るさの目安は？
- A. 画面はバックライトで明るく見えるため、紙に出すと暗く沈みがちです。明るさ110〜120%で「画面でやや明るすぎ」が紙映えの目安です。
- Q. スキャン書類の文字を読みやすくしたい。
- A. 明るさ100%付近、コントラスト130〜160%、鮮やかさ0〜30%。紙の黄ばみが取れて文字がくっきりします。
- Q. 元の色味に戻したい。
- A. 「元に戻す」ボタンで全スライダーを100%にリセット。保存しなければ元の画像ファイルは無傷です。
- Q. Exif情報は保存されますか？
- A. 保存されません。Canvas に書き出した時点で失われます。SNS公開時はプライバシー保護にもなりますが、撮影日時を残したい場合は元ファイルを別保管してください。