はじめに

Google I/O 2025が、5月20日（火）と21日（水）の2日間にわたって開催されましたが、皆さんはご覧になりましたか？

Googleは「Gemini 2.5 Pro」や「AIモード」など、多くの新機能や製品を発表し、大盛り上がりのイベントとなりました！

I/Oの基調講演の最後には、CEOのスンダー・ピチャイ氏が、講演中に「AI」や「Gemini」という言葉がどれだけ発言されたかを示す「AIカウンター」を披露するほど、今回のGoogle I/Oの主役は間違いなくAIでした。

この記事では、そんなGoogle I/Oで発表されたAI搭載のUIデザイン支援ツール「Stitch」を取り上げます。

Webやモバイルアプリの開発に興味がある方にとって、とても便利なツールですので、ぜひチェックしてみてください！

Stitchとは

「Stitch」は、AIを活用したUIデザインおよびフロントエンド開発支援ツールです。

例えば、「ショッピングカート付きのモバイルアプリを作成したい」といったテキスト指示や、手描きのスケッチ、既存のスクリーンショットなどを入力することで、即座にWebやモバイルアプリのUIデザインとコードを生成してくれます。

さらに、UI/UXデザインツール「Figma」へのエクスポートにも対応しているので、デザインの細部を調整したり、チームでの共同作業がしやすくなっています。

今後のアップデートでは、ユーザーがUIデザインの中で変更したい箇所のスクリーンショットを撮り、その部分に注釈を入れて修正内容を伝えられる機能を追加する予定なので、プロトタイプの作成スピードやアイデアの具体化がさらに加速すると思います！

それでは、実際に「Stitch」を使ってみましょう！

今回は試しに、Webアプリ用の家具ストアのページを作成してみます。

Webアプリ用のデザインを作るので、「Web」を選択し、プロンプトに「An explore page for a store that sells mid-century Scandinavian furnitures called Dane Design」と入力しました。

プロンプトは日本語でも入力できます。

今回は使いませんが、画面左の「Examples」から既存のデザイン例を参考にすることもできます。

それでは「Generate designs」をクリックしてみましょう。

20秒ほど待つと、いい感じのショップデザインが自動で生成されました！

かなり短いプロンプトだったので不安もありましたが、ここまでのクオリティでデザインしてくれるなら、個人開発などでも十分に使えそうですね。

次に、生成されたコードがデザインを忠実に再現しているか確認してみます。

作成されたUIデザインをクリックすると、次のような画面が表示されるはずです。

この画面で「Code」をクリックすると、HTML/CSSコードが表示されます。

コードを確認したら、右上の「Copy code」からコピーしましょう。

コードのコピーが完了したら、適当なHTMLファイルを作成し、コピーしたコードを貼り付けて保存しましょう。

保存後、そのHTMLファイルのパスをコピーしてください。

VSCodeを使用している場合は、キーボードの Shift + Alt + C を押してパスをコピーできます。

パスのコピーができたらブラウザを開き、検索ボックスにコピーしたパスを貼り付けてください。

貼り付けたパスでアクセスし、「Stitch」で作成したUIデザインが表示されれば成功です！

わずか20秒でこのクオリティのデザインが完成するなんて、本当に驚きですね...

続いて、作成したデザインの編集も試してみましょう。

編集は、先ほどのAIとの会話に返信するだけでOKです。

複数ページのデザインの場合は、編集したいページの上にある「Edit」から、特定のページだけを選んで編集することもできます。

私は「カートに追加」ボタンが欲しかったので、プロンプトに「Please add an "Add to Cart" button to each product card on the Dane Design Explore page.」と入力しました。

20秒ほどで、商品の価格の下に「Add to Cart」ボタンが追加されました！

他のページを作成したい場合も、同じようにプロンプトで指示を送るだけで、簡単に作成できます。

また、色やフォントなどの見た目のカスタマイズは、画面右上の「Edit theme」からも行えます。

プロンプトを使わなくても手軽にデザインを調整できるのは、嬉しいポイントですね。

試しに「Appearance」を「Light」から「Dark」に変更し、「Apply theme」をクリックしてみましょう。

おお、一気に雰囲気が変わりましたね！

もし編集の結果がイマイチでも、AIとの会話履歴をたどれば元に戻せるので、気軽に色々試してみてください！

今回は、AI搭載のUIデザイン支援ツール「Stitch」を紹介しました。

「Stitch」は、UIデザインを簡単かつ高速に作成できるため、特にプロトタイプ作成にぴったりのツールです。

この記事では、「Standard Mode」を使いましたが、「Experimental Mode」に切り替えると、手描きのスケッチや既存のスクリーンショットからもUIデザインとコードを作成できるので、ぜひそちらも試してみてください！