スクショの個人情報を隠す5ステップ|ブログ用10枚をAIにまとめて任せる

記事を作らせる
記事内に広告が含まれています。

記事に載せたい画面はあるのに、氏名や住所が写っていて手が止まる。ぼくもずっと、1枚ずつ画像編集アプリで塗っていました。

いまは日本語で頼むだけで、10枚をまとめてダミーの値に差し替えています。この記事では、ブログ用のスクショを実際に加工している非エンジニアが、そのやり方を5つのステップで説明します。黒く塗らずに済むので、読者に「何を入れる欄か」も伝わったままにできます。

  1. ① 結論|ブログのスクショは、1枚ずつ塗らなくていいです
    1. ①-1 「載せたいけど、個人情報が写っている」で止まっていませんか
    2. ①-2 やることは、日本語で頼むだけです
    3. ①-3 変わったのは、開いて閉じる回数でした
    4. ①-4 これはClaude Codeの「機能」ではありません
  2. ② STEP1|塗り始める前に、まず全部開いて仕分けます
    1. ②-1 いきなり塗り始めると、要らない仕事が増えます
    2. ②-2 3つに分けるだけです
    3. ②-3 やってみたら、何も写っていない画面がありました
    4. ②-4 隠すものは、だいたい決まっています
  3. ③ STEP2|黒く塗るのではなく、ダミーの値に差し替えます
    1. ③-1 黒く塗ると、その欄が何だったか分からなくなります
    2. ③-2 ダミーの値は、そのフォームの見本に寄せます
    3. ③-3 1つずつ決めず、画面全体でつじつまを合わせます
    4. ③-4 全部を消さなくて大丈夫です
    5. ③-5 値を決めるのはAI、決裁するのは自分です
  4. ④ STEP3|「塗って」ではなく「文字だけ塗り替えて」と頼みます
    1. ④-1 素直に「その欄を塗って」と頼むと、フォームが壊れます
    2. ④-2 頼み方を1つ変えるだけで直ります
    3. ④-3 範囲に矢印を入れないでください
    4. ④-4 コピペで使えるプロンプト
    5. ④-5 AIにできないことも書いておきます
  5. ⑤ STEP4|塗ったら拡大して見ます
    1. ⑤-1 消し損ねは、記号に出ます
    2. ⑤-2 見つけたのは、人ではありませんでした
    3. ⑤-3 確認まで一緒に頼みます
    4. ⑤-4 そのうえで、自分でも1回だけ見ます
  6. ⑥ STEP5|終わったあとに残るものを片づけます
    1. ⑥-1 作業の途中で、無加工の個人情報が新しく生まれています
    2. ⑥-2 保存し直してから使います
    3. ⑥-3 プログラムは、残さなくていいです
    4. ⑥-4 次に、もっとラクをするために
  7. ⑦ よくある質問(FAQ)

① 結論|ブログのスクショは、1枚ずつ塗らなくていいです

黒く塗る場合とダミー値に差し替える場合で、読者に伝わる情報がどう変わるかの対比 同じ画面でも、読者に届くものが変わります 黒く塗る お名前 口座番号 何を入れる欄なのかが 読者には伝わらない VS ダミー値に差し替える お名前 山田 太郎 口座番号 1234567 何を入れる欄なのかが 読者にも伝わる

①-1 「載せたいけど、個人情報が写っている」で止まっていませんか

記事に使いたい画面はもう撮ってある。でもそこに、氏名や住所やメールアドレスがそのまま写っている。

1枚ずつ画像編集アプリで開いて、塗って、保存して、次の1枚を開いて……。これを10枚ぶんやると考えると、記事を書く前に力尽きます。

個人情報が入力されたままの会員登録フォーム(加工前のサンプル)
※画像は本記事用に作成したサンプルフォームです(実在するサービスではありません)。値もすべて架空のものです。

ぼくもずっと、プレビュー.appで1枚ずつ塗っていました。

①-2 やることは、日本語で頼むだけです

【3行まとめ】
・隠すのではなく「ダミー値に差し替える」と、読者に伝わる情報が残ります
・10枚あっても、日本語で頼めばまとめて処理できます
・そもそも「全部に加工が要る」とは限りません。まず全部開いて仕分けます

「この画面の氏名と住所と口座番号を、ダミーの値に差し替えて」。頼むのはこれだけです。あとはその場で処理してくれます。

①-3 変わったのは、開いて閉じる回数でした

以前ある記事では、スクショ17枚を1枚ずつ開いて塗りました。直近の記事では、10枚をまとめて差し替えました。

