Gemini搭載のStitchでデザイン作成｜ゼロからUI案を作ってみた

Google Labsから提供されている「Stitch（スティッチ）」は、テキストプロンプトや自然言語、さらには手書きのスケッチなどからAIがユーザーインターフェース（UI）を生成できるデザインプラットフォームです。専門的なデザインツールを使いこなすスキルを持たないノンデザイナーであっても、頭の中にあるアイデアを具体的な形として可視化できるのが大きな特徴です。

本記事では、このStitchがどのような機能を備え、デザインや開発のプロセスをどう変化させるのかや、実際にツールを使用してみた結果なども解説します。

✍️GoogleのAIデザインツール「Stitch」とは？

Stitchは、Google Labsが実験的なプロジェクトとして公開しているAIネイティブなUIデザインプラットフォームです。ここでは、このプラットフォームが持つ機能や特徴、そして仕組みについて、詳しく解説します。

AIを活用したUIデザインプラットフォーム

Stitchは、テキストや自然言語のプロンプトを入力するだけで、AIが意図を汲み取り、適切なレイアウトやコンポーネントを配置したデザイン案を自動で出力できます。これにより、デザインの専門知識を持たない企画担当者やマーケターでも、頭の中にあるアイデアを素早く可視化することが可能になります。複雑なツール操作を覚える必要がなく、「どのような画面を作りたいか」を言葉で伝えるだけでプロトタイプが完成するため、プロジェクトの初期段階におけるイメージ共有がスムーズになり、チーム全体の認識合わせが容易になります。

Geminiによる高度な言語処理

プラットフォームの内部には、Googleが開発した生成AIであるGeminiが統合されており、高度な自然言語の処理が可能になっています。執筆時点では、高速な処理に適したモードと、より複雑な推論を得意とする高品質モードの複数が用意されており、用途に応じてこれらを使い分けることが可能です。思考のスピードを落とすことなく次々とデザインバリエーションを生成したり、細部まで作り込まれた緻密なデザインを出力したりと、ニーズやプロジェクトの進行度に合わせて最適なモードを選択できます。
※搭載モデルや選択可能なモードは更新される可能性があるため、最新の仕様は公式案内をご確認ください。

直感的な操作でプロトタイプを作成

生成されたデザインは静止画として確認できるだけでなく、クリック可能なプロトタイプへと簡単に変換できます。ユーザーは無限に広がるキャンバス上で生成結果を比較検討し、必要に応じて音声操作で修正を指示することも可能です。作成したデザインは開発工程へスムーズに移行できるよう工夫されており、専門的なコーディング知識がなくても、機能するモックアップを手軽に準備できます。チーム内でのフィードバックループが高速化し、要件のズレを早期に発見して修正するプロセスが構築されるため、手戻りの少ない開発が実現します。

⭐Yoomはデザイン・開発に関わる業務を自動化できます

Yoomは、企業で利用されている様々なSaaSやアプリケーションをAPIで連携し、日々の複雑な業務フローを自動化できるプラットフォームです。プログラミングの専門知識がない方でも、用意されたテンプレートや直感的な操作を用いて、独自の自動化ワークフローを簡単に構築できます。これにより、AIにプロンプトを入力したり、生成結果を転記したりする手間が削減され、空いた時間を他の業務に充てられます。

[Yoomとは]

Yoomを利用すれば、Google Driveなどにデザイン案が保存されたら、Geminiで解析して結果をSlackなどのチャットツールに通知するといった自動化フローを実現できます。デザインの作成や修正業務のさらなる効率化を図ってみてください。

🖊️Stitchで実現できる4つの主要機能

Stitchには、デザインの初期構築から開発環境へのシームレスな連携までを強力にサポートする多彩な機能が搭載されています。ここでは、プラットフォームの特徴を形作る「Vibe Design」「AIデザインエージェント」「出力連携」「DESIGN.mdによる管理」の4つの主要機能について、その仕組みを詳しく解説します。

Vibe Design機能とAIネイティブな無限キャンバス

Vibe Design機能は、抽象的なビジネス目標やふんわりとしたコンセプトを入力するだけで、それに適したUIを自動生成する画期的な機能です。

• 生成されたデザインは広大な無限キャンバス上に配置
• スペースの制限を気にすることなく複数のバリエーションを並べて比較
• キャンバス上の操作はマウスクリックだけでなく音声による指示にも対応

思考を遮ることなく直感的にデザインを拡張・修正していくことが可能であり、初期のアイデア出しから具体的な画面構成への落とし込みまでをシームレスかつ効率的に行うことができます。

