写真にモザイクをかける

隠したいところを四角で選んで、モザイクか単色の塗りつぶしをかけます。選んだ写真はどこにも送りません。モザイクは粗くするほど戻しにくくなりますが、絶対ではありません。確実に消したいときは、 塗りつぶしのほうを選んでください。

モザイクは「まとめて平均する」だけの道具です

モザイクがしていることは、じつはとても単純です。選んだ四角を小さなマス（ブロック）に区切り、そのマスに入っている画素の色の平均を出して、マスぜんぶをその1色で塗る。それだけです。

たとえば100×100ピクセルの四角に10ピクセルのマスを敷くと、10,000個あった画素が100個の色にまとまります。 元の数の100分の1です。ずいぶん減りました。

ですが、0にはなっていません。残った100個の色は、どれも元の写真の画素から計算した平均です。 つまりモザイクをかけた絵には、元の情報が形を変えて残り続けています。ここが「モザイクをかけたから消えた」と言えない理由です。

【へえ】平均は「並び方」を消しますが、「いくつあったか」は残します

白と黒だけでできた4×4マス（16画素）を考えます。この16画素ぜんぶを1つのマスにまとめて、平均を出してみます。

白が5個（置き方 その1） → 80 / 白が5個（置き方 その2） → 80 / 白が6個 → 96

白の置き場所を変えても、値は変わりません（どちらも80）。 ところが白の個数が1つ増えると、値も変わります（96）。

つまりこの平均は、「どこにあったか」を消したかわりに、 「いくつあったか」をそっくり残しています。16画素なら白の個数は0個から16個までの17通りで、平均の値も17通りに分かれます ── 値を見れば個数が言い当てられる、ということです。

同じ計算を塗りつぶしでやると、こうなります。白が5個でも6個でも、出てくる値は同じです。

白が5個 → 128 / 白が6個 → 128（どちらも選んだ「はいいろ」そのもの）

このページは「これで隠せます」とは書きません

モザイクをかける道具の説明には、よく「個人情報を隠せます」「安心して使えます」と書いてあります。けれどここには、2つの別々の話が混ざっています。

• 写真を送らないから安心 ── これは通信の話です。このページも同じで、写真は端末から出ません
• モザイクをかけたから読めない ── これは絵の中身の話です。上で見たとおり、情報は減るだけで残ります

前者が正しくても、後者は保証されません。このページが言い切れるのは前者だけなので、後者は言い切りません。

気をつけたいことが、もう2つあります。

• 候補が少ないものは弱い。数字は0から9の10通りしかありません。 モザイクは決まった手順の計算なので、10通りそれぞれに同じモザイクを掛けて 見比べる、という手が理屈のうえで成り立ちます。 文字や、決まった形のマークも同じです
• まわりから分かってしまう。同じ写真の別のところや、続けて撮った別の写真に、 隠したものと同じものが写っていることがあります。 名前の一部だけを隠しても、 残りの手がかりと合わせれば分かる、ということも起こります

「実際にモザイクが破られた事件」の話は、ここには書きません。確かな出どころを自分で確かめられていないからです。 上に書いたのは、この道具の計算そのものから確かめられることだけです ── 平均は元の画素から作られている、という1点です。

⭐ 本当に消したいなら、塗りつぶしを選んでください

このページには「塗りつぶし」のボタンがあります。 こちらは選んだ四角を、まるごと1色でふさぎます。

大事なのは、塗りつぶしが元の色を1つも読んでいないことです。 モザイクは元の画素を足して割りますが、塗りつぶしは元の画素を見ないまま、あなたが選んだ色を書き込むだけです。 だから残る値は0個 ── 元の写真から来た数は、1つも残りません。

覚えておいてほしいのはここです。隠したいものが「見られたら困るもの」なら、迷わず塗りつぶしを選んでください。モザイクは、絵の雰囲気を残したいときや、「ここに何かある」と伝えたいときの道具です。 きれいに見えるほうと、確実なほうは、同じではありません。

マスで割り切れない端も、ちゃんと隠しています

