Photoshopのあのボタンの中身を”触って”見る ― 写真の「困った」6つで学ぶ画像処理

スマートフォンの編集ボタンや Photoshop のフィルターを使えば、暗い写真も眠い写真も、ボタンひとつでそれらしく直せる時代になりました。
ただ、ボタンを押せば直る一方で、その中で何が起きているのかは画面に出てきません。

そこで今回、画像処理の中身を、つまみを動かしながら確かめられる Web ページ「ImageLab」を作りました。
前回の記事「LLMの仕組みを”触って”理解するページをAIに作らせる」の続編で、題材を画像処理に変えたものです。

この記事では、ImageLab の紹介と、写真によくある「困った」6つの場面を例にした触り方と見どころを説明します。
最近では AI の力を借りて、ブラウザで動くツールやゲームの作成の他に、こうした教材づくりにも取り組んでいます。
今回で約50作目となる私が、実例の画面を交えて初心者にもわかりやすく解説します。

画像処理の解説記事の難しさは、すぐに数式が出てくるという点でしょう。
「ガウス関数で畳み込む」と書かれても、何が起きるのかは想像しにくいものです。
そこでこの記事では数式を使わず、Photoshop のボタンの名前と、画面の変化だけで説明します。
リンクを押してつまみを動かすだけで試せますので、ぜひ手を動かしながら読んでみてください。

完成したページはこちらです。

• ImageLab（画像処理デモ集）
• ImageLab の使い方

01a ImageLab の画面全体

---

1. 作ったもの ― 補正ボタンの中身を見るための道具

ImageLab は、ブラウザだけで動く画像処理の体験ページです。

・明るさの調整、ぼかし、シャープ、歪みの補正など、22の処理が入っている
・つまみを動かすと、その場で絵が変わる
・インストールも会員登録も要らない
・読み込んだ写真はブラウザの中だけで処理され、どこにも送信されない

最初にお断りしておくと、これは写真を仕上げるための道具ではありません。
写真の一部だけを選んで直すことも、レイヤーを重ねることもできません。
Photoshop の代わりになるソフトではなく、Photoshop のボタンの中で何が起きているかを見るための道具です。

ここを最初に割り切っておけば、期待外れにはなりません。
むしろ、中身が分かると Photoshop のスライダーの意味が違って見えてきます。

2. 触り方は3つだけ

操作は、次の3つを覚えれば十分です。

1. 写真を用意する……ヘッダの［画像を開く］を押すか、画面に写真をドラッグして落とします。
   手元に写真がなければ、ヘッダの「サンプル」から同梱の絵を選べます。
2. 処理を選ぶ……左のリストから、試したい処理を1つ選びます。
3. 見比べる……右のつまみを動かしてから、キーボードの 3 と 2 を交互に押します。
   3 が処理前、2 が処理後です。

特に3つ目が大事です。
変化の小さい処理ほど、この往復でしか違いが分かりません。
画面中央の縦線をドラッグすると、左が処理前・右が処理後という見比べ方もできます。

なお、どこを押しても壊れることはありません。
但し、写真を読み込んだあとに F5（再読み込み）を押すと、写真は消えます。
ブラウザの中にしか置いていないためで、読み込み直せば元どおりです。
処理を切り替えるときは、左のリストから選ぶだけで構いません。

01b 右のパネル

3. 写真の「困った」6つ

ここからが本題です。
機能を順番に紹介するのではなく、写真によくある「困った」を6つ取り上げ、どの処理で直るのか、そのとき中で何が起きているのかを見ていきます。

記事の図は私が撮った写真で作っていますが、各項目の「この画面を開く」のリンクからは、同梱のサンプルで同じ処理が開きます。
お手元の写真を読み込んで試していただいても構いません。

3-1. 逆光で手前が真っ黒 ― トーンカーブ／CLAHE

窓を背にして撮ると、外は明るく写るのに、手前の人物は黒くつぶれてしまいます。

02 逆光の写真（処理前）