複数案を並行探索するAIデザインエージェント

デザインの方向性が定まらない場合、AIデザインエージェントが自律的に複数のデザイン案を並行して探索してくれます。

• 異なるカラースキームやレイアウトパターンの同時生成
• ターゲットユーザーの特性に合わせたUIの最適化提案
• 特定のアクションを自然に促すための導線設計の複数パターンの作成

このように、一度の指示で多角的なアプローチに基づくデザインが提案されるため、手作業でひとつずつ作成する時間を削減できます。複数の選択肢から最も効果的なUIを素早く比較・選択できるため、意思決定のスピードが向上し、プロジェクトの停滞を防げます。

Figmaなどへの出力機能

作成したデザインをそのまま実際の開発作業に活かせる出力連携機能も充実しています。

• Stitchで生成したデザインをFigma用に変換
• Zipファイルや実装コードとしてエクスポート
• 単なる静止画から実機のようにクリック可能なプロトタイプへの変換

こうした機能により、デザインツールと開発環境の間の隔たりがなくなり、デザイナーが作成した意図をそのまま開発者が実装できる環境が整います。引き継ぎ時に発生しやすい仕様の漏れや認識の齟齬を未然に防ぎ、開発プロセス全体のスムーズな進行につながります。

DESIGN.mdを活用した開発連携

デザインの一貫性を保つための手法として、DESIGN.mdというマークダウン形式のファイルを用いた管理機能があります。

• カラーパレットやタイポグラフィのルールをファイルに定義
• 定義されたシステムに従ってAIが新たな画面を自動生成
• 既存のウェブサイトのURLからデザインシステムを抽出して保存

既存のブランドサイトの情報を読み込ませることで、そのサイトのデザイン法則を学習し、DESIGN.mdとしてエクスポートできます。これにより、ブランドガイドラインに厳密に沿ったUI作成が容易になり、複数人で作業する場合でもデザインの統一感を損なうことなく開発を進めることができます。

🤔【検証】Stitchを使ったデザイン作成

実際にStitchを利用してデザインを生成する業務を検証してみました。今回は、Stitchの実力と操作性を測るため、ゼロから要件を言葉で伝えて新しいUIを作成する手法と、既存のウェブサイトのURLを読み込ませてデザインシステムを抽出する手法の2つのパターンを実施しました。

検証1：ラフな指示からUIを生成する

Vibe Design機能を活用し、ふんわりとした要件から具体的な画面UIを生成する検証です。抽象的な言葉からどこまで実用的なコンポーネントが配置されるかを確認します。Stitchを開き、以下のプロンプトを送信しました。

【検証プロンプト】

地域の農家が規格外の野菜を直接消費者に販売できる、温かみのある直売所アプリのホーム画面を作成してください。メインターゲットは30代〜40代の主婦で、親しみやすさと安心感を感じるグリーンとオレンジを基調としたデザインにしてください。

プロンプトを送信すると、以下のデザイン案が作成されました。

検証結果

ラフな指示からデザイン案を作成してみて、以下のことがわかりました。

• プロンプトの入力のみで複雑な構成を持つ質の高いデザイン案が生成された
• 簡単な指示でも情報をプロンプトに含めることでAIが的確に文脈を理解してくれた
• ラフデザインとして活用できる

今回の検証では、テキストのプロンプトを入力するだけで、無限キャンバス上に野菜の画像やカートへの追加ボタンなどが適切に配置された、非常に完成度の高いデザイン案が生成されました。ターゲット層や作成する目的といった簡単な情報をプロンプトに盛り込むだけでも、AIが文脈を読み取り、ユーザーの意図に沿った複雑な構成のUIを自動で作成できることがわかります。

生成されたデザインはそのまま利用できるほどのクオリティですが、企画の初期段階におけるラフデザインとしての活用も効果的です。例えば、何もないゼロの状態から外部のデザイナーへ要件を伝えるのは難しいものですが、Stitchを使って大まかなイメージを可視化しておくことで、認識のズレを防ぎ、より具体的で建設的な打ち合わせができます。専門知識がなくても、アイデアを形にする強力なサポートツールになると実感しました。

検証2：既存サイトからデザインシステムを抽出する

気になるウェブサイトのURLを入力し、デザインシステムを抽出する検証です。今回はYoomの公式サイト（https://yoom.fun/）を対象に、サイトデザインの抽出を試してみました。Stitchを開いて、「+」マークの「ウェブサイトのURL」を選択し、YoomのトップページURLを添付します。

