みなさん、『Vibe Coding』してますか？

AIの急速な進化と共に「Vibe Coding（バイブ・コーディング）」という言葉が生まれてから早くも数ヶ月が経ちました。

「Vibe Coding」とは、AIと自然言語で対話し、コードを意識せずにアプリやWebサイトを構築する新しいコーディングスタイルのことです。

Google CEOのSundar Pichaiも「これから人々はAIを使ったアプリを簡単に作れるようになり、バイブコーディングのような方法でそれを行うだろう」と発言。このバイブでコーディングする波は急速に高まっています。

出典：https://youtu.be/1IxG7ywSNXk?si=PtI-HQaR9MfenO0Q&t=1246

『これから人々はAIを使ったアプリを簡単に作れるようになり、バイブコーディングのような方法でそれを行うだろう。

他にも様々な呼び方があるが、これからそのような創造の力が解き放たれていくだろう。まだその表面を掻いただけだ。

現状のモデルはある程度のコード生成はできるが、洗練されたものを作るにはまだプログラマーである必要がある。しかし、その限界も急速に拡張している。』Sundar Pichai

そんな中、Googleをはじめ、Figmaまでもが自然言語でアプリやWebサイトのUIを作成できるアプリを公開しています。

本記事では、今回は新しく登場した、非エンジニアでも活用できる3つのバイブコーディングツール「Figma Make」、「AI Studio Build」、「Stitch」について、独自の機能、活用事例、ユーザー評価などの観点から比較していきます。


機能比較

① 概要と主な特徴

  • Figma Make（β）:
    Figmaが提供するAIツール。AIとのチャットやコードの直接編集が可能で、特に既存のFigmaデザインをベースにUIを生成できるのが特徴です。

  • Google AI Studio Build機能（β）:
    Gemini SDKをベースとしたGoogle AI Studio内の開発環境です。プロンプトからWebアプリの雛形を生成し、自由にカスタマイズできます。特にGemini APIを手軽に統合できる点がメリットです。

  • Google Stitch（β）:
    自然言語や画像を使ってモバイル/Web UIデザインや静的HTMLを生成します。デザインの初期アイデア出しに適しており、生成したデザインはFigmaに直接コピペ可能。Gemini 2.5 Proモデルを搭載し、画像アップロードにも対応しています。

基本的には過去に研究所の記事でも紹介している v0 や Replit のように自然言語でUIやアプリを作成できます。
Stitch以外は、生成後にプラットフォーム上でコードを修正・変更できます。


② 対応プログラミング言語・技術スタック

  • Figma Make:
    React（TypeScript）ベースのWebフロントエンドコードを生成します。生成されたコードは閲覧・直接編集可能で、AIとの対話を通じて改良できます。コード生成にはClaude 3.7 Sonnetモデルを使用しています。

  • Google AI Studio (Build機能):
    Gemini SDKを利用してReact（TypeScript）ベースのWebアプリを構築します。ただし、Next.jsなど主要なフレームワークには対応していません。アプリはブラウザ上でサンドボックス実行されます。使用されているAIモデルについては非公開です。

  • Google Stitch:
    主に静的なHTMLを生成するデザイン特化型ツールです。Standard ModeはGemini 2.5 Flashを使用し、Experimental Modeではより高品質なUIを生成可能なGemini 2.5 Proを利用します。ただし、現時点でFigmaへのエクスポートはStandard Modeのみ対応しています。


③ 出力形式・連携機能

・Figma Make: 生成したアプリは専用URLで公開でき、カスタムドメインも利用可能です。Google Analyticsやカスタムコードを挿入して他の分析ツールと連携できます。

さらに、右上の設定アイコンから、公開サイトのタイトル、メタディスクリプション、言語、ファビコン、OGP画像、Google Analytics IDの設定や、検索エンジンへのインデックス除外、カスタムコード（head/body）の挿入といった詳細な設定も可能。

また、Figma Make特有の強みとして、既存デザインやFigma Communityのアセットを活用し簡単にデザイン生成ができます。ただし、生成した内容をFigma Designに戻す機能はなく、今後のアップデートに期待されています。

・Google AI Studio (Build機能): 生成したアプリはGoogle Driveに保存され、Driveの共有設定に従って安全に外部共有可能です。さらに、Cloud Runへのデプロイで公開URLを取得したり、zipファイルとしてのダウンロードにも対応しています。

・Google Stitch: Stitchの大きな特徴は、生成したUIデザインをFigmaに直接ペーストできる点です。また、HTMLコードのコピーも可能です。

Figmaにコピペ：


④ 提供プラン・料金体系

各ツールの利用料金や提供プランをまとめます。

Figma Make:

  • 利用条件: Figmaの有料プラン（Professional, Organization, Enterprise）の「Full seat」ライセンスが必須。

  • 料金: ベータ期間中は「Full seat」の料金（例: Professionalプラン ¥2,400/月～、年払いの場合）に含まれ、追加費用は発生しません。正式リリース後は上位リミットの購入オプションが予定されています。

  • 利用制限: ベータ期間中は利用上限あり。ホスティングやカスタムドメインもベータ期間中は追加料金なしで利用できます。

Google AI Studio Build機能:

  • 料金: 基本無料。ただし、Gemini APIの利用量によって料金が発生する場合があります。

  • Cloud Run連携時: Cloud Runへのデプロイ時は別途料金が発生します。

Google Stitch:

  • 料金: 現在、無料で提供。

  • 利用制限: 月間生成回数に上限あり（Flashモード: 350回、Experimentalモード: 50回、変更の可能性あり）。