アイデアからアプリへ：新しいUI設計の方法Stitchのご紹介

優れたアプリケーションを作るためには、デザインと開発の強力な連携が欠かせません。デザイナーはユーザー体験を思い描き、直感的で魅力的なインターフェースを設計します。開発者は、そのデザインを機能的なコードとして具現化します。従来、このデザインのアイデアを実際に動作するコードへとつなげるには、多くの手作業と行き来が必要でした。

まさにその課題を解決するのがStitchです。 StitchはGoogle Labsの新しい実験プロジェクトで、シンプルなプロンプトやイメージを入力するだけで、複雑なUIデザインやフロントエンドコードを数分で生成できます。

Stitchは、ワークフローを最適化したいと考えていたデザイナーとエンジニアの発想から生まれました。Gemini 2.5 Pro のマルチモーダル機能を活用し、デザインと開発の間によりスムーズで統合されたワークフローを実現しています。画像入力によるデザインの微調整、対話型チャット、テーマセレクター、Figma への貼り付け機能などを備えており、Stitch はクリエイティブなデザインと開発ニーズにしっかりと応えるツールです。

以下は、Stitchが現在提供している機能で、デザインおよび開発プロセスを強化します：

自然言語からUIを生成

作りたいアプリケーションについて、カラーパレットや理想のユーザー体験などの詳細を含めて、わかりやすい英語で説明してください。Stitchは、その説明に基づいて最適なビジュアルインターフェースを生成します。

イメージやワイヤーフレームからUIを生成

ホワイトボードに描いたデザインスケッチや、魅力的なUIのスクリーンショット、ざっくりとしたワイヤーフレームがある場合は、それをStitchにアップロードしてください。Stitchはイメージを解析し、それに対応するデジタルUIを生成します。初期のビジュアルアイデアを、機能的なデザインへとつなげます。

迅速な反復とデザインの探索

デザインは反復的なプロセスです。Stitchは、インターフェースの複数のバリエーションを生成できる機能によって、そのプロセスを支援します。さまざまなレイアウト、コンポーネント、スタイルを試して、理想の見た目や使い心地を実現しましょう。

開発へのシームレスな移行

デザインに満足したら、Stitchは開発ワークフローへの重要な橋渡しを提供します：

• Figmaへの貼り付け：生成したデザインは、Figmaにシームレスに貼り付けることができ、さらなる微調整やデザインチームとの協働、既存のデザインシステムへの統合が容易になります。

• フロントエンドコードのエクスポート： Stitchはデザインに基づいた、クリーンで機能的なフロントエンドコードを生成します。これにより、すぐに使える完全なUIが手に入ります。

Stitchは、誰もがアプリ作りの魔法を体験できるようにすることを目指しています。この実験プロジェクトを皆さんにお届けできることを大変嬉しく思っており、皆さんがどんな作品を生み出すのか楽しみにしています。

ぜひstitch.withgoogle.comでStitchをお試しください。ご感想もお聞かせいただけると嬉しいです！

2025年5月22日より、io.google でこの発表およびGoogle I/O 2025 のすべての最新情報をご覧いただけます。