「Google Stitch でUIデザインは作れたけど、そのあとどうすればいい？」
そんな疑問を持っていませんか？
AIを使えば誰でもきれいなUIが生成できるようになった今、多くの人が次の壁にぶつかっています。それが「デザインを実際の開発に渡す」というステップです。
Google Stitch（グーグル・スティッチ）は、プロンプトを入力するだけでUIデザインを自動生成できるGoogleのAIデザインツールです。しかし、生成したデザインをどうやってコードに変換し、エンジニアや開発チームに引き渡すのかについては、日本語の情報がまだ非常に少ない状況です。
筆者はGoogle Stitch を半年以上使い続ける中で、エクスポート機能の使い方を一つひとつ試してきました。「コードがうまく書き出せない」「Figmaとどう連携すればいいか分からない」といったつまずきを経験しながら、実践の中で理解を深めてきた内容を、この記事ではすべて公開します。
この記事を読み終えると、Google Stitch で生成したデザインをコードとして書き出す方法、Figmaとの連携手順、そして開発チームへスムーズにデザインを引き渡すワークフローを理解できます。
結論から言うと、Google Stitch のエクスポート機能を使えば、AIが生成したUIデザインをHTML/CSS形式や各種形式で書き出し、Figmaへのインポートや開発チームへの引き渡しに活用できます。デザインと実装の間にある「橋渡し役」として、このエクスポート機能の理解はGoogle Stitch を使いこなす上で欠かせないステップです。
Google Stitch のエクスポート機能とは？
Google Stitch のエクスポート機能とは、AIが生成したUIデザインをさまざまな形式で書き出し、他のツールや開発環境で活用できるようにする機能のことです。
デザインをビジュアルとして確認するだけでなく、実際の開発に使えるコードや、デザインツールで編集できるファイルとして出力できる点が、このツールの大きな強みです。
なぜエクスポート機能が重要なのか
UIデザインツールにおいて、エクスポート機能は「デザインと開発の橋渡し役」として極めて重要です。
従来のデザインフローでは、デザイナーがFigmaやAdobe XDでUIを作成し、エンジニアがそのデザインを見ながら手動でHTMLやCSSを書いていました。このプロセスには多くの時間とコミュニケーションコストがかかっていました。Google Stitch のエクスポート機能を活用すると、この課題を大幅に解消できます。AIが生成したデザインをそのままコードとして出力できるため、エンジニアへの引き渡しコストが劇的に下がります。
実際に私がこの機能を使い始めて感じたのは、「デザインと実装の往復が減った」ということです。以前は「このボタン、実装できますか？」という確認のやり取りが頻繁に発生していましたが、コード付きで渡せるようになってからは、そのやり取りがほぼなくなりました。
デザイン作業をAIに任せられるだけでなく、その成果物を開発チームがすぐに使える形で渡せるようになったことは、小さなチームや非デザイナーが主導するプロジェクトにとって大きな恩恵です。チームの生産性を根本から変える可能性を持った機能と言えます。
エクスポートできる主な形式
Google Stitch がサポートするエクスポート形式は以下の通りです。
- HTMLファイル：Webブラウザでそのまま表示できる形式。プロトタイプや本番利用にも対応
- CSSファイル：スタイルシートを切り出した形式。HTMLとセットで使用する
- SVG形式：アイコンや図形要素を高品質で書き出す形式。ベクター形式のため拡大縮小しても品質が落ちない
- PNG/JPG：画像としてのエクスポート。デザイン確認や資料への貼り付けに使用
- Figma連携：FigmaプロジェクトへのインポートをサポートしFigma上で詳細編集が可能
Google Stitch のエクスポート手順【ステップ別解説】
実際にGoogle Stitch でデザインを書き出す手順を、ステップごとに詳しく説明します。初めてエクスポートを試みる方でも迷わないよう、画面の操作から設定の確認まで丁寧に解説します。
ステップ1：デザインを完成させてエクスポート画面へ
まず、Google Stitch でUIデザインを生成・調整した後、画面右上の「エクスポート」ボタン（または「Export」「書き出し」）をクリックします。エクスポートボタンは画面の右上または右側のツールパネルに表示されています。クリックすると、エクスポートのオプション画面が開きます。
ここで注意したいのは、エクスポート前にデザインの最終確認を行うことです。生成直後のデザインには、プロンプトの解釈ミスや意図しない要素が含まれることがあります。以下のチェックを行いましょう。
- テキストの内容が正しく表示されているか
- ボタンやリンクの配置が意図通りになっているか
- カラーパレットがブランドガイドラインに沿っているか
- レスポンシブ対応の設定がされているか（PCとモバイル両方の表示を確認）
このチェックを省略してエクスポートしてしまうと、開発チームに渡した後で手戻りが発生します。1〜2分の確認が、後で1〜2時間の修正を防ぎます。
ステップ2：エクスポート形式を選択する
エクスポートオプション画面では、書き出す形式を選択します。用途によって最適な形式が異なるため、目的を明確にしてから選びましょう。
Webサイト・Webアプリを作る場合
→ HTMLファイルを選択。CSSも合わせて書き出すとスタイルが分離され、保守性が高まります。
デザイナーと共同編集する場合
→ Figmaへのエクスポートを選択。デザイナーがFigmaで細部を調整できます。
アイコンや画像素材として使う場合
→ SVGまたはPNG形式を選択。SVGはスケーラブルなので様々なサイズで使用できます。
プレゼン資料・デザイン確認用
→ PNG/JPGを選択。そのままドキュメントに貼り付けられます。
ステップ3：詳細オプションを設定する
形式を選択したら、詳細オプションを確認します。主な設定項目は以下の通りです。
- 解像度：PNG/JPG書き出し時のピクセル密度（1x、2x、3xなど）
- レイヤー名の設定：コードのクラス名やIDに反映される
- 余白・パディングの含有：デザイン要素の周囲の空白を含めるかどうか
- フォントの埋め込み：Webフォントを含めるか外部参照にするか
これらの設定は、後の開発工程での修正コストに直結します。特にクラス名の命名規則は、エンジニアと事前に話し合って決めておくと、引き渡し後のコミュニケーションがスムーズになります。
ステップ4：書き出したファイルを確認する
ダウンロードしたファイルをブラウザで開き、デザインが意図通りに表示されるか確認します。以下の点を必ずチェックしましょう。
- フォントが正しく表示されているか（外部フォントの場合はオンライン環境での確認が必要）
- 色が正確に再現されているか
- レイアウトが崩れていないか
- インタラクティブな要素（ホバーエフェクトなど）が動作するか
- ブラウザのサイズを変更したときにレスポンシブが正しく機能するか
HTMLコードとして書き出す方法【実践編】
HTMLエクスポートは、Google Stitch の機能の中でも特に実用性が高いオプションです。ここでは、実際に筆者が使ってみて分かった具体的な活用方法と、出力コードの特徴を詳しく紹介します。
出力されるHTMLコードの特徴
Google Stitch が出力するHTMLコードは、AIが生成したデザイン構造を忠実に再現したものです。実際に書き出してみると、以下のような特徴があります。
良い点
- セマンティックなHTML構造（見出し・段落・ボタンが適切なタグで表現される）
- インラインCSSではなくクラスベースのスタイリングで保守性が高い
- 多くの場合モバイルファーストのレスポンシブ設計が適用されている
注意が必要な点
- クラス名が自動生成のため意味が分かりにくいことがある（例：stitch-component-001）
- 不要なネストが含まれ、コードの可読性が下がるケースがある
- フォントはGoogle Fontsへの外部参照になることが多い
出力コードをそのまま使える場面・手直しが必要な場面
出力されたHTMLコードをそのまま使える場面と、エンジニアによる手直しが必要な場面を整理します。
そのまま使える場面
- ランディングページのプロトタイプや確認用デモ
- 社内向けの簡易ダッシュボードや管理ツール
- クライアントへのデザイン提案・プレゼン用モックアップ
- ハッカソンや短期プロジェクトでの素早いUI構築
手直しが必要な場面
- 実際のバックエンドと連携するフォームやAPIを呼び出すボタン
- 動的なデータ（データベースから取得する情報）を表示するコンポーネント
- 既存のデザインシステムやCSSフレームワークへの統合
- SEO対応が必要なコンテンツページ（構造化データ・OGP設定など）
実際に私が経験したのは、「ランディングページのプロトタイプ」として書き出したコードが、そのまま本番環境でほぼ使えたケースです。微調整は必要でしたが、ゼロから書くよりも3〜4倍の速度で仕上げることができました。
HTMLコードの品質を高めるプロンプト記述法
出力されるHTMLの品質を上げるには、生成プロンプトの段階から意識することが重要です。以下のポイントをプロンプトに盛り込むと、より使いやすいコードが得られます。
- 「セマンティックHTMLを使って生成してください」と明示する
- 「クラス名はBEM記法に従ってください」と命名規則を指定する
- 「レスポンシブデザインでモバイルファーストの設計にしてください」と追記する
- 「Tailwind CSSのクラスを使って実装してください」のようにCSSフレームワークを指定する
Google Stitch と Figma の連携方法
Google Stitch で生成したデザインをFigmaに取り込む方法について詳しく解説します。Figmaとの連携は、デザイナーと協働しているチームや、既存のFigmaプロジェクトにAI生成デザインを組み込みたい場合に非常に有効です。
Figmaへのエクスポート手順
Google Stitch からFigmaへエクスポートするには、以下の手順を行います。
- Google Stitch でデザインを完成させる
- エクスポートオプションから「Figmaにエクスポート」または「Figma形式で書き出し」を選択
- 初回の連携時には、FigmaアカウントとGoogle Stitch の連携承認を行う
- エクスポート先のFigmaプロジェクト・ページ・フレームを指定する
- エクスポートを実行して完了
エクスポート後、FigmaにはGoogle Stitch で生成したデザインがコンポーネントとしてインポートされます。Figma上では通常のFigmaコンポーネントとして扱えるため、テキストの変更、色の調整、レイアウトの微修正が簡単に行えます。
Figmaで追加編集する際の注意点
Figmaにインポートしたデザインを編集する際には、いくつかの点に注意が必要です。
レイヤー構造の確認
Google Stitch からエクスポートしたデザインは、Figmaのレイヤー構造が自動的に整理されています。ただし、複雑なUIでは想定外のグループ化がされることがあります。作業前にレイヤーパネルを確認し、必要に応じてグループを整理しましょう。
コンポーネントの再利用設定
繰り返し使用する要素（ボタン、カード、ナビゲーション、フォームフィールドなど）はFigmaのコンポーネントとして登録し直すことをおすすめします。デザインの一貫性を保ちながら効率的に変更を加えられます。
スタイルガイドとの整合性
既存のFigmaプロジェクトにデザインを組み込む場合、カラースタイルやテキストスタイルがプロジェクトのガイドラインと合っているかを確認してください。特にブランドカラーについては、Figmaの「カラースタイル」に登録されている正確なカラーコードと一致させることが重要です。
フォント設定の確認
Google Stitch が使用するフォントとFigmaで設定されているフォントが一致しない場合、インポート後にフォントが変わることがあります。インポート前に、使用するフォントがFigmaの環境で利用可能かを確認しておきましょう。
開発チームへのデザイン引き渡しのベストプラクティス
Google Stitch で生成したデザインを開発チームに渡す際のベストプラクティスを紹介します。スムーズな引き渡しができると、開発速度と成果物の品質が大幅に向上します。
エンジニアが必要とする情報の整理
デザインを引き渡す際に、エンジニアが実装に必要な情報を事前に整理しておくことが重要です。
必須情報
- コンポーネントごとの仕様（幅・高さ・余白・パディング）
- フォント情報（フォントファミリー、サイズ、ウェイト、行間）
- カラーコード（HEX形式で正確に、例：#3B82F6）
- レスポンシブの挙動（どのブレークポイントでレイアウトが変わるか）
あると便利な情報
- インタラクションの仕様（ホバー状態のスタイル変化、クリック後の動作）
- アニメーションの詳細（トランジションの時間、イージング関数）
- エラー状態・空の状態（データが0件のとき）のデザイン
- アクセシビリティ要件（コントラスト比の目標値、フォーカス時のスタイル）
私が実際に使っているのは、エクスポートしたHTMLコードと合わせて「デザイン仕様シート」をNotionにまとめて渡す方法です。コードだけでなく、設計の意図を文章で補足することで、実装後の修正依頼が大幅に減りました。
コミュニケーションを減らすための引き渡し方
引き渡し時のコミュニケーションコストを下げるための実践的な方法を3つ紹介します。
1. コードに注釈を付ける
エクスポートしたHTMLコードの中で、特に注意が必要な箇所にコメントを追加します。「このボタンはAPIレスポンスを受けて表示が変わる」といった情報を事前に伝えることで、後の質問を大幅に減らせます。
2. スクリーンショットと対応するコードを並べる
ビジュアルとコードを対応させたドキュメントを作成すると、エンジニアが実装時に参照しやすくなります。「このスクリーンショットの赤い枠がこのdivタグに対応している」という形で視覚的に紐付けると理解が深まります。
3. エッジケースのデザインも含める
データが0件の場合、エラーが発生した場合など、通常の状態以外のデザインも事前に提示しておくと、後から「この状態のデザインは？」という質問を受けずに済みます。
よくある失敗パターンと対処法
Google Stitch のエクスポート機能を使う中で、多くの人がつまずくポイントとその対処法を紹介します。
失敗1：コードが複雑すぎて使えない
症状：エクスポートしたHTMLコードを開いてみたが、構造が複雑すぎて何がどこにあるか分からない。
対処法：プロンプトをシンプルにして、コンポーネント単位で生成するようにしましょう。複雑なUIは複数の単純なUIに分割して生成し、後から組み合わせる方が管理しやすくなります。
失敗2：レスポンシブ対応が不完全
症状：PCでは正しく表示されるが、スマートフォンで確認するとレイアウトが崩れる。
対処法：プロンプトに「レスポンシブデザイン対応」「モバイルファーストで実装」と明記することで改善できます。エクスポート後にCSSのメディアクエリを手動で確認・調整することも有効です。
失敗3：フォントが正しく表示されない
症状：エクスポートしたHTMLをローカルで開くと、フォントが別のものに置き換わっている。
対処法：Google Fontsへの外部参照を含むため、オフライン環境では発生します。インターネット接続がある環境で確認し、本番環境では適切なフォント読み込み設定を行いましょう。
失敗4：カラーコードがデザインシステムと合わない
症状：書き出されたCSSのカラーコードが、自社のデザインシステムで定義している色と微妙に違う。
対処法：プロンプトで具体的なカラーコード（例：#FF6B00）を直接指定することで解決できます。エクスポート後はCSS変数（Custom Properties）を使って色を一括管理すると運用が楽になります。
失敗5：エクスポートしたコードが本番環境で動かない
症状：ローカルでは動作確認できたが、本番サーバーにアップロードすると一部の機能が動かない。
対処法：外部CDNへの依存や相対パスの問題が主な原因です。ファイルパスが正しいか、外部リソースが本番環境からアクセス可能かを確認してください。ブラウザの開発者ツール（F12キー）でエラーメッセージを確認し、原因を特定するのが最短の解決策です。
よくある質問（FAQ）
Q1. Google Stitch のエクスポート機能は無料で使えますか？
Google Stitch の基本的なエクスポート機能（HTML/CSS書き出し）は無料プランでも利用できます。ただし、高度なエクスポートオプション（Figma連携や特定の形式での書き出し）は有料プランが必要になる場合があります。最新の料金・機能制限については、Google Stitch の公式サイトでご確認ください。無料プランでも十分な機能が使えるため、まずは無料で試してみることをおすすめします。
Q2. エクスポートしたHTMLコードをWordPressに使えますか？
はい、エクスポートしたHTML/CSSコードはWordPressに使うことができます。WordPressのカスタムHTMLブロックに貼り付ける方法が最も簡単ですが、テーマやプラグインとの競合が起きる可能性があります。子テーマのCSSファイルにスタイルを追加する方法や、カスタムページテンプレートとして実装する方法が、より安定した結果を得やすいです。
Q3. Figmaのプラグインを使ってGoogle Stitch と連携できますか？
2026年4月時点では、Google Stitch 専用のFigmaプラグインは公式には提供されていません。連携方法としては、Google Stitch からエクスポートしたファイルをFigmaにインポートする方法が主流です。コミュニティ製のプラグインが登場する可能性もありますので、Figmaのプラグインコミュニティを定期的に確認することをおすすめします。
Q4. エクスポートしたHTMLコードのクラス名を変更できますか？
はい、エクスポート後のHTMLコードは通常のテキストファイルですので、テキストエディタやIDEで自由に編集できます。クラス名の変更は、HTMLファイルとCSSファイルの両方で一括置換すると効率的です。VSCodeを使っている場合は、「検索と置換」機能（Ctrl+H）でプロジェクト全体を一括変換できます。変更後は必ずブラウザで表示を確認してください。
Q5. デザインの一部だけをエクスポートできますか？
はい、Google Stitch では特定のコンポーネントやセクションを選択してエクスポートすることができます。UIの特定部分だけを切り出してコードを得たい場合は、エクスポート前に対象要素を選択してから書き出しを実行してください。ページ全体ではなくコンポーネント単位でエクスポートすると、コードが管理しやすく、既存プロジェクトへの組み込みもスムーズになります。
Q6. エクスポートしたコードのアクセシビリティ対応は大丈夫ですか？
Google Stitch が生成するHTMLコードは基本的なアクセシビリティを考慮していますが、完全ではありません。本番環境で使用する場合は、WCAG（Web Content Accessibility Guidelines）に準拠しているかを確認し、必要に応じてaria属性の追加、コントラスト比の確認、キーボード操作での動作確認を行うことをおすすめします。
Q7. エクスポート機能はどのブラウザで使えますか？
Google Stitch はWebブラウザで動作するツールですが、すべての機能が最も安定して動作するのはGoogle Chromeです。Firefox、Safari、Microsoft Edgeでも基本的に動作しますが、一部の機能で挙動が異なる場合があります。最新バージョンのGoogle Chrome（またはChromiumベースのブラウザ）の使用を推奨します。
Q8. 複数のデザインをまとめてエクスポートできますか？
2026年4月時点では、Google Stitch での複数デザインの一括エクスポートについては機能制限がある場合があります。複数のデザインをエクスポートしたい場合は、個別に書き出す方法が確実です。書き出したファイルはローカルのフォルダに整理して管理することをおすすめします。「プロジェクト名/コンポーネント名」のようなフォルダ構造を作ると、後から参照しやすくなります。
まとめ——エクスポートを制する者がデザインフローを制する
Google Stitch のコード書き出し・エクスポート機能について、使い方から実践的な活用法まで詳しく解説してきました。
この記事のポイントを振り返ります。
- Google Stitch のエクスポート機能は、AIが生成したデザインをHTML/CSS・SVG・Figmaなど複数の形式で書き出せる機能で、デザインと開発の橋渡し役として機能する
- エクスポートの手順は「デザイン完成→形式選択→詳細設定→書き出し→確認」のステップで進む
- HTML書き出しはプロトタイプから本番利用まで対応できるレベルの品質が得られるが、動的データ連携は手直しが必要
- Figmaとの連携により、既存のデザインフローにGoogle Stitch を組み込んでデザイナーとの共同作業が可能になる
- 開発チームへの引き渡し時は「仕様情報の整理」と「コメント付きコード」がコミュニケーションコストを下げる鍵
- よくある失敗（コードの複雑化・レスポンシブ崩れ・フォント問題）には具体的な対処法がある
Google Stitch は「デザインを生成するツール」として注目されがちですが、エクスポート機能を使いこなすことで「デザインから実装まで」を一気通貫でサポートするツールとして活用できます。特に、デザイナーがいない小規模チームや、デザインと開発の両方を担う個人開発者にとって、このエクスポート機能は強力な武器になります。
これからAIデザインツールを活用しようと考えているなら、エクスポート機能の理解は必須です。まずは小さなUIコンポーネント——たとえばシンプルなログインフォームやボタンコンポーネント——を生成し、HTMLとしてエクスポートしてブラウザで確認してみてください。最初の一歩を踏み出すことが、新しいデザインフローへの近道です。
デザインと実装の間にあった壁は、Google Stitch のエクスポート機能を活用することで、確実に低くなっていきます。