⚠️ 正直に書くと、どれくらい時間が短くなったかは測っていません。「◯分で終わります」とは書けません。はっきり変わったのは、1枚ずつ開いて閉じる回数のほうです。

①-4 これはClaude Codeの「機能」ではありません

ここだけは誤解されたくないので、先に書いておきます。

・「マスキング機能」というボタンがあるわけではありません
・日本語で頼むと、その場で小さなプログラムを書いて、それを実行してくれます
・書かれたプログラムは使い捨てで大丈夫です
・必要なもの=Pillowという画像処理のライブラリです。入っていなければ、入れるところから頼めます
・日本語の文字を書き込む都合で、フォントの指定だけmacOSを前提にしています(Windowsの方は、この1行だけ変えることになります)

クロパン
クロパン

「機能」だと思って探すと、いつまでも見つかりません。ぼくも最初は設定のどこかにあるのかと思って探しました。無いです🐼

①のまとめ
・スクショの加工は、1枚ずつ手で塗らなくてよくなりました
・やることは日本語で頼むだけ。専用の機能ではなく、その場で書かれる使い捨てのプログラムです
・かかった時間は測っていません。減ったのは開いて閉じる回数のほうです

画像そのものをAIに見せて指示するやり方は、Claude Codeに画像を見せて指示する方法|スクショ1枚で伝わる3つの場面 にまとめています。あちらは「AIに渡す前に消す」話で、この記事は「読者に見せる前に消す」話です。


② STEP1|塗り始める前に、まず全部開いて仕分けます

撮った21枚を先に仕分けると、実際に加工が必要なのは6枚だけだったという内訳 塗り始める前に、まず全部開いて仕分けます 撮ったスクショ 21 そのまま使えた(個人情報が写っていない) 4枚 ダミー値に差し替えた 6枚 そもそも記事に使わなかった 11枚 先に仕分けないと、使わない11枚まで加工することになります

②-1 いきなり塗り始めると、要らない仕事が増えます

撮ったスクショは、全部が記事に載るわけではありません。似た画面が2枚あったり、あとで見たら何も写っていなかったりします。

にもかかわらず、撮った順に上から塗っていくと、結局は使わない画像まで加工することになります。

②-2 3つに分けるだけです

分け方は難しくありません。1枚ずつ開いて、次のどれかに振り分けます。

① そのまま使える(見られて困るものが写っていない)
② 一部だけ隠せば使える
③ そもそも記事に使わない(内容が重複している・写り込みが重すぎる)

この仕分けもAIに手伝ってもらえますが、最後にどれを使うかを決めるのは自分です。記事のどこで何を見せたいかは、AIには分かりません。

②-3 やってみたら、何も写っていない画面がありました

直近の記事では、撮った21枚を全部開いて仕分けました。

そうしたら、5枚は最初から個人情報がゼロでした。しかも記事の山場に使うつもりだった画面が、そのうちの2枚だったのです。

着手する前は「1枚も無加工では使えないだろう」と思っていました。開いてみたら違いました。思い込みで全部を加工の対象にしないほうがいい、というのがここでの学びです。

②-4 隠すものは、だいたい決まっています

申込フォームや登録画面なら、見るところはほぼ固定です。

画面の中
・氏名/フリガナ ・住所 ・電話番号 ・メールアドレス ・生年月日
・口座番号/名義 ・ログインID ・受付番号や申込番号
・確認メールに載っている長いURL(クリックだけでログインできてしまうものがあります)
・パスワード欄(●で伏せられていても、桁数は読めてしまいます)
画面の外側
・ブラウザのタブ ・ブックマークバー ・サイドバー

⚠️ 見落としがちなのは画面の外側のほうです。タブが数個並んでいるだけで、「このブログを書いている人は、あのサイトも書いている人だ」と伝わってしまうことがあります。画面の中よりも、外側のほうが情報量が多いと思っておくと安全です。対処はかんたんで、ブラウザごと切り落として、必要な範囲だけを残します。

②のまとめ
・撮った順に塗り始めない。まず全部開いて、使う/一部隠す/使わない に分けます
・実際にやると、そのまま使える画面が混ざっています
・隠す対象は決まった項目です。画面の外側(タブ・サイドバー)を忘れないのがコツです


③ STEP2|黒く塗るのではなく、ダミーの値に差し替えます

③-1 黒く塗ると、その欄が何だったか分からなくなります

フォームの画像を記事に載せる目的は、「ここにこういう値を入れます」と読者に見せることです。

