Google Stitch と Figma、どちらで作るか迷ったときに読む記事

2026.04.12

「Google Stitch を試してみたいけど、Figma で作ればいいんじゃないか」——そう思って、しばらく踏み出せずにいた時期がある。

どちらも「UIを作るツール」として紹介されることが多いため、比べてしまうのは自然なことだ。だが実際に両方を使い込んでみると、二つのツールはそもそも「何を解こうとしているか」が根本的に違うことがわかってきた。

この記事では、Google Stitch と Figma を併用している立場から、両者の違いと使い分けの基準を整理する。「どちらが優れているか」という話ではなく、「どちらが今の自分の目的に合うか」を判断する材料として読んでほしい。

そもそも、二つのツールは「出発点」が違う

Figma は「デザイナーのための協業ツール」として生まれた。ピクセル単位での精密なレイアウト作成、コンポーネントの管理、プロトタイプの共有、デザインシステムの構築——これらをチームで行うための環境が徹底的に整備されている。

対して Google Stitch は「言葉でUIを生成するAIツール」だ。「ログイン画面を作って」「ダッシュボードのカードレイアウトを試したい」——そういう意図をテキストで伝えると、AIがHTMLとCSSでUIを生成してくれる。手を動かす前の「アイデアを形にする」フェーズに強い。

つまり、Figma が「描くツール」だとすれば、Google Stitch は「話しかけて生成するツール」に近い。出発点が違うのだから、比べる軸も変わってくる。

Google Stitch が向いている場面

アイデアを素早く可視化したいとき

「こういう感じのUIを試してみたい」というぼんやりしたイメージを、すぐに画面で確認したいとき——Google Stitch の生成スピードは圧倒的だ。Figma でゼロからフレームを作り、コンポーネントを並べ、スタイルを当てる作業を省いて、数秒で「それらしいUI」が出てくる。

プロトタイプ初期の「方向性の検討」フェーズでは、このスピードが非常に効く。10パターン試して9パターン捨てる、という探索ができる。

デザインツールに不慣れな人が関わるとき

ディレクターやエンジニア、あるいはクライアントが「Figmaは操作が難しい」と感じている場合、Google Stitch はハードルが低い。テキストで意図を伝えるだけなので、デザインの知識がなくても議論に参加できる。

「こういう画面が欲しい」という要件をプロンプトで共有するだけで、全員が同じ画面を見ながら話せる。これは認識合わせのコストを大きく下げる。

コードに近い形で出力したいとき

Google Stitch が生成するのはHTMLとCSSだ。Figmaのデザインファイルと違い、そのまま開発に渡せる形式に近い。デザイン→コーディングの変換コストが低く、実装フェーズへの移行がスムーズになる。

Figma が向いている場面

精密なデザインデータが必要なとき

リリース品質のデザインデータ——スペックを開発者に渡す、デザインシステムに組み込む、複数のアートボードを一貫して管理する——これらはFigmaの独壇場だ。Google Stitchで生成したUIは「素材」に近く、そのまま本番のデザインデータにはなりにくい。

チームで長期的にデザインを管理するとき

デザインシステム、バージョン管理、コメント機能、プラグイン連携——Figmaはチームで継続的に使うための仕組みが充実している。プロジェクトが長期にわたるほど、この「資産の積み重ね」が効いてくる。

インタラクションを細かく定義したいとき

ホバー、クリック、ページ遷移、マイクロインタラクション——Figmaのプロトタイプ機能はこれらを細かく設定できる。ユーザーテスト用のクリッカブルプロトタイプを作るなら、Figmaのほうが表現の幅が広い。

両方使うのが、実は一番効率的だった

「どちらか一方を選ぶ」という問いの立て方自体が、少し違うかもしれない。私が最終的に落ち着いたのは、フェーズによって使い分けるワークフローだ。

探索フェーズでは Google Stitch でアイデアを出し、方向性が決まったらFigmaで詰める。この二段構えにしてから、初期の迷走時間が減り、Figmaでの作業が目的を持って進むようになった。

Google Stitch のアウトプットを「ラフスケッチ」として扱い、Figmaに移植して磨く——このイメージが合っている人には、両方導入することを勧めたい。

「どちらで作るか」の判断基準を整理する

迷ったときのチェックリストとして、次の問いを使っている。

アイデアを探索する段階か、決まったものを磨く段階か
デザイン専門家以外がプロセスに関わるか
最終成果物がHTMLコードで構わないか、Figmaファイルとして管理する必要があるか
一人で完結する作業か、チームで継続的に管理するか
スピードが最優先か、精度が最優先か

「探索・速さ・非デザイナー参加」なら Google Stitch、「精度・管理・チーム継続運用」なら Figma、という方向で大きく外れることはないはずだ。

Google Stitch の現時点での限界も正直に言う

公平のために書いておく。Google Stitch は現時点では、生成したUIを細かく編集する機能が限られている。「この部分だけ直したい」というときに、プロンプトで再指示するか、出力されたコードを手で直すかの二択になる。

また、複雑なインタラクションやアニメーションを定義することは苦手だ。生成されたUIは静的なレイアウトとして優れているが、「動き」の表現はまだFigmaに及ばない。

これらの限界を理解した上で使えば、期待外れを感じることは少なくなる。

よくある質問

Q1. Google Stitch と Figma は連携できますか？

直接のプラグイン連携は現時点では公式にはありません。ただし、Google Stitch で生成したHTMLコードをFigmaのHTML入力機能（一部プラグイン経由）でインポートするなど、間接的な活用方法を取っているチームもあります。ワークフローに合わせて工夫が必要です。

Q2. Figma を使ったことがなくても Google Stitch から始めていいですか？

はい。Google Stitch はデザインツールの経験がなくても使い始めやすいツールです。まず Google Stitch でUIを生成することに慣れてから、必要に応じて Figma に広げていくのは合理的な順序です。

Q3. エンジニアが UI の確認に使うなら、どちらが適していますか？

目的によって異なります。「実装前の方向性確認」なら Google Stitch の方が速く動けます。「デザイン仕様の正確な確認」ならFigmaのスペックビューが適しています。エンジニアが自分でUIのラフを作りたいなら、Google Stitch の方がとっつきやすいでしょう。

Q4. コストはどちらが高いですか？

Figma は無料プランから有効に使えますが、チーム機能やバージョン管理を活用するには有料プランが実質必要になります。Google Stitch の料金体系はプランによって異なります。チーム規模と用途に応じて比較検討してください。

Q5. 「Google Stitch だけで完結させる」は現実的ですか？

小規模なプロジェクト、個人開発、プロトタイピング中心の用途であれば現実的です。ただし、精密なデザインシステム管理や大規模チームでの運用には、現時点では Figma との組み合わせが現実的です。

Q6. Adobe XD との比較も気になります

Adobe XD は Figma との比較文脈で語られることが多いツールです。Google Stitch との比較で言えば、XD も「デザイナーが手で描くツール」の系統であり、「AIが生成するツール」の Google Stitch とは位置づけが異なります。探索フェーズへの活用という点では、Stitch の優位性は XD との比較でも同様に成り立ちます。