グレースケール変換ツール｜画像を送らずブラウザだけで白黒化

グレースケール変換とは、画像から色みを取り除き、白から黒までの濃淡だけで表す処理です。CodeQuest.workの「グレースケール変換ツール」は、この処理をブラウザの中だけで実行し、画像をどこにも送信せずに白黒の画像を作ります。会員登録もインストールも必要ありません。

この記事は「ボタンの位置を説明する使い方ガイド」ではありません。変換して保存したあとに、その画像が自分の用途に足りているかを、読者が自分の手元で判定できるところまでを扱います。判定するのは次の2点です。ひとつは「保存されたファイルが、使う場所の条件を満たしているか」。もうひとつは「本当に画像が外に出ていないか」です。

掲載しているツールの挙動と数値は、すべて2026年8月2日にツール本体を実際に操作して計測した結果です。計測環境はChrome（HeadlessChrome 151／macOS）で、自動操作によって画像の読み込み・保存・通信の記録まで通しで確認しています。仕様の根拠となる一次資料も、同じ日に取得したものを本文中に示します。

グレースケール変換とは、画像から色みを取り除く処理のこと

カラー写真をそのまま白黒にしたものが、グレースケールの画像です。写真をモノクロの素材に作り替えたいとき、資料に載せる図版の色を落としたいとき、印刷でカラーが使えないときなどに使います。

この作業自体は画像編集ソフトでもできますが、ソフトを立ち上げるほどでもない一枚を白黒にしたいときに、ブラウザで開いてその場で終わらせられるのがオンラインツールの利点です。ツール本体はWeb制作の無料ツール16選にまとめている無料ツール群のひとつで、いずれも登録なしで使えます。

このツールの仕様（実際に操作して確認した内容）

先に、できることとできないことを一覧にします。あとの章で扱う判定は、すべてこの表が土台になります。

この表で最初に押さえてほしいのは「保存される形式はPNGだけで、選べない」という一行です。ここが後の判定すべてに効いてきます。ページ上のスライダーは1本だけで、種類を選ぶ選択肢は用意されていません（実測でスライダー1個・選択肢0個）。

「グレースケール」はファイル形式の名前ではない

用語として押さえておくと混乱が減ります。グレースケールは色の表し方の呼び名であって、JPEGやPNGのようなファイル形式の名前ではありません。「グレースケールで保存する」と言ったときの保存形式は、別途PNGなのかJPEGなのかが決まります。

このツールで保存されるファイルはPNG形式で、しかも透過の情報を持ったままの状態です。「グレースケール専用の軽いデータ形式」に変換されるわけではありません。見た目は白黒でも、データとしてはカラー画像と同じ持ち方をしています。この点は次の判定の章で、実際のファイルサイズとして表に出てきます。

ブラウザだけで画像をグレーにする3ステップ

操作は3手で終わります。実際に画像を投入して最後の保存まで通したうえで書いています。

ステップ1｜画像を読み込む

ツールのページを開き、画像をドラッグ＆ドロップするか、ファイル選択から画像を指定します。読み込みが終わると、その場で白黒になった画像が表示されます。「変換」ボタンを押す必要はありません。読み込み直後に、いちばん強い状態（100）で変換された画像が出ます。

スマートフォンやタブレットではドラッグ＆ドロップの操作ができないため、ファイル選択から読み込みます。写真アプリから直接選べます。

ステップ2｜スライダーで白黒の強さを決める

画像の下にあるスライダーで、白黒にする強さを0〜100の間で決められます。実測した挙動は次のとおりです。

• 0：読み込んだままの元画像が表示されます。白黒になりません。
• 100（初期値）：完全な白黒になります。読み込んだ直後はこの状態です。
• 途中の値：元画像と完全な白黒を混ぜた、色が薄く残った状態になります。