黒く塗ると安全にはなりますが、記事としての中身も一緒に消えます。だから、消すのではなく入れ替えます

氏名や連絡先をダミー値に差し替えたあとの会員登録フォーム
※画像は本記事用に作成したサンプルフォームです(実在するサービスではありません)。値もすべて架空のものです。

③-2 ダミーの値は、そのフォームの見本に寄せます

値は何でもいいわけではありません。浮いて見えると、読者はそこで引っかかります。

コツは、そのフォームが最初から表示している見本(プレースホルダー)に寄せることです。「山田/太郎」と薄字で出ているなら、差し替える値も山田 太郎にします。郵便番号なら100-0001、電話番号なら090-0000-0000のように、見るからに「例」だと分かる値を選びます。

③-3 1つずつ決めず、画面全体でつじつまを合わせます

ここは実際にやってみて気づいたところです。

名前を「山田 花子」にしたのに、性別のラジオボタンが「男性」のまま残っていて、ちぐはぐになりました。名前だけを見て決めると、こういうズレが出ます。

⚠️ ダミーの値は1つずつ決めず、画面全体を見て、矛盾しない組み合わせにします。氏名と性別、氏名とフリガナ、氏名と口座名義、郵便番号と住所。このあたりはセットで動きます。

③-4 全部を消さなくて大丈夫です

「個人情報だから全部消す」と考えると、記事が成立しなくなることがあります。

たとえば、振込先の登録でつまずいた話を書くなら、どの銀行のどの支店だったかは残しておいたほうが伝わります。口座番号と名義さえダミーにすれば、その口座は特定できません。

金融機関名と支店名は残し、口座番号と名義だけをダミーに差し替えた画面
※画像は本記事用に作成したサンプルフォームです(実在するサービスではありません)。値もすべて架空のものです。

残すか消すかは、記事の主題に必要かどうかで決めます。

③-5 値を決めるのはAI、決裁するのは自分です

実際の流れはこうです。差し替える値の案はAIが出してくれます。それを見て、「これは残して」「これは別の値にして」と返します。

一覧で先に出してもらうと、あとから画像を作り直さずに済みます。

③のまとめ
・黒く塗ると安全にはなりますが、記事の中身も一緒に消えます
・ダミーの値は、そのフォームの見本に寄せて、画面全体でつじつまを合わせます
・主題に必要な情報(銀行名など)は残してよい。値の案はAI、最終判断は自分です

この方法で実際にスクショ9枚を差し替えた記事が Claude Codeに申込フォームを見てもらう|送信前にミス4件が消えた話 です。仕上がりはそちらで見られます。


④ STEP3|「塗って」ではなく「文字だけ塗り替えて」と頼みます

塗る範囲の取り方を3つ比べた図。欄まるごと、文字と矢印まで、文字が入るところだけ どこを「範囲」にするかで、結果が変わります 欄まるごと 東京都 枠線も矢印も 消える フォームに見えなくなる 文字+矢印まで 東京都 枠線は残るが 矢印が消える 選ぶ欄に見えなくなる 文字が入るところだけ 東京都 枠線も矢印も そのまま残る この頼み方をする 矢印も「暗い画素」なので、範囲に入れると文字と一緒に塗られます

④-1 素直に「その欄を塗って」と頼むと、フォームが壊れます

最初、ぼくは何も考えずに「この欄を塗りつぶして、上から文字を書いて」と頼みました。

出てきた画像がこれです。

入力欄を四角く塗りつぶした結果、枠線とドロップダウンの矢印が消えてしまった画面
※画像は本記事用に作成したサンプルフォームです(実在するサービスではありません)。値もすべて架空のものです。

値は確かに差し替わっています。でも、入力欄の枠線も、選ぶ欄の矢印も、自動入力を表す青い背景も、まとめて消えました。もはやフォームに見えません。

理由は単純で、欄の形をそのまま塗りつぶしてしまったからです。

④-2 頼み方を1つ変えるだけで直ります

言い方をこう変えます。「欄を塗るのではなく、文字がある画素だけを探して、そこだけ塗り替えて」

同じ画面が、こうなります。

文字の画素だけを塗り替えたので、枠線とドロップダウンの矢印が残っている画面
※画像は本記事用に作成したサンプルフォームです(実在するサービスではありません)。値もすべて架空のものです。

枠線も、矢印も、青い背景も残っています。差し替わったのは文字だけです。

④-3 範囲に矢印を入れないでください

もう一段だけ、つまずきどころがあります。

