Google Stitchの使い方｜AIにアプリの画面デザインを作らせてみた

この記事は、株式会社ZELKが運営する、
個人開発者・一人社長を応援するメディアMagnyxaがお届けしています。

この記事は2026年4月13日時点の情報をもとに書いています。

個人開発者の「デザインどうする問題」

アプリを作った。機能は動く。ちゃんと動く。

でも見た目がダサい。

個人開発やってる人なら、一度はぶつかったことあると思う。

Claude Codeで開発していると 「あぁ、Claude Codeで作った画面だな」となりますよね。

このAI感漂う画面と絶妙に言語化できないダサさ
何度キレながらデザインさせ直したか数え切れません。

みなさんはどうでしょうか？

いい感じのデザインをしてくれるAIはないの？

v0とか、Lovableとか、Boltとか。名前は聞いたことあるかもしれませんね。

いずれも同様の問題を抱えていたり、使うのになかなかキャッチアップや環境整備のハードルが高いということもあって避けている方もいるかもしれません。

私もClaude Codeと対話型のGeminiとChatGPTばかりで、

界隈で同時多発的に発展してきたさまざまなコーディングやデザインができるツールについて使い込んでいるかと言われると微妙なラインではあります。

で、Googleがこんなの出してた

いつのまにか、Googleが無料でAIデザインツールをやってた。

名前はStitch。

これが、個人開発者にとってはけっこう気になる中身だった。

ざっくり言うと:

• 無料で使用可能。クレジットカードもいらない（公式サイト）
• Googleのアカウントがあれば今すぐ使える
• 日本語で指示が出せる
• 文章で「こういう画面がほしい」って書くと、アプリの見た目を作ってくれる
• 一度に何画面か、まとめて作れる
• 作ったものはFigmaに書き出せる。コードとして書き出すこともできる

2026年3月19日に大きめの更新があって（Stitch 2.0）、5画面同時に作れるようになったり、月に550回まで使えるようになったりしたらしい（Google公式ブログ）。

特に最近デザイン面でかなりの進化を遂げているようで話題です。

何ができるのか、もうちょっと見てみる

Stitchでできることについて、もう少し具体的にみてみると

たとえば「料理のレシピを検索できるアプリの画面を作って」みたいに文章で指示すると、それっぽいアプリの見た目が出てくるというかんじですね。

しかも1画面だけじゃなくて、「ホーム画面」「検索結果」「レシピの詳細」「お気に入り」「設定」みたいに、アプリ全体の流れをまとめて作ってくれるイメージです。

できあがったものはFigmaに書き出せるから、そこから自分で手を入れることもできるし、
コードとして書き出す機能もあって、HTMLやCSS、あとはFlutterとかSwiftUIとか、いろんな形で出せるらしい（Google Developers Blog）。

あと、声で指示を出せる機能（Voice Canvas）もあって、画面を見ながら「ここもうちょっと大きく」とか言うと直してくれます。

正直、個人開発者が「とりあえずの見た目」を作るには、かなり手軽に見える。

実際に使ってみた

stitchを開くとChatGPTなどのような対話の画面が出てきますが
いきなりここに自分の作りたい画面のデザインをテキストで言うだけでできます。

簡単にプロンプトを投げるだけ

個人開発者が自分のアプリを紹介できるサービスのページを作って。
アプリがカード形式で並んでいて、いいねとかブックマークができる感じ。
白っぽいシンプルなデザインがいい

この一回のプロンプトで出来上がるものがこちらです。

プロンプトの通りにwebアプリ自体のデザインが生成されましたが、Claude Codeで作る場合とかなり雰囲気が違っていてデザイン性がちょっと強いですよね。
ただ、海外風でちょっと馴染みがないデザインですが。

これアートボード的な体験で操作ができるんですが、特定の画面を選んでプロンプトで修正指示したり、右クリックでなんとhtmlに書き出したり生成されたテキストや画像をピンポイントで修正することもできます。

画面右上の「エクスポート」から対象画面をfigmaへの書き出しやzipでプレビュー画像とhtmlの出力をしたりMCPサーバの利用によってAIエージェントの連携もできるようです。これについては今後試してみたいと思います。

今回は4画面生成されましたがこの中で特に右から二番目のトップ画面的な画面はなかなかいい感じです。

ただ、謎にメインビジュアルがデカくて下に並んでいるカードがスクロールしないと見れないのが微妙です。

ちょっとこれを調整してみたいと思って以下のように試してみました。

Exploreのメインビジュアルデカすぎませんか。

そうするとこんな感じでだいぶメインビジュアルが縦に圧縮されました。

プロンプト次第で細かいところもだいぶと調整がききそうです。

ちなみにこのメディアサイトはMagnyxa(マグニクサ)という名前ですが個人開発のアプリを掲載してアプリの発信やコミュニティ特典などを提供するプラットフォームのMagnyxaもあります。

なんとなく構成は似ていますね。
やはり一定のセオリーみたいなものがあるのでしょうか。

私はデザインに詳しくないのでデザイナーからしたら当たり前のこともわからないですが、綺麗なデザインになるための理論的なものを反映しているのかもしれませんね👀

個人開発者にとって、何が変わりそうか

デザイナーに依頼はできないけど自分のデザインセンスがないしAIも微妙な感じで出してくる。

個人で何か作ってる人の多くが、たぶんこんな悩みを抱えているのではないでしょうか。

Stitchみたいなものがあると、「とりあえずの見た目」を作る時間が、だいぶ減るかもしれないです。

Stitchみたいな道具で、個人で作るハードルが下がっていく

Claude CodeやCodexが開発に大きなインパクトを与えてきましたがデザイン面だけ今までぱっとしませんでした。

今回のGoogle Stitchみたいなツールも今後増えていけば大き状況が変わってきそうですね。

今後に期待です！

参照:

• Google公式ブログ - Stitch: Design UI using AI
• Google Developers Blog - From idea to app: Introducing Stitch
• Google Stitch 公式サイト

Magnyxaでは、AIを活用して一人で事業を加速させたい個人開発者・一人社長を応援しています。
あなたのプロダクトやサービスをもっと多くの人に届けたいなら、Magnyxaプラットフォームをチェックしてみてください。

「AIを活用したいけど、何から始めればいいかわからない」という方は、
運営元の株式会社ZELKまでお気軽にご相談ください。
個人・法人問わず、AI・技術の教育やコンサルティングを行っています。まずは無料でご相談ください。