できるようになること
30分後の状態：
- Google Stitchで要件からUIデザインを生成し、Figmaにエクスポートして、レイヤー単位で編集可能な状態を作れる。
最終的にできること：
- 新規のWebデザイン（LP）をゼロから作成する、既存サイトのデザインを改善する、この2つのパターンを一人で実行し、Figma上で手動編集できるデザインデータとして手元に持てる。
※Google Stitchは、Googleが2025年に公開したAI UIデザインツール。自然言語で指示を出すとWebやモバイルのUIデザインを生成する。
※Figmaは、UI/UXデザインの業界標準ツール。ノーコードで直感的にデザイン制作ができる。
最終アウトプット
Figma上で編集可能なUIデザインデータ。今回は2つの題材で実践した。
- 新規LP作成：techtech.clubのメルマガ会員獲得用LP
- 既存ページ改善：techtech.clubトップページのファーストビューをリデザイン
このデザインデータは完成品ではない。「こういう方向性で進めたい」をチームやデザイナーに伝えるための叩き台であり、そのまま開発に回す最終デザインでもない。ただし、Figma上にあるため、デザイナーがそのまま引き継いで作業を続けられる。ファイルを受け渡す必要もない。
結論
「作る」のハードルが下がったことで、議論の出発点が変わる。
これまで、LPやサービス画面のデザインには明確な分業があった。要件を整理する人、ワイヤーフレームを描く人、デザインを起こす人、それをレビューする人。それぞれの工程にハンドオフが発生し、認識のズレが積み重なり、手戻りが増える。少人数チームほど、この往復のコストが重くのしかかる。
Google Stitch × Figmaは、このフローを圧縮する。要件を自然言語で伝えれば、5分以内にUIデザインが生成される。それをFigmaにエクスポートすれば、レイヤー単位で手動編集できる。ワイヤーフレームという中間工程を飛ばし、デザインから議論を始められる。
ただし、現時点では完璧ではない。Figmaへのエクスポート時に日本語の文字化けが発生するケースがある。レイアウトが一部崩れることもある。「そのまま本番に使えるデザインデータ」を期待すると裏切られる。
それでも、この変化の意味は大きい。これまで「デザイナーに依頼する」以外の選択肢がなかった人が、自分でデザインの叩き台を作り、Figmaという専門家と同じツール上で議論できるようになった。「どう作るか」のプロセスに時間を取られる代わりに、「何を作るべきか」「それは使われるか」「売れるか」というビジネスの本質に時間を使える。
向いている人：
- デザイナーがいないチームで、LPやサービス画面の方向性を形にしたい人
- デザイナーへの依頼前に、自分で叩き台を作って認識を揃えたい人
- 既存サイトの改善案を、テキストではなくビジュアルで共有したい人
- Figmaは触ったことがあるが、白紙から始められない人
向いていない人：
- ピクセル単位の精度が求められる最終デザインを期待している人
- 日本語中心のデザインで、文字化けを許容できない段階にいる人（Figma上で手動修正は可能だが、手間が増える）
具体的な使用方法と手順
- 要件整理
- Stitchでデザイン生成
- Figmaにエクスポート
- Figmaで微調整
合計30分以内で、Figma上の編集可能なデザインデータが手に入る。新規作成でも既存改善でも、この4工程は変わらない。
要件整理
モックアップの精度は、ここで決まる。
Stitchに「良い感じのLPを作って」と丸投げしても、出てくるのは「AIっぽい良い感じ」でしかない。
用途が「ゼロから作る」でも「既存を改善する」でも、最低限言語化すべきことは共通している。
- 何のためのページか（目的）
- 誰に向けたページか（ターゲット）
- 何を伝えたいか（優先順位つき）
- デザインの方向性（色、トーン、フォントの方針）
加えて、用途によって整理すべきポイントが異なる。
ゼロから作る場合：
- ページ構成（セクション単位）まで自分で考えておく。「ファーストビュー → 価値提案 → 対象者 → CTA」のように、何をどの順番で見せるかを決める。
既存を改善する場合：
- 現状の何が課題なのか、改善の目的は何か、既存デザインのどこを維持し何を変えるのかを明確にする。そして、既存ページのスクリーンショットを用意しておく（工程2で使う）。
これを自分の頭で整理してもいいし、AIに壁打ちさせて構造化してもいい。重要なのは、Stitchに渡す前に「自分は何が目的でやるのか」を明確にしておくことだ。
Stitchでデザイン生成
Google Stitchを開いて、自然言語でAIにデザイン生成を指示する。
Stitchでは、「3 Flash」や「3 Pro」、「Redesign」などのモードが選択できるが、ここでは「3 Pro」を選択する。
ゼロから作る場合は、要件をプロンプトとして投入する。以下は今回使用したプロンプトだ。
techtech.clubという、AI活用に特化したテックメディアのメールマガジン登録用LPをデザインしてください。
■ サービス概要
- サイト名：techtech.club
- コンセプト：「AIで、一人の限界を超える」
- サブコピー：「"やったことがない"は、もう通用しない。30分後、プロとして動け。」
- ターゲット：少人数で事業を回す人（一人会社、スタートアップ初期、中小企業の何でも屋、副業・独立準備中）■ LPの目的
メールマガジンへの無料登録（メールアドレスの取得）■ 伝えたいこと（優先順）
1. 「30分で実務に使えるAI活用ノウハウ」が届くこと
2. 毎日のテックニュースを独自の視点で解説していること
3. 無料であること
4. すでに公開されているコンテンツの一例（記事カテゴリ：AI活用、動画作成、リサーチ、画像編集、学習、ツール作成、表計算、資料作成）■ ページ構成
1. ファーストビュー：メインコピー＋メール登録フォーム
2. 価値提案：何が届くのか（具体的なコンテンツ例）
3. 対象者：こんな人に向いている
4. コンテンツ紹介：記事カテゴリとサンプル記事
5. 登録CTA（再掲）■ デザインの方向性
- 配色：ダークネイビー（#1a1a2e）をベースに、白い余白を活かす。アクセントカラーは控えめに
- トーン：シンプル、余白多め、テック感はあるが人間味がある、煽らない
- フォント：モダンなサンセリフ、読みやすさ重視
- 全体の印象：落ち着いたプロフェッショナル感。派手さよりも信頼感■ レイアウト
- レスポンシブ対応（デスクトップ優先）
- スクロールは短めに（5セクション程度）
- CTAボタンは目立たせるが、煽りのデザインにはしない
5分以内にデザインが生成された。ページ構成、配色、トーンなど、プロンプトの指示にほぼ忠実な出力が返ってくる。
以下が生成されたデザインだ。
プロンプトの内容には忠実に従っており、構成や文言に違和感はない。
既存を改善する場合は、プロンプトに加えて既存サイトのスクリーンショットをチャット欄に添付する。
ここが新規作成との決定的な違いだ。Stitchはアップロードされた画像を参照し、既存のデザインを約90%踏襲した上で、指示に沿った改善案を生成する。
techtech.clubという、AI活用に特化したテックメディアのトップページのファーストビューをリデザインしてください。
既存のデザインを改善し、ユーザビリティの向上とメルマガ会員獲得の強化を目的とします。■ サイト概要
- サイト名：techtech.club
- コンセプト：「AIで、一人の限界を超える」
- サブコピー：「"やったことがない"は、もう通用しない。30分後、プロとして動け。」
- ターゲット：少人数で事業を回す人（一人会社、スタートアップ初期、中小企業の何でも屋、副業・独立準備中）■ 改善の方向性
- メルマガ登録を主目的とする
- ファーストビューでなんのサイトか読者に一発で理解され、自分ごと化させる
- セクション間の区切りを明確にし、視覚的な疲労を軽減する■ デザインの方向性
- 配色：メインカラー（#1a1a1a）ベース、メインテキストカラー（#eae8e0）を使う
- トーン：シンプル。余白を活かす。煽らない。禅Zen。
- レスポンシブ対応（デスクトップ優先）
こちらも5分以内に生成。
ただし、最初の出力ではダークモードが反映されなかった。プロンプトでカラーコードを指定していたが、明示的に「ダークモード」と伝えなかったのが原因だと考える。
以下の修正プロンプトで解決した。
修正してください。
- ダークモード（#1a1a1a）に修正してほしい。
- 対象者はエンジニアではないです。エンジニアも含まれますが、専門家がいなくても非専門家が業務をこなしていくことを目的としたメディアです。その点を考慮してファーストビューを再設計する
ここでの学びは2つ。配色はカラーコードだけでなく「ダークモード」のような概念で伝えたほうが精度が上がること。そして、ターゲットの解像度がデザインに直結すること。
「テックメディア」とだけ伝えるとエンジニア向けのデザインになりがちだ。「誰のためのサイトか」をプロンプトに含めることで、トーンやコピーの方向性が変わる。
最終的に、意図したイメージのデザインが生成された。
Stitch上での修正について補足。
Stitchはチャット形式で修正指示を出せる。「余白をもう少し広げて」「CTAボタンの色を変えて」といった自然言語での調整が可能だ。
ただし、このフローでは「Stitchで80%作り、Figmaで20%仕上げる」という使い分けを推奨する。Stitch上で何度も修正を繰り返すと意図しない箇所が変わってしまったり、時間がかかるためだ。
早めにFigmaに持っていくほうが効率的。細かいピクセル調整やテキストの微修正は、Figmaで直接触ったほうが早い。
Figmaにエクスポート
Stitchの出力をFigmaに持っていく。手順は4ステップだ。
- Stitch画面右上の「Export」を選択する
- 「Figma」を選択して変換する
- 変換が完了したらコピーする
- Figmaを開き、ペースト（Ctrl+V / Cmd+V）する
複数の提案がある場合は、すべて選択してまとめてエクスポートできる。Figma上に並べて比較検討がしやすい。
注意点： 記事執筆時点（2026年2月）では、ツール間連携にまだ粗い部分がある。
- 日本語の文字化け：Stitch上では正常に表示される日本語が、Figmaにエクスポートすると文字化けするケースがある。新規LP作成では発生したが、既存改善では発生しなかった。条件はまだ安定していない
- レイアウト崩れ：致命的ではないが、一部の要素の位置やサイズがStitch上の表示と異なることがある
文字化けについては、英語でプロンプトを書き、英語のままExportしてからFigma上で日本語に差し替えるのも一つの手だ。
Figmaで微調整
Figmaにペーストされたデザインは、各要素がレイヤーとして分かれている。テキスト、ボタン、画像枠、背景色——すべて個別に編集できる。
ここでやるべきことは、大きな修正ではない。Stitchが作った大枠はそのまま活かし、以下のような細部を整える。
- 文字化けしたテキストの差し替え
- レイアウト崩れの修正
- フォントサイズや行間の微調整
- 余白のバランス調整
- CTAボタンの色やサイズの微調整
Figmaの基本操作（要素の選択、テキスト編集、色の変更）がわかれば十分だ。デザインツールの上級スキルは必要ない。
複数の提案をエクスポートした場合は、Figma上に並べて良い部分を取捨選択する。
ここからは「AIの仕事」ではなく「人間の判断」だ。どのレイアウトがターゲットに刺さるか、どのコピーの見せ方が自分ごと化されやすいか——これはビジネスの判断であり、デザインスキルの問題ではない。
評価
編集者あとがき
今回の実践で一番印象に残ったのは、ツールの使い方ではなく、使った後に感じた「境界線の変化」だ。
たとえば、既存サイトのスクリーンショットをStitchに貼り、「メルマガ登録を主目的にファーストビューを再設計して」と伝えるだけで、提案が出てくる。これは従来、デザイナーかPdMの仕事だった。マーケターが「こういう改善をしたい」と思っても、ワイヤーフレームを描くスキルがなければ、テキストで依頼するしかなかった。テキストで伝えた結果、認識がズレ、手戻りが発生し、時間が溶ける。
この構図が変わりつつある。マーケターがデザインの叩き台を作れる。エンジニアがUIの提案を出せる。営業がLPの改善案をビジュアルで示せる。職種の境界線がにじみ始めている。
これは「専門家が不要になる」という話ではない。むしろ逆で、非専門家がデザインの叩き台を作れるようになったことで、専門家であるデザイナーは「叩き台を作る」作業から解放され、「本当に良いデザインとは何か」という本質的な仕事に集中できるようになる。
もう一つ感じたのは、議論のレイヤーが変わるということだ。これまではプロセスの中で「どう作るか」に時間を取られていた。要件を伝え、ワイヤーフレームを作り、確認し、修正する。その往復の中で、本来議論すべき「それは使われるか」「お客さんは喜ぶか」「売れるか」という問いが後回しになる。
AIが「作る」のハードルを下げることで、チームの時間とエネルギーをビジネスの本質に向けられる。
「私は専門外なので」「やったことがないので」——この言葉が通用する時間は、あまり残されていないと思う。
次に試したいのは、このフローをチーム内で実際に回すことだ。非デザイナーがStitchで叩き台を作り、デザイナーがFigmaで引き継ぐ。この連携がどれだけスムーズにいくか、どこで摩擦が生まれるか。そこに次の学びがある。
こちらもおすすめ
ニュースを消費せず、思考に変える習慣。
一人の限界を超えるための、テックメディア。
