GoogleがUIデザインツールの「Stitch」に大幅なアップデートを施しました。アップデート版のStitchではAIに自然言語で指示を出すだけで高品質なUIを作ることが可能。日本でもすでに利用可能だったので実際に使ってみました。

Stitch - Design with AI

https://stitch.withgoogle.com/

Design UI using AI with Stitch from Google Labs

https://blog.google/innovation-and-ai/models-and-research/google-labs/stitch-ai-ui-design/





Googleアカウントにログインした状態でStitchのトップページにアクセスして「Try now」をクリック。



これがStitchのメイン画面です。左側に作例やプロジェクト履歴が並び、右側にチャット欄が表示されています。



チャット欄に作りたいUIの説明を入力して送信ボタンをクリック。今回は「GIGAZINE体重アプリ」という体重記録アプリのUIを作るように頼みました。



チャット画面からキャンバス画面に切り替わりました。



画面右上には処理状況が表示されています。



チャットで指示してから約2分でUIのひな形が出力されました。



出力されたUIはこんな感じ。体重履歴画面やダッシュボードなどが見栄え良くデザインされています。ただ、日本語の文章で指示したのに英語のUIになっているのはちょっと引っかかるポイント。



日本語に変更したいので、画面下部に配置されているチャット欄に「日本語のアプリにして！」と入力して送信します。



約2分で処理完了。画面左下の「日本語のアプリにして！」と記された部分をクリック。



日本語版のUIが表示されました。Stitchではこんな感じにAIと対話しながらデザインを進めることができます。



UIが完成したら画面右上の「エクスポート」をクリック。



Figmaで使える形式でエクスポートしたり、画像とHTMLコードをZIP形式に圧縮してダウンロードしたりできます。



生成結果をGoogle AI Studioに渡してアプリ開発につなげることもできます。



なお、Stitchのアップデート発表とともに競合アプリのFigmaの株価が下落したここも確認されています。