はじめに
2025年のGoogle I/Oで発表された 「Google Stitch」 は、生成AIを活用し、UIデザインとコーディングを同時に生成可能な革新的なツールです。
従来のUI設計ツールとは一線を画し、自然言語のプロンプトや手描きのスケッチ画像を入力するだけで、即座に HTML/CSS/JavaScriptコード を自動生成してくれます。
本記事では、この Stitch を実際に使ってみて、Google Gemini APIを組み込んだAIチャットサービスの構築を試みた過程を共有します。
使い方の流れやよかった点・改善してほしい点など、率直な所感をまとめました。
🧠 Stitchとは何か？できること・仕組み
「Google Stitch」は、Gemini 2.5 Flash / Gemini 2.5 Pro と連携したマルチモーダル生成AIツールです。以下のような機能を備えています：
- 自然言語の指示からUIレイアウトの自動生成
- スケッチ画像やスクリーンショットからレイアウト構造を再現
- レイアウト生成と同時にHTML/CSS/JavaScriptコードを出力可能
- Figmaファイルとしてのエクスポート対応
- Gemini APIや外部サービスとの統合も柔軟に可能
例：「チャットボットUIを作って」「ログインフォームを追加して」などの簡単なプロンプトで、UIとコードが一式生成されるのは本当に革命的。
従来は「構想 → デザイン → 実装」と段階を踏む必要があったところを、Stitchなら一気通貫で構築できるのが魅力です。
🛠️ 実際に使用してみた：Gemini APIチャットの構築手順
今回の開発では、以下のような手順でAIチャットサービスを作成しました：
- Stitchに「Gemini APIを使ったAIチャットサービスを作ってください」といったニュアンスでプロンプト入力
- 自動生成されたHTMLコードの構造とスタイルを確認
- Gemini APIを埋め込む
- 出力されたHTMLコードをブラウザで動作確認
- プロンプトを修正しながら、UIや機能の精度を微調整
と、いろいろと作業工程はありますが、実際に私がやったのは一部の画像パス指定と、APIを埋め込む程度です。
見た目はスッキリと整っており、デザイン性・機能性ともに十分実用レベルに仕上がりました。
下記画像は、私が実際に記載しているプロンプト例です。
🚀 今回作ったAIチャットサービスのデモ
上記は、今回Stitchで作ったAIチャットサービスのホーム画面です。
では、さっそく使ってみましょう。埋め込んであるAPIはGemini 2.5 Proです。
(スライダー部分の画像はどうやっても生成できなかったため、フリー素材のURLを指定して埋め込ませています)
こんな感じで適当にプロンプトを入力し、「チャット」を押すと新規チャットページに遷移するようになっています。
まだインターステラーを見ていない方にとっては盛大なネタバレとなっていますが、内容を確認したところ、特に間違いなども無く生成できていました。
IMDbレーティングにも問題はありません。
(単順にGemini 2.5 Proと会話しているのと変わらないため、チャットで大きな問題が無いのは当然かもしれませんが)
また、このチャット機能は単体ページだけにとどまらず、ヘッダーメニューやフッターメニューなどのナビゲーション機能も含めて作り込まれており、UI面でも非常に完成度が高い印象でした。
トータルで10ページ弱の構成となりましたが、プロンプト調整や軽微な修正を含めても、約5〜6時間ほどで完成。
これまでのWeb制作と比較しても、圧倒的なスピードと品質の両立を実現できました。
このように、AIとの対話を通じて得られる情報や完成物のレベルが非常に高く、人間の作業時間や労力を大幅に削減できることを改めて実感しました。
💻CodePenリンク
実際に動かしてみたい方向けに、今回作ったAIチャットサービスをCodePenで公開しています。
ただし、チャットが機能するためにはAPIキーが必要なため、ご自身でGemini APIを取得する必要があります。
APIキーはコード中の「DUMMY-API-KEY」という部分に貼り付ければ動くようになります。
👍 Stitchの良かった点
- 出力されるデザインテンプレートの質が高く、初期段階でもある程度整っている
- プレビューとコードが同時に提供されるため、確認作業が効率的
特に、設計言語がはっきりしているプロダクトの場合は、プロンプトとの親和性が高く、非常に強力な支援を受けることができます。
⚠️ Stitchの惜しい点・課題と感じたこと
- チャット履歴が増えるにつれ、出力時間が数分単位に伸びる
- 修正をお願いしても、プロンプトが理解されず反映されないことが多かった
- 頻繁にクラッシュすることがあり、安定性に難がある
また、生成されたコードをそのまま本番に使うにはまだ検証や微修正が必要で、現状ではアシストツールとしての利用が中心になるかもしれません。
📌 まとめ
Google Stitchは、自然言語と画像をベースにUIとコードを一気に生成できる新時代のツールです。
もちろん、安定性や応答速度といった課題はまだあります。それでも、
数時間で完成度の高いAIチャットサービスが構築できる体験は、非常に刺激的で、今後の開発スタイルを大きく変える可能性があります。
Stitchの進化によって、「エンジニアの創造力」がさらに加速する時代がやってくるかもしれません。
📷 筆者が構築したチャットサービスのスクリーンショット・コード例は、後ほど追記いたします。
🛠 今後もStitchのアップデートを追いながら、さらなる活用方法を模索していきたいと思います。