非エンジニアの私がGoogle Stitchを使ってモックアップツールを作ってみた（画面作成編）

こんにちは。製造ビジネステクノロジー部の細見です。

今回は、巷で話題のGoogle Stitchでモックアップツールを作ってみました。まずは画面作成です。

Google Stitchは、日々、どんどんアップデートされており、新しい機能が追加されています。
そのため、YouTubeなどを参考にしようとしても、画面の見た目などが全く違っており、参考になりませんでした。
そこで、ぶっつけ本番となりましたが、自力でやってみました。

Geminiに使い方を聞いてみた

よくわかりませんが、Google Stitchではなく、何か他のツールを使え、と言っているようです。

Claudeに使い方を聞いてみた

おっと、最初にやっておくべき設定が欠落していました。機密情報を扱うかもしれませんので、早速設定しました。さすがClaudeです。

ということで、やってみます。

１）事前準備

Claudeが言うように、いきなりモックアップツールを作って、と指示しても、時間が掛かるばかりです。
そのため、まず、作りたいモックアップツールの仕様については、Claudeで事前に整理しておくことが必要です。仕様を整理した上で、Google Stitchに、「下記のような仕様のモックアップツールを作ってください」とプロンプトを書いた上で、そのままClaudeでアウトプットされた文言を貼り付け、指示をしました。

２）画面イメージの出力

その後、15分ぐらいで、このような画面の状態になり、Google Stitchからいくつかの画面イメージが出力されたようです。よく見ると、赤い丸印のところに何かできあがっています。えっ、何これ？！

Claude(Sonnet 4.6)によると、この画面は、2026年3月の大型アップデートで導入された AIネイティブ無限キャンバスと呼ばれるワークスペース、とのことです。だいぶ俯瞰した、引きの状態での画面表示になっていました。

できあがったアイコンの一番端の部分をクリックしてみます。すると、自分が実際にイメージしていた画面に近いものができあがっていました。

３）追加修正要望

ここを追加して、とか、ここをこのように修正してほしい、といった要望をプロンプトに入力します。
私は何回も修正要望したので、その度に全てのページが出力され、キャンバス上、画面だらけになり、どれが最新なのか、わからなくなってしまいました。

Claude(Sonnet 4.6)に相談すると、「Google Stitchあるある」とのことでした。
Stitchは修正を指示するたびに新しい画面を追加生成していくため、キャンバス上に旧バージョンが溜まっていくそうです。
早く言ってよ～って感じです。

再びClaudeに相談しました。対処方法としては、画面修正のプロンプトを指示する際に、下記を考慮すればよいそうです。

Stitchは現状、複数画面管理がまだ「発展途上」という文言が気になりますが。。。
ここまでで、仕様の整理、画面の修正が完了し、全ての画面が完成しました。次は、実際にモックアップが動かせるようにやっていきます。

以上、続きは次回のブログで。