メインコンテンツへスキップ

Google Stitchを早速PdM業務でつかってみた

    音声対話AI SaaS IVRy(アイブリー)でPdMを務める土生(@thabu111)です。

    先週のGoogle I/O 2025で様々なサービスが発表されました。その中でも「これはすぐにPdM業務で使えそうだ」と感じたGoogle Stitchを早速使って、プロダクトの改善を行ってみました。

    結論からいうと、生成されるUIの精度は高く、活用のスコープを工夫することで実用的なレベルに達していると考えられます。何より圧倒的に仕上がりが早くなります。
    弊社CEOの奥西もSaaStrカンファレンスの記事で「シリコンバレーでの早さの意識」について書いていますが、スピードを一段階上げる手段になりそうです。

    Google Stitchとは?

    テキストや画像からUIのデザイン作成だけでなく、コードやFigmaファイルも生成できるAIサービスです。現状はまだβ版のため、精度や一部機能に制限があります。
    Standard ModeとExperimental Modeの2種類があり、今回はベース画像を読み込んでマルチモーダル機能を使用したいため、Experimental Modeを選択します。
    (Experimental ModeはCode生成はできますがFigmaのExport機能はまだ実装されていません)

    画像
    Mode選択

    IVRyのオプション画面の改善

    IVRyは開発のスピードが速く、便利なオプション機能が次々と追加されています。一方で以下のような課題があります。

    • 課題

      • オプション機能の増加により、従来の画面では選択肢が多すぎて、ユーザーが適切な設定を見つけづらい

    画像
    現状のオプション画面

    そこで、Google Stitchを使ってこのUIを改善していきます。
    早速プロンプトを入力してみましょう。
    (より洗練されたプロンプトで一発で理想的な結果を出せるかもしれませんが、今回は対話的なアプローチで進めていきます)

    画像
    最初の生成結果

    最初から良い感じのアウトプットが得られました!
    区切り線を追加してカテゴリーの視認性を向上させます。

    画像
    視認性を改善

    ボタンの色が何故か青になっていたので戻します。

    画像
    ボタンの色を変更

    こんな感じで自然言語で修正しながら最終的に出来上がったのがこちら。

    画像
    最終形

    デザインが大幅に改善されました。
    完璧なプロンプトを最初から目指す必要はありません。AIと対話しながら具体的な修正指示を重ねていけば、素早く理想的な結果に到達できます。
    このUIの改善実装は、この後Devinを活用してAIで進めていきます!

    最後に

    Google Stitchを使えばUIの作成が簡単にできます。特に「プロトタイプの作成」や「初期の構想の具体化」に非常に効果的です。PdMが企画した内容の具体化の精度が上がり、開発プロセスが効率化され、最終的なエンジニアやデザイナーとの認識合わせもスムーズになります。

    シンプルな実装であれば、Devinなどを活用することでPdMのリソースだけで企画から実装まで完結できるでしょう。

    一方で、AIへの適切な指示を出すための言語化能力がアウトプットの質を大きく左右し、細かい指示が難しいという課題があります。既存プロダクトの仕様に完全に合わせた高品質なUIを生成するには、まだ限界があるのが現状です。
    そのため、アイデアの壁打ち相手としては非常に便利ですが、デザイナーの重要性は依然として変わりません。
    また、従来の開発プロセス(ReviewやRefinement等)にとらわれすぎず、AIネイティブな開発組織へどうリビルドしていくかを検討する必要があると感じました。

    We are hiring!

    カジュアル面談


    あなたへのおすすめ