Google I/O 2025発表Google Stitchを試してみた！¶

URL: https://www.youtube.com/watch?v=CjqIuLOXzKo
文字起こし日: 2026-02-24 02:57

内容概要¶

Google I/O 2025で発表されたGoogle Stitchを試してみた動画。
Google Stitchは、ホームページやWebアプリのUIをAIで自動的に作ってくれるツール。
Google Labsの実験的なツールで、エンジニアとデザイナーがもっと一緒に効率よくものづくりできないかというアイデアから生まれた。
アプリを作るには、デザイナーが考えたインターフェースとエンジニアが作ったコードの2つが必要で、両方作ってくれるのがStitch。
基本の自然言語からのUI生成や、画像やワイヤフレームからUIを生成も可能。
生成されたUIは、詳細プロンプトで修正可能。
アプリ内のテキスト言語も一発で変えられる。
生成されたコードをコピーして使うこともできる。
Figmaにエクスポートしたりもできる。
GoogleのFirebaseというサービスを使うとStitchで作成したホームページを簡単に公開できる。

文字起こし¶

こんにちは、あやです。今回はGoogle I/O 2025で発表されたGoogle Stitchを使ってみたという動画になります。このスティッチはホームページやWebアプリの見ため、つまりUIをAIで自動的に作ってくれるツールです。このGoogle Stitch Googleラボの実験的なツールでエンジニアとデザイナーがもっと一緒に効率よくものづくりできないかなっていうアイデアから生まれたものだそうです。アプリを作るにはデザイナーが考えたインターフェースとエンジニアが作ったコード、この2つが必要になります。で、この2つを両方作ってくれるのがスティッチになります。ま、これはGoogleラボで使えるまだ実験的なツールです。ま、なので今回この動画を通して皆さんと一緒に私自身もどんなことができるのか探っていきたいと思います。というわけで早速使ってみましょう。 stitch.withgoogle.com こちらにアクセスしてください。そうするとこちらの画面が開かれます。これがスティッチですね。ベータ版と書いてあります。そして今回はこちら公式のスティッチプロンプトガイドですねを参考にしながら効果的な使い方を探っていきます。ではこちらトライナウをクリックして始めていきたいと思います。このスティッチを使うのは無料で使えます。で開くと左側にですね、ここエグザンプル、こういったアプリをこのプロンプトで作れますよという例がありますので皆さんもポチポチとここ見てみてください。結構ね色んなものが作れるので面白いです。ではですね、まずは基本の自然言語からのUI生成、こちらやってみましょう。ま、ガイドによるとプロジェクトの始め方は大きく分けて2つあるそうです。ま、ざっくりとしたアイデアで始めるハイレベルプロンプト。細かく細かくホームページの内容具体的に渡す詳細プロンプト。こちらの2つがあります。じゃあまずはざっくりとこちらマラソンランナー向けのアプリを作りたいよ。これだけ入れましょう。でジェネレートデザインズをクリックします。するとこちらですねマラソンランナー向けのアプリですね。どのような画面が必要ですかと聞かれますのでここで詳細プロンプトを入れます。マラソンランナーがコミュニティと交流し、練習相手を見つけ、トレーニングアドバイスや近くのレースを見つけるためのアプリ。カラーパレットはエネルギッシュなオレンジと青を基調とし、ユーザー体験は初心者に優しく励みになるような雰囲気で。これでちょっと入れてみましょう。はい、ちょっと今私が試してみたところ生成に時間がかかってるので事前に作っていたものをお見せします。入れたプロンプトは同じですね。この時はマラソンランナーのためのアプリですね。以下の画面を検討してみたいはいかがでしょうかということでコミュニティフィード、練習相手探し、トレーニングアドバイス、近くのレース。プロフィールという12345。 5個の画面を提案してくれました。なのではい、これで進めてくださいと出すと、まこのようにですね今お見せしている画面が作られました。どうでしょう。こうやって1つ1つの画面をクリックして詳細を確認することもできます。で最初にお願いしたようにエネルギッシュなオレンジ使われてますね。ちょっと青は入ってないかなと思いますがま、このように生成されます。右上のこちらのメニューを開いてま、例えばダークモードにします。で、カラーもここでカスタム選択できますしま、用意されてる8種類の中からも選択できます。ちょっとこのツートーンみたいなカラーにしてみましょうか。角の丸みですね。こちらをじゃあちょっと直角寄りにします。で、フォントも選べるんですね。ただちょっとこのフォントがマウスオーバーしないと見れないので、この辺は今後改善されていくのかなと思うんですけど今時点こんな見え方になってますと。これでちょっとアプライトテーマクリックしてみましょう。はい、ちょっとまだ他の画面は生成中なんですがこのように今ダークモードを選択して緑を貴重にしましたね。で、角は少し直角目にしました。のでダークモードで緑基調で角も少しあの直角寄りで作られています。そんな感じですね。フォントも変えたのでフォントの雰囲気も変わりましたね。こういったアプリのプロトタイプが自然言語とちょっとしたクリックで、もう簡単にしかも短時間でできちゃうと。もうこれがスティッチのすごいところですね。でこのプロンプトで重要なのが具体的な詳細プロンプトもちろんですが英語でバイブって言うこう雰囲気どういった雰囲気にしたいかっていうのを形容詞で定義するのが良いそうです。先ほどはここエネルギッシュとかこう励みになるような雰囲気でと入れたので次はシンプルで洗練された瞑想アプリ。これでちょっと入れてみましょう。この瞑想アプリのためにどのような画面デザインしましょうかと出たのでうーん、そうだな。瞑想する時の音楽を流すプレイヤー画面。これでちょっと作ってみましょう。はい、いかがでしょう。ちょっとあのさっきのダークモードが残っちゃってますがこんな感じでシンプルで洗練された瞑想アプリのプレイヤー画面ができちゃいました。瞑想アプリなんでライトモードの方が私のイメージは近かったかもしれないですけど、この雰囲気の指定は本当に大切になってきますね。そしてスティッチのすごいところはまこれだけじゃないんです。今みたいに自然言語はもちろんですがなんと画像やワイヤーフレームという設計図からのUIを生成できます。例えばホワイトボードに書いた簡単なスケッチとか手書きのワイヤーフレームなんかをアップロードするだけでそれをもとにデジタルなUIを作ってくれます。ちょっとやってみましょう。で、それを使うにはこちらですね、スタンダードモードではなくてエクスペリメンタルモードにする必要がああります。何が違うかなんですがスタンダードモードはモデルがジェミニ2.5フラッシュですね。で、エクスペリメンタルモードがジェミニ2.5 Proになります。こっちの方がちょっと上ですね。 2.5 Pro。こちらを選択するとここに画像が添付できるようになるのではい。私の手書きのワイヤーフレームを入れてみます。ま、ワイヤーフレームというほどなんか立派なものではもはやないですけどもはい、こちらですね。スマホで撮ったので画面は暗いしあの横向きになっちゃってるんですけど、もうこれでいきます。はい。スキルを持った人のマッチングサービスみたいなものでイメージしています。じゃあこれ入れてこちらはモバイルじゃなくて今回はWebにしたいのでパソコンでも見れるWebにします。で、日本全国の地域からスキル提供者を探せるマッチングプラットフォームを作ってください。優しく親しみやすいデザインでベージュライトグリーンを貴重に丸みのあるフォントとボタンを使って地図ナビゲーションとカテゴリフィルター付きのホーム画面を作ってくださいと。これでジェネレートしてみましょう。はい、見てください。あのラフなスケッチからものの数分でこんなにちゃんとしたUIのベースが出てきました。本当はここですね。あの地域で探すが日本地図でこう押せるようになってくれたら嬉しかったんですが、まあまあそれはあのプロンプト入れるよりこう修正していくことはできるかなと思います。あと人気のスキルもですねちゃんとIT、メイク、ゴルフ。あのアイコンから理解してくれましたね。で語学、音楽、フィットネスも気を利かせて追加してくれています。ああ、これすごいです。もうこれ使うだけでアイデアを形にする最初のステップとしてもうめちゃくちゃ使えますよね。まさに初期の視覚的なアイデアを機能的なデザインに橋渡ししてくれる感じになっています。でここからはですね生成された画面を少しずつ良くしていく作業になっていきます。スティッチは具体的で少しずつの変更指示が得意だそうです。ま、ガイドにもですね1つの画面やコンポーネントに集中し、ま、プロンプトごとに1、2個の調整をするとはいってあります。じゃ、例えばですねこのホームページのヘッダーに検索バーを追加してみましょう。ま、ホームページのヘッダーに検索バーを追加してとちょっとこれで追加注文してみます。はい、ここに検索バー追加されましたね。次主要なボタンを大きくしてカラーはブランドのロイヤルブルーを使ってちょっとカラーの変更してみましょう。はい、できました。あれ、なんかちょっと変な要素入っちゃってますが緑だったのがブルーになってますね。では今度ちょっと全体の雰囲気を変えてみましょう。全体の雰囲気を高級感あるデザインにしてフォントは明朝体を使ってと入れてみます。これどうなるかなうまくいくといいですけど。ちょっとドキドキです。おお、めちゃくちゃいい感じになりました。私はこういう雰囲気が好きですね。明朝体にしてくれたしちょっと高級感のある雰囲気が出ましたかね。あの、青は消えてしまいましたが。そして最後にこちらアプリ内のテキスト言語も一発で変えられます。私たちは日本語のままでいいんですけどじゃあ英語版も作ろってなった時ま、そうなった時は全ての言語を英語に切り替えてと入れてみます。はい、全部英語に切り替わりました。すごいな。本当にこれ便利ですね。そしてもちろんここで作ったものはこれで終わりじゃないんです。これクリックしてみますとここですね。コードをクリックしてこのコードをコピーして使うこともできますしちょっと物によってはですねま、こちらはフィグマフィグマにエクスポートしたりもできます。フィグマ開いてコントロールVで貼り付けるとここに貼り付けられましたので、あとはフィグマ上でどんどんこう編集していくこともできます。ちなみにここでエクスポートしたコードはすぐこう公開できたら嬉しくないですか？で、これがですねやり方としてGoogleのFirebaseっていうサービスを使うとスティッチで作ったホームページを本当に簡単に公開できちゃいます。 FirebaseっていうのはWebサイトやアプリを簡単に公開管理できるGoogleの便利なプラットフォームなんですけどスティッチで出力したHTMLファイルをFirebaseでデプロイするといった感じになります。はい、実際にこれが私がスティッチで作ってFirebaseで公開しているサイトになります。ネイルサロンのプラットフォームみたいなものを作ってみました。押しても何にも動かないんですけど、検索とかもできないんですがまプロトタイプとしてこういうサイト作りたいですみたいなそういったコミュニケーションに役立てるみたいな使い方ができるのかなと思います。