【トップページ】

次に、以下のプロンプトを入力して送信しました。

【検証プロンプト】

添付のURLを読み込み、このサイトのカラーパレット、タイポグラフィを抽出してください。その後、抽出したデザインシステムを適用し、新規ユーザー向けの会員登録フォーム画面を生成してください。

プロンプトを送信すると、以下のデザインデータが抽出されました。デザインデータは、「エクスポート」メニューの「.zip」でダウンロードできます。

今回は、デザインデータのみのため、DESIGN.mdファイルとしてダウンロードされました。

検証結果

既存のウェブページのデザインデータを抽出してみて、以下のことがわかりました。

• 既存サイトのURLからブランドの基調カラーやスタイルを高精度で抽出できた
• 簡単な指示のみでデザイン情報をマークダウン形式でダウンロードできる
• 抽出したデータを活用することでデザインを保ったまま新たな開発が行える

既存のウェブサイトのURLを読み込ませる検証では、指定したサイトからメインカラーやフォントといったデザインの基調となるスタイルが高い精度で抽出されることが確認できました。抽出されたデータはマークダウン形式で簡単にダウンロードできるため、複雑な操作を必要とせず、初めてツールに触れる方でもスムーズに扱うことができます。

また、この抽出機能の最大のメリットは、取得したデザインデータをそのままStitch上で利用し、新たなアプリやウェブページのプロトタイプ作成に活かせる点にあります。企業のブランドガイドラインに沿ったカラーパレットやタイポグラフィを正確に反映できるため、複数のページや機能を追加する際にも、一貫したデザインが期待できます。既存の資産を活かしながら、誰でも効率的に新しいアイデアを展開していくための優れた機能と言えます。

✅Stitchの料金プランと商用利用の注意点

Stitchを利用する際は、コストやビジネス利用の権利関係について事前に把握することが重要です。ここでは、料金体系や商用利用における具体的なポイントをそれぞれ詳しく紹介します。

Stitchの料金体系

Stitchは執筆時点で、Google Labsの実験的サービスとして無料で提供されています。Googleアカウントでログインするだけで誰でも利用でき、クレジットカードの登録も不要です。
ただし、システム負荷を管理するため、利用回数に上限が設けられています。 生成回数の上限や提供条件は変更される可能性があるため、最新情報はStitch公式サイトをご確認ください。 

商用利用に関するガイドライン

商用利用の可否について、公式に明示的な許可や禁止の記述は確認されていません。あくまで実験的なプロダクトとして提供されているため、生成されたデザインやコードをそのまま商用製品に組み込む場合は注意が必要です。

• Googleの一般的な利用規約に準拠した運用
• 生成物の知的財産権の扱いは利用者の責任において確認が必要
• 出力されたコードに起因するトラブルは自己負担で管理

ビジネスで利用する際は、出力結果をアイデアの参考や社内プロトタイプにとどめ、最終的な実装は人間が必ず確認・調整することをおすすめします。
また、 商用利用の際は、Google利用規約およびGemini アプリのポリシーガイドラインの最新情報を必ず確認してください。 

📉まとめ

Stitchは、テキストや自然言語から直感的にUIを生成できる、ノンデザイナーや開発者にとって画期的なプラットフォームです。Geminiモデルの強力な言語処理能力を活用することで、抽象的なアイデア出しから具体的なプロトタイプ作成、そしてFigmaへのデザイン出力や開発環境へのコード出力までをシームレスに行えます。これにより、デザイン作成の過程で発生するコミュニケーションコストを削減し、プロジェクト初期段階での意思決定をスピードアップさせます。無料で利用できるため、利用制限内で、AIデザインの可能性をぜひ体感してみてください。

💡Yoomでできること

Yoomは、企業が利用する多様なクラウドサービスを連携し、複雑な業務フローを自動化する強力なプラットフォームです。プログラミングの知識がなくても、直感的な操作画面を用いて、独自の自動化ワークフローを簡単に構築できるのが大きな強みです。日々の業務で発生するデータの転記やメールの自動送信、チャットへの通知などを自動化できるため、作業時間の短縮とヒューマンエラーの防止につながります。Yoomには、テンプレートが豊富に用意されており、設定が簡単なだけでなくカスタマイズもできるので、自社の業務に合わせて最適な自動化フローを作成してみてください。

👉今すぐYoomに登録する 

【出典】

Stitch