つまりこのスライダーは「どのくらい色を残すか」を決めるつまみです。完全な白黒が欲しいならスライダーには触らなくて構いません。薄く色を残したモノクロ調の素材を作りたいときにだけ動かします。50前後にすると、元の色がうっすら残った落ち着いた見え方になります。

ステップ3｜ダウンロードする

ダウンロードボタンを押すと、表示されている状態のままPNGファイルとして保存されます。保存されるファイル名は毎回同じ固定の名前です。連続で保存すると、ブラウザの働きで末尾に連番が付いた別ファイルになります。同じフォルダに何枚も保存すると、どれがどの画像か分からなくなるので、保存のたびに名前を付け替えるのが安全です。

ここまでが操作のすべてです。そして、この3手のあいだ画像は一度も外部に送られていません。読み込みも変換も保存も、開いているブラウザの中だけで完結しています。実際に通信の記録を取ったところ、画像を読み込んだ直後も、保存した直後も、新しい通信は1件も発生しませんでした（2026年8月2日実測）。この点は後半の判定の章で、読者が自分で確かめられる手順として扱います。

判定1｜保存した画像が用途に足りているかを確かめる

白黒になった画像が画面に出た時点で満足して終わってしまうと、あとで貼り付ける段階になって困ることがあります。保存されたファイルは、画面で見えていたものと同じではありません。形式が変わっていますし、写真ではサイズが大きく変わります。使う前に、保存先のフォルダで3つだけ確認してください。

手順｜保存先で3つの項目を見る

1. ツールで画像を変換し、ダウンロードする。
2. 保存先のフォルダを開き、そのファイルの情報を表示する（Windowsは右クリックからプロパティ、macOSは右クリックから情報を見る）。
3. 拡張子・ファイルサイズ・画像の縦横の3つを、次の表と照らし合わせる。

合否ライン｜この3つが揃っていれば、そのまま使ってよい

3つとも当てはまっていれば、その画像はそのまま使って問題ありません。外れた場合の対処は、それぞれ次のとおりです。

• JPEGやWebPで欲しかった場合：このツールでは形式を選べません。保存したPNGを、形式変換のできる別のツールに通します。
• ファイルサイズが大きすぎる場合：写真ではこれが起きるのが普通です。理由と対処は次の項で扱います。
• 縦横が入れ替わっていた場合：スマートフォンで撮った写真に多い現象です。撮影時の向きの情報が画像そのものに焼き込まれるために起こります。

実測｜写真を変換するとファイルは大きくなる

「色を減らすのだからファイルは軽くなるはず」と考えたくなりますが、このツールでは逆になります。1600×1200ピクセルの写真（JPEG）を投入し、保存されたファイルのバイト数を実際に測った結果です。

正確な数値は246,959バイトから1,582,446バイトで、約6.4倍になりました（2026年8月2日実測）。画素数は変わっていないのにファイルだけが膨らんでいます。

理由は保存形式にあります。ブラウザ上の描画領域を画像ファイルとして書き出す機能は、形式を指定しなければPNGになると仕様で決まっています。そしてPNGは元のデータを一切捨てない可逆圧縮の形式です。写真のように細かい濃淡が連続する画像では、データを間引いて小さくするJPEGのほうが小さく収まります。白黒にしたことより、JPEGからPNGに変わったことのほうが効いている、というのが実態です。

出典：WHATWG HTML Standard（canvas要素）（2026年8月2日取得。書き出し関数の第1引数の既定値が image/png と定義されている）。W3C PNG仕様 第3版（W3C勧告 2025年6月24日／2026年8月2日取得。冒頭でPNGを可逆・高圧縮の形式と定義）。

したがって「Webページに載せる画像を軽くしたい」という目的でこのツールを使うと、目的と逆の結果になります。白黒にしたうえで軽くしたいなら、変換したあとにもう一段、圧縮の工程を挟んでください。ブラウザだけで圧縮とWebP変換までできる画像圧縮・WebP変換ツールに通せば、この記事の作業から1手で済みます。掲載先の容量制限に引っかかっている場合は、この一手までで解決するはずです。