で、今回ご紹介したこのスティッチですね。最初にもご紹介しましたが、実験的なツールです。なので、今後仕様が変わったり機能が追加変更されたりする可能性は大いにあります。その辺はま、頭に入れた上で使ってみてください。ま、それからですね、こちら使用制限あります。ここで紹介した2.5フラッシュとジェムニ2.5 Proそれぞれで使用制限があります。 2.5 Proの方は月50画面まで。 2.5フラッシュの方月350画面までという制限があるそうなので、こちらもご注意ください。

では最後に私がスティッチで作ったアプリをいくつか紹介したいと思います。はい、1個目がミャコネクト。猫好きが自分の猫をシェアできるアプリですね。で、これいいねを猫の肉球にしたかったんですが、これちょっと足跡になっちゃってます。まあまあ。でも意図することは伝わるかなって感じですね。可愛いですよね。こういったWebサービス作りたいんですね。あとは毎日の気持ちを記録するシンプルな日記アプリ。今日はどんな日でしたか？ま、今日の気分を選んで今日あったことを書いて写真を追加するみたいな。で、ダッシュボードも表示されるいいですよね。これいいかなと思います。これは先ほどご紹介したネイルサロンですね。公開してるのはホーム画面だけですが、他のページもこのように作れるようといった感じです。お店の詳細とかですね。はい。はい、いかがでしたでしょうか？今回はGoogle I/O 2025で発表されたばかりのGoogleスティッチを早速使ってみました。まだ試験的なツールではありますが、UIデザインのあり方を変えるすごいポテンシャルを持ったツールじゃないかなと思います。特にアイデアを素早く形にしたい方そして私みたいに新しいもの好きの方ぜひ一度ご自身の手で触って試してみてください。 Googleスティッチを使って皆さんはどんなWebアプリやホームページを作ってみたいですか？ぜひコメント欄で教えてください。この動画が役に立ったスティッチ面白いじゃんと思っていただけましたら高評価とチャンネル登録、こちらもお願いします。それではまた次回の動画でお会いしましょう。