入会金0円／契約期間の縛りなし
セミナー開催レポートブログ
GoogleのStitchに作りたいサイトを文章で伝えると、デザインとHTMLがまとめてできあがります。それをGoogle AntigravityやCursorで開いてファイル構成とリンクを整え、Netlifyにフォルダをドラッグ&ドロップすれば公開まで進みます。一方で、書き出した直後はページどうしのリンクがつながっていなかったり、画像が一部しか保存されなかったりすることがあります。最後にブラウザで開いて確かめれば問題ありません。
2025年12月9日のProcevoのセミナーでは、講師のKEITOさんが架空のカフェのサイトを題材に、デザインの生成から公開、独自ドメインの設定、アニメーションの付け方までを実演しました。
この回では、Stitchでデザインとコードを作り、AIエディター（Google AntigravityまたはCursor）でファイルを整え、Netlifyで公開します。
バイブコーディングとは、コードを自分で書かず、作りたいものを言葉でAIに伝えて作っていく進め方です。サーバーを自分で用意するのは手間がかかるため、公開には無料で始められるNetlifyが使われました。
Stitch（https://stitch.withgoogle.com/）は、GoogleのAIでWebサイトやアプリの画面のデザインを作るサービスです。Googleアカウントで登録でき、講座では受講者もその場でアカウントを作って使いました。KEITOさんによると、以前はあまり使い物にならなかったものの、Gemini 3になってから仕上がりが大きく変わったそうです。講座の時点ではGemini 3 Proが使われていたとのことです。
使い方は入力欄に作りたいサイトの説明を書くだけです。入力欄の上には「アプリ」と「ウェブ」の切り替えがあり、Webサイトのデザインにしたいときは「ウェブ」を選びます。「アプリ」のままだと、Webのデザインになりません。
講座で入れたプロンプトは、緑豊かな癒やし空間をコンセプトにしたカフェのサイトを作る、というものです。「都会のオアシスで、心ほどける一杯を」というキャッチコピーを大きく出すこと、メニュー・アクセス・こだわりへのリンクボタンを置くこと、アースカラーを使い植物の写真を背景にすることまで書いていました。この1回で、ほぼそのまま使えるデザインが出ました。
受講者の中には、使われるモデルが2.5 Proと表示され、講師の画面と仕上がりが違う人もいました。アカウントによって使えるモデルが違うことがあるようです。2026年11月時点で、Stitchの無料の範囲や回数の上限は公式サイトで確認できていません。使う前に画面の案内を見てください。
トップページができたら、同じチャットで続けて頼みます。講座では「下層ページもすべて作ってください」「UIのデザインは全部日本語にしてほしい」と伝えると、Stitchがメニュー・アクセス・こだわりのページを作り、画面の文言を日本語にしました。
できたページはコードとしても見られ、HTMLになっているので、画像とコードをそのままダウンロードできます。講座ではページごとにzipファイルで保存しました。
サイトの画像がAIで作られたものかどうかは、Geminiに画像を見せる方法や、Google フォトにアップロードしてメタ情報を見る方法で確かめられるそうです。講座で確かめたところ、地図以外はAIで作られた画像でした。
Stitchから書き出したままだと、ページどうしのリンクが正しくつながっていなかったり、ファイル構成が整っていなかったりします。そこで、パソコンに新しいフォルダ（例：test-site）を作ってダウンロードしたデータをすべて入れ、Google Antigravity（https://antigravity.google/）かCursor（https://cursor.com/）でそのフォルダを開きます。
講座で使った指示は次の2つです。
実際のWebサイトの運用では、ファイルの整理がとても大事になるとのことです。処理にはしばらく時間がかかります。
上の画面では、Google Antigravityがまず画像用のフォルダ（assets/images）を作りました。そのうえで、Stitchから書き出したHTMLをindex.html・menu.html・access.html・concept.htmlという名前で写しています。続けてHTMLの中から画像のURLを抜き出し、画像を落とすためのスクリプト（download_assets.py）を作っています。
AIが画像をすべて拾いきれないこともあります。講座でも一部の画像しか保存されなかった受講者がいました。ブラウザで開くとリンク切れで気づけるので、最後に確かめて、足りない画像をもう一度ダウンロードするよう頼めば済みます。
整理が終わると、ブラウザで開くだけでサイトが表示されます。ただ、メニューを押しても移動しない所が残ることがあります。そのときは「すべてのリンクを確認して、リンクを全部つなげてください」と頼みます。
右上のメニューとページ内の案内が食い違うなど、ページ構成そのものがそろっていない場合は、サイトマップを渡すのが効果的です。講座では、必要なページ（トップ・メニュー・アクセス・こだわり）を手書きの図にして渡し、「このサイトマップの構造に変えて、不要なページは削除して」と伝えました。図でもテキストでも理解してくれるそうです。
1ページの中で位置を移動するだけの作りになっていることもあります。LP（1枚のページ）ならそれでもかまいませんが、複数のページにしたいなら、サイトマップを示して作り直してもらいます。
Netlify（https://www.netlify.com/）は、Webサイトを公開できるサービスです。KEITOさんによると、CloudflareやGitHubのサービスなど選択肢はいくつかある中で、公開がいちばん簡単だったとのことです。
これだけで、ページの構成を保ったままサイトが公開され、NetlifyのドメインのURLが発行されます。
料金は無料のFreeプランから始められます。2026年11月時点のNetlifyの料金ページ（https://www.netlify.com/pricing/）では、Freeプランは0ドルで、使える量は月300クレジットまでです。本番への公開は1回15クレジットと書かれています。有料のPersonalやProもありますが、金額は表示の条件で変わるため、申し込む前に料金ページで確かめてください。講座でも、無料版にはクレジットによる上限があるようだと紹介されました。
同じ料金ページには、クレジット制の新しいアカウントでは、新しいプロジェクトは公開を選ぶまで非公開で始まる、とも書かれています。
サイトを直したら、Netlifyのプロジェクトの画面から、直したあとのフォルダをもう一度アップロードします。それで上書きされます。
公開した版は記録されるので、1つ前の状態に戻すこともできます。
Netlifyの中でドメインを買うのが、いちばん簡単だと説明されました。プロジェクトの画面の「Domain management」から「Add domain」を選ぶと、ドメインを検索して買えます。候補ごとに料金が出て、買えばそのまま独自ドメインで公開できます。
お名前.comやXServerドメインなどで、すでにドメインを持っている場合は、Netlifyにドメインを登録したうえで、DNSレコードの設定が要ります。ここは知識が要って難しいため、Netlifyで買うのがいちばん簡単だそうです。Netlifyのドキュメント（https://docs.netlify.com/manage/domains/get-started-with-domains/）でも、Netlifyで買ったドメインはDNSの設定が自動で行われると案内されています（2026年11月時点）。
アニメーションを付けたいときは、「スライドのアニメーションを作って」と頼むより、使うJavaScriptのライブラリを名指しするほうが的確です。アニメーションの作り方は無数にあるため、ライブラリを指定すると狙った形になりやすくなります。講座では次のライブラリが紹介されました。
ダウンロードして使うライブラリは、サイトのフォルダに入れて「これを使って」と伝えると、より正確になるそうです。
見た目の型には、CSSフレームワークを使う方法もあります。Bootstrap（https://getbootstrap.com/）やBulma（https://bulma.io/）のほか、ReactのUIライブラリのAnt Design（https://ant.design/）も紹介されました。「Bootstrapを使って作って」と指定すると、レイアウトの整ったサイトになりやすくなります。JavaScriptとCSSのフレームワークをセットで伝えると、たいていきれいな形に仕上がるとのことです。
KEITOさんは、ProcevoでWebサイト作りの回をほかにも担当しています。Claude Codeで要件定義から公開まで進める回は「Claude Codeでリンク集サイトを作って公開する方法｜要件定義からサーバーまで」にまとめています。写真からデザイン案を作る回は「バイブコーディングの始め方｜写真からWebデザイン案を作るスキル実践」、Figmaで設計してVercelで公開する回は「バイブコーディングでサイト設計｜FigmaのワイヤーフレームとVercelテスト公開」にあります。
2026年11月時点で、無料の範囲や回数の上限は公式サイトで確認できていません。講座では、受講者がGoogleアカウントで登録し、その場で使い始めていました。アカウントによって使われるモデルが違い、仕上がりに差が出ることもあるため、使う前に画面の案内を見てください。
Stitchが受け持つのは、デザインとコードを作るところまでです。公開するには、書き出したデータを整えたうえで、Netlifyなどの公開サービスにアップロードします。
講座では、どちらでも同じ流れで進められると紹介されました。どちらもフォルダを開いてAIに頼み、ファイル構成やリンクを整えます。2026年11月時点の公式の料金ページ（Google Antigravity・Cursor）では、どちらにも0ドルのプランがあり、使える量には上限があります。
必須ではありません。連携の手順は飛ばせて、フォルダをドラッグ&ドロップするだけで公開できます。更新もフォルダをもう一度アップロードすれば上書きされます。
AIが画像をすべて拾いきれないことがあります。ブラウザで開くとリンク切れで分かるので、足りない画像をもう一度ダウンロードするよう頼みます。
1ページの中で位置を移動するだけの作りになっている場合があります。LPならそれでもかまいませんが、複数のページにしたいなら、サイトマップを示して構成を作り直すよう頼みます。
使えます。Netlifyにドメインを登録したうえで、DNSレコードを設定します。知識が要って難しいため、講座ではNetlifyの中でドメインを買う方法がいちばん簡単だと説明されました。
アーカイブ動画はProcevoで見られます
プランは登録のあとに選べます
