画像処理の教材をAIに作らせて分かったこと ― 読者像の思い違いから公開の失敗まで
前回の記事「Photoshopのあのボタンの中身を”触って”見る」で、写真の補正ボタンの中身をつまみを動かしながら確かめられるページ「ImageLab」を紹介しました。
今回は、その ImageLab を AI に作らせた過程と、途中でつまずいたこと、そこから得た教訓を説明します。
最近では AI の力を借りて、ブラウザで動くツールやゲームの作成の他に、こうした教材づくりにも取り組んでいます。
今回で約50作目となる私が、実例を交えて初心者にもわかりやすく解説します。
一般的なツール作りに比べての難しさは、見た目がそれらしく動いていても、計算が正しいかどうかは画面を見ただけでは分からないという点でしょう。
ぼかしの処理なら、何かしら絵がぼければ「動いた」ように見えてしまいます。
但し、確かめ方の段取りさえ押さえておけば、AI に任せられる範囲は思っているより広いので、ぜひ参考にしてみてください。
完成したページはこちらです。
1. 作り方は以前と同じ ― 設計書を先に、作業は段階に分けて
基本の進め方は、以前の記事「LLMの仕組みを”触って”理解するページをAIに作らせる」と同じです。いきなり「作って」と頼まず、まず設計書を作り、実装は別の作業として進めました。
今回はページの規模が大きく、処理の数も22に及んだので、次の2点を加えました。
- 段階に分ける……設計書の中で、処理を「基本」「周波数とノイズ」「二値化・センサ・幾何」の3段階に分け、1段階ずつ作らせました。
- 引き継ぎメモを1冊用意する……作業が終わるたびに、何ができて何が残っているかを AI 自身にメモへ書き足させ、次の作業はまずそのメモを読むところから始めます。
引き継ぎメモは、交代勤務の申し送りノートのようなものです。
AI は作業を新しく始めると、前回のやりとりを覚えていません。
ノートがあれば、担当が替わっても仕事が途切れません。
使ったのは、パソコンの中のフォルダを直接読み書きしながら作業する「Claude Code」です。日程は次のとおりで、設計書から公開までおよそ12日間でした。
| 日付 | できたこと |
|---|---|
| 8月30日 | 設計書 |
| 9月1日 | 基本の処理（明るさ・ぼかし・輪郭など11種） |
| 9月2日 | 重い計算を裏方に分担する仕組み（後述）、写真を楽譜に書き換える処理 |
| 9月4日 | ノイズを乗せる処理と、消し方の比較 |
| 9月6日 | 二値化・センサ・幾何の処理。設計書の処理がすべてそろう |
| 9月7日 | 画面の確認が一通り終わる。同好会で見せるための台本 |
| 9月10日 | 縞を乗せる機能を追加（後述）。公開 |
| 9月11日 | 使い方のページを追加 |
2. 中身は”本物の計算”にこだわった
LLM の記事では「数学は近似せず正確に、と明示する」ことをお勧めしました。
今回もこれを守りましたが、画像処理では、そのための工夫がもう一段必要でした。
2-1. 外部の部品を1つも使っていない
プログラムの世界には、他の人が作った計算の部品（ライブラリ）がたくさんあり、組み合わせれば手早く作れます。しかし ImageLab は、外部の部品を1つも使っていません。
前回の記事で縞を消すのに使った「写真を楽譜に書き換える計算」（フーリエ変換を速く行う FFT という計算）も、部品を借りずに一から書かせています。
部品に頼らないので、解説のパネルに書いてある計算と、実際に動いている計算が同じものだと言い切れます。
中身を見せるための道具なので、ここは大事な点でした。
では、一から書かせた計算が正しいことを、どう確かめるのか。
やったのは答え合わせです。
・遅いけれど間違えようのない、定義どおりの素朴な計算を別に用意し、答えが一致するかを突き合わせる
・写真を楽譜に書き換えてから元に戻し、1画素も狂わずに戻ることを確かめる
暗算の答えを、筆算で検算するのと同じ考え方です。
2-2. 重い計算でも画面が固まらない ― 裏方への分担
ノイズ取りの〈バイラテラル〉のような処理は、とても重い計算です。
最初の版では、計算しているあいだ（重い設定では1秒を超えます）ブラウザが固まり、つまみも動かせませんでした。
そこで使ったのが、ブラウザの「Web Worker」という仕組みです。
画面の操作とは別に、計算だけを受け持つ「裏方」を立てられます。
たとえるなら、レストランのホール係と厨房です。
ホール係が料理まで作っていると、その間はお客さんの注文を受けられません。
調理を厨房に回せば、ホール係はいつでも応対できます。
さらに、画像を横に細長く切り分けて、何人もの裏方で分担させました。
パソコンの頭脳（コア）の数だけ裏方を立てられるので、私の PC では3〜4倍速くなりました。
下の図は、分担する前とあとの違いを表したものです。
但し、ここで1つ壁がありました。
ImageLab は「ファイルをダブルクリックするだけで動く」ことを条件にしていましたが、ダブルクリックで開いたページには、ブラウザが安全のため、裏方用のファイルを読み込ませてくれないのです。
解決のしかたは、裏方への指示書を別のファイルにせず、ページの中で文字として書き上げてから渡すというものでした。
外から業者を呼べないので、社内で手順書を書いて渡した、というところです。
もちろん、分担して計算した結果が、一枚まるごと計算したときと1画素も違わないことも、答え合わせで確かめています。
2-3. 確かめる仕組み ― 自動で664項目、人の目で48項目
確かめ方は、最終的に次の2本立てになりました。
- 自動チェック（664項目）……計算が正しいかを機械で確かめる項目です。処理を1つ足すたびに、AI にチェック項目も足させました。
- 人の目での確認（48項目）……見え方と操作感を、私が画面で確かめる項目です。手元のファイルを直接開いた画面は、AI の側からは確かめられなかったため、AI に「開き方／操作／合格の見え方」の3列の表を書かせ、私がその通りに操作して結果を伝えました。
面白かったのは、人の目の確認で「合格の姿と違う」ものが出たとき、プログラムではなく、AI が書いた確認手順のほうが間違っていたことが5件あったことです。
「こう見えれば合格」という基準そのものが誤っていたわけです。
そのうち4件は、効果が見えにくいお手本の絵を選んでいたのが原因でした。
計算の正しさは機械に、見え方は人に。そして、AI が書いた合格の基準も、そのまま信じない。
これが今回の確かめ方の要点です。
下の図に、確かめ方の全体をまとめました。
3. 誤算1 ― 読者像を思い違いしていた
ImageLab は、もともと私が参加している画像処理同好会で見せるために作り始めたものです。
ところが設計書には「同好会向けの本格的なデモ集」としか書いていませんでした。
AI はこれを「技術者の集まり」と受け取り、専門用語や数値を読み上げる、上級者向けの実演台本を先に作ってしまいました。
実際の同好会は、Photoshop の使い方を学ぶところから始まった会で、専門用語や数値よりも、写真がどう変わるかを見たい方が中心です。
そこで台本を次のように作り直しました。
・機能を順番に紹介するのをやめ、「写真の困った」を6つ取り上げる形にした
・数値は読まない。見えるものだけで話す
・用語は Photoshop のボタンの名前と日常の言葉に置き換える（例：スペクトル → 写真という曲の「楽譜」）
前回の記事の構成は、この作り直した台本がもとになっています。
上級者向けの台本も無駄にはせず、質問が出たときの引き出しとして残しました。
教訓は、読者像は最初に具体的な言葉で伝えることです。
「誰に」「どれくらいの知識を前提に」「何を持ち帰ってほしいか」。
LLM の記事で書いた、目的を決まった型に当てはめて書く話と同じで、AI は書かれていないことを、もっともらしく補ってしまいます。
4. 誤算2 ― 実写では縞のデモが作れなかった
同好会で見せる台本の山場は、前回の記事で紹介した「写真に入った縞だけを消す」場面です。これには、縞の入った写真が要ります。
ところが、私が撮った写真で3回試して、3回ともうまくいきませんでした。
・雑誌やパソコンの画面を撮った写真……模様が細かすぎて、処理のために縮小すると消えてしまうか、別の模様（モアレ）に化けてしまう
・網戸越しの風景……斜めから撮るので、網の目の間隔が場所ごとに変わり、楽譜の上で1つの点に集まらない
AI に原因を整理させると、実際の写真でこの実演を成り立たせるには「模様が太い」「画面全体を埋める」「斜めに走っている」「正面から平らに写っている」の4条件が要り、全部をそろえるのは難しいという結論でした。
そこで、見せ方のほうを変えました。
ImageLab に「写真にわざと縞を乗せる」機能を足し、乗せてから消す形にしたのです。
前回の記事の縞入り写真は、こうして作ったものです。
乗せた本人が消すので、何が起きたのかもかえって分かりやすくなりました。
教訓は、見せたい材料が手に入らないときは、材料を探し続けるより、見せ方を変えることです。
5. 誤算3 ― 公開したら画面が文字だけになった
完成した ImageLab は、「GitHub Pages」で公開しました。
GitHub（プログラムを置いておくサービス）の無料の仕組みで、ファイルを置くだけで Web ページとして公開できます。
ブラウザの画面からファイルを上げる方法を選んだのですが、1回目は失敗しました。
開いてみると、色も枠線もなく、文字だけが並んだ画面になっていたのです。
原因は、ファイルの上げ方でした。
・GitHub の画面の［choose your files］から選んだところ、上がったのは7件だけだった
・見た目を決めるファイルと、動きを決めるファイルの入ったフォルダが丸ごと抜け、全42件のうち35件が欠けていた
・ファイルを選ぶ画面では、フォルダを選べない。フォルダごと上げられるのは、枠へのドラッグ＆ドロップだけだった
足りないフォルダをドラッグ＆ドロップで追加し、無事に動くようになりました。
公開するときの留意点は次のとおりです。
- ドラッグ＆ドロップで上げる……上げる前の一覧に、フォルダの中身まで並んでいるかを確かめてから確定する
- 反映には1〜2分かかる……上げ直してもすぐには変わりません。少し待ってから Ctrl + F5（強制再読み込み）を押す
- 初めて開く人の目で見直す……公開後に見直して、使い方のページを足しました。作った本人には分かっていても、初めての人には「何から触ればいいか」が分からないためです。LLM の記事と同じ教訓が、今回も当てはまりました
6. 写真に位置情報が残っていた
公開の準備中に、もう1つ気づいたことがあります。
同好会の実演用に用意した写真を公開ページに同梱するか検討していたとき、AI に調べさせると、5枚のうち4枚に、撮影場所の緯度・経度が記録されていました。
スマートフォンやデジカメの写真には、「Exif（イグジフ）」と呼ばれる撮影情報が付いています。
撮影日時や機種のほか、設定によっては撮影場所の位置も記録されます。
写真をそのまま公開すると、自宅や行きつけの場所が分かってしまうことがあります。
公開は取り消しがききません。
そこで ImageLab には写真を同梱せず、合成のサンプルだけで始めることにしました。
前回の記事で使った写真も、位置情報を含む撮影情報を消したコピーです。
確かめ方と消し方は、次のとおりです。
- Windows で確かめる……写真のファイルを右クリック →［プロパティ］→［詳細］タブを開きます。「GPS」の欄に緯度・経度があれば、位置情報が残っています。
- Windows で消す……同じ［詳細］タブの下にある「プロパティや個人情報を削除」を押し、「可能なすべてのプロパティを削除してコピーを作成」を選びます。元の写真は残り、情報を消したコピーができます。
- iPhone から送るとき……写真を共有する画面の上にある「オプション」を押し、「位置情報」をオフにします。
但し、写っている景色や看板から場所が分かることもあります。
撮影情報を消せば必ず安全、というわけではないので、写真の中身にも目を配ってください。
まとめ
画像処理の教材 ImageLab を AI に作らせた過程と、途中でつまずいたことを説明してきました。
要点を振り返ります。
・設計書と引き継ぎメモで、作業を段階に分けて進める
・計算の正しさは、素朴な計算との答え合わせと自動チェックで確かめる
・見え方は人が確かめる。AI が書いた合格の基準も疑う
・読者像は最初に具体的な言葉で伝える。書かれていないことは、AI がもっともらしく補ってしまう
・材料が手に入らなければ、見せ方を変える
・公開の前に、上がったファイルと、写真の位置情報を確かめる
なお、1日で作り終わるような小さなツールであれば、引き継ぎメモまでは要らないかもしれません。
作業が何日にもわたり、途中で新しく作業を始め直すような規模になるほど、メモの効き目は大きくなります。
AI に任せられる範囲が広がるほど、人が決めるべきことがはっきりしてきます。
誰に見せるのか、何が見えれば合格なのか、何を公開しないのか。この3つを押さえて取り組めば、それぞれの目的に見合った教材を、思っているよりずっと手軽に形にできるでしょう。
関連記事
- Photoshopのあのボタンの中身を”触って”見る ― 写真の「困った」6つで学ぶ画像処理
- LLMの仕組みを”触って”理解するページをAIに作らせる
- 70代でもAIでプログラミングはできるのか？——79歳の私が1年で10作品を公開した実体験
“画像処理の教材をAIに作らせて分かったこと ― 読者像の思い違いから公開の失敗まで” に対して1件のコメントがあります。