Claude Code でホームページを作る手順プログラミングなしで、作る・確かめる・公開するまで

準備するもの

• Claude の有料プラン：Claude Code を使うには、Pro・Max・Team・Enterprise のいずれか、または開発者向けの Console のアカウントが必要です（無料プランでは使えません）。
• Claude のデスクトップアプリ：「Code」タブで Claude Code が使えます。黒い画面（ターミナル）を使わずにすみます。
• 空のフォルダ：ホームページのファイルを入れるフォルダを、新しく1つ作ります。
• のせたい中身のメモ：お店や会社の名前、紹介文、営業時間、連絡先、写真など。

手順1：作りたいページを伝える

デスクトップアプリの「Code」タブで、作ったフォルダを選び、作りたいページを言葉で伝えます。中身（事実）は自分で書いて渡すのがコツです。AIに考えさせると、事実でないことが入ることがあります。

このフォルダに、小さなパン屋さんのホームページを作ってください。
・ページ：トップ、商品紹介、お店の案内（地図と営業時間）
・雰囲気：あたたかい、手作り感のある色
・スマホで見やすく
・のせる中身：下のメモのとおり。書いていないことは足さないでください。
【メモ】〔店名・紹介文・商品・営業時間・住所・電話番号〕【メモここまで】
作る前に、ページの構成の案を見せてください。

「作る前に案を見せて」と頼むと、いきなり作り始めずに計画を出してくれます。公式のベストプラクティスでも、「調べる → 計画 → 実行」の順に進めることが勧められています。

手順2：作ったページを確かめる

• Claude Code が作ったファイル（index.html など）を、ブラウザで開いて見ます。
• スマホでの見え方も確かめます。「スマホの幅で見たときの画面を確かめて」と頼むこともできます。
• 文字・電話番号・住所・営業時間が、メモのとおりかを自分の目で確かめます。

手順3：直してほしい点を伝える

直してほしい点は、具体的に伝えます。

• 一度にたくさん頼むより、2〜3個ずつ直すほうが、思ったとおりになりやすいです。
• 2回直してもうまくいかないときは、会話を新しくして、足りなかった情報を入れて頼み直します。
• 「答えは日本語で」「書いていないことは足さない」など、いつも守ってほしいことは、フォルダの説明書き（CLAUDE.md）に書いておくと毎回伝えなくてすみます。

手順4：公開の前に確かめること

1. 中身の事実：店名・住所・電話番号・料金・営業時間がまちがっていないか。
2. 写真：自分で撮った写真か、使ってよい写真か。写真に位置情報（撮った場所）が残っていないか。
3. 検索に出す・出さない：まだ見せたくないページは、検索に出ない設定にしてもらいます。
4. 控え：公開する前の状態のファイルを、別の場所にコピーして残しておきます。

手順5：公開する

ホームページを公開するには、ファイルを置く場所（レンタルサーバーなど）と、住所にあたるドメインが必要です。作ったファイルを、その場所に置くと公開されます。置き方はサービスによって違うので、使うサービスの説明書を確かめてください。Claude Code に「このサービスに置く手順を教えて」と聞くこともできます。

安全に進めるコツ

• 確認の画面を読んでから承認する：Claude Code がファイルを書きかえたり命令を動かしたりする前の確認は、内容を読んでから承認します。分からなければ「これは何をするの？」と聞きます（人の確認をはさむ進め方）。
• ホームページ専用のフォルダで作業する：ほかの大事なファイルが入っていないフォルダで作業します。
• 公開は自分の目で確かめてから：AIが「できました」と言っても、公開する前に必ず自分で見ます。

作ったあとに育てる

• お知らせを足す：「お知らせのページに、10月の新商品を1件追加して」と頼むだけで更新できます。
• 検索やAIに見つけてもらう工夫：ページの題や説明文、よくある質問を整えると、検索エンジンやAIの回答に取り上げられやすくなります（GEO）。
• アクセスを数える：Google アナリティクスなどの計測を入れると、どのページが読まれているかが分かります。

よくある質問

この記事に出てきた用語

ほかの記事