🔆
image brightness,
画像の明るさ・コントラスト調整ツール
スライダーでリアルタイム調整。
⚡
リアルタイムプレビュー
スライダーで即反映
🎨
4種の調整項目
明るさ・コントラスト・彩度・色温度
🔒
サーバー送信なし
ブラウザ完結で安全
画像を選択してください
🔒
画像はサーバーに送信されません。すべてブラウザ内で処理されます。
about,
概要
画像の明るさ・コントラスト・彩度・色温度をスライダーでリアルタイムに調整できる無料ツール。暗い写真の露出補正や、SNS投稿前の色味調整に最適。サーバーへの送信は一切なく安全。
Canvas APIとImageDataのピクセル操作により、すべての処理をブラウザ内で完結します。元画像データを保持する非破壊編集方式なので、いつでもリセット可能です。
how to,
使い方
STEP 1
画像を選択
調整したい画像を選択します
STEP 2
スライダーで調整
明るさ・コントラスト・彩度・色温度を自由に調整。変更は即座にプレビューに反映されます
STEP 3
画像を保存
PNG/JPEG形式を選んで保存ボタンを押すだけ
glossary,
用語集
- 明るさ (Brightness)
- 画像全体の明暗を調整するパラメータです。プラス方向で画像全体が明るくなり（白飛びに注意）、マイナス方向で暗くなります。各ピクセルのRGB値に一定値を加算・減算することで実現します。撮影時の露出不足を後から補正する際によく使われます。
- コントラスト (Contrast)
- 明部と暗部の差を強調または緩和する調整です。プラス方向で明るい部分はより明るく・暗い部分はより暗くなり、メリハリが増します。マイナスにすると全体がフラットな印象になります。商品写真の見栄えをよくする際によく使われます。
- 彩度 (Saturation)
- 色の鮮やかさを表すパラメータです。0で白黒（グレースケール）になり、プラス方向で色が鮮やかになります。Luma（輝度）加重平均を用いた計算式（R×0.2126 + G×0.7152 + B×0.0722）で人間の視覚に自然な彩度変化を実現しています。
- 色温度 (Color Temperature)
- 暖色（オレンジ・赤系）⇔寒色（青系）の色調バランスを調整します。プラスで暖色系になり夕暮れや室内照明のような温かみが出ます。マイナスで寒色系になり青空や冷たい印象になります。R値とB値を逆方向にオフセットすることで実現しています。
- 露出補正
- 撮影時の明るさ不足・過多を後から調整することです。本ツールでは明るさスライダーとコントラストスライダーを組み合わせることで、カメラの露出補正に近い効果を得られます。逆光で暗く撮れた写真の修正に特に有効です。
- ImageData
- Canvas上のピクセルデータにアクセスするWeb APIです。各ピクセルはRGBAの4バイトで表現され、Uint8ClampedArray（0〜255に自動クランプされる配列）として取得できます。本ツールはこのAPIで全ピクセルのRGB値を数値変換して画像補正を行います。
- ピクセル操作
- 画像の各ピクセルのRGB値を数値的に変換する処理です。明るさ・コントラスト・彩度・色温度の計算はすべてこの方式で実装されています。CSSフィルターよりも柔軟で、色温度のような独自アルゴリズムも実装できます。
- Luma（輝度）
- 人間の視覚特性に基づいた明るさの加重平均値です。緑の感度が最も高く（72%）、次に赤（21%）、青（7%）の順です。彩度計算の際にこの値をグレーのベースとして使うことで、自然な見た目の彩度変化を実現しています。
- クランプ
- 値を0〜255の範囲に収める処理です。Uint8ClampedArrayは代入時に自動的にクランプするため、中間計算でこの範囲を超えても最終的な出力は適切な値になります。これにより白飛び・黒つぶれが均一に処理されます。
- 非破壊編集
- 元画像データを保持し、いつでもリセットできる編集方式です。本ツールはオリジナルのImageDataを別途保存し、調整のたびにそこからコピーして処理します。これにより何度パラメータを変更しても画質が劣化しません。
faq,
FAQ
- Q.どんな調整ができますか？
- 明るさ・コントラスト・彩度・色温度の4項目をスライダーで調整できます。それぞれ-100〜+100の範囲でリアルタイムにプレビューに反映されます。
- Q.元に戻せますか？
- リセットボタンを押すと全スライダーが初期値（0）に戻ります。また元画像データは保持されているため、何度でもやり直せます。
- Q.画像がサーバーに送信されますか？
- 一切ありません。Canvas APIを使ってブラウザ内だけで処理しており、画像データが外部に出ることはありません。プライベートな写真も安全に使えます。
- Q.対応している画像形式は？
- JPEG、PNG、WebP、GIF、BMPなど、ブラウザが対応する主要な形式に対応しています。
- Q.保存画像の解像度は下がりますか？
- 元画像と同じ解像度を維持します。大きな画像でも高解像度のまま保存できます。
- Q.スマートフォンで使えますか？
- はい。レスポンシブ対応でタッチ操作でスライダーを動かせます。iOSのSafariやAndroid Chromeでも動作します。
- Q.大きな画像でも処理できますか？
- Canvas APIの上限まで対応しています。大きな画像ではrequestAnimationFrameでデバウンスしてプレビューをスムーズにしています。
- Q.白黒にできますか？
- 彩度スライダーを-100にすると完全な白黒（グレースケール）になります。
- Q.写真を暖かい色味にするには？
- 色温度スライダーを+方向（右）に動かすとR成分が増えB成分が減り、暖色系（オレンジ・暖色）の色調になります。
- Q.複数のパラメータを同時に調整できますか？
- はい、全スライダーを自由に組み合わせて調整できます。すべての値が同時に適用されてプレビューに反映されます。
use cases,
活用シーン
📸
暗い写真の補正
逆光や室内で暗くなった写真の明るさを上げて鮮明に
📱
SNS投稿前の色味調整
Instagram/Xに投稿する前に彩度と色温度で雰囲気を演出
🛍️
商品写真の最適化
EC出品用の商品画像をコントラスト調整で見栄え良く
🎨
レトロ・フィルム風加工
彩度を下げ色温度を暖色にしてヴィンテージ風に
フィードバックを送信
ツールをより良くするためのご意見をお聞かせください。
フィードバックを送信しました。ご協力ありがとうございます！
エラーが発生しました。しばらく経ってから再度お試しください。
現在、フィードバックの受付を一時停止しています
サーバーが混み合っているか、スパム防止のための安全装置が作動しています。しばらく経ってから再度アクセスしてください。