3
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【Claude Code】非エンジニアが1行もコードを書かずにAI搭載の「画像トリミングツール」を作った話

Last updated at Posted at 2026-01-19

最近よく聞く生成AIで誰でもアプリ開発という話題。

正直なところ、「そうは言っても、結局は専門知識がないと途中で詰むんでしょ?」と半信半疑でスルーしていました。

ですが、年末年始の時間を使って Claude Code を実際に触ってみて、その考えを改めました。

疑ってかかったのに、本当にコードを書かずに自分専用のツールが作れてしまったんです...!

完全無料の最強の画像トリミングツール

簡単な自己紹介

普段はデータアナリストとして、SQLやJupyter Notebookを使った分析業務をしています。

ただ、コードは書けてもアプリ開発となると話は別。完全に素人です。

実際、私の開発スキルはこんな状態でした。

  • Gitはコマンドが覚えられず、GUIツール頼み。
  • 環境構築がわからず、気づけばMac内にPythonが7個もインストール済み。
  • Anaconda環境で pip install を混ぜてしまうなど、パッケージ管理も自己流。

いつもなら環境構築で詰まって諦めていたはずですが、今回は違いました。 Claude Codeのおかげで、たった1日で自分が必要としていたツールが完成してしまったのです。

何を作ったのか?

まずは成果物を見てください。

スクリーンショット 2026-01-18 17.39.43.png

完全無料の最強の画像トリミングツール

私がClaude Codeに完全丸投げして作った、無料でログイン不要で使える画像トリミング専用ツールです。

無料で使えるトリミングツールの多くが1枚ずつしか処理できないのが不便だったので、最大30枚まで一括で処理できるようにしました。自作ならではのこだわりです。

スクリーンショット 2026-01-18 17.40.11.png

また、AI機能もつけており、「自動トリミング」ボタンを押すだけで被写体が真ん中に来るように自動調整されます。

主な特徴

  • 完全無料・登録不要・回数制限なし
  • 最大30枚の一括処理
  • AI自動トリミング(被写体を検出して中央配置)
  • スマホでも使いやすいデザイン

無料で会員登録なしで、ここまでの機能性と使いやすさを備えた画像トリミングツールは他にはないかなと自負しています。

なぜ作ったのか

きっかけは非常に単純で、既存の無料ツールが、自分のやりたい作業に合っていなかったからです。

業務やブログ用の素材準備などで、大量の画像をトリミングする必要があったのですが、Google検索で出てくる無料ツールを使ってみると、いくつかの「壁」にぶつかりました。

  • 手間がかかる: 1枚ずつしかアップロードできず、何十枚も処理するには時間がかかりすぎる。
  • 制限が多い: 「一括処理は有料会員のみ」「1日10枚まで」といった制限がある。

本来ならここで「ないなら作ろう」となるのがエンジニアの方々だと思いますが、前述の通り私はアプリ開発の素人です。これまでは「諦めて地道に手作業」か「使いにくいツールを我慢して使う」しか選択肢がありませんでした。

しかし、Claude Codeを使えば、インフラ知識ゼロの私でも『自分専用の道具』が作れるかもしれないと思い立ったのが、今回の開発のスタート地点です。

素人がどうやって指示を出して完成まで導いたか

「コードを書かずに」と言っても、AIへの指示出し(プロンプト)は重要です。 ただ、私は専門的な要件定義など書けません。

そこで、優秀なエンジニアに、ふわっとした要望を投げて相談するというスタイルを徹底しました。 具体的に工夫したのは以下の3点です。

1. 「仕様書」ではなく「例え話」で伝える

かっこいい仕様書は書けないので、やりたいことは既存のツールを例に出して伝えました。

  • Photoshopの切り抜きツールみたいな操作感にしたい
  • Canvaみたいに、プリセットを選んで一発変換したい

言葉で「ドラッグ操作で座標を取得して…」と説明するのは大変ですが、「Photoshopっぽく!」と言えば、Claude Codeが意図を汲み取ってくれます。 おかげで、専門用語を使わずに理想のUI/UXが伝わりました。

2. 「わからないこと」は選択肢を出させて選ぶ

開発中に「サーバー側の構成はどうしますか?」と聞かれたのですが、正直ちんぷんかんぷんです。 そこで、知ったかぶりをせずにこう返しました。

「サーバー管理は難しくてできないので避けたいです。 いくつか実現方法の選択肢と、それぞれのメリット・デメリットを教えてください。その中で一番のおすすめはどれですか?」

すると、「WebAssemblyなどを使ってブラウザ(クライアント)だけで完結させる方法」を提案してくれました。 結果、サーバー代ゼロ・管理コストゼロの構成になり、大正解でした。

AIに決めてもらうのではなく選択肢を出させて、意思決定だけ自分でするのがコツです。

3. 動作確認もデバッグも「視覚」に頼る