まず〈トーンカーブ〉です。Photoshop のトーンカーブと同じもので、斜めの線の左下あたりを上へ引っぱると、暗い部分だけが明るくなります。
窓の外など明るい部分には手を触れていないので、白飛びしません。
画面下のヒストグラム（明るさの分布のグラフ）の山が、引っぱったとおりに右へ動くのも見えます。

03 トーンカーブの結果

次に〈CLAHE（適応的平坦化）〉を選ぶと、手を動かさずに似たような結果が得られます。
画面を細かいマス目に区切り、マスごとに明るさを整え直すやり方です。

たとえるなら、全国一律の偏差値ではなく、クラスごとに成績をつけ直すようなものです。
暗い教室は暗い教室なりに、明るい教室は明るい教室なりに、それぞれ見やすくなります。
Photoshop の〈シャドウ・ハイライト〉も、場所ごとに明るさを直すという点で近い考え方の道具です。

04 CLAHE の結果

但し、「強さ」を上げすぎると不自然になります。
自動といっても、最後は加減の問題です。

→ この画面を開く（同梱サンプル〈低コントラスト〉で CLAHE）

3-2. 暗い場所でザラザラ ― ガウシアン／バイラテラル／メディアン

夜の室内など暗い場所で撮ると、写真全体に細かい粒（ノイズ）が乗ります。
下の2枚は暗い店内で撮った写真で、粒そのものは縮めた図では見えにくいのですが、ImageLab のルーペを当てるとはっきり分かります。
これを消す処理は、大きく次の三つに分けられます。

1. 〈平均化 / ガウシアン〉……素直にぼかす方法です。
   Photoshop の〈ぼかし（ガウス）〉と同じもので、確かに粒は消えます。しかし、顔の輪郭や文字まで一緒にぼけてしまいます。
2. 〈バイラテラル〉……同じぼかしでも、明るさが近い画素どうしだけを混ぜ、大きく違う画素は混ぜません。
   輪郭の向こう側とは混ざらないので、輪郭を残したまま粒だけが消えます。
3. 〈メディアン〉……周りの画素を明るさの順に並べて、真ん中の値を採ります。
   ポツンと飛んだ点に強いので、ホコリやゴミ取りに向いています。

05 ガウシアンの結果

06 バイラテラルの結果

バイラテラルの「σ_color（値の差）」は、どれくらい違ったら別のものとみなすかのつまみです。
上げていくと、だんだんただのぼかしに近づきます。
この1本が、賢いぼかしの正体です。
Photoshop では〈ぼかし（表面）〉がバイラテラルの、〈ダスト＆スクラッチ〉がメディアンの近い仲間です。

ノイズ取りのやり方が何種類もあるのは、ノイズの種類が違うからです。
細かい粒が全体に乗っているのか、ポツンと飛んでいるのかで、効く道具が変わります。

→ この画面を開く（同梱サンプル〈ガウシアンノイズ＋段差〉でバイラテラル）

3-3. なんとなく眠い ― アンシャープマスク

ピントが少し甘い写真をシャッキリさせる定番が〈アンシャープマスク〉です。
Photoshop と同じ名前で、「量」「半径」「しきい値」の3本のつまみも同じです。

この項目の見どころは、〈差分マスクを表示（何を足しているか）〉のチェックです。
入れると、いま写真に足しているものだけが表示されます。

07 アンシャープマスクの差分マスク

輪郭のところにだけ、白と黒の縁取りが出ているのが分かります。
シャープにするというのは、輪郭の明るい側をより明るく、暗い側をより暗くしているだけなのです。
にじんだ絵の縁を、鉛筆でなぞり直していると考えてください。

そう分かると、3本のつまみの意味もはっきりします。

1. 量……なぞる線の濃さ。上げすぎると、輪郭に白い線が浮き出ます
2. 半径……なぞる線の太さ
3. しきい値……どのくらいの段差から輪郭とみなすか。上げると、肌のわずかなムラは無視して、はっきりした輪郭だけを立てます

→ この画面を開く（同梱サンプル〈ぼけた細線・格子〉でアンシャープマスク）

3-4. 写真に縞が入った ― スペクトルマスク（いちばんの見どころ）

印刷物をスキャンしたときの網目や、電気的な干渉などで、写真に細かい縞が入ることがあります。
この縞を消すのが、ImageLab でいちばんお見せしたい場面です。

