AIツール 101

Google Stitchレビュー:AIに話しかけてアプリを形にしてみた

mm
Unite.AI を Google の優先ソースに追加
開示:

Unite.AIは、レビュー製品へのリンク利用により報酬を受け取る場合があります。これは当社の編集評価に影響しません。 アフィリエイト開示をご覧ください。

A man telling AI what to create and it is creating an app.

アプリのアイデアが頭の中ではっきりしていて、実物が見えるように感じることはありませんか。それなのに、デザインツールを開いた途端、イメージが消えてしまうのです。

頭の中のアイデアと画面上の形の間にあるその隔たりを埋めようとしているのが、Google Stitch (GOOGL )です。実際に使った私の感想では、かなり近いところまで来ています。

Stitchは、ほかのAIデザインツールとは違います。見栄えを整える前に、新しい仕組みを覚えたり、キャンバス上で部品を動かしたりする必要がありません。

使い方はとても簡単です。作りたいアプリやウェブサイトを説明すると、数分で画面全体のデザインが現れ始めます。希望すれば音声で説明することもできます。

このGoogle Stitchレビューでは、長所と短所、概要、適したユーザー、主な機能を紹介します。その後、旅行の持ち物チェックリストアプリのUIデザインを私がどう作ったかをお見せします。

最後に、Stitchを私が選んだ三つの代替ツール(Base44、Softr、Draftbit)と比較します。読み終わる頃には、Stitchが自分に合うか判断できるはずです。

総評

Google Stitchなら、テキスト、音声、スケッチから驚くほど簡単にUIを作れます。Figmaやコードへの書き出しが可能で、手作業でもAIに話しかけても、リアルタイムでデザインを調整できます。短時間のプロジェクトには便利ですが、デザインがありきたりになりやすく、細かな制御には限界があり、複雑な操作フローは苦手です。

長所と短所

  • テキスト、音声、スケッチ、画像からUIをすばやく生成できる
  • 編集可能なレイヤーと、レイアウト・コンポーネントを保ったままFigmaに書き出せる
  • Voice Canvasで会話しながらリアルタイムに調整でき、デザイナー以外にも適している
  • 開発者向けにHTML/CSS、Tailwind、JSX形式で書き出せる
  • 無料で利用でき、利用上限にも余裕がある
  • 出力がありきたりになり、ブランドに合わない場合がある
  • Markツールが狙った要素を捉えられないことがある
  • 余白、階層、配置を細かく制御しにくい
  • 月間生成上限により、大量の利用が制限されることがある
  • 複雑な操作フローは苦手

Stitchとは?

Google Stitchのホームページ。

Google Stitchは、Google Labsが提供するUIデザインツールです。AIを使って、テキストプロンプト、スケッチ、スクリーンショットをレスポンシブなウェブサイトやモバイルアプリに変換します。

例えば、Stitchに「ダークテーマでカード型レイアウトの、フィットネスアプリ用モバイルダッシュボードを作って」と伝えると、実際のコンポーネントを使ったインターフェース全体の作成が始まります。フロントエンドのHTMLとCSSを書き出せるため、一から作り直さずに開発者へ渡したり、既存のワークフローに直接組み込んだりできます。

成り立ち:Galileo AI

ただし、Stitchは突然生まれたわけではありません。Googleは実際にGalileo AIというスタートアップを買収しました。同社はテキストや画像からUIデザインを生成する技術を専門としていました。Googleはこの技術を自社のエコシステムに取り込み、「Stitch」へと名称を変更しました。

つまり、使っているのは、デザイナーたちがすでに相応の料金を払っていたツールの進化版です。基盤モデルは一から作られたのではなく、改良されたものなのです。

最初の公開

正式な初公開はGoogle I/O 2025でした。これはGoogleの年次開発者イベントです。ただし、当初のバージョンにはまだ粗削りなところがありました。

大きく注目されるきっかけは、2026年3月の刷新でした。画面がすっきりし、出力の質も向上して、試作品というより実務で使えるツールに感じられるようになりました。

「Vibe Design」のツール

StitchがほかのAIデザインツールと違うのは、「Vibe Design」のツールだという点です。「12列のグリッドに16pxの列間隔」といった技術仕様ではなく、求める「雰囲気」を伝えます。

