見出し画像

2025年 バイブコーディングで作ったもの10本

今年はバイブコーディングの一年でした。

ChatGPTでコードを部分的に書いてもらっていた1月から、AIが自律的に開発をこなす12月まで。様々なAI開発ツールを試しながら、プラグインやアプリの開発に取り組みました。リリースできたFigmaプラグインは2本。プロトタイプで止まったものや検証のみのものを含めると、10本以上の開発に挑戦しました。

使用したツールも様々で、変化の多い1年でした。

  • AIコードエディタ:Cursor、Antigravity

  • CLI:Claude Code、Codex

  • フロントエンド生成:Figma Make、v0

  • ノーコード:Zapier、Agent Builder

1月から振り返ってみます。


1月:Custom Text Linter

昨年末から1月にかけて、テキストチェックのFigmaプラグインを開発・リリースしました。業務での課題をきっかけに、外部公開可能なプラグインとして仕上げました。

このころは、CursorやClaude CodeなどのAIツールはまだ試しておらず、ChatGPTに部分的にコードを書いてもらい、自分で本体コードに統合していました。

https://www.figma.com/community/plugin/1458441301140419279/custom-text-linter

3月:iOSの触覚フィードバック検証アプリ

3月ごろからCursorを使い始め、バイブコーディングでiOSアプリを開発しました。業務で触覚フィードバックの調査を進めていたため、この機会にコーディングを完全にAIに委ねてみることにしました。

細かい不具合はあったものの、数時間で目的を満たす検証用アプリを完成させることができました。

4月:AIとデザインのセカンドステージでのLT登壇

4月になると業務ではPMとしての調査やドキュメント作成にCursorを活用し、プライベートでは個人開発を試していました。

AIによるプロダクト開発の変化について、PMとエンジニア業務の自動化の姿がはっきり見えてきた一方で、デザイナー業務の自動化はまだ見えていませんでした。しかし、バイブコーディングによって開発のハードルが下がれば、デザイナーの仕事は今よりもっと広がるはずです。そんな予感から、「業務効率化だけじゃ物足りない。AIと一緒にプロトタイプ開発」というテーマでLT登壇しました。

6月:Figma MakeでSVGアニメーションの実装

6月、FigmaのAI機能としてFigma Makeのベータ版がリリースされました。試しに簡単なSVGアニメーションの実装を依頼してみました。

Figmaのフレームと動きの指示を与えるだけで、AIがアニメーション実装を行ってくれることがわかりました。

8月:Image Translator 画像翻訳Figmaプラグイン

8月は以前から欲しいと思っていた画像翻訳のFigmaプラグインを開発、リリースしました。

海外アプリの調査をする際、スクリーンショットのUIラベルなどのテキストを画像から翻訳することに手間がかかっていました。OCRと翻訳のAPIを組み合わせることで、ボタン一発で翻訳できる体験を目指しました。

開発では、調査・要件フェーズにはCursorを、コーディングにはClaude Codeを使用しました。Claude Codeはコーディング能力が高く、エージェントとして開発環境構築まで自動で行ってくれました。

その結果、これまで知見が少ないため諦めていたサーバーサイド処理や決済処理を盛り込んだプラグインを開発し、リリースすることができました。

https://www.figma.com/community/plugin/1539071623933265305/image-translator

9月:ビールカメラアプリ

9月は、数年前からハマっているクラフトビール関連のiOSアプリを作ってみることにしました。

普段、自宅で飲んだビールは写真に感想を添えてInstagramに投稿しています。ビールの写真を撮影したら、自動でブルワリーやビールのスペックを合成した画像を生成できないかと考え、バイブコーディングで試行錯誤しました。

以下のような複数の手段を試しました。

  • ビールラベルのOCR

  • 読み取ったテキストでの検索

  • 検索結果からのスペック情報の抽出

現時点では満足のいく結果が得られず、途中で開発を停止しました。

9月:Figmaのコメント内でAIレビューを依頼するプロトタイプ

9月、FigmaとZapierの連携が発表されました。これを受けて、ノーコードでFigmaにAIレビュー機能を盛り込めないか試してみました。

Zapierは複数のサービスをAPI経由で連携させるツールです。FigmaとGPTをAPI経由で連携することで、以下のような体験を目指しました。

  1. Figmaのコメントでレビューを依頼

  2. 該当画面のデザインを画像として自動取得

  3. AIがレビューを返答