修正したあとも、選ぶ欄の矢印だけが消えることがありました。原因は、矢印も文字と同じ「濃い色の点」だからです。文字を探す範囲に矢印まで入っていると、文字と一緒に塗られてしまいます。

対処は、探す範囲を「文字が入るところだけ」に狭めることです。矢印のぶんだけ右を外す、と伝えれば通じます。

④-4 コピペで使えるプロンプト

ここまでをまとめて頼むと、こうなります。そのまま貼れます。

このフォルダのスクリーンショットに写っている個人情報を、ダミーの値に差し替えてください。

・黒く塗るのではなく、ダミーの値を書き込む形にしてください
・入力欄を四角く塗りつぶさないでください。枠線や矢印まで消えてしまいます
・欄の中の「文字がある画素」だけを探して、そこだけ塗り替えてください
・背景の色は、その欄でいちばん多く使われている色を拾ってください
・選ぶ欄は、右端の矢印を範囲に入れないでください
・差し替える値の案を先に一覧で見せてください。わたしが確認してから実行してください

⚠️「文字がある画素だけ」とわざわざ指定しているのは、欄ごと塗ると枠線や矢印まで消えて、フォームに見えなくなるからです。ここを書かないと、たいてい欄ごと塗られます。

⚠️ Pillowという画像処理のライブラリが入っていないと動きません。エラーが出たら「Pillowを入れてから、もう一度やって」と返せば大丈夫です。

④-5 AIにできないことも書いておきます

任せきりにはできない部分があります。先に知っておくと、思ったとおりにならなくても慌てずに済みます。

・代わりにやってくれないこと
どれを隠してどれを残すか、の最終判断です。記事で何を見せたいかは、こちらにしか分かりません。
・AIから見えていないもの
画面に写っていない範囲です。スクロールで隠れていた項目は、当然ながら写っていません。
・AIが持っていない情報
その画面が「誰に見られると困るのか」という事情です。同じ氏名でも、伏せたい場合とそうでない場合があります。
・最後に人がやること
できあがった画像を自分の目で見ることです。ここだけは省けません。

⚠️ もうひとつ大事なことがあります。この頼み方をするとき、加工する前の画像をAIに渡していることになります。自分の情報ならそれで済みますが、仕事の画面や、他人の個人情報が写っている画像は、そもそも渡してよいものかを先に確かめてください。会社のルールがある場合は、それに従います。

④のまとめ
・「欄を塗って」と頼むと、枠線も矢印も消えてフォームが壊れます
・「文字がある画素だけを塗り替えて」に言い換えるだけで直ります
・選ぶ欄は、矢印を範囲に入れないように伝えます
・隠すものを決めるのと、最後に自分の目で見るのは、人の仕事として残ります

記事に使う画像そのものをAIに作らせる話は ブログのアイキャッチと図解、全部AIで作る|私の量産ワークフロー にまとめています。


⑤ STEP4|塗ったら拡大して見ます

⑤-1 消し損ねは、記号に出ます

差し替え自体はうまくいっていても、拡大すると元の文字が少しだけ残っていることがあります。

実際に2回直しました。どちらも「:」でした。文字は消えているのに、コロンの上半分だけが点として残っていたのです。縮小して見ているぶんには、まず気づきません。

⑤-2 見つけたのは、人ではありませんでした

正直に書きます。この塗り残しに気づいたのは、ぼくの目ではありません。AI自身が確認して見つけて、そのまま直しました

だからここでの教訓は、「最後は人ががんばって目を凝らす」ではありません。

確認する工程を、頼むときに一緒に入れておく。
そうしておけば、人が見る前に見つかります。人もAIも見落とすので、見落としを前提にした場を1回作るほうが確実です。

⑤-3 確認まで一緒に頼みます

差し替えを頼んだあと、続けてこう頼みます。これもそのまま貼れます。

できあがった画像を1枚ずつ拡大して、次の点を確認してください。

・差し替えた文字のまわりに、元の文字が欠けて残っていないか
・「:」や「-」のような小さな記号が、半分だけ残っていないか
・枠線や矢印や背景の色が、加工前と変わっていないか
・残すと決めた項目が、消えていないか

見つかったら直して、直した場所を一覧で教えてください。

⚠️「記号」を名指しで書いているのは、文字は目立つのに記号は見落とされやすいからです。実際、2回とも残っていたのは記号でした。ここを書いておくと、拾ってもらえる確率が上がります。

⑤-4 そのうえで、自分でも1回だけ見ます