例えば、「瞑想アプリ向けの、落ち着いて信頼感のある導入画面」と説明します。Stitchは意図をくみ取り、実際に使えるUIデザインへ変換します。

ブラウザで動作

私が特にありがたいと感じた点を最後に挙げると、インストールが不要なことです。ブラウザでstitch.withgoogle.comを開くだけです。面倒なアカウント設定も、メモリを消費するデスクトップアプリのダウンロードもありません。そのまま使えます。

最新のGemini Proで動くツールが、すべてブラウザ内で完結するのはなかなか印象的です。

以上がStitchの成り立ちです。使いやすいこのツールは、多くの人のUIデザインに対する考え方を変える可能性があります。

Stitchは誰に向いている?

Google Stitchが特に向いているのは、次のような人たちです。

  • 個人で製品を作る人:専門的な技術知識がなくても、アプリのアイデアをすばやく操作フローやコードに変えられます。
  • フロントエンドチーム:CLIでデザイン要素の別案を自動生成し、プロジェクトをTailwindやJSX形式で書き出せます。
  • プロダクト責任者:デザインの別案を作り、顧客の目標とすばやくすり合わせられます。
  • 技術職ではない創業者:Vibe Designと音声コマンドを使い、思い描くものを話すことでアプリを形にできます。
  • 制作会社:無限キャンバスで複数のデザイン方針を検討し、顧客との打ち合わせ中にリアルタイムで修正を重ねられます。

Stitchの主な機能

Stitchの主な機能は次のとおりです。

  • 作りたいものをテキストで説明すると、ウェブやモバイル向けのデザイン一式を作成します。複数の画面、レイアウト、コンポーネント、色、文字組みまでStitchが生成します。
  • Live Modeでは端末のマイクでAIに話しかけ、ウェブやモバイル向けのデザイン一式を生成できます。会話を続ければ、その場で調整・更新できます。
  • スケッチやスクリーンショットをアップロードし、編集可能なアプリやウェブサイトのUIに変換できます。
  • 元の画面を残したまま別案を作って比較し、複数画面に同時に変更を適用して、操作フローの一貫性を保てます。
  • 色とテキストを直接編集し、さらにプロンプトで微調整できます。
  • レイヤー、コンポーネント、レイアウトを保ってFigmaに送り、チームで簡単に編集できます。
  • プロジェクトをHTML/CSSやJSX/Tailwindで書き出し、開発者への引き継ぎやフロントエンドのワークフローですぐに利用できます。
  • Stitchをコマンドライン(CLI)から実行し、ビルド工程に組み込めます。
  • 最新のGemini 3 Flashで高品質なHTMLデザインを生成し、Gemini 3.1 Proでは速度よりも最高の品質と推論を優先します。
  • 参考画像をアップロードして、AIが生成するデザインを、そのスタイル、レイアウト、特定の要素に近づけられます。

Stitchの使い方

私がGoogle Stitchを使って旅行の持ち物チェックリストアプリのUIデザインを作った手順を紹介します。

  1. Stitchに登録する
  2. プロンプトを追加する
  3. 設定を調整する
  4. Live Modeを試す
  5. AIに作りたいものを伝える
  6. アプリ/ウェブサイトを生成する
  7. プロンプトで編集する
  8. 手作業で編集する
  9. プレビュー・書き出し・共有

ステップ1:Stitchに登録する

Google Stitchを試す。

まずstitch.withgoogle.comにアクセスし、「Try now」を選びました。

プロジェクトとStitchの生成画面。

面倒な登録手続きなしで、StitchのAI生成画面に移動しました。

左側には自分のプロジェクトと、自分に共有されたプロジェクトが並んでいました。中央には生成画面があり、スケッチやスクリーンショットをアップロードし、プロンプトでアプリやウェブサイトを作成できました。

ステップ2:プロンプトを追加する

Stitchのプロンプトの例。

