Google StitchでWebサイトを制作・公開する方法

TL;DR

Google Stitchで複数ページのデザインを生成し、Claude CoworkでHTML、CSS、JavaScript、画像を整理してWebサイト化する。完成したフォルダーをNetlifyへアップロードすれば公開でき、必要に応じて独自ドメインも設定できる。

Transcript

はい、こんにちは。アーケートです。この チャンネルは生成の最新情報や活用事例を 紹介してます。是非チャンネル登録お願い いたします。そして今回はですね、素人で も超簡単に本格的なウェブサイトを作成 する方法を思いついてしまったので、 こちらをですね、検証していきたいんです けど、今回の方法はGoogleのWeb デザインやアプリケーションデザインを 作成してくれるツールスティッチってやつ を使ってデザインをしていく。そしてその 後に先日こちらの動画で紹介した Cloudのコワークっていう機能、これ を使ってデスクトップ上にウェブサイトの ファイルをですね、しっかりと作り込む。 え、そして最後にウェブサイトを公開する ための環境をですね、サクっと作って しまってそこにアップロードする。その 流... Read More

Key Insights

• Google Stitchは、店舗情報、商品内容、ページ構成、メインカラーなどを自然言語で指定すると、複数ページのWebデザインを約5分で生成できるAIサービスである。
• Stitchの生成物は一枚の画像ではなくHTMLコードを含むため、完成後もコード内の情報を編集し、配色や文章、ページ内容などを柔軟に調整できる構造である。
• Stitchからダウンロードした初期データは、ページごとにHTMLと画像が分かれている一方、実際のWebサイトとして使うにはフォルダー構成や共通資材の整理が必要である。
• Claude Coworkは、対象フォルダーを直接確認し、画像の集約、ページ構成の整理、HTML、CSS、JavaScriptの分離を行って、公開可能なサイト構成へ作り替えられる。
• Claude Coworkによる構築には約20分から30分かかったが、品書きや店舗情報へのページ遷移、予約人数やコースの選択、お問い合わせ画面まで実装された。
• AIが生成したサイトには、ボタンの位置ずれ、地図のはみ出し、未作成のお知らせ詳細などが残る場合があり、公開前の確認と追加修正が必要である。
• 表示上の不具合は、対象箇所と望む状態をClaude Coworkへ自然言語で伝えることで修正でき、予約ボタンや店舗情報の地図配置も整えられた。
• Netlifyは、完成したサイトフォルダーをブラウザーからアップロードするだけで公開でき、独自ドメインの購入と設定にも対応するが、アクセス規模によっては課金が必要である。

Questions & Answers

Q: AIでWebサイトを制作して公開する方法は？

Google Stitchに店舗情報、商品情報、ページ構成、メインカラーを入力してデザインを生成し、全データをダウンロードする。次にClaude CoworkでHTML、CSS、JavaScript、画像の構成を整理し、動作確認と修正を行う。完成したフォルダーをNetlifyへアップロードすれば公開できる。

Q: Google StitchでWebデザインを作る方法は？

Google Stitchの入力欄へ、作りたいWebサイトの目的、商品やサービスの情報、必要なページ、希望する色などを自然な言葉で記述して送信する。紹介例では焼肉店の情報と赤を基調とする指定を与え、約5分でトップ、品書き、こだわり、予約などのページが生成された。

Q: Google Stitchが生成するデータとは何ですか？

Google Stitchの生成物は、完成画面を一枚にした画像だけではなく、各ページを構成するHTMLコードと画像を含むデータである。そのため、生成後にコード内の文章や設定を変更したり、別のAIへ渡してフォルダー構成を整理したりすることができる。

Q: Claude CoworkでWebサイトを構築する方法は？

ClaudeのデスクトップアプリでCoworkを開き、「フォルダーで作業」からStitchの出力フォルダーを選択する。そのうえで、ページ構成の整理、画像用フォルダーへの集約、HTMLだけでなくCSSとJavaScriptも分離することを指示すると、サイト全体のファイルを構築してもらえる。

Q: AIが作ったWebサイトはどこまで動作しますか？

紹介された作例では、トップページから品書き、こだわり、店舗情報などへ移動でき、予約画面では人数やコースを選択して顧客情報の入力へ進めた。よくある質問とお問い合わせページも作られた一方、お知らせの詳細は未完成だったため、全機能の確認は必要である。

Q: AI生成サイトの表示崩れを修正する方法は？

ブラウザーで完成データを開き、位置ずれやはみ出しがある場所を特定して、その箇所と望む配置をClaude Coworkへ具体的に伝える。作例では、トップページ右上の予約ボタンのずれと、店舗情報にある地図のはみ出しを指示し、コンテンツ内へ収まるよう修正できた。

Q: NetlifyでWebサイトを公開する方法は？

Netlifyでアカウントを作成し、ブラウザーアップロードを選び、Claude Coworkで整理した完成フォルダーをそのままアップロードする。処理が終わると発行されたリンクからサイトを表示できるため、サーバーへの複雑な配置作業をせずに公開まで進められる。

Q: 独自ドメインでWebサイトを公開する方法は？

Netlifyのドメイン管理画面から新しいドメインを検索して購入し、公開済みサイトへ設定すれば、独自のURLで表示できる。国内の別サービスで取得したドメインをNetlifyへ接続する方法もあるが、動画では公開作業に慣れていない人には難しいとして詳細を扱っていない。

Summary & Key Takeaways

• 最初にGoogle Stitchへ、焼肉店の概要、商品情報、必要なページ構成、赤を基調とする配色などを自然な言葉で入力する。生成には約5分かかり、トップ、品書き、こだわり、店舗情報・予約、お知らせ・よくある質問など、複数ページのデザインが作られた。生成物は単なる画像ではなくHTMLコードを含むため、内容や見た目を後から調整できる。

• Stitchから全ページのデータをダウンロードすると、各フォルダーにHTMLと画像が入っているが、そのままではサイト全体の構成が十分に整理されていない。ClaudeデスクトップアプリのCoworkで対象フォルダーを選び、ページ構成の整理、画像用フォルダーへの集約、HTML、CSS、JavaScriptの分離を指示する。約20分から30分で、ページ遷移や予約フォームを備えたサイトが構築された。

• 完成後はブラウザーで各ページやフォームを確認し、予約ボタンのずれや地図のはみ出しなどをClaude Coworkへ伝えて修正する。公開時はNetlifyのブラウザーアップロードへ完成フォルダーを渡すだけでサイトを表示でき、公開までは無料で利用できる。独自ドメインはNetlifyで購入して設定でき、外部サービスで取得したドメインも接続できるが、後者には公開作業の知識が必要になる。