最後に自分の目で見ます。ここは省けません。

とはいえ、全部を細かく見る必要はありません。残すと決めた項目が残っているかと、フォームがフォームに見えるか。この2つだけ確認すれば十分です。

⑤のまとめ
・塗り残しは、文字ではなく記号に出ます
・確認は「人ががんばる」ではなく、頼むときに工程として入れておくのが確実です
・自分で見るのは最後に1回。残すと決めた項目と、フォームらしさの2点だけ見ます

AIの「できました」をそのまま信じないための考え方は AIの「できました」を鵜呑みにしない検証術|実物を確かめる3原則 にまとめています。


⑥ STEP5|終わったあとに残るものを片づけます

⑥-1 作業の途中で、無加工の個人情報が新しく生まれています

見落としやすいのがここです。

どこを差し替えるかを合わせるために、画面の一部を切り出した拡大画像が何枚もできています。そこには加工前の氏名や口座番号がそのまま写っています。個人情報を消す作業をしているあいだに、新しい断片が増えているわけです。

⚠️ 作業が終わったら、確認用に作った画像は記事のフォルダの外へ出します。クラウドと同期しているフォルダなら、なおさらです。消す作業をしたつもりが、置き場所を増やしただけになってしまいます。

⑥-2 保存し直してから使います

画像には、見えていない情報がついてきます。撮った日時や、使った機器の情報などです。

差し替えたあとに一度保存し直すと、こうした情報は落ちます。これも「そうやって保存して」と頼めば、まとめてやってくれます。

⑥-3 プログラムは、残さなくていいです

せっかく書いてもらったのだから取っておきたくなりますが、次に同じ画面を加工することは、たぶんありません。フォームが違えば、差し替える場所も値も変わります。次に必要になったら、また頼めばいいだけです。道具を育てるのではなく、そのつど作ってもらう。この割り切りができると、ぐっと気楽になります。

クロパン
クロパン

ぼくも最初は「再利用できるように整理しておこう」と考えました。でも結局、次の記事では別のフォームで、値も場所も違いました。取っておいた意味はなかったです🐼

⑥-4 次に、もっとラクをするために

① ダミーの値のセットを決めておく
毎回同じ値を使えば、考える時間がなくなり、記事どうしの見た目もそろいます。
② 撮るときに、画面の外側を入れない
そもそも写っていなければ、消す必要もありません。
③ フォントの指定だけ、自分の環境に合わせる
うまく書き込めないときは、たいていここです。

⑥のまとめ
・消す作業の途中で、無加工の断片が新しくできています。終わったら外へ出します
・プログラムは残さなくて大丈夫。次はまた頼めば書いてもらえます
・次にラクをするいちばんの近道は、そもそも余計なものを写さずに撮ることです

この記事のまとめ
・スクショの個人情報は、1枚ずつ手で塗らなくて大丈夫です
STEP1 まず全部開いて仕分ける(そのまま使える画面が混ざっています)
STEP2 黒く塗らず、ダミーの値に差し替える(画面全体でつじつまを合わせます)
STEP3 「文字がある画素だけ塗り替えて」と頼む(欄ごと塗ると壊れます)
STEP4 拡大して確認するところまで、頼むときに入れておく
STEP5 作業中にできた画像を外へ出す。プログラムは残さなくていい

加工が済んだ画像をAIに見せて指示を出す使い方は Claude Codeに画像を見せて指示する方法|スクショ1枚で伝わる3つの場面 が入口になります。


⑦ よくある質問(FAQ)

Q
プログラミングができなくてもできますか?
A

できます。プログラムを書くのはAIのほうで、こちらは日本語で頼むだけです。ひとつだけ、Pillowという画像処理の部品が要ります。エラーが出たら「それを入れてから、もう一度やって」と返せば進みます。

Q
Windowsでもできますか?
A

できます。変わるのは日本語フォントの指定だけです。うまく文字が書き込めないときは「この環境にあるフォントに変えて」と頼めば直ります。

Q
黒く塗るのとダミーの値、どちらがいいですか?
A

記事に載せる画像ならダミーの値です。黒く塗ると、そこが何の欄だったのかが読者に伝わらなくなります。人に見せない控えなら、黒く塗るほうが速くて確実です。

Q
加工する前の画像は、どうすればいいですか?
A

記事のフォルダの外へ出しておきます。とくにクラウドと同期している場所に置いたままにしないことが大事です。手元に残すかどうかは、そのあとで決めれば大丈夫です。

タイトルとURLをコピーしました