生成画面の上部には、プロンプトの例がありました。

  • 旅行先の天気と旅行の種類に応じて持ち物を提案する、旅行用の持ち物チェックリストアプリ。
  • 恋愛やデートのアイデアを探すモバイルアプリの閲覧タブ。
  • 語学学習アプリのクイズページ。上部には進捗バーがあり、見出しでスペイン語の単語に合う正解を四つの選択肢から選ぶよう促します。

これらから選ぶことも、自分でプロンプトを入力することもできました。

Stitchの生成画面に独自のテキストプロンプトを追加する。

Stitchの例は、AIが扱いやすい明確な構造を持つ無難な内容でした。私はもう少し面白いものをデザインできるか確かめたくなりました。

そこで、詳しい条件を入れた自分のプロンプトを追加しました。

「11月にロンドンへ3日間出張するための、旅行用持ち物チェックリストアプリ。UIはプロフェッショナルで高級感のある印象にし、『機内持ち込みのみ』の切り替えとスマートな天気ウィジェットを設けてください。『技術機器・電子機器』のセクションを追加し、深いネイビーと柔らかなグレーを配色に使ってください。」

ステップ3:設定を調整する

Stitchでアプリを生成する際の設定を調整する。

下部には次の設定がありました。

  • スクリーンショット、スケッチ、参考となるビジュアルを添付する
  • デザインの種類を選ぶ(アプリまたはウェブサイト)
  • デザインシステムを選ぶ(Bauhaus、Neon Tokyo、Candyなどのプリセット)
  • モデルを選ぶ(高品質なデザイン向けの3 Flash、速度より品質を優先する3.1 Pro、Nano Banana Proでの再デザイン、問題解決のためのアイデア出し)

スクリーンショットやスケッチはアップロードしませんでしたが、デザインの種類が「App」になっていることは確認しました。デザインシステムには「Silk」を選びました。モデルも最新の3.1 Proを選択しました。3.0より時間はかかりますが、デザインの品質は最も高くなります。

ステップ4:Live Modeを試す

Stitchのプレビューボタンを選ぶ。

ただ、「Generate」を押す前に、UIデザインツールでは見たことのない「Live Mode」ボタンに気づきました。

ステップ5:AIに作りたいものを伝える

作りたいデザインをAIに伝え、StitchのLiveツールで編集する。

プロンプトを入力する代わりに、端末のマイクを使って作りたいものをAIに話せることが分かりました。私には、とても面白い機能でした。

AIが確認の質問をし、提案を出し、私のイメージに合うまでリアルタイムで修正を重ねる、会話型のデザイン工程です。従来のツールを操作するより、アシスタントと協力しているようで、うれしい変化でした。

私は次のプロンプトをそのままAIに伝えました。

「11月にロンドンへ3日間出張するための、旅行用持ち物チェックリストアプリ。UIはプロフェッショナルで高級感のある印象にし、『機内持ち込みのみ』の切り替えとスマートな天気ウィジェットを設けてください。『技術機器・電子機器』のセクションを追加し、深いネイビーと柔らかなグレーを配色に使ってください。」

ステップ6:アプリ/ウェブサイトを生成する

Google Stitchで生成したロンドン旅行アプリのワイヤーフレーム。

数分後、AIはスタイルガイドと四つの画面を生成しました。項目の追加、持ち物チェックリスト、天気と提案、旅行の概要です。

Stitchが生成した内容は、驚くほど的確でした。ロンドンの具体的な情報に加え、「機内持ち込みのみ」の切り替えや、提案を表示する天気ウィジェットまで含まれていました。プロンプトを入力する必要すらなく、作りたいものをAIに話すだけでした!

ステップ7:プロンプトで編集する

Google StitchのAIにネイビーをグレーへ変更するよう依頼する。

下部には空のプロンプト欄があり、例えば「技術機器のセクションに項目を増やして」「ネイビーをチャコールグレーに変えて」と変更を頼み続けられました。私はネイビーをチャコールグレーに変えるよう依頼しました。

Google Stitchで作ったアプリのUIデザインで、ネイビーがグレーに変わった様子。

数秒後、Stitchは、ネイビーの代わりにグレーを使った画面一式を新たに生成しました。元の画面も残してくれたのはよかったです。

ステップ8:手作業で編集する

Google Stitchの編集ツール。

