Google Stitch でランディングページを作ってみた——ゼロから完成まで全部記録した

2026.04.11

「Google Stitch で本当にLPが作れるのか、自分の手で確かめたかった。」

そう思って、ある日の午後に実験を始めた。タイマーをセットして、プロンプトを入力するところから、「これなら人に見せられる」と思えるところまで、かかった時間を全部記録した。

結論から言うと、完成まで約3時間かかった。Figmaでゼロから作るより確実に速かったが、「AIが全部やってくれた」という感じではなかった。むしろ、「AIと一緒に作った」という感覚に近かった。

この記事では、その3時間に何が起きたかを時系列で書く。うまくいったこと、つまずいたこと、「次にやるなら変えること」も含めて、できるだけ正直に記録する。

一言で言えば、Google Stitch を使ったLP制作は「最初の形を出すのが劇的に速い代わりに、細部の調整には時間がかかる」というのが正直な評価だ。総合的には従来の方法より速く、品質も実用レベルに達している。

何を作ろうとしたか

今回作ったのは、架空のオンラインスクールのランディングページだ。実案件ではなく、「Google Stitch の実力を試す」という目的の実験だったので、ある程度リアルな想定を作って取り組んだ。

想定した要件は以下の通りだ。

ターゲット：副業に興味がある30代会社員
目的：無料体験セミナーへの申し込みを促す
必要なセクション：ヒーロー、サービス特徴（3点）、受講者の声（3件）、料金、FAQ、申し込みフォーム
トーン：信頼感があり、押しつけがましくない
カラー：ネイビーとオフホワイトを基調に

これを事前にまとめておいたのが、後から考えると正解だった。「要件を言語化してある状態」でプロンプトを作れたことが、最初の生成精度に直結した。

プロンプトをどう書いたか

最初のプロンプトはこう書いた。

「副業スクールの無料体験セミナー申し込みLP。ターゲットは30代会社員。ヒーローセクション（キャッチコピー＋申し込みCTAボタン）、特徴3点、受講者の声3件、料金表、FAQ、フッターのCTA。ネイビーとオフホワイトを基調にしたプロフェッショナルなデザイン。」

このプロンプトで最初に出てきたUIは、想像していたより完成度が高かった。ヒーローのレイアウト、テキストの配置、ボタンのデザイン——どれも「それっぽい」レベルを超えて、「このまま使えるかもしれない」と思えるものだった。

ただ、テキストの内容は当然ダミーだ。「Lorem ipsum」のような意味のない文字列ではなく、それっぽい日本語が入っていたが、実際のサービスに合わせて書き直す必要があった。

0〜60分：最初の形が出るまで

実験開始からの最初の1時間は、主にプロンプトの調整と、生成された複数のパターンの比較に使った。

最初の生成から3パターンを比べる

Google Stitch では、同じプロンプトでも複数回生成することで異なるデザインが出てくる。私は最初のプロンプトで3回生成して、それぞれを比較した。

3パターンを見ると、レイアウトの方向性がそれぞれ少し違った。横並びの3カラムが縦並びになっていたり、ヒーローの画像位置が左側だったり右側だったり。どれも悪くなかったが、「申し込みへの誘導が最も分かりやすいのはどれか」という観点で選ぶと、自然と一つに絞られた。

実際に私がこの比較作業でかけた時間は約20分。Figmaで3パターンを作ったら90分はかかるところが、20分で終わった。この差は大きかった。

プロンプトを2回修正した

最初に選んだパターンにも、いくつか気になる点があった。ヒーローのCTAボタンが少し小さい、受講者の声のセクションが予想より地味、FAQのデザインがシンプルすぎる——そういった点をプロンプトに追記して再生成した。

2回の修正プロンプトを経て、「方向性はこれでいい」と思える形になったのが、開始から55分後だった。

60〜150分：テキストの差し替えと細部の調整

最初の形が決まってからは、コンテンツの差し替えと細部の微調整が主な作業になった。この時間帯が実は一番手を動かした時間だった。

テキスト差し替えの量が思ったより多かった

Google Stitch が生成するテキストは「それっぽい」ものの、実際に使えるレベルではない。キャッチコピーも特徴の説明文も、全部実際のサービスに合わせて書き直す必要があった。

今回の実験では「架空のサービス」だったので、テキストを自分で考えながら書いた。この作業に約50分かかった。「LPライティング」としての作業量は、Google Stitch を使っても減らない——それが正直な発見だった。

Google Stitch が削減してくれるのは「デザインの工数」であって「コピーライティングの工数」ではない、ということを改めて実感した場面だった。

モバイル表示の確認と調整

テキストを差し替えた後、スマートフォン表示を確認した。全体的には崩れていなかったが、ヒーローのキャッチコピーが長すぎてモバイルで折り返しが不自然になっていた。

プロンプトに「モバイル対応、ヒーローのキャッチコピーは20文字以内に収まるよう調整」と追記して再生成したところ、改善された。この修正プロセス自体は10分程度で完了した。

