見出し画像

AIと会話するだけで、画像編集ツールが1つできた話

「写真を正方形に切り抜きたい」

いつもはわざわざ「邪魔くさ・・・」と思いながら重たい画像編集ソフトを立ち上げてたのですが、
「せや、Claudeさんに聞いてみよう」と思い立ち、

写真をアップロードして、画像を拡大縮小移動して、好みの位置を中心に指定のサイズに変換できるアプリって作れる?

原文ママ

今読み返すと要領を得ない取り止めのない文章でClaudeさんにお伺いを立てたところ、

はい、作れます。ブラウザだけで動く単一HTMLファイルで実現できます。方向性だけ確認させてください。

原文ママ

と、ご快諾いただき、幾つかの方向性に関する打合せ(?)を行うと、数分後には自分専用のツールが手元にありました。

って、話。

ちなみに、Claude Pro、Coworkにて作成しております。




きっかけは、ちょっとした不便

冒頭と内容が重複してしまいますが、

私は普段、建設業の仕事で「施工計画書」などを作成しています。その際、文章の間に位置図などの画像を挿入するのですが、画像のサイズ感がバラバラだと見栄えがよくないと感じていました。

しかし、毎回重たい編集ソフトを起動するのは面倒ですし、Web上の無料ツールを使うとなると、「社外のサーバーに写真をアップロードしてセキュリティ上問題ないだろうか」という不安が残ります。人物の顔が写っている画像であれば、なおさら気になります。

一つひとつは小さな不便ですが、毎回発生することで地味にストレスが積み重なっていました。

そこで、Claudeさんにこう相談してみました。

写真をアップロードして、画像を拡大縮小移動して、好みの位置を中心に指定のサイズに変換できるアプリって作れる?

返ってきたのは「作れます」という返事と、いくつかの確認でした。

  • 出力サイズは自由入力にするか、定型サイズから選ぶ形にするか

  • スマホのピンチ操作は必要か

  • 書き出しはPNGかJPEGか

答えを選んでいくと、数分後には動くものが手元にありました。


できたもの

ブラウザで開くだけの、1ファイルのアプリです。

  • 写真をドラッグ&ドロップで読み込む

  • ドラッグで移動、ホイールやピンチで拡大縮小

  • 切り抜き枠の外は暗く表示されるので、何が切り落とされるかを見ながら位置を決められる

  • 好きなサイズを指定して書き出す

使ってみると欲が出てきて、そのまま続けて頼みました。

図形挿入、モザイク挿入などの機能を追加できます?

こうして、モザイク・ぼかし・矩形・円・矢印・フリーハンド・テキスト・画像の重ね合わせが加わりました。置いた要素は後から選んで動かせますし、間違えたら Ctrl+Z で戻せます。



面白かったのは「設計の相談ができる」こと

正直なところ、コードが書けることそのものより、こちらのほうが印象に残りました。

モザイク機能を追加するとき、Claudeさんはこう言いました。

図形やモザイクの座標は画面座標ではなく画像座標で保持する必要があります。そうしないと、拡大縮小や回転をした瞬間にモザイクが顔からズレます。

言われてみれば当たり前の話です。しかし、私はその問題を思いつきもしませんでした。

指示していない品質を、勝手に担保してくる。 ここが従来の「コードを書いてくれるツール」との違いだと感じました。

実際、完成したアプリでは、モザイクを入れた後に構図を変えても、モザイクは対象に貼り付いたまま追従します。

同じように、こんな判断もClaudeさんから提示されました。

  • 別アプリに分けると書き出しが2回になり画質が落ちるので、1つに統合すべき

  • 元画像より拡大している場合は「書き出しがぼやけます」と警告を出すべき

  • ぼかし機能に非対応のブラウザ向けに、代替処理を用意しておくべき

こちらが気にしていなかった観点を、先回りして潰してくれる。そんな感覚でした。


いちばん気に入っている点

画像が一切どこにも送信されないことです。

すべての処理がブラウザの中だけで完結します。写真がサーバーに上がることはありません。顔や書類にモザイクをかけたいとき、この安心感は代えがたいものがあります。

もともとの動機は「サイズを変えたい」でした。結果的に手に入ったのは「安心して使える」という、より大事な部分でした。


触ってみてください

下に埋め込んであります。写真を1枚放り込むだけで動きます。

ま、あくまで個人で使う用に作ったものですが・・・

※ 記事内では画面が窮屈なので、実際に使う場合は別タブで開くことをおすすめします。

※ 記事内では画面が窮屈です。実際に使う方はこちらからどうぞ。


特別なことはしていません

プログラミングの知識が必要だったかというと、正直ほとんど使っていません。やったことは、

  1. やりたいことを、普通の日本語で伝える

  2. 聞かれたことに答える

  3. 使ってみて、気になった点を伝える

この繰り返しだけです。

もちろん、Claudeさんが出してきた設計の説明を読んで「なるほど」と理解する程度のことはしています。でもそれは、コードを書く能力とは別のものです。

自分がほしいものを言葉にできれば、形になる。そういう時代になったのだと実感しました。

で、結局何が言いたいかというと、

何か「これがあれば便利なのに」と思っているものがあれば、一度AIに相談してみてください。案外あっさり出てくるかもしれません。

ってこと〜。



いいなと思ったら応援しよう!

Fushiki よろしければ応援お願いします! いただいたチップはなんやかんやと活動費に使わせていただきます!

この記事が参加している募集