下の図は、私の写真に ImageLab の〈ノイズ付加〉で、わざと斜めの縞を乗せたものです。

08 わざと縞を乗せた写真

これを〈スペクトルマスク（手で塗る）〉で開くと、右のパネルに不思議な絵が出ます。

09 スペクトルと黄色い印

これは写真そのものではありません。
この写真がどんな細かさの模様でできているかの一覧表です。
真ん中がなだらかな明暗、外へ行くほど細かい模様を表しています。
楽譜のようなものだと思ってください。
写真という曲に、どの高さの音がどれだけ入っているかが描いてあるのです。

その中にポツンと明るい点があり、黄色い破線の丸で囲まれています。
これが縞の正体です。
一定の間隔でくり返す模様は、この楽譜の上では1つの点に集まります。
ImageLab が自動でさがして、印をつけてくれます。

この写真では丸が4つ出ています。
点が明るいほうの1組（向かい合う2つ）が縞そのもので、残りの1組は計算の都合で出る影のようなものです。
見分けがつかなければ、4つとも塗ってしまって構いません。

では、楽譜からこの音符を消してみます。
手順は次のとおりです。

1. 右パネルの「筆の太さ」を 8 にする
2. 「マスクの縁のぼかし」を 1 にする
3. 黄色い丸の上をマウスでなぞって塗る（片方を塗ると、向かい側にも自動で筆が乗ります）

10 縞を消したあと

縞だけが消えて、写真はそのまま残りました。
キーの 3 と 2 を往復しても、絵はまったくぼけていません。
4 を押す（差分表示）と、消したものが縞だけであることも確かめられます。

比べるために、同じ写真を〈平均化 / ガウシアン〉でぼかしてみると、縞が薄くなるころには写真もぼやけてしまいます。

11 ぼかしで縞を消そうとした場合

同じ「縞を消す」でも、絵をこすって薄めるのか、縞という音だけを止めるのか。
後者ができるのは、写真を音の集まり（楽譜）として扱ったときだけです。
ちなみに、写真を楽譜に書き換える計算を「フーリエ変換」と呼びます。
名前は覚えなくて構いません。

→ この画面を開く（同梱サンプル〈周期ノイズ（斜め縞）〉でスペクトルマスク）

リンク先のサンプルでは、黄色い丸が6つ出ます。
中心に近い4つを塗ってください（外側の2つは塗らなくて構いません）。
1本の縞に対して丸がいくつも出るのは、計算の都合によるものです。

但し、ヘッダの「作業解像度」を 1600 以上にすると、右パネルの絵と黄色い丸が出なくなります。
既定の「長辺 640」か「長辺 1024」で試してください。

3-5. 建物が膨らむ・水平が傾く ― レンズ歪みと補正／アフィン変換

スマートフォンの超広角で建物を撮ると、画面の端にある柱や壁がたわんで写ることがあります。
これは失敗ではなく、広角レンズの性質です。

〈レンズ歪みと補正〉で「すること」を〈補正する〉にし、〈格子を重ねてから歪ませる〉のチェックを外してから、「歪み係数 k₁」を 0 から少しずつ動かします。
曲がった線がまっすぐに戻るところを探してください。
Photoshop の〈レンズ補正〉と同じ種類の処理です。

「すること」を〈歪ませる〉にすると、逆にわざと歪ませることもできます。
マイナス側が外へふくらむ「樽型」、プラス側が内へへこむ「糸巻き型」です。
広角は樽型、望遠は糸巻き型になりやすい、というのはこの2つのことです。

下の図は、私の写真をわざと樽型に歪ませたものです。
重ねた格子の線が外へふくらみ、画面の端ほど大きく曲がっているのが分かります。
広角レンズで起きているのは、これを弱くしたものです。

12 わざと樽型に歪ませた例

傾きは〈アフィン変換〉の「回転角」で直します。
回すと四隅が黒く欠けるのが分かります。
写真を回転させると必ず切り落としが要るのは、このためです。

但し、注意点が2つあります。