判定2｜画像が外に出ていないことを自分で確かめる

オンラインの画像ツールには、ブラウザの中だけで処理するものと、画像をいったんサーバーへ送って処理するものの2種類があります。見た目の操作は同じなので、画面を見ているだけでは区別がつきません。社外に出せない資料の画像や、人が写っている写真を扱うなら、ここは確認しておくべき点です。

そして、この確認は専門知識なしで、数十秒でできます。通信を切った状態で最後まで動くかどうかを見るだけです。

手順｜通信を切ってから変換してみる

1. ツールのページを開き、表示が終わるまで待つ。
2. そのまま通信を切る（スマートフォンなら機内モード、パソコンならWi-Fiを切るか、ブラウザの検証ツールのネットワーク欄でオフラインに切り替える）。
3. 通信を切ったまま、画像を読み込む。
4. スライダーを動かし、ダウンロードまで実行する。

合否ライン｜オフラインのまま保存できれば、外には出ていない

理屈は単純です。画像をサーバーへ送って処理するツールは、通信が切れていれば結果を受け取れません。逆に、通信を切ったまま変換から保存まで通るなら、その処理は開いているブラウザの中だけで行われたことになります。ページを開き直すと当然読み込めなくなるので、ページを開いたあとに通信を切るという順番だけ守ってください。

より確実に見たい場合は、ここから一段だけ踏み込みます。ブラウザの検証ツールを開いてネットワークの記録欄を表示し、記録をいったん消してから画像を読み込みます。画像を読み込んだ操作で新しい行が増えなければ、その画像は送信されていません。広告や利用状況の計測による通信は画像とは無関係に発生するので、増えた行があっても、それが画像の読み込み操作に連動しているかどうかで見分けます。確認はここで打ち止めにして構いません。

実測｜このツールは通信を切っても最後まで動いた

同じ手順を、自動操作のブラウザで実行した結果です（2026年8月2日／Chrome HeadlessChrome 151・macOS）。

• 画像を読み込んだ直後に発生した新しい通信：0件
• ダウンロードした直後に発生した新しい通信：0件
• 通信を切った状態で読み込み・変換・保存を実行：すべて成功し、その間の通信も0件

実務上の意味は小さくありません。社外に出せない資料の画像、契約前の提案書のスクリーンショット、人が写っている写真でも、外部サービスにアップロードすることなく白黒にできます。オンラインツールを使うたびに情報の取り扱いを気にしていた作業が、この確認をひとつ通しておくだけで判断できるようになります。

この判定方法は、このツール専用のものではありません。ほかのオンライン画像ツールにもそのまま使えます。ブラウザだけで完結する同種のツールとしては、切り抜きや圧縮をその場で行う画像圧縮ツールや、写真から色を取り出す画像カラーパレット生成ツールがあります。初めて使うツールに機密性のある画像を入れる前に、この4手順を通す習慣にしておくと安全です。

出典：MDN FileReader（2026年8月2日取得。利用者が選んだファイルの内容をブラウザ内で読み取る仕組みとして定義されている）。

うまくいかないときに見るところ

実際に操作していて引っかかった点を、起きる順に並べます。いずれも画面上にエラーが出ないため、ツールが壊れていると勘違いしやすい箇所です。

画像以外のファイルを入れても、何も起きない

テキストファイルやPDFなど、画像でないファイルを読み込ませても画面は何も変わらず、エラーメッセージも出ません。実測でも、表示領域は初期状態のままで、ブラウザの記録にもエラーは1件も出ませんでした。「反応がない＝壊れている」ではなく、まず読み込ませたファイルが画像かどうかを疑ってください。拡張子だけ画像に変えたファイルも同じく無反応になります。

画像を読み込む前に保存すると、透明な画像ができる

