はじめに
2025年5月21日に自然言語で指示を入力すると自動的にWeb UIを生成するツール「Stitch」のベータ版が公開されました。
主な特徴について以下になります。
- モバイルおよびWebアプリ向けの高品質なUIを自動生成し、Figmaへのエクスポートやフロントエンドコードの取得を簡単に行うことができる。
- AIのモデルはGemini 2.5 Flash、Gemini 2.5 Proを利用している。
- 「自然言語」と「画像」からUI・コードの作成を行うことができる。
今回は会員登録フォームを作成する際に、Stitchを使ってみた感想やどのくらいの精度でできるのかの参考にしていただければ幸いです。
作業を行う前に
今回の成果物について、スポーツジムの会員登録フォームを作成することを想定します。
- メインターゲット: 25-35歳の男性
- 雰囲気: 力強くエネルギッシュ
-
作成画面: 以下の3つを作成
- 会員情報入力フォーム画面
- 会員情報入力確認画面
- 会員情報入力完了画面
手順について
0. Stitchのサイトにアクセス
WebサイトにアクセスしてGoogleアカウントを使ってログインを行うことで利用できます。
1. デザインの生成を始める
デザインの作り方についてはとっても簡単でテキストフォームから自然言語でプロンプトを入力するだけです。
2. プロンプトの入力する内容について
プロンプトについては以下のプロンプトガイドを参考にして作成を行いました。
実際に作成したものについては以下を参照してください。
# 初期生成
黒をベースに黄色をアクセントとした、25〜35歳男性向けのスポーツジム会員登録 モバイルアプリを作成してください。以下の3画面を含めてください。
1. 会員情報入力フォーム
2. 入力内容確認
3. 入力完了
# 入力フォームの項目を追加
会員情報入力フォーム画面に下記8項目を、見出し付きの1カラムレイアウトで追加してください。
- 氏名（テキスト、必須、フリガナ自動生成 UI）
- 生年月日（日付ピッカー、必須、2000年前後を初期表示）
- 電話番号（Tel、必須、モバイルで数字キーパッド）
- メールアドレス（Email、必須、確認欄なし）
- 会員プラン（セレクト、必須、フルタイム／デイタイム／週末）
- 支払方法（ラジオ、必須、クレカ／口座振替／電子マネー）
- 希望入会日（日付ピッカー、任意、30日以内のみ選択可・未選択時は「最短で入会」を自動適用）
- 利用規約と個人情報保護方針への同意（チェックボックス、必須、全文モーダル表示・スクロール完了で活性化）
# テーマカラーと雰囲気
アプリ全体のテーマを「黒背景＋ビビッドイエローのアクセント」、雰囲気を「力強くエネルギッシュ」にしてください。入力欄の枠線は薄いグレー、主要ボタンは黄色のフラットデザインにしてください。
# 対象地域
日本をメインターゲットにしているため、アプリ内の文言は全て日本語にしてください。
# モバイル最適化
フォーム全体の左右パディングを16pxにし、主要ボタンは幅100%に拡大してください。モバイル端末でも片手で押しやすいボタン高さに調整してください。
# 入力内容確認画面
「会員情報入力確認」画面を追加してください。フォームで入力した8項目をカード型で一覧表示し、ページ下部に「戻る」と「この内容で登録」の2ボタンを配置してください。配色とフォントは既存テーマを継承してください。
# 入力完了画面
「会員情報入力完了」画面を追加してください。中央にチェックアイコンと「ご登録ありがとうございました！」という完了メッセージを配置し、下に「マイページへ」ボタンを1つ置いてください。背景は黒、文字は白と黄色のアクセントのみで、余白を広く取りミニマルにしてください。
プロンプトの文章を作るポイントについては以下になります。
- 制作してほしいものを具体的に。
- 制作してほしいもの画面を詳細に記載。
- ターゲット、アプリの雰囲気を記載。
- デザインについても決まっているものはプロンプトに入れる。
- 想定しているフォントサイズやフラットタイプなどの記載。
- メインカラー、全体の色を記載。
上記のプロンプトを元に生成されたデザインについて添付します。
試しに一言レベルのプロンプトの場合の出力結果も共有します。
25〜35歳男性向けのスポーツジム会員登録フォームのモバイルアプリを作成してください。 ページは以下になります。
1. 会員情報入力フォーム
2. 入力内容確認
3. 入力完了
ここから修正を行なっていくでも良いのですが、ある程度のものは決まっている方が修正する際にもスムーズに行うことができるため、最初のプロンプトはしっかりと作成することをおすすめします。
3. コードの取得方法
コードの取得方法については以下のボタンをクリックするとHTMLのコードを取得することができます。
完了ページの場合、以下のコードが生成されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<link crossorigin="" href="https://fonts.gstatic.com/" rel="preconnect"/>
<link as="style" href="https://fonts.googleapis.com/css2?display=swap&family=Lexend:wght@400;500;700;900&family=Noto+Sans+JP:wght@400;500;700;900" onload="this.rel='stylesheet'" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet"/>
<title>Stitch Design</title>
<link href="data:image/x-icon;base64," rel="icon" type="image/x-icon"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<style>
body {
font-family: "Lexend", "Noto Sans JP", sans-serif;
}
</style>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="bg-[#181711] dark">
<div class="relative flex size-full min-h-screen flex-col group/design-root overflow-x-hidden">
<main class="flex-grow flex flex-col items-center justify-center px-6 py-12 text-center">
<div class="mb-10">
<span class="material-icons-outlined text-[#f8dc06] text-8xl"> check_circle </span>
</div>
<h1 class="text-white text-3xl font-bold leading-tight mb-12 tracking-wide">ご登録ありがとうございました！</h1>
</main>
<footer class="px-6 pb-12 pt-6">
<button class="w-full min-w-[84px] max-w-[480px] mx-auto cursor-pointer items-center justify-center overflow-hidden rounded-xl h-14 px-5 bg-[#f8dc06] text-[#181711] text-lg font-bold leading-normal tracking-wider shadow-lg hover:bg-yellow-400 transition-colors duration-300 ease-in-out">
<span class="truncate">マイページへ</span>
</button>
</footer>
</div>
</body>
</html>
よかったポイント
デザインの確認がすぐにできる
それぞれのページを単体で作成してくれる & 横並びで表示してくれるので、全体のフローが見やすいです。
また、出力するコードについてもHTMLのみ(CSSやJavaScriptのコードはHTMLファイルの中に入っています)のため、手元で実際の挙動を確認する際に該当のHTMLファイルのみを開けば確認ができます。
作成されたデザインで複数のパターンで見ることができる
生成されたデザインをベースに「ライトモード・ダークモード」の切り替え、色合いの変更であればボタンでの変更
「Edit theme」をクリックすることでデザインの変更を行うことができるため、追加のデザインを見たい場合でも簡単に見ることができます。
色合いを変えたデザインについては以下のようにデザインが再度生成されます。
ベースを緑にした場合のデザイン
ベースを赤色にしてダークモードにした場合のデザイン
まとめ
アプリ内での日本語のサポートが不十分であったり（日本語で作ってと言っても英語でアプリを作ってくる）、執筆時点ではBETA版であるためboltやv0と比較してしまうともっと多くのことができると嬉しいと思いました。
けれども自然言語のみでHTML, CSS JavaScriptのコード生成はもちろん、Figmaの出力も行ってくれるので、複数のAIツールを利用して今までよりも効率的にプロトタイプの制作を行うことができるのではないでしょうか。
- Stitchを利用してデザインの生成
- Figmaにデザインの保存（Figmaなので、人間の手で簡単に細かく修正することも！！）
- Figmaのデザインをインポートしてboltやv0に実際に動くものの作成
まだ出始めたばかりのものなので、今後のアップデートに期待しつつ、検証できるところでどんどん試していきたいと思いました。
最後まで読んでいただきありがとうございました！
Discussion