はじめての「バイブコーディング」で画像軽量化ツールを作ってみた

バイブコーディング（Vibe Coding）とは、人間が自分でコードを書かず、AIに「こんな感じのアプリを作りたい」と雰囲気（Vibe)で大まかな指示を出し、チャットで対話をしながらシステムやアプリを開発する手法のことをいいます。

最近はChatGPTのCodexや、Claude Codeといった生成AIを使ってこのバイブコーディングをする人が増えてきました。

便利なツールやアプリを作ったり、ゲームを開発したり、その様子を見ているとかなり楽しそうなので、「これは手を出したら沼にハマるな……」と思って関わらずにいたのですが、つい先日自分でもやってみてしまいました。

Codexで画像圧縮ツールを作ってみた

開発を思い立ったのは、自分用の写真圧縮ツールがほしかったから。

スマホで撮影した写真は高画質ですが、その分容量も大きく、ブログサイトなどにそのまま投稿するとページの表示が遅くなるというデメリットがあります。

もちろん圧縮できるツールはたくさんありますが、広告が表示されて使いにくいものも多く、かといって画像編集ソフトをいちいち立ち上げるのも面倒。

そこで、ちょうど自分に合った感じのツールをバイブコーディングなら簡単に作れるのではないかと思い立ったわけです。

まずはChatGPTに相談

とはいえ、バイブコーディングが簡単そうとは聞いていますが、実際に触れたことはないので勝手がまったくわかりません。

ChatGPTに相談しながらやり方を聞き、作りたいツールの理想的な内容、仕様を伝えて、Codexにコピペすればすぐに作れるようにプロンプト（指示文）を整えてもらいました。

Codexにプロンプトをコピペ

続いて、PCアプリ（Mac版）のChatGPTからCodexを開き、プロンプトをコピペしました。

すると、わずか4分10秒で作業が完了。サーバーにアップロードする用のファイルが生成されました。

実際にアップロードをすると基本的には問題なく動作。
ただ細かい部分が気になったので、Codex上で指示を伝え、即座に修正をしてもらいました。

ファイルアップロードやファイルの扱いさえ慣れていれば、ChatGPTと会話をするのと何ら変わりませんね。とても簡単でした。

合計1時間もかからずに完成してしまった！

そして完成したのがこちら。（個人用なのでURLの公開はご容赦ください）

圧縮したい画像を選択したり、ドロップすると一瞬で画像容量を圧縮してくれます。

もちろんスマホからもできますし、いちいち広告が表示されることもありませんし、余計な設定もないのでとにかく快適。圧縮後の画質も問題なく、本当に自分好みの便利なツールができあがりました。

ふと思い立って、ChatGPTに相談をし始めてから、アップしていい感じに改良を終えるまで、その時間はわずか1時間弱！

AIを使わずにエンジニアに相談し、作ってもらったとしたら、いったいどれだけの時間とコストがかかったでしょうか……。本当に便利な時代になりました。

ただし、これだけ簡単に作れたのはそもそもシンプルなツールだからというのは大きいはず。

もちろん人間が細かくコードをチェックして慎重に作った方がいいものもたくさんありますし、AIを使うにしても知識がある人が作ったほうが精度が高いものはできるのは間違いないでしょう。

でも、何か思いついた方はいつも使っているAIに気軽に相談をしてみるといいかもしれませんね。もしかしたらあなたも便利なツールや面白いアプリなどを作り出せるかもしれません。