ClaudeなどのAIを使えば、プログラミングの知識がなくても本格的なホームページを作ることができます。コンテンツをAIと整理し、HTMLコードを生成してもらい、無料のサーバーにアップするだけ——最短1〜2日で創業者が自分のサイトを公開できる時代になりました。
皆さんこんにちは！事業構想×生成AI活用アドバイザー（中小企業診断士）の津田です。
今回は、Claudeを使ってホームページを作る具体的な手順を解説します。「HTMLって何？」という方でも迷わず進められるよう、コンテンツの準備からサーバー公開まで、ステップごとに説明していきます。私自身、このサイト（speranzapt.com）もAIを活用しながら構築しました。その経験から得た実践的なノウハウをお伝えします。
このシリーズについて：本記事は「創業者のためのAI活用完全ガイド」の Step 19 です。このステップの前提として、Step 18「ブランディングの設計」でブランドカラー・フォント・トーンを決めておくことをお勧めします。
なぜ創業初期からホームページが必要なのか
「SNSだけで十分では？」という声をよく聞きます。確かにInstagramやX（旧Twitter）は無料で始められて便利です。しかし、ホームページとSNSは役割が異なります。
SNSは「流れていく情報」を発信する場所です。一方ホームページは「積み上がる資産」です。Google検索で名前や業種を検索したとき、ホームページがあれば「本当に実在するビジネス」として信頼されます。名刺にURLを載せることもでき、初対面の相手が事前に詳しく調べることができます。
- 24時間365日、無人で営業してくれる — 深夜に問い合わせがきても、ホームページが代わりに説明してくれます
- Googleで検索されたとき見つかる — SNSより検索エンジンに表示されやすく、新規顧客との接点になります
- 「本物の事業者」として信頼される — 名刺・メール署名にURLがあると信頼感が大幅に上がります
- 将来の資産になる — 記事や実績を積み上げるほど、長期的に検索流入が増えます
ポイント：完璧なサイトを作ろうとしなくていいです。「サービス内容・プロフィール・連絡先」の3つが揃ったシンプルな1ページサイトで十分です。まず公開することが最重要です。
コードなし・創業者向け：Claudeホームページ作成の全体の流れ
全体の流れは以下の3ステップです。各ステップでAIを活用することで、専門知識なしでも進められます。
| ステップ | 作業内容 | 所要時間の目安 |
|---|---|---|
| ステップ1 | 掲載するコンテンツを整理する（文章を準備する） | 2〜4時間 |
| ステップ2 | ClaudeにHTMLコードを生成してもらう | 1〜2時間 |
| ステップ3 | サーバーにアップして公開する | 1〜2時間 |
合計で最短半日〜1日で公開できます。難しく考えず、まずここから始めてみましょう。
ステップ1（コードなし）：掲載するコンテンツを整理する
ホームページを作る前に、「何を載せるか」を決めることが最重要です。コードやデザインよりも、コンテンツ（文章・情報）のほうがずっと重要です。コンテンツが明確であれば、AIがコードを作るのは簡単です。
最低限必要な6つのコンテンツ
- ① キャッチコピー — ページを開いて最初に目に入る一言。「誰に・何を・どう変えるか」を10〜20文字で表現
- ② サービス説明 — 提供するサービスの内容・特徴・料金（目安）
- ③ こんな方に向けて — ターゲット顧客の悩み・状況を3〜5項目で列挙
- ④ 選ばれる理由・強み — 他と違う点・あなたならではの価値を2〜4点
- ⑤ プロフィール — 経歴・実績・資格・なぜこのビジネスをしているか
- ⑥ お問い合わせ方法 — メールアドレス・フォーム・LINE・電話番号など
AIプロンプト①：コンテンツを対話式で整理する
何を書けばいいか迷う場合は、以下のプロンプトでAIと対話しながら整理できます。
AIとの対話で出てきた文章案を確認・修正して、コンテンツを確定させましょう。この段階でブランドのトーン・オブ・ボイスに合った文体になっているかもチェックします。
ステップ2：ClaudeにHTMLを生成させる
コンテンツが準備できたら、いよいよAIにHTMLコードを書いてもらいます。「HTML？難しそう」と思うかもしれませんが、あなたがやることは「プロンプトを入力して、出てきたコードをコピーする」だけです。
AIプロンプト②：ホームページHTMLを生成する
ClaudeはArtifacts（アーティファクト）機能でHTMLコードを出力し、画面右側にプレビューも表示してくれます。プレビューを見ながら「ここをもっとシンプルに」「色をもう少し明るく」などと指示を出して、気に入るデザインになるまで調整できます。
よくある修正指示の例
- デザインを変えたい場合：「ヘッダーの背景色を濃い紺色にして、ロゴ文字を白にしてください」
- 文章を変えたい場合：「キャッチコピーを『〇〇〇〇』に変更してください」
- 構成を変えたい場合：「実績セクションをプロフィールの前に移動してください」
- 機能を追加したい場合：「お問い合わせフォームを追加してください（Googleフォームへのリンクで）」
満足のいくHTMLが完成したら、コードをすべてコピーして「index.html」という名前でパソコンに保存します。
ステップ3：サーバーにアップして公開する
HTMLファイルができたら、インターネット上に公開する作業です。大きく2つの方法があります。最初は①から始め、慣れてきたら②への移行も検討してみてください。
方法①：レンタルサーバーにアップロードする
国内のレンタルサーバーを契約し、管理画面のファイルマネージャーからHTMLファイルをアップロードする方法です。日本語のサポートがあり、管理画面も日本語で使いやすいのが特徴です。
主なサービス（いずれも月額数百円〜）：エックスサーバー、さくらのレンタルサーバー、ロリポップ！
公開までの流れ：
- ① レンタルサーバーを契約する（独自ドメインがセットになったプランが多い）
- ② ドメイン名を取得する（例：yourname.com）
- ③ 管理パネルにログインする
- ④ ファイルマネージャーを開き、
public_htmlフォルダにindex.htmlを保存する - ⑤ ブラウザで自分のドメインにアクセスして表示を確認する
慣れてきたら：Claude → GitHub → サーバーを自動化する
少し慣れてきたら、ファイルの更新を自動化する仕組みが使えます。ClaudeがHTMLを生成・修正すると、GitHubに自動で保存され、さらにサーバーへの公開まで自動で行われます。
Claude（編集）→ GitHub（自動保存）→ サーバー（自動公開）
この仕組みを使うと、「Claudeに修正を依頼する」だけでサイトへの反映まで完結します。実際にこのサイト（speranzapt.com）もGitHubと連携して運用しています。
公開後にやること——育てるホームページへ
ホームページを公開したら、それで終わりではありません。公開後に少しずつ改善・充実させることで、長期的な資産になっていきます。
公開後すぐにやること
- Google Search Consoleに登録する — 無料のGoogleツール。自分のサイトがGoogle検索でどう見られているかを確認できます。URLを登録するだけで、検索への表示が促進されます
- 名刺・SNSプロフィールにURLを追加する — せっかく公開したURLを活用しましょう
- スマートフォンで表示を確認する — 訪問者の多くはスマートフォンで閲覧します。文字のサイズ・ボタンの押しやすさを確認しましょう
公開後の改善チェック：ClaudeにHTMLを診断させる
公開したページをClaudeに診断させると、SEO・モバイル対応・問い合わせ導線の問題点を優先度付きで洗い出せます。
Claude Codeを使っている場合は、HTMLを手動でコピー&ペーストする必要はありません。ファイルを直接読み込んで自動チェックができます。/seo-audit コマンドを使えばSEO観点の診断を一括で実行できます。
Claude.ai（ブラウザ版）の場合は、以下のプロンプトにHTMLを貼り付けて確認できます。
よくある質問
Q. WordPressは使わなくていいですか？
創業初期はWordPressなしで十分です。WordPressは機能が豊富ですが、設定が複雑でセキュリティ管理も必要になります。まずはClaudeで作ったシンプルなHTMLサイトで公開して、ブログ記事を定期的に書きたい段階になってから移行を検討するのが現実的です。
Q. 写真・画像はどうすればいいですか？
プロフィール写真は、スマートフォンで撮影したものでも構いません。背景をシンプルにして明るい場所で撮ると清潔感が出ます。背景画像や雰囲気写真は、Unsplash（unsplash.com）やPixabay（pixabay.com）で無料の高品質写真が入手できます。日本の風景・人物写真はO-DAN（o-dan.net）が便利です。ただし、O-DANは複数のフォトサービスの写真を横断検索するサービスのため、ダウンロード前に必ず元サイトのライセンスを確認してください。各サービスのクレジット表記の要否や商用利用の可否は、それぞれの利用規約ページで最新情報をご確認ください。
Q. 問い合わせフォームはどうやって作りますか？
最も手軽なのはGoogleフォームを埋め込む方法です。Googleフォームで問い合わせフォームを作成し、「埋め込み用HTMLコード」をコピーしてホームページに貼り付けるだけで動作します。無料で使えて、問い合わせが届いたらGmailに通知が来ます。Claudeに「Googleフォームを埋め込むには？」と聞けば手順を教えてもらえます。
Q. Claudeでのホームページ作成にいくらかかりますか？
Claude自体は有料プラン（月2,000〜3,000円程度）が必要です。レンタルサーバー費用やドメイン費用で年間1万円から2万円程度かかります。サーバーはNetlifyなど無料で使えるものもありますが、初心者には難易度が高いです。