「Claude CodeでWebサイトが作れるって聞いたけど、実際どうやるの？どうやってインターネットに公開するの？」という方も多いのではないでしょうか。
本記事では、AnthropicのAIツール「Claude Code」を使って、Webサイトを1から作成し、実際にインターネット上へ無料公開するまでの手順を、初心者向けに解説します。
※なお、本記事の内容をYouTube動画にて解説しているので動画でみたい方は上記の動画をご覧ください。
新しいコンテンツや、より詳細な解説を動画やショート動画でお届けしています。日々の情報収集にお役立てください。
Claude Codeとは？Webサイト作成に使えるAIツール
Claude Code（クロードコード）は、Anthropic社が提供するAIエージェントツールです。生成AI「Claude」の機能の一つで、「こういうWebサイトを作って」と日本語でお願いするだけで、HTML・CSS・JavaScriptといったコードを自動で書いてくれます。
コードの知識がなくても、チャットでやりとりしながらWebサイトやアプリを作り上げていけるのが大きな特徴です。
なお、Claude Codeや、あわせて紹介するClaude Designは、Claudeの有料プラン（Proプラン以上）向けの機能です。無料プランでは使えないため、事前に有料プランを契約しておく必要があります。
Claude Codeを使う4つの方法
Claude Codeの利用方法は大きく4通りあります。
- ターミナル：黒いコマンド画面で文字ベースで操作する方法
- 開発エディター：Visual Studio Codeなどに拡張機能を入れて使う方法
- デスクトップアプリ：普通のアプリのように画面をクリックしながら使う方法
- ブラウザ（Web版）：ブラウザ上で使う方法
初心者の方にはデスクトップアプリがおすすめです。黒い画面や複雑なコードを見ることなく、変更内容を一つずつ確認しながら進めていくことができます。
Claude CodeでWebサイトを作成する手順
ここからは、実際にWebサイトを作成する手順を5つのステップで解説します。
AIに指示書（詳細プロンプト）を作ってもらう
いきなり「ホームページを作って」とお願いしても、自分の思うようなデザインやコンテンツにならないことが多いです。そこでおすすめなのが、詳細な指示書（プロンプト）自体をAIに作ってもらう方法です。
まず、事業内容・ターゲット・料金など、分かっている情報をAIに伝えて、掲載すべきコンテンツを提案してもらいます。
|
1 2 3 4 5 6 7 |
「〇〇スクール」という初心者向けのスクールを始める想定で、 1ページものの公式ホームページを作りたいです。 掲載コンテンツをまず提案してください。 ・運営：〇〇 ・ターゲット：〇〇 ・料金：〇〇 |
提案内容を確認したら、続けて「Claude Designにデザインしてもらいたいので、そのためのプロンプトを作ってください。テイストは近未来、配色は黒・白・濃い紺色で」のように依頼すれば、デザイン用の詳細な指示書が完成します。
Claude Designでデザインを作成する
デスクトップアプリのホームタブから「デザイン」をクリックすると、デザイン作成に特化した機能「Claude Design」が立ち上がります。先ほど作った指示書を貼り付けて送信すると、Webサイトのデザインを自動で起こしてくれます。
気になる箇所はコメント機能でピンポイントに修正したり、Tweaks機能でAIにデザイン案を出してもらったりしながら、自分の意図するデザインに仕上げていきます。
手順4：Claude Codeで公開用ファイルに変換する
デザインが完成したら、シェアメニューからプロジェクトHTML（ZIP形式）をダウンロードして、zip解凍した中身のファイル類を作業フォルダにコピーします。
Claude Designでダウンロードしたファイルは、あくまでデザイン確認用の「設計図」です。そのままサーバーにアップすると、アニメーションが動かない・表示が崩れるなどの不具合が起きることが多いため、Claude Codeで公開用に変換する必要があります。
Claude Codeのチャットで、次のように依頼すれば変換してくれます。
|
1 2 3 4 5 |
Claude Designのデザインをダウンロードして、作業フォルダーに格納しました。 このデザインを元に、そのままサーバーにアップロードして公開できる 普通のホームページのファイルに仕上げてください。 HTML・CSS・JS・画像ファイル類をメンテナンスしやすいように整理してください。 |
手順5：お問い合わせフォームを実装する
AIが作ったお問い合わせフォームは「見た目だけ」の状態で、送信しても実際には動きません。一番安全で手軽なのは、Googleフォームを埋め込む方法です。
Googleフォームで受付フォームを作成し、メール通知をONにして、HTML埋め込み用のコードをClaude Codeに渡して差し替えてもらえば、実際に問い合わせを受け付けられるようになります。
作成したWebサイトをインターネットに公開する方法
Netlifyでドラッグ&ドロップ公開
作成したWebサイトは、パソコンの中にあるだけでは他の人から見ることができません。今回は、無料で簡単に公開できる「Netlify（ネットリファイ）」というサービスを使います。
Netlifyは無料で商用利用が可能で、アカウント登録後、管理画面のプロジェクトに作ったフォルダをドラッグ&ドロップするだけでWebサイトを公開できます。世界中にサーバーを持ち、見に来た人に一番近い場所から表示してくれるCDNという仕組みを備えているため、表示速度も高速です。
公開すると「〇〇〇.netlify.app」というURLが発行され、その場でインターネット上に公開完了です。
独自ドメインを設定する
「netlify.appではなく自分のドメインで公開したい」という場合は、独自ドメインの設定も可能です。ムームードメインなどで取得したドメインに対して、Netlifyのネームサーバーを設定してあげれば、独自ドメインでのアクセスとHTTPS化（鍵マーク）が自動で有効になります。
なお、netlify.appの無料ドメインはNetlifyの中でしか使えず、他のサービスに引き継げません。会社ホームページなどで長く運用するなら、引っ越し可能な独自ドメインの利用がおすすめです。
レンタルサーバーで公開する方法（補足）
NetlifyはHTMLで作られた静的サイトの公開が得意な一方、PHPやWordPressは動きません。将来的にWordPressや独自ドメインのメールも使いたい場合は、ロリポップなどのレンタルサーバーを使う方法もあります。
| Netlify | レンタルサーバー | |
|---|---|---|
| 料金 | 無料プランあり | 月数百円〜 |
| 公開方法 | ドラッグ&ドロップ | FTPソフトでアップロード |
| PHP・WordPress | 不可 | 利用可能 |
| 独自ドメインメール | 不可 | 作成可能 |
レンタルサーバーの場合は、FileZillaなどのFTPソフト（ファイル転送ソフト）を使って、作成したファイル一式をサーバーにアップロードすれば公開できます。
まとめ
ここまでのまとめです。
今回はClaude Codeを使ってWebサイトを作成し、インターネットに公開するまでの手順をご紹介しました。
コードが書けなくても、日本語で指示するだけでWebサイトを作って公開できる時代になりました。ぜひご自身の事業やアイデアで試してみてください。
個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。
YouTubeチャンネル開設しました！
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。
ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。