右側には、手作業で使うツールも並んでいました。

  • Select(V):画面をクリックしてAIで編集するか、「Modify」の下にある「Edit(E)」を選び、テキストなどを個別に編集します。
  • Mark(M):変更したい部分を枠で囲むとテキストボックスが現れ、その部分への変更をAIに指示できます。
  • Direct Edit(E):デザイン内の要素をクリックし、手作業またはAIで編集します。
  • Pan(H):クリックしてドラッグし、キャンバス内を移動します。
  • Upload files to canvas:AIの参考となる写真を追加します。
  • Design System:デザイン内で使われている配色を確認します。
  • Favourites:気に入った画面に星を付け、コレクションを作ります。

StitchのMarkツールで画面内のカードを囲み、変更内容のプロンプトを入力する。

Markツールを試したくなり、キーボードのMを押してカードの一つを枠で囲みました。そのカードには、イベント名、場所、開催までの日数、その場所の天気が表示されていました。

Stitchが細かな変更に対応できるか確かめるため、次のプロンプトを送りました。

「このイベントカードを『自分専用の旅程』ウィジェットに変えてください。場所はBarbican Centreのままにして、イベントを『Searcysでの顧客向けプライベートディナー』に変更してください。小さな『メニューを見る』ボタンと、初めからオンになっている『リマインダー』の切り替えを追加してください。」

StitchのエディターでMarkツールにより更新したカード。

数秒後、Stitchは、ほかの要素はそのままでカードだけを更新した新しい画面を生成しました!場所は変えず、イベントは指定どおり「Searcysでの顧客向けプライベートディナー」になりました。メニューボタンと、オンに設定されたリマインダーの切り替えも追加されました。

ステップ9:プレビュー・書き出し・共有

Stitchのキャンバスにあるプレビュー、書き出し、共有の選択肢。

全体に満足したところで、右上に移動しました。即席のプロトタイプでつないで確認したり、書き出しや共有をしたりする選択肢が豊富にありました。

Instant Prototype、つまり再生ボタンの機能は、とても面白いものでした。スマートフォンやタブレットの形式で表示できるプロトタイプを生成します。すべての画面が接続され、操作できる状態になっていました。さらに画面を追加、編集、接続することもできました。

クリックしながらプレビューを調べ、プロトタイプを編集するのは非常に簡単でした。複数の画面やツールを行き来せず、その場で全体が更新されます。完成品の見た目だけでなく、実際にどう動くかが、ずっとはっきり分かりました。

書き出し先も確認しました。Figma、Jules、.zipなど、選択肢は実に豊富でした。

全体として、Google Stitchのおかげでデザイン工程が速く簡単に感じられました。ツールの使い方を考えるより、作ることに集中できました。

最も印象的だったのは、間違いなくLive Modeです。作業が対話的になり、本物のアシスタントと一緒に働いているようでした。

Stitchの代替ツール3選

おすすめのGoogle Stitchの代替ツールを紹介します。

Base44

最初におすすめするGoogle Stitchの代替ツールはBase44です。作りたいものを説明するだけで、コードや設定なしにアプリやウェブサイトをすばやく構築できます。

ユーザー認証、データ保存、権限管理が組み込まれ、バックエンドの機能が最初から利用できます。つまり、一行もコードを書かずに、本当にログインできるダッシュボードを作れます。

どちらのツールもUIをすばやく生成できます。開発者でなくても、短時間で試作品を作る用途なら、どちらも役立ちます。ただし、ここから方向性が分かれます。

Stitchは本質的にデザイン寄りのツールです。UIのレイアウトを生成し、AIでリアルタイムに調整し、Figmaや整理されたコードに書き出すのが得意です。

一方のBase44は、より汎用的です。管理ダッシュボード、オンラインストア、ランディングページなどを作るのに向いています。説明すれば、バックエンド込みで構築します。

バックエンドを備えたアプリ全体をすばやく作るならBase44、整ったUIとFigmaへの書き出し、AIによるデザイン調整が必要ならGoogle Stitchを選びましょう。

私のBase44レビューを読むか、Base44にアクセスしてみてください!

Softr

次におすすめするGoogle Stitchの代替ツールはSoftrです。特に自社の業務向けに何かを作る人に適しています。

