「デザインの知識もない、コーディングもできない。でもアプリやWebサイトを作ってみたい…」
そんなあなたに朗報です。Googleが提供するAIツール 「Google Stitch（グーグル・スティッチ）」 がとんでもない進化を遂げました。
日本語で「こんなアプリを作りたい」と入力するだけで、プロのデザイナーが作ったようなおしゃれなUIデザインが一瞬で完成。さらに、そのデザインをGoogle AI Studioにワンクリックで連携し、たった数分で実際に動くアプリやWebサイトとしてコーディングまで完了してしまいます。
しかも、完全無料。
「AIって難しそう…」と思っている方ほど、この記事を読んでください。実際の画面キャプチャをふんだんに使い、ステップバイステップで解説します。これさえ読めば、あなたも今日から”アプリ開発者”の仲間入りです。
目次
- Google Stitch（グーグル・スティッチ）とは？
- Google Stitchの画面構成を理解する
- 実践1：LP（ランディングページ）を作ってみる【失敗例から学ぶ】
- 超重要！エクスポート機能でアプリ化する
- 実践2：HTMLファイルを読み込ませてデザインを作る
- 実践3：文章だけでアプリデザインを依頼する【成功例】
- 失敗しないためのコツまとめ
- Google Stitchの活用シーンと今後の展望
1. Google Stitch（グーグル・スティッチ）とは？
Google Stitchは、Googleが提供するAIベースのデザインツールです。自然言語（普段使っている日本語など）で指示を出すだけで、WebサイトやアプリのUI（ユーザーインターフェース）デザインを自動生成してくれます。
今回のアップデートで特に注目すべきポイントは以下の2つです。
| 注目ポイント | 内容 |
|---|---|
| Vibe Design（バイブデザイン） | 「こんな雰囲気のアプリを作りたい」という”バイブス（雰囲気）”を伝えるだけで、AIがデザインを自動生成する機能。細かい仕様書は不要。 |
| 強力なエクスポート機能 | 作成したデザインをGoogle AI Studio、Figma、MCPなど様々な形式で出力可能。デザインからコーディングまでシームレスに繋がる。 |
つまり、「デザインを作る」だけでなく、「実際に動くアプリにする」ところまでが一気通貫でできるようになったのが、今回の大きな進化ポイントです。
しかも完全無料で使えるので、AIに触れたことがない方でも気軽に試すことができます。
2. Google Stitchの画面構成を理解する
まずはGoogle Stitchにアクセスしましょう。ブラウザで「Google Stitch」と検索するか、直接URLにアクセスします。
▲ Google Stitchのトップ画面。シンプルで直感的なインターフェースです。
画面の構成は以下のとおりです。
| 画面の要素 | 説明 |
|---|---|
| 左サイドバー | 「マイプロジェクト」「共有アイテム」など、過去に作成したプロジェクトの一覧が表示されます。 |
| 中央の入力欄 | 「What native mobile app shall we design?（どんなネイティブモバイルアプリをデザインしましょうか？）」と表示されている部分。ここに作りたいものを日本語で入力します。 |
| 下部の切り替え | 入力欄の下に「アプリ」と「ウェブ」の切り替えがあります。モバイルアプリのデザインを作りたい場合は「アプリ」、Webサイト（LPなど）を作りたい場合は「ウェブ」を選択します。 |
| モデル選択 | 「3.1 Pro」と表示されている部分。AIモデルのバージョンを選択できます。 |
| 「＋」ボタン | ファイルのアップロードやWebサイトのURLを参考として添付できます。 |
「＋」ボタンの添付機能
入力欄の左下にある「＋」ボタンをクリックすると、参考となるファイルやURLを添付するメニューが表示されます。
▲ 「＋」ボタンをクリックすると、「ファイルをアップロード」「ウェブサイトのURL」の2つのオプションが表示されます。
この機能を使うと、以下のようなことが可能になります。
- ファイルをアップロード：HTMLファイルや画像ファイルなどを添付して、「これを元にデザインして」と指示できます。
- ウェブサイトのURL：参考にしたいWebサイトのURLを入力して、そのデザインをインスピレーションとして活用できます。
注意点：WebサイトのURL機能については、他社サイトのURLを無断で参考にすることの倫理的・法的な問題もあるため、基本的には自社サイトのURLを使うのが安全です。
3. 実践1：LP（ランディングページ）を作ってみる【失敗例から学ぶ】
ここからは実際にGoogle Stitchを使った具体例を見ていきます。まずはあえて「失敗例」から紹介します。同じ失敗をしないよう、ぜひ反面教師にしてください。
3-1. AIにLP構成を作ってもらう
LPを作る場合、いきなり「こんなデザインにして」と指示するのではなく、まずLPの構成（どんなセクションを入れるか、どんなトーンにするか）をAIに考えてもらうのが一般的な流れです。
今回の例では、別のAIツール（OpenClaw）を使って、Google Stitch用のLP構成を作成しました。
▲ 別のAIツールでLP構成を作成した画面。サービス名、ページ全体のトーン、セクション構成などが詳細に記載されています。
もちろん、ChatGPTやClaudeなど、お好みのAIツールで構成を作っても全く問題ありません。ポイントは、Stitchに投げる前に、まずLPの構成をテキストで整理しておくということです。
3-2. 構成をStitchに貼り付けてデザインを生成する
作成したLP構成のテキストをコピーし、Google Stitchの入力欄にそのまま貼り付けます。このとき、入力欄下部の切り替えを「ウェブ」に変更しておきます（LPはWebサイトなので）。
▲ 「以下の内容で、縦長のランディングページ（LP）をデザインしてください。」という指示とともに、サービス名、ページ全体のトーン、セクション構成などの詳細な指示を入力しています。入力欄下部が「ウェブ」モードになっている点に注目してください。
3-3. 生成結果：デザインボード
指示を送信すると、AIがまずデザインのベースとなる「アートボード」を生成します。ここにはカラーパレット（メインカラー、サブカラーなど）やフォントスタイルが整理されて表示されます。
▲ AIが提案したデザインボード。カラーパレット（Primary、Secondary、Tertiary、Neutral）やフォントスタイル（Headline、Body、Label）が表示されています。左側にはAIによるデザイン意図の解説テキストも。
画面の各要素を詳しく見てみましょう。
| 要素 | 内容 |
|---|---|
| カラーパレット | Primary（#1A1A1A）、Secondary（#E63B2E）、Tertiary（#0055FF）、Neutral（#4A4A4A）の4色が提案されています。 |
| フォントスタイル | Headline（見出し）、Body（本文）、Label（ラベル）の3種類のフォントスタイルが表示されています。 |
| 左サイドの解説 | AIがなぜこのデザインを選んだのか、デザインの意図を説明してくれます。 |
| 提案ボタン | 画面下部に「モバイル版のデザインも作成する」「特定のセクションの色を調整する」などの提案ボタンが表示されます。 |
| 入力欄 | 「What would you like to change or create?」と表示された入力欄から、追加の指示を出すことができます。 |
3-4. 生成結果：LPデザイン（失敗例）
デザインボードの後に、実際のLPデザインが生成されました。しかし、結果は…
▲ 生成されたLPデザイン。内容はLP構成に沿っていますが、デザイン性が乏しい結果に…。
ご覧のとおり、内容自体はLP構成に沿っているものの、デザイン性が非常に乏しい結果になってしまいました。「AIが24時間、あなたの右腕になる。」というキャッチコピーや「無料相談を予約する」ボタンなど、構成要素は入っていますが、このままでは実際のLPとして使えるレベルではありません。
3-5. なぜ失敗したのか？
この失敗の原因は、LP構成をガチガチに細かく指定しすぎたことにあります。
AIに対して「サービス名はこれ、トーンはこう、セクション構成はこの順番で…」と事細かに指示したことで、AIの創造性が制限されてしまい、結果として「指示どおりだけどデザイン性のない」アウトプットになってしまったのです。
教訓：Google Stitchでは、ある程度ラフな指示の方がAIの創造性を活かせる。構成を細かく固めすぎるのは逆効果になることがある。
4. 超重要！エクスポート機能でアプリ化する
失敗例はさておき、ここからがGoogle Stitchの真骨頂です。作成したデザインを実際のコードやアプリに変換する「エクスポート機能」を見ていきましょう。
4-1. エクスポートメニューを開く
画面右上の「エクスポート」ボタンをクリックすると、様々な出力形式を選ぶことができます。
▲ エクスポートメニュー。AI Studio、Figma、Jules、.zip、MCP、Instant Prototypeなど、豊富な出力形式が用意されています。
エクスポートで選べる形式は以下のとおりです。
| 形式 | 説明 |
|---|---|
| AI Studio（プレビュー） | Google AI Studioにデザインデータを送り、そのままコーディング・アプリ化ができます。今回の目玉機能。 |
| Figma | デザインツール「Figma」にエクスポート。デザイナーがさらに細かく調整したい場合に便利。 |
| Jules | Googleの開発支援AIにエクスポート。 |
| .zip | HTMLファイルや画像をzip形式でダウンロード。 |
| コードをクリップボードにコピー | 生成されたコードをそのままコピーして使えます。 |
| MCP | MCP（Model Context Protocol）で他のAIツールと連携。例えばAnti-Gravityなどでコーディングしてもらうことも可能。 |
| プロジェクト概要 | プロジェクトの概要をテキストで出力。 |
| Instant Prototype（新規） | 新しく追加された機能。プロトタイプを即座に生成。 |
4-2. AI Studioにエクスポートする
最も注目すべきは「AI Studio」へのエクスポートです。「AI Studioで構築」ボタンをクリックすると、自動的にGoogle AI Studioが開きます。
▲ Google AI Studioに自動遷移した画面。「Build your ideas with Gemini」と表示され、Image 1.png（デザイン画像）、Image 2.html（HTMLコード）、Image 3.markdown（マークダウン）の3つのファイルが自動的にセットされています。
Google AI Studio側では、すでに以下の状態が整っています。
- プロンプト（指示）：「このような画面のアプリを作成して。HTMLから画像をホットリンクできます」という指示が自動入力されている
- 添付ファイル：デザイン画像（.png）、HTMLコード（.html）、マークダウンファイル（.markdown）が自動添付されている
- AIモデル：Gemini 3.1 Pro Previewが選択されている
あとは実行ボタンを押すだけです。
4-3. AI Studioでビルドする
実行ボタンを押すと、Gemini（GoogleのAI）がデザインを元に実際のコードを書き上げ、動くアプリとしてビルドしてくれます。
▲ AI Studioでのビルド結果。左側にはGeminiの作業ログ（ReactとTailwind CSSでの実装、261秒で完了）、右側には実際のWebサイトプレビューが表示されています。
ビルドの結果を見てみると、以下のことがわかります。
| 項目 | 内容 |
|---|---|
| 使用技術 | React + Tailwind CSS |
| ビルド時間 | 約261秒（約4分半） |
| 作業内容 | 1パッケージのインストール、2ファイル（src/index.css、src/App.tsx）の編集、ビルド |
| 結果 | 実際に動作するWebサイトとしてプレビュー可能 |
つまり、デザインを作ってからたった4分半で、実際に動くWebサイトが完成したということです。
ポイント：Google AI Studio自体も現在めちゃめちゃ進化しており、非常に話題になっています。Stitchとの連携により、デザイン→コーディング→デプロイまでの流れが劇的にスムーズになりました。
5. 実践2：HTMLファイルを読み込ませてデザインを作る
次に、既存のアプリのHTMLファイルをStitchに読み込ませて、デザインをリニューアルするという使い方を紹介します。
5-1. 既存アプリのHTMLファイルを準備する
この例では、別のAIツール（Manus）で作成した「社内マニュアル問い合わせBot」のHTMLファイルを使用しています。
▲ Manusで作成した社内マニュアル問い合わせBot。チャット機能、マニュアル管理、質問ログ、ユーザー管理などの機能を備えています。このアプリのHTMLファイルをStitchに投げます。
このアプリは、社内のマニュアルを格納して、店舗スタッフが困ったときにマニュアルから回答してくれるお問い合わせ用のBotです。管理者だけが資料を追加でき、スタッフはお問い合わせのみ可能。さらにログイン機能付きで、誰がどんな質問をしたかのログも残る仕組みになっています。
5-2. HTMLファイルをStitchに添付してデザインを生成する
このアプリのソースコード（HTMLファイル）をStitchの「＋」ボタンからアップロードし、「いい感じのデザインにして」と指示します。
▲ HTMLファイルを元にStitchが生成したデザイン。複数画面のデザインが同時に生成されています。左側にはAIによるデザインの解説テキストが表示されています。
HTMLファイルを元にしているため、元のアプリの構造を理解した上でデザインが生成されます。ナビゲーション、問い合わせ履歴、マニュアル一覧など、元のアプリの機能がしっかり反映されたデザインになっています。
5-3. 日本語に変換する
最初は英語でデザインが生成されることが多いため、画面下部の入力欄から「日本語にして」と追加指示を出します。
▲ 「日本語にして」と指示した結果。履歴、問い合わせ内容、ステータスなどがすべて自然な日本語に変換されています。複数画面のデザインが同時に日本語化されました。
日本語化された結果を見ると、以下のような変更が行われています。
- ナビゲーション：サイドメニューのラベルが「社内マニュアル」「問い合わせ履歴」「システムアップデート」「設定」など、直感的な日本語に変換
- コンテンツ内容：各画面の見出しや説明文、フォームのプレースホルダーなどがすべてプロフェッショナルな日本語表記に統一
- トーン：企業向けツールとしての信頼感を損なわないよう、丁寧かつ簡潔な表現を採用
元のアプリと比較すると、Stitchで作ったデザインの方がデザイン的にはおしゃれで機能的に見えます。
実務的な補足：この例のように、すでにManusなどでアプリ化されているものを、わざわざ分解してデザインし直してコーディングし直す必要は正直ありません。ただし、デザインの叩き台を作るという観点では、Stitchを挟むのは十分にアリな選択肢です。
6. 実践3：文章だけでアプリデザインを依頼する【成功例】
最後に、ファイルを一切添付せず、文章だけでアプリデザインを依頼する方法を紹介します。これが最もシンプルで、かつ最も良い結果が出やすい使い方です。
6-1. シンプルな指示を入力する
入力欄に以下のようなシンプルな指示を入力します。
「日々のタスクを管理するアプリ作りたいから、おしゃれなデザイン作って」
たったこれだけです。セクション構成も、カラー指定も、フォント指定も一切なし。AIの創造性に完全に委ねます。
6-2. 生成結果：タスク管理アプリのデザイン
すると、AIが「Serene Focus」というテーマ名のデザインを提案してくれました。
▲ 「おしゃれなデザイン作って」とだけ指示した結果。「Serene Focus」というテーマで、洗練されたタスク管理アプリのUIが生成されました。カラーパレットやフォントスタイルも自動で提案されています。
LP作成時の失敗例と比較すると、圧倒的にデザイン性が高いことがわかります。AIに自由度を与えたことで、プロのデザイナーが作ったようなUIが生成されました。
6-3. 日本語に変換する
こちらも最初は英語で生成されるため、「日本語にして」と追加指示を出します。
▲ 日本語化されたタスク管理アプリ。Dashboard（ダッシュボード）、Task Categories（タスクカテゴリ）、Create Task（タスク作成）の3画面が同時に生成されています。
日本語化された結果、以下のような画面が生成されました。
| 画面 | 内容 |
|---|---|
| ダッシュボード | 「おはよう、アレックスさん」の挨拶から始まり、「10個中6個のタスクを完了」という進捗状況、今日のフォーカスタスクの一覧が表示されています。 |
| タスクカテゴリ | 「仕事」「個人」などのカテゴリ別にタスクを管理できる画面。検索機能も搭載。 |
| タスク作成 | 新しいタスクを作成する画面。見出し、説明、優先度（高・中・低）、期日、カテゴリの設定が可能。 |
画面下部には「さらに親しみやすい言葉遣いにして」「フォントをもっと丸みのあるものに変更して」といった提案ボタンも表示されるため、デザインの知識がなくても直感的に微調整を重ねていくことができます。
最初から日本語で指示するのがおすすめ：毎回「日本語にして」と追加指示を出すのは手間なので、最初の指示に「日本語で」と付け加えておくのがベターです。
7. 失敗しないためのコツまとめ
ここまでの実践例から見えてきた、Google Stitchを上手に使うためのコツをまとめます。
| コツ | 詳細 |
|---|---|
| 指示はラフに | 構成やトーンをガチガチに固めすぎると、AIの創造性が制限されてデザイン性が下がります。「おしゃれなデザイン作って」くらいのラフさがちょうどいい。 |
| 最初から日本語指定 | 何も言わないと英語で生成されがちなので、指示に「日本語で」と付け加えましょう。 |
| 提案ボタンを活用 | 生成後に表示される提案ボタン（「色を調整する」「フォントを変える」など）を活用して、対話的にデザインを磨いていきましょう。 |
| HTMLファイルの活用 | 既存のアプリやWebサイトのHTMLファイルを添付すると、その構造を理解した上でデザインを生成してくれます。リニューアルの叩き台作りに最適。 |
| エクスポート先を使い分ける | デザインの微調整をしたいならFigmaへ、すぐにアプリ化したいならAI Studioへ、他のAIツールと連携したいならMCPへ。目的に応じて使い分けましょう。 |
8. Google Stitchの活用シーンと今後の展望
どんな人に向いている？
Google Stitchは、特に以下のような方に強くおすすめできます。
- AI初心者で、これからAIを触ってみたい方：無料で使えて、日本語で指示するだけなのでハードルが非常に低い。
- デザインの知識がないが、アプリやWebサイトを作りたい方：プロ級のデザインがワンクリックで手に入る。
- 既存アプリのデザインリニューアルを検討している方：HTMLファイルを読み込ませるだけで、デザインの叩き台が作れる。
一方で、Claude CodeやCursorなどの開発ツールをすでにゴリゴリ使いこなしている方にとっては、正直なところ革命的なツールとは言い切れません。これらのツールを使えば、デザインとコーディングを同時に、より高い精度で行うことが可能だからです。
活用の全体像
Google Stitchを中心としたワークフローの全体像は以下のとおりです。
【アイデア】
↓
【Google Stitch】← 日本語で指示 / HTMLファイル添付 / URL参照
↓ デザイン生成
【デザインの確認・調整】← チャット形式で微調整
↓ エクスポート
【出力先を選択】
├→ Google AI Studio → コーディング → 実際のアプリ完成
├→ Figma → デザイナーが細かく調整
├→ MCP → 他のAIツール（Anti-Gravityなど）で開発
├→ .zip → HTMLファイルとしてダウンロード
└→ Instant Prototype → プロトタイプとして即座に確認まとめ
Google Stitchは、AIの力でデザインのハードルを劇的に下げてくれるツールです。特に今回のアップデートにより、デザインからコーディング、アプリ化までの一連の流れがシームレスに繋がるようになりました。
無料で誰でもすぐに使い始めることができます。まずは「タスク管理アプリ」や「社内マニュアルBot」など、身近なテーマで一度触ってみてください。AIがあなたの右腕となり、アイデアを形にする力を何倍にも増幅してくれるはずです。
コメント