Claude Code×Claude Designで学ぶWebサイト制作からインターネット公開までの完全ガイド

概要

Claude CodeとClaude Designを使ってホームページを作成し、Netlifyで無料公開するまでの一連の流れを解説する動画。指示書作成、デザイン調整、問い合わせフォーム実装、独自ドメイン設定まで実演を交えて紹介している。

主なポイント

• Claude Codeはデスクトップアプリ・VSCode・ターミナル・ブラウザ版など複数の使い方があり、初心者にはデスクトップアプリが最も簡単
• Claude Code(Proプラン以上)にサイト情報を渡すと、掲載すべきコンテンツ構成を提案してくれる
• そのコンテンツ案をもとにClaude Designへ渡す詳細プロンプト(デザインテイスト・配色・アニメーション有無・レスポンシブ対応など)を自動生成できる
• Claude Designでは全体修正はプロンプト欄、部分修正は「コメント」機能、直接編集は「エディット」機能を使い分けられる
• 「ツイーク」機能でAIが雰囲気・モーションなどのデザイン案を複数提示してくれる
• Claude Designの出力(HTMLダウンロード)はそのままでは本番公開に不向きで、Claude Codeで整理・修正すると正しく動く公開用ファイルに変換される
• 問い合わせフォームはGoogleフォームの埋め込みコードをClaude Codeで既存デザインに差し替えることで安全に実装できる
• 完成ファイルはNetlifyにドラッグ&ドロップするだけで無料・商用利用可能な形でインターネット公開できる
• 独自ドメインを使う場合はムームードメインなどでネームサーバーをNetlifyに向けて設定する
• 本格的な問い合わせフォームやWordPressが必要な場合はロリポップなどのレンタルサーバー+FTPソフトでの公開が必要

実践に使えること

• サイト制作前にターゲット・料金・サービス内容などの情報をまとめてClaude Codeに渡し、コンテンツ構成案を出させる
• デザイン指示は色・テイスト・アニメーション有無まで具体的に書くと手戻りが減る
• Claude Designで作ったHTMLは必ずClaude Codeで公開用に変換してからアップロードする
• 問い合わせフォームはまずGoogleフォームなど無料サービスで安全に実装し、慣れてから自作を検討する
• 無料で素早く公開したいならNetlify、長期運用や独自ドメインメールが必要なら独自ドメイン+レンタルサーバーを選ぶ