画像を読み込んでいない状態でもダウンロードボタンは反応します。その場合、中身が透明な、約1.5KBの空のPNGが保存されます（実測1,572バイト）。保存したファイルを開いても何も見えないときは、この状態を疑ってください。ページを読み込み直したあとに、画像を入れる前のままボタンを押してしまう場合に起こります。

アニメーションGIFは1コマ目だけになる

動くGIFを読み込むと、最初の1コマだけが白黒になり、動きは失われます。保存されるのも静止画のPNGです。3コマのGIF（615バイト）を投入したところ、保存されたのは595バイトの静止PNG1枚でした。

これはツールの不具合ではなく、ブラウザの描画領域に画像を置くときの決まりです。仕様上、アニメーションのある画像は「アニメーションに対応しない場合に使う既定の1枚、それが無ければ最初のコマ」を使うと定められています。動きを保ったまま白黒にしたい場合は、動画やGIFを扱える編集ソフトが必要です。

出典：WHATWG HTML Standard（canvas要素）（2026年8月2日取得。描画元がアニメーション画像の場合の既定画像の扱いを定義）。MDN drawImage()（2026年8月2日取得）。

撮影情報は残らず、向きは画像に焼き込まれる

保存されたPNGには、撮影日時・カメラ機種・位置情報といった付帯情報は一切引き継がれません。撮影情報を1件持つJPEGを変換したところ、保存後のPNGでは0件になっていました（実測）。書き出されるのは画面に描かれた点の並びだけで、付帯情報は仕様上そもそも運ばれません。

これは失われて困る場合と、むしろ好都合な場合の両方があります。撮影日時や位置情報を残したい写真なら、変換前のファイルを別に保管しておいてください。逆に、位置情報を消してから人に渡したい写真なら、白黒にするついでに付帯情報も落ちることになります。

あわせて注意したいのが向きです。スマートフォンの写真は、撮影時の向きを付帯情報として持っていることがあります。ブラウザはそれを反映して表示するため、保存後のファイルでは縦横の数値が入れ替わって見えることがあります。実測でも、横600×縦300として保存されていた画像が、変換後は横300×縦600になりました。見た目の向きは正しいので、数値だけを見て「壊れた」と判断しないでください。

出典：WHATWG HTML Standard（画像ファイルへの書き出し）（2026年8月2日取得。書き出されるのは画素のデータと解像度の情報であると定義されている）。MDN toDataURL()（2026年8月2日取得）。

極端に大きい画像は、何も言わずに失敗する

非常に大きな画像を読み込ませると、エラーを出さないまま、中身のないファイルが保存されることがあります。手元の環境では、1辺16,384ピクセル（約2.7億画素）までは正常に保存できましたが、20,000ピクセル四方では書き出しに失敗して空のデータになりました。

この上限はブラウザ・OS・端末の空きメモリによって変わりますので、上の数値をそのまま境界として覚えないでください。通常の写真やスクリーンショットで届く大きさではありませんが、印刷用の高解像度データやスキャン画像を扱うときは起こりえます。保存したファイルが開けない・真っ白になるときは、画像を先に縮小してから変換してください。

向いている使い方と、別のツールに任せる使い方

ここまでの実測をもとに、やりたいことごとに向き不向きを整理します。使う前にこの表だけ見ておけば、途中で行き止まりに当たることはなくなります。

「向く」に並んだ4つは、いずれも1枚の画像をその場で白黒にして、すぐ使いたいという場面です。ソフトを開かずに終わること、そして画像が外に出ないことが、この道具の価値になります。

4つ目の「色を抜いた状態を目で見る」は、制作の現場で使い道があります。作った画面や資料を白黒にしてみて、それでも内容が読み取れるかを見る、という使い方です。色の違いだけで区別させている表示があると、白黒にした途端に区別がつかなくなります。なぜそれを避けるべきかという背景は、Webアクセシビリティの基本にまとめてあります。この記事は「どうやって白黒にするか」、あちらは「なぜ色だけに頼らない設計が必要か」という分担です。