ここは作る側の落とし穴です。100ピクセルの四角に30ピクセルのマスを敷くと、 きれいには割り切れません。

30 + 30 + 30 + 10 = 100（横に4マス・最後だけ10ピクセル）

最後の10ピクセルは半端なので、捨ててしまう作り方があります。すると何が起こるか ──その帯だけ、元の写真がそのまま出ます。顔やナンバーの端が、細い線になって素通しで残るということです。

この道具は、半端なマスも「狭いマス」としてそのまま扱い、 その中だけで平均を出して塗ります。全部で16マスになり、1画素も残りません。 マスを足すとちょうど元の四角に戻ること（すきまも重なりも無いこと）は、 単体テストで固定してあります。

マスの区切りを写真の左上ではなく、選んだ四角の左上から始めているのも同じ理由です。写真の左上から等間隔に区切ると、 選んだ四角の左端が必ずマスの途中に来て、 選んでいない画素まで平均に混ざるか左端に細い帯が残るかのどちらかになります。

指で引く以外のやり方を、必ず置いています

四角を選ぶ道具は、たいてい「押したまま動かす」操作だけで作られています。 でもこの操作は、手がふるえる人・トラックパッドが苦手な人・ キーボードだけで操作する人には難しいことがあります。

ウェブのアクセシビリティの決まりである WCAG 2.2 には、達成基準 2.5.7「ドラッグ動作」（新しいタブで開きます）があります。日本語訳（ウェブアクセシビリティ基盤委員会）ではこう書かれています。

操作にドラッグ動作を用いる全ての機能は、ドラッグなしのシングルポインタで完遂できる。

だからこのページには、四角の位置と大きさを数で入れる欄があります。 ドラッグの「おまけ」ではなく、まったく対等なもう1つの入り口です。 1ピクセル単位でぴったり合わせたいときにも、こちらのほうが速いはずです。

保存した画像に、元のファイルの情報は付いてきません

写真のファイルには、写っている絵のほかに撮った日時・カメラの機種・ 撮った場所（位置情報）のようなデータが入っていることがあります。

この道具が保存するファイルには、それらは入りません。理由は単純で、いったんcanvasという「画素を並べておく面」に絵を描き直し、 そこからPNGを作っているからです。canvasが持っているのは色の数の並びだけなので、 それ以外の情報は入りようがありません。

ただし2つ、消えないものがあります。元のファイルは、そのまま手元に残ります（この道具は元のファイルに手を触れません）。そして保存するファイルの名前は元の名前から作るので、 名前そのものに入っている情報は消えません。 名前も知られたくないときは、 保存したあとで付け替えてください。

大きい写真は縮めてから扱っています

四角を動かすたびに、元の画素から絵をまるごと作り直しています。 前の結果に重ねて計算すると、四角を動かしたときにさっきの場所のモザイクが残ってしまうためです。 そのぶん計算の量が多いので、長い辺が1024ピクセルを超える写真は、比を保ったまま縮めてから扱います。 縮めたかどうかと実際の大きさは画面に出します。保存される画像もその大きさになります。

なお、粗さ（1マスの大きさ）は2ピクセルから受け取ります。 1ピクセルのマスは「1画素の平均＝その画素そのもの」で、かけても絵が1ミリも変わらないからです。 かけたつもりで何も変わっていない、という状態を作れてしまうのは、 この道具ではいちばん危ないことです。

調べたこと: 同じ用途のツール（bannerkoubou.com のモザイク加工、saruwakakun.com の Webモザイクツール）を実際に開き、HTMLを取得して本文を確かめました。 どちらも「隠せます」「安全」と書く一方で、 「復元」「戻せる」にあたる言葉は 1つも書かれていません（取得した本文を検索して0件）。 達成基準2.5.7の日本語訳はウェブアクセシビリティ基盤委員会（WAIC）の WCAG 2.2 日本語訳（新しいタブで開きます）から引用しました。 このページに書いた数（平均の値・マスの数・端の幅）は、文章を書くときに実際に計算させた結果をそのまま出しています。