150〜180分：最終確認とエクスポート

残りの30分は、全体の最終確認とHTMLのエクスポート作業に使った。

確認チェックリスト

最終確認で見たポイントは以下の通りだ。

PC・スマートフォン両方の表示で崩れがないか
CTAボタンが画面上に十分な回数配置されているか
フォントの可読性（特に小さいテキスト）
カラーのコントラスト比（テキストと背景色）
セクション間の余白バランス
フッターに必要な情報（会社情報・プライバシーポリシーリンク）が含まれているか

いくつか細かい修正を加えて、180分（3時間）で「これなら人に見せられる」レベルに到達した。

エクスポートしたHTMLの品質

HTMLとしてエクスポートしたコードを確認すると、構造は比較的きれいだった。セクションごとにdivでまとめられており、CSSクラスも一定の規則性があった。

本番環境に使う場合は、クラス名の整理とフォームの実装が追加で必要だが、ベースとして使えるレベルだった。

正直な評価と「次にやるなら変えること」

3時間のLP制作実験を終えて、Google Stitch に対する見方がいくつか変わった。

良かった点

「最初の形」が出るまでが圧倒的に速い。Figmaでゼロから同じものを作るなら1.5〜2倍の時間がかかると思う
「どのレイアウトにするか」という選択が、作る前に比べられる。これは意思決定の質と速度に直結する
デザインの専門知識がなくても、プロ水準に近いUIが出てくる

次にやるなら変えること

テキストを先に全部用意してからプロンプトに含める。今回はダミーテキストのまま進めたため、差し替え作業が後半にまとめて発生した
カラーコードを最初から指定する。「ネイビー」という指定だけでは毎回微妙に違う色が出てくるため、具体的なHEXコードをプロンプトに含めた方がいい
セクションを個別に生成して組み合わせる方法も試してみたい。ページ全体を一気に生成するより、セクションごとに生成して品質を担保する方が細かいコントロールができそうだ

よくある質問（FAQ）

Q1. Google Stitch で作ったLPは実際のビジネスに使えますか？

はい、使えます。ただし「そのまま本番公開」ではなく、テキストの差し替え、フォームの実装、SEO設定（メタタグ・OGPなど）を追加した上で使うことを前提にしてください。Google Stitch が担うのはデザインと構造の部分であり、コンテンツとバックエンドの実装は別途必要です。

Q2. デザインの知識がなくてもLPが作れますか？

はい、作れます。プロンプトで「こういうセクションが欲しい」「このトーンで」という指示を出すだけで、それなりの品質のデザインが出てきます。ただし、出来上がったものの「良し悪しを判断する目」は多少必要です。デザインの知識がなくても、「使いやすそうか」「読みやすいか」という感覚的な判断は誰にでもできるはずです。

Q3. 一般的なLP制作の費用と比べてどうですか？

外注でLPを制作すると、シンプルなものでも10〜30万円程度かかることが多いです。Google Stitch を使えば、デザインの工数を大幅に削減でき、実質的にはライティング・実装コストのみで制作できます。ただし、Google Stitch で作ったものがそのまま外注クオリティになるわけではなく、細部の品質を高めるにはデザイン経験者の仕上げが必要な場合があります。

Q4. 複数ページのサイトも作れますか？

はい、ページごとに生成して組み合わせることができます。ただし、デザインの一貫性（カラー・フォント・余白のルール）を維持するには、各ページのプロンプトで同じスタイル指定を繰り返すか、最初に生成したページのデザインをFigmaに移行してガイドラインを作ってから各ページを展開する方法が安定しています。

Q5. LPのA/Bテスト用に複数バリエーションを作るのに使えますか？

Google Stitch はこの用途に非常に適しています。「同じ構成で、ヒーローのレイアウトを横並びにしたバージョン」「CTAボタンの色を変えたバージョン」のような指定ができるため、複数のバリエーションを短時間で用意できます。A/Bテスト用のページを用意するコストが大幅に下がります。

Q6. スマートフォン専用のLPを作ることもできますか？

はい、プロンプトに「モバイル専用UI」「スマートフォンでの表示を最優先にしたデザイン」と明示することで、モバイルファーストのLPを生成できます。ただし、最終的にはスマートフォン実機での表示確認を必ず行い、フォントサイズや余白が使いやすいかを確認することをおすすめします。

Q7. Google Stitch で作ったLPをWordPressに導入するには？

HTMLとしてエクスポートしたコードをWordPressのカスタムHTMLブロックに貼り付ける方法が最も手軽です。より安定した運用のためには、カスタムページテンプレートとして実装する方法や、Elementorなどのページビルダーと組み合わせる方法があります。

Q8. 今回の3時間という時間は、初心者でも再現できますか？

初めてGoogle Stitch を使う方は、操作に慣れる時間が追加でかかるため、最初は4〜5時間程度を想定しておく方が良いと思います。2〜3本作るうちに操作に慣れ、プロンプトの書き方が分かってくれば、3時間以内での完成は十分可能です。