逆に「向かない」に並んだものは、道具を変えれば解決します。1枚を白黒にするところまでをこのツールに任せ、そのあとの加工は別のツールに渡すと考えると、無駄な回り道がなくなります。ブラウザだけで完結する道具はWeb制作の無料ツール16選にまとめてあるので、次に必要な工程はそこから選んでください。

よくある質問（FAQ）

Q. 対応している画像形式は？

JPG・PNG・GIF・WebPを読み込めます（いずれも実際に読み込めることを確認済みですが、保存される形式は常にPNGになります）。

Q. 画像はサーバーにアップロードされますか？

されません。読み込みから保存までブラウザの中だけで完結し、2026年8月2日の実測では、画像を読み込んだ直後も保存した直後も新しい通信は0件でした（通信を切った状態でも変換と保存が最後まで動きます）。

Q. 変換すると画像は粗くなりますか？

粗くなりません。元の画素数のまま保存されます（ただし撮影情報は引き継がれず、撮影時の向きが反映されるため縦横の数値が入れ替わって見えることがあります）。

Q. 白黒にするとファイルは軽くなりますか？

軽くなりません。保存形式がPNGになるため、写真では元のJPEGより大きくなります（実測で約241KBから約1.51MB）。軽くしたい場合は、変換したあとに画像圧縮ツールへ通してください。

Q. 保存形式やファイル名は選べますか？

選べません。常にPNG形式・固定のファイル名で保存されるため、連続して保存すると末尾に連番が付いた別ファイルになります。

Q. アニメーションGIFはそのまま白黒にできますか？

できません。最初の1コマだけが静止画のPNGとして保存され、動きは失われます（3コマのGIFで実測）。

Q. スマートフォンでも使えますか？

使えます。ドラッグ＆ドロップの操作は使えないため、ファイル選択から写真を読み込んでください。

Q. 料金や回数の制限はありますか？

ありません。会員登録もログインも不要で、無料のまま何枚でも変換できます。

まとめ

グレースケール変換ツールは、画像を1枚その場で白黒にするための道具です。会員登録もインストールも要らず、読み込みから保存まで3手で終わります。

この記事で確かめたことを、実務で使う順に並べておきます。

• 画像は外に出ない：読み込み時も保存時も通信は0件で、通信を切ったままでも最後まで動く。社外秘の画像でも使える。
• 保存形式はPNG固定：形式もファイル名も選べない。ほかの形式が要るなら別のツールへ渡す。
• 写真ではファイルが大きくなる：実測で約6.4倍。軽くしたいなら圧縮の工程を1つ足す。
• 付帯情報は残らない：撮影日時や位置情報は消える。残したいなら元ファイルを保管しておく。
• 動くGIFは1コマ目だけ：動きを保ちたいなら編集ソフトが必要。

とくに持ち帰ってほしいのは「通信を切ったまま最後まで動くか」で、画像が外に出るツールかどうかを自分で判定できるという点です。この4手順はほかのオンラインツールにもそのまま使えます。初めて使うサービスに大事な画像を入れる前に、一度通してみてください。

参考にした一次資料

• WHATWG HTML Standard（canvas要素）（2026年8月2日取得。書き出し形式の既定値、アニメーション画像の扱い、書き出される内容の定義）
• W3C PNG仕様 第3版（W3C勧告 2025年6月24日／2026年8月2日取得）
• MDN toDataURL()（2026年8月2日取得）
• MDN drawImage()（2026年8月2日取得）
• MDN FileReader（2026年8月2日取得）

ツールの挙動として本文に書いた数値は、すべて2026年8月2日にChrome（HeadlessChrome 151／macOS）でツール本体を操作して計測したものです。処理できる画像の上限やスマートフォンでの動作は端末やブラウザによって変わるため、手元の環境で一度試してから本番の作業に使ってください。