・歪みの補正も回転も、画素を計算で置き直しているので、やるたびに少しずつ絵が傷みます。
回転のやり直しを重ねると、だんだん甘くなっていきます。
回すのは1回で済ませる、というのが実は一番大事なコツです
・建物を見上げて撮ったときに上がすぼまって写るのは、レンズの歪みではなく遠近によるものです。
これは ImageLab のこの2つの処理では直りません

→ この画面を開く（同梱サンプル〈幾何図形〉でレンズ歪み）

リンク先では、格子を重ねた図形が歪んだ状態で開きます。
k₁ を左右に動かして、樽型と糸巻き型を見比べてみてください。

3-6. 影の落ちた書類が読めない ― 二値化（大津／適応的）

書類をスマートフォンで撮ると、自分の手や体の影が落ちて、片側だけ暗くなりがちです。

〈二値化〉は、明るさの境目を1つ決めて、それより明るければ白、暗ければ黒にする処理です。
Photoshop の〈2階調化〉と同じものです。
「閾値の決め方」を〈大津〉にすると、境目を自動で決めてくれます。

ところが、写真全体で1つの境目を決めるので、影のかかった側は文字ごと真っ黒につぶれてしまいます。

13 二値化（大津）

そこで「閾値の決め方」を〈適応的〉に変えます。
場所ごとに、その周りの明るさを見て境目を決め直すやり方です。
影の側の文字も読めるようになります。書類スキャン用のアプリで影があっても文字がくっきり出るのも、こうした場所ごとの処理によるものと考えられます。

14 二値化（適応的）

→ この画面を開く（同梱サンプル〈低コントラスト〉で二値化）

4. 6つを通して見えてくること

6つの「困った」を並べてみると、共通点が見えてきます。

・「写真全体で1つ決める」か「場所ごとに決める」か……逆光（トーンカーブと CLAHE）と書類（大津と適応的）は、まったく同じ二択でした
・「全部を一律にぼかす」か「狙ったものだけを消す」か……ザラつき（ガウシアンとバイラテラル）と縞（ぼかしとスペクトルマスク）は、どちらもこの違いでした
・どの処理にも「効きすぎ」がある……CLAHE の強さ、アンシャープマスクの量、バイラテラルの σ_color。自動の処理でも、最後は加減で決まります

ボタンの中身が分かると、スライダーをどちらに動かせばよいかを、勘ではなく理屈で決められるようになります。
これが、ImageLab で持ち帰っていただきたいことです。

まとめ

Photoshop などの補正ボタンの中身を、ImageLab で”触って”確かめる方法を、写真の「困った」6つを例に説明してきました。
要点を振り返ります。

・ImageLab はブラウザだけで動き、写真はどこにも送られない。仕上げの道具ではなく、中身を見る道具
・操作は「写真を読み込む」「左から処理を選ぶ」「3 と 2 を往復する」の3つだけ
・逆光・ザラつき・眠い・縞・歪み・影の6つには、それぞれ Photoshop に同じ名前か近い仲間のボタンがある
・いちばんの見どころは、縞だけを楽譜から消すスペクトルマスク
・「全体で1つか、場所ごとか」は、画像処理のあちこちに出てくる二択

もっと詳しく知りたい方は、22の処理それぞれの原理と見どころをまとめた「処理解説」のページもご覧ください。
インターネットにつながらない場所で使いたい場合は、GitHub のページの［Code］→［Download ZIP］で一式をダウンロードし、中の index.html をダブルクリックすれば動きます。

この ImageLab を AI に作らせる過程で、どこでつまずき、何を学んだかは、続編の「画像処理の教材をAIに作らせて分かったこと」にまとめました。

写真の「困った」に合わせてボタンを選べるようになれば、Photoshop やスマートフォンの編集機能を、今までより自信を持って使いこなせるようになるでしょう。

---

関連記事

• 画像処理の教材をAIに作らせて分かったこと ― 読者像の思い違いから公開の失敗まで
• LLMの仕組みを”触って”理解するページをAIに作らせる
• Photoshop CS2と最新のAI使用の処理ソフトを試してみる
• Canvaの画像ぼかし機能を試してみる