コードが読めないので、エラーが出てもログを見てもわかりません。 なので、徹底して見た目とAIの目を使いました。

  • スクショで修正指示: 意図と違う動きをしたら、画面のスクショを撮って貼り付け、**なんかここがズレるんだけど、原因わかる?**と聞くだけ。これで大体直ります。
  • Playwright MCPで動作確認: 自分でテストするのが面倒だったので、Playwright MCPを使って、Claude Code自身にブラウザを操作・確認してもらいました。

「自分でコードを追わない」。 何かあったら「スクショを投げる」か「AIに操作させる」。 この徹底した横着こそが、挫折せずに完成できた理由かもしれません。

非エンジニアがどこまで実装できたか

本来ならここでコードの解説をするべきですが、前述の通り私は中身をよくわかっていません。
その代わり、素人がAIに頼ったら、技術的にどこまで高度なことができたのという機能の到達点を共有します。

「Pythonをちょっと触れるレベル」の人間が、Claude Codeを使うと1行もコードを書かずにここまでいけます。

1. 最大30枚の一括処理

スクリーンショット 2026-01-18 18.50.58.png

フォルダから画像をまとめて選択して、ドロップするだけ。
30枚の画像が一覧表示され、サムネイルをクリックで切り替えながら編集できます。

スクリーンショット 2026-01-18 18.51.26.png

編集が終わったら「ZIPでダウンロード」を押すだけ。
30枚が1つのZIPファイルにまとまって降ってきます。

これがやりたかったんで、これだけで満足です。

2. よく使うサイズをワンタップで適用

スクリーンショット 2026-01-18 18.56.02.png

プリセット 比率 用途
フリー 自由 好きな範囲で切り抜き
1:1 正方形 1:1 Instagram投稿
4:5 縦長 4:5 Instagram縦長投稿
9:16 ストーリー 9:16 Instagram/TikTokストーリー
16:9 横長 16:9 YouTubeサムネイル
2:3 2:3 Pinterest

プリセットを選ぶと、全画像に一括で同じ比率が適用されます。

3. AI自動トリミング(被写体検出)

ここがこのツールの隠れた目玉機能であり、私が一番驚いたポイントでもあります。

動画 (1).gif

「自動トリミング」ボタンを押すと、AIが画像内の被写体(人物・物体)を検出して、被写体が中央に来るようにトリミング範囲を自動調整してくれます。

まさかコードを1行も書けない自分が、自作アプリに「AI機能」を実装できてしまうとは……。

これには本当にびっくりしました。

スクリーンショット 2026-01-18 17.40.11.png!

機能としても実用的です。

「全画像に適用」にチェックを入れれば、30枚まとめて一発で被写体中央配置が完了。人物写真を大量に処理するときなど、手作業には戻れない便利さです。

4. スマホでも使える(後から追加!)

スクリーンショット 2026-01-18 19.22.01.png

実は当初、PCでの利用しか考えていませんでした。

でも、ある程度動くものができてから「これ、スマホでも使えたら最高じゃね?」と思い立ち、スマホでも使えるように、レスポンシブデザインにしてと無茶振りしてみました。

普通ならレイアウトの組み直しで大変な作業だと思いますが、Claude Codeは一瞬で対応してくれました。PCがなくても、スマホのブラウザでそのまま動きます。

  • 指でトリミング範囲をドラッグ調整
  • プリセット選択もタップで完了
  • ダウンロードは「共有」メニューから保存

「後から思いつきで機能追加」なんて、人間相手なら怒られそうな案件ですが、文句ひとつ言わずにやってくれるのがAIのいいところですね。 出先でサッと画像を整えたいときに重宝しています。

まとめ:技術の壁はなくなった。必要なのは「妄想」と「言語化」だけ

今回、Claude Codeを使ってみて痛感したのは、アプリ開発の民主化がついにここまできたという事実です。

これまでの私は、「いいアイデア」があっても、その手前にある「環境構築」や「エラー対応」という高い壁に阻まれて、スタートラインにさえ立てませんでした。

しかし、今回の開発で私がやったことと言えばこれだけです。

  1. 「やりたいこと」を妄想する(30枚一括でやりたい!面倒なのは嫌だ!)
  2. 「既存の例」で伝える(Photoshopっぽく!Canvaっぽく!)
  3. 「わからないこと」は聞く(サーバーとか無理なんで、いい感じの方法教えて!)

コードを書く技術よりも、何を作りたいかを具体的にイメージする力と、それをAIに伝える言語化能力のほうが重要だと感じました。これなら、非エンジニアの私でも戦えます。

もし、あなたにも「あったらいいな」と思いつつ、「どうせ自分には作れない」と諦めていたアイデアがあるなら、ぜひ一度 Claude Code にその妄想をぶつけてみてください。

きっと、想像よりもずっと簡単に、そのアイデアは動き出します。

最後に、今回私が作った「妄想の結晶」を置いておきます。 会員登録不要で誰でも使えるので、画像のトリミング作業が発生した際は思い出してあげてください。

完全無料の最強の画像トリミングツール

(バグがあったら……その時はまたスクショを撮って、AIに直してもらいます!)

3
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?