写真にモザイクをかけるだけなのに、地味に面倒じゃない？——ブラウザで使える無料ツール「GRIDMASK」を作りました
SNSやブログに写真を載せようとしたとき、
「あ、後ろに知らない人の顔が写っている」
「スクショに本名が出てる」
「待って。住所も見えてる」
……と、投稿ボタンを押す3秒前に気づくこと、ありませんか？
気づいてしまった以上、そのまま出すわけにはいきません。
画像編集ソフトを起動して、画像を開いて、モザイクをかけて、保存して、元の投稿画面に戻る。
写真が10枚あれば、それを10回。
途中でだんだん、
「もう今日は投稿しなくていいか……」
という気持ちになってきます。
モザイクをかけたいだけなのに、なぜこんなに精神力を持っていかれるのでしょうか。
そんな小さくて地味な面倒をまとめて解消するために、モザイク加工に特化したWebツールを作りました。
その名も「GRIDMASK」です。
↓紹介ページ
登録不要・無料です。
モザイクより、その前後が面倒なんですよね
画像にモザイクをかける処理自体は、それほど難しくありません。
問題は、その前後に細かな作業が大量発生することです。
画像を1枚ずつ開く
隠したいところを選ぶ
ブラシが大きすぎて余計なところまで塗る
今度はブラシが小さすぎて日が暮れる
はみ出した部分を修正する
モザイクの強さを調整する
保存形式を選ぶ
保存先を見失う
次の画像でも同じ作業を繰り返す
高機能な画像編集ソフトなら、もちろん全部できます。
ただ、「この顔だけ隠したい」という目的に対して、プロ向け画像編集ソフトを起動するのは、ちょっと大げさです。
コンビニへ行くためにレーシングカーを出すような感じがあります。
逆に、簡単なモザイク加工サービスでは、複数画像を扱えなかったり、ブラシで大まかに塗ることしかできなかったりします。
私が欲しかったのは、多機能な画像編集ソフトではありません。
「モザイク加工だけを、最初から最後まで気持ちよく終わらせられるツール」でした。
それなら作ってしまおう、ということで生まれたのがGRIDMASKです。
GRIDMASKって、何者？
GRIDMASKは、ブラウザ上で画像にモザイクや塗りつぶしを適用できるWebツールです。
アプリのインストールや、アカウント登録は必要ありません。
ページを開く。
画像を入れる。
隠したい場所を塗る。
保存する。
以上です。
主な機能はこちら。
複数画像の一括読み込み
6種類のモザイクパターン
ブラシ、長方形、楕円による範囲指定
モザイクサイズの調整
ブラシサイズの調整
境界のぼかし
消しゴムによる部分修正
元画像との比較
元に戻す・やり直す
PNG、JPEG、WebPでの保存
複数画像のZIP一括保存
EXIFなどのメタデータを除去して出力
PWAとしてインストール可能
なんだか並べると多機能に見えますが、全部モザイク加工のための機能です。
動画編集もできません。
文字入れもできません。
写真をキラキラに盛る機能もありません。
モザイクに集中しています。
実際に使ってみます
今回は、ブログやSNSに掲載する複数の写真から、顔や個人情報を隠す場面を想定して使ってみます。
STEP 1：画像をまとめて読み込む
まず、加工したい画像をGRIDMASKへ読み込みます。
ファイル選択のほか、ドラッグ＆ドロップにも対応しています。
しかも、画像は複数まとめて追加できます。
読み込んだ画像はサムネイルで一覧表示されるので、クリックするだけで編集対象を切り替えられます。
写真を1枚編集して、保存して、次の写真を開いて……という修行のような作業は必要ありません。
イベント写真、旅行写真、操作マニュアル用のスクリーンショットなど、画像の枚数が多いときに威力を発揮します。
1枚なら小さな差。
30枚なら、かなり大きな差です。
STEP 2：隠したいものに合わせてツールを選ぶ
加工範囲は、用途に合わせて指定できます。
ブラシ
長方形
楕円
消しゴム
人物の輪郭などを細かくなぞりたいならブラシ。
名前や住所、メールアドレスなど、四角い情報をまとめて隠したいなら長方形。
顔には楕円が便利です。
ブラシを選んでいるときは、ブラシサイズに応じてマウスカーソルの大きさも変わります。
「そのブラシ、そんなに大きかったの？」
という事故を減らせます。
はみ出したところは消しゴムで修正できるので、多少大胆に塗っても大丈夫です。
STEP 3：モザイクの見た目を選ぶ
GRIDMASKには、6種類の加工パターンを用意しています。
標準ピクセル
ソフトピクセル
ランダムタイル
ドット
ストライプ
単色塗りつぶし
「とにかく読めないようにしてほしい」という場合は、標準ピクセルや単色塗りつぶし。
写真の雰囲気をあまり崩したくない場合は、ソフトピクセル。
ちょっとデザインっぽく見せたい場合は、ドットやストライプ。
目的に合わせて選べます。
モザイクのブロックサイズも変更できます。
細かくすると控えめに、粗くすると強めの加工になります。
ただし、個人情報を隠すときに「うっすら読める気がする」はダメです。
そういうときは、遠慮なく粗くしてください。
STEP 4：境界を自然になじませる
モザイク加工で意外と目立つのが、加工したところとしていないところの境目です。
モザイク部分だけが四角く浮き上がり、
「はい！ここを隠しました！」
という強い存在感を放つことがあります。
もちろん、それが目的なら問題ありません。
ただ、写真全体になじませたい場合には、少し不自然です。
GRIDMASKでは、加工範囲の境界をぼかせます。
境界を少しぼかすと、モザイクが周囲になじみやすくなります。
ただし、重要な情報を隠す場合は注意してください。
ぼかしを強くしすぎると、範囲の端に元画像が残って見える可能性があります。
「自然に見せること」と「確実に隠すこと」なら、個人情報については後者を優先しましょう。
STEP 5：元画像と見比べながら修正する
何か所か加工していると、
「どこを隠したんだっけ？」
「これは元からこういう模様だったっけ？」
と、だんだん自信がなくなってきます。
GRIDMASKでは、加工前の画像と見比べながら確認できます。
「元に戻す」「やり直す」にも対応しているので、操作を間違えても大丈夫です。
画像を拡大して細かな部分を確認したり、表示位置を動かしたりすることもできます。
全部隠したつもりでも、画像の端に小さく名前が残っていることがあります。
公開前の最終確認は、ぜひ少し疑い深い目で行ってください。
STEP 6：保存する。複数ならZIPにまとめる
書き出し形式は、次の3種類から選べます。
PNG
JPEG
WebP
JPEGとWebPでは画質を調整でき、出力サイズやファイル名の末尾も設定できます。
1枚だけ保存することも、加工した複数画像をZIPファイルにまとめて保存することもできます。
10枚加工したあとに、保存ボタンを10回押す必要はありません。
複数画像を読み込んで、順番に加工して、最後にまとめて保存。
この流れをひとつの画面で完了できることは、GRIDMASKで特にこだわった部分です。
GRIDMASKの便利なところを、5つにまとめます
1．複数画像をまとめて処理できる
複数の画像を一度に読み込み、サムネイルで切り替えながら編集できます。
加工後はZIPでまとめて保存できます。
「写真が2枚あります」ではなく、「今日中に37枚なんとかしてください」という場面で本領を発揮します。
2．モザイクの見た目を調整できる
6種類のパターンに加えて、モザイクサイズ、ブラシサイズ、境界のぼかしを調整できます。
ただ四角いモザイクを置くだけではなく、写真や用途に合わせた仕上げができます。
3．やり直しや細かな修正ができる
ブラシサイズに連動するカーソル、消しゴム、ズーム、元画像との比較、元に戻す・やり直すなどを用意しています。
「一発で完璧に塗ってください」という職人仕様ではありません。
失敗しても、普通に戻せます。
4．画像を外部サーバーへ送信しない
読み込んだ画像は、外部サーバーへアップロードされません。
モザイクの適用や画像の書き出しは、利用しているブラウザの中で処理されます。
個人的な写真や仕事のスクリーンショットを扱うとき、「この画像、どこかに送信されているのかな？」と気にしなくて済む設計にしました。
5．無料・登録不要ですぐ使える
メールアドレスも、パスワードも、突然始まる長いプロフィール入力もありません。
ページを開いて、そのまま使えます。
PWAにも対応しているため、対応ブラウザでは端末にインストールして、通常のアプリに近い感覚で起動できます。
例えば、こんな方に使ってほしいです
単に「SNSを使う方」と書いても、たぶん自分のことだと思ってもらえないので、かなり具体的に挙げてみます。
保育園や幼稚園のサイトを更新している方
行事の写真をたくさん載せたい。
でも、掲載許可のない園児の顔を1人ずつ隠す必要がある。
運動会の集合写真を前にして、
「この写真、子どもが48人いるな……」
と、そっとブラウザを閉じた経験がある方に。
※公開前の確認や施設の運用ルールには、必ず従ってください。
学校やPTAの広報担当になった方
広報担当になった瞬間、写真撮影、選別、加工、掲載まで全部担当することになった方。
卒業生でもプロのデザイナーでもないのに、なぜか画像編集能力まで期待されている方におすすめです。
不動産物件の写真を掲載している方
室内写真は完璧。
明るさも構図もいい。
ただし窓の外に、近所の人と車のナンバーと表札が全部写っていた——というときに使えます。
フリマアプリへ出品している方
商品はきれいに撮れたのに、鏡に自分が全部写っていた方。
配送伝票、宛名、会員番号などが写真の端に入り込んでいた方にも。
背景だけでなく、鏡、ガラス、光沢のある家電も要注意です。反射は意外と仕事をします。
会社の操作マニュアルを作っている方
社内システムのスクリーンショットを撮ったら、
本名
メールアドレス
顧客名
社内だけで通じる怪しいプロジェクト名
が全部表示されていた方に。
資料は完成したのに、モザイク作業だけが20ページ残っている。
そんな夜にもどうぞ。
YouTubeや動画の告知画像を作っている方
動画本編では隠したのに、サムネイルに本名が残っていた。
SNSの告知画像にもアカウントIDが写っていた。
公開後にコメント欄で教えてもらう前に、自分で消しておきたい方に。
オンライン講座やセミナーの開催報告を書く方
Zoomなどの画面を掲載したいけれど、参加者名や顔、チャットの内容が写っている方。
楽しかった雰囲気は伝えたい。
でも参加者全員をインターネットデビューさせたいわけではない。
そんなときに使えます。
町内会や地域イベントのサイト担当になった方
お祭りの写真を300枚渡され、
「いい感じに選んで載せておいて」
という、短い言葉に見せかけた巨大案件を受け取った方に。
まずは写真を減らすところからですが、モザイク加工についてはGRIDMASKがお手伝いできます。
美容室、ジム、治療院などの事例写真を扱う方
お客様の顔は隠したい。
でも、髪型、施術箇所、トレーニングの様子は見せたい。
毎回同じ場所へモザイクをかける作業に、そろそろ飽きてきた方に向いています。
推しの写真をSNSに載せたいけれど、周囲の人まで写っていた方
推しは美しく撮れた。
しかし、周りのお客さんも驚くほど鮮明に写っていた。
推しだけを世界に届け、ほかの人のプライバシーは守りたい。そんな良識あるファン活動にも使えます。
スクリーンショットをすぐ共有したくなる方
便利なサービスを見つけた。
面白い画面が出た。
エラーが起きた。
すぐ誰かに見せたい。
でも、そのスクリーンショットの右上には、あなたの名前がしっかり表示されています。
勢いで送信する前に、いったんGRIDMASKを通してください。
プライバシーについて
画像を加工するツールなので、データの扱いには注意しました。
GRIDMASKでは、読み込んだ画像や編集内容を外部サーバーへ送信せず、利用者の端末内で処理します。
また、書き出す画像には、元画像のEXIFなどのメタデータを引き継がない設計にしています。
写真は見た目だけ確認すれば大丈夫、とは限りません。
スマートフォンやカメラで撮影した画像には、撮影日時や位置情報などが記録されている場合があります。
「顔は完璧に隠したのに、位置情報は残っていました」では困るので、見えない部分にも配慮しました。
詳しい内容はこちらをご確認ください。
ただし、モザイクは万能な透明マントではありません
ここは少しだけ真面目な話です。
モザイク加工をしたからといって、あらゆる情報を完全に匿名化できるとは限りません。
モザイクが細かすぎたり、加工範囲が狭かったりすると、元の文字や形を推測できる可能性があります。
特に、住所、電話番号、氏名、認証情報などを隠す場合は、
モザイクサイズを大きくする
対象より少し広めに加工する
単色塗りつぶしを使う
書き出した画像を改めて確認する
といった対応をおすすめします。
「たぶん読めない」は、インターネットでは少し危険です。
できれば「何が書いてあったのか自分でも分からない」くらいまで、しっかり隠してください。
なお、現在のGRIDMASKには、顔やナンバープレートの自動検出機能はありません。
隠す場所は、自分で確認して指定する必要があります。
少し手間はかかりますが、自動検出にも見落としはあります。最後は必ず人の目で確認してください。
なぜGRIDMASKを作ったのか
制作物やブログ記事を公開していると、画像の一部を隠したい場面が何度も出てきます。
スクリーンショットに表示されたアカウント名。
写真に写り込んだ人の顔。
住所、注文番号、ナンバープレート。
そのたびに画像編集ソフトを開くのですが、やりたいことは毎回ほぼ同じです。
「ここを選んで、モザイクをかけて、保存したい」
本当に、それだけなんですよね。
それなら、最初からモザイク加工だけに特化したツールがあればいい。
しかも、複数の画像をまとめて扱えて、登録もアップロードも必要なく、思いついたときにすぐ使えるもの。
そんな発想からGRIDMASKを作りました。
モザイク加工は、決して華やかな作業ではありません。
加工が終わった画像を見ても、
「素晴らしいモザイクだ！」
と感動する人は、あまりいないでしょう。
でも、公開前に毎回発生する小さな手間を減らせれば、画像を使った発信はもう少し気軽になるはずです。
GRIDMASKが、投稿ボタンを押す直前の「あっ」を助けるツールになればうれしいです。
公開前のひと手間を、もう少し軽く
GRIDMASKは、登録不要・無料で利用できます。
画像を用意したら、ブラウザからそのまま試してみてください。
使ってみて、
「ここが分かりにくい」
「こういうモザイクも欲しい」
「50枚加工したら、ここが大変だった」
といったことがあれば、ぜひ教えてください。
特に、実際の作業でしか見つからない「地味だけれど毎回困ること」は大歓迎です。
そういう小さな面倒を、少しずつ減らしていければと思います。
#個人開発 #Webツール #画像編集 #モザイク #プライバシー #無料ツール #PWA #業務効率化