Softrでは、コードを書かずに独自のAIアプリ、ダッシュボード、顧客ポータルを作れます。組み込みのデータベースと安全なログイン機能がすぐ使えます。Airtable、Google Sheets、HubSpotなど、すでに使っている可能性の高いツールとも接続できます。

SoftrもGoogle Stitchもノーコードなので、開発経験のない人にも使いやすくなっています。ただし、主な共通点はそこまでです。

Stitchはデザインを重視しています。AIの助けで美しいUI画面を作り、それをFigmaへ送ったりコードで書き出したりします。データの管理や、顧客の利用開始手続きの自動化を目的とはしていません。

一方、Softrは、データがすでにどこかにあり、その上で動くアプリが必要だという考え方に基づいています。業務フロー、データ用のインターフェース、必要な人に必要な情報へのアクセスを提供することに重点を置いています。

ログインとデータを備えた顧客ポータルが必要ならSoftr、アプリ画面をデザインして開発者に渡すならStitchを選びましょう。Stitchはアプリの見た目を設計し、Softrはアプリの動作を構築するためのものです。

私のSoftrレビューを読むか、Softrにアクセスしてみてください!

Draftbit

最後におすすめするGoogle Stitchの代替ツールはDraftbitです。モバイルやウェブ向けのアプリを設計、構築、公開できるローコードのアプリビルダーです。コード全体の書き出しと、アプリストアへの即時公開に対応します。

どちらのプラットフォームも、大量のコードを書かずにアプリの画面をすばやく作れるため、開発の加速に役立ちます。

ただし、Draftbitはより踏み込んだ開発機能が特長です。ロジックの追加、APIとの接続、リアルタイムの共同作業ができ、特定のプラットフォームに縛られずコードを書き出せます。アプリの公開を目指すツールである一方、Google Stitchは、AIでUIデザインを生成・改善し、さらに開発するために書き出すことを重視しています。

実際の機能とコードの所有権を備えたモバイルアプリを構築・公開するならDraftbit、AIでUIをすばやくデザインし、修正を重ね、Figmaやコードへ書き出すならGoogle Stitchを選びましょう!

私のDraftbitレビューを読むか、Draftbitにアクセスしてみてください!

Stitchレビュー:あなたに合うツール?

Google Stitchを試してみて、従来のデザインツールとは違うと自信を持って言えます。作りたいものを本当に理解してくれる相手と会話しているようです。

アイデアを話し、数分で画面が生まれ、その場で見た目や操作の流れを確認できる体験は初めてでした。とりわけアイデアが絶えず変わる初期段階では、この速さと即時性の組み合わせはなかなか得られません。

ただし、Stitchは完璧ではありません。バックエンドのロジック、自動化されたワークフロー、あるいは十分に機能するアプリに近いものが必要なら、すぐに限界を感じるでしょう。

その場合は、次の代替ツールを試してください。

  • Base44は、ログインやデータ保存などのバックエンドを備えたアプリをすばやく作るのに最適です。
  • Softrは、業務ツール、顧客ポータル、既存データを活用するアプリに最適です。
  • Draftbitは、完全な制御とコードの所有権を保ってモバイルアプリを構築・公開するのに最適です。

一方で、まとまりのないアイデアをできるだけ早く人に見せられる形にするなら、Stitchほど優れたツールはまだ見つかっていません。初期の構想、顧客への提案、頭の中のイメージを画面にする用途では、有力な選択肢です。

Google Stitchのレビューをお読みいただき、ありがとうございます。お役に立てば幸いです。無料で試して、使い心地を確かめてみてください。

よくある質問

Google Stitchは完全に無料?

はい、Google Stitchは無料です。テキストやスケッチからUIデザインを作成し、音声対応キャンバス、プロトタイプ、コードの書き出しを利用できます。

Google Stitchは何に使う?

Google StitchはGoogle LabsのAIツールで、テキストや画像をUIデザインや操作可能なプロトタイプにすばやく変換します。

Janine Heinrichs は、過去3年間にわたり250以上のAIツールをテストおよびレビューしてきたAIソフトウェアレビューの専門家です。