プロトタイプとして実際に動作させることはできましたが、API仕様の制約により完全にノーコードでの実現は難しいことがわかりました。

10月:Figmaプラグイン開発の実演とWeb Designing掲載

運営メンバーとして関わっているFigma湘南コミュニティでは、3ヶ月に一回の頻度で勉強会を開催しています。10月は「Figmaプラグイン開発入門」をテーマに、非エンジニアの方を対象に、Cursorで20分間でFigmaプラグインを完成させるデモを実演しました。

デモで使用するFigmaのデザインはFigma Makeで作成しました。数回のプロンプト指示だけで、本物らしい架空の家計簿アプリのデザインを手軽に用意できました。

また同時期に、Web Designingさんから記事協力のお話しがありました。AIコーディング初学者がCursorでFigmaプラグインを開発する手順や、うまく完成させるためのコツを説明し、記事にしていただきました。

10月:社内用デザインチェックFigmaプラグイン

Figma湘南コミュニティのデモ用に開発したプラグインを拡張して、社内用のデザインチェックプラグインを開発しました。

このプラグインでは以下の内容を自動チェックできます。

  • TextStyleとColorStyleの適用漏れ

  • AutoLayoutの設定がエンジニアの要望に沿っているか

チェッカープラグインは実装ハードルが低く、実用性が高いので、はじめてのFigmaプラグイン開発にオススメです。

11月:iOSの写真をFigmaに直接配置するFigmaプラグインとiOSアプリ

11月、GoogleからAIエディタのAntigravityとGemini 3 Proがリリースされました。その試用も兼ねて、iOSアプリと連携して動くFigmaプラグインの開発にチャレンジしました。

仕事柄、他社アプリのスクリーンショットをiPhoneで撮影し、Figmaに配置して調査結果をまとめることが多くあります。iPhoneからFigma内に直接スクリーンショットを配置できれば手間を減らせると考え、実現性を検証しました。

試行錯誤の結果、FigmaプラグインとiOSアプリのみで完結させることは難しく、当初の想像以上に複雑な仕組みが必要なことがわかったため、開発を停止しました。

11月:登山ログビュワー

同じくAntigravityとGemini 3 Proの試用も兼ねて、登山のGPSログデータを地図上に3Dマッピングするビュワーを開発しました。

今年から趣味の登山を再開し、YAMAPで毎回ログを計測していました。YAMAPから取得できる自分のGPSログデータを読み込み、位置情報と時刻を元に3Dマップで山行を追体験できるビュワーを目指しました。

Antigravityのエージェントが、実装に必要なライブラリの調査から選定まで自律的に行い、3D可視化の実装後のブラウザ確認までこなしてくれました。

12月:Agent Builderを活用した社内チャットボット

10月ごろにOpenAIからリリースされたAgent Builderを使って、Slackで動作する社内用テキストチェックボットの構築を試しました。

Agent BuilderはノーコードでカスタマイズしたAIエージェントを作成できます。このチャットボットは、一般的な文字校正に加え、独自用語一覧を元にした文言チェックが可能です。NotionやGoogleドキュメントのURLを入力すると、Zapier MCP経由でドキュメントを取得してチェックできます。

こうしたボットをノーコードで実現できれば、エンジニア以外のメンバーも手軽にカスタマイズできます。しかし、現時点ではAgent BuilderにREST APIが提供されておらず、手軽にSlack連携できる手段がないことがわかり、プロトタイプ止まりとなりました。

ふりかえり

今年はバイブコーディングによって、開発の可能性が大きく広がった一年でした。

ChatGPTでの部分的な活用から始まり、Cursor、Claude Code、Antigravityと、次々に登場する新しいツールを試しながら開発を続けました。その結果、これまで知見が少ないため諦めていたサーバーサイド処理や3D可視化といった領域にも挑戦できるようになりました。
すべての開発が成功したわけではありませんが、短期間で実現性を検証し、技術的な課題を把握できたことも収穫です。

来年も、バイブコーディングを通じて新しいアイデアを形にしつつ、多くの方に使われるサービスを生み出したいです。


XではAIとUIデザインについて発信しています。感想やコメントなどいただけると嬉しいです!

@shingo2000

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