Claudeでホームページを作る——コードなしで創業者が本格サイトを立ち上げる手順

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プロンプト例（対話式）私のビジネスのホームページに掲載するコンテンツを一緒に整理してください。質問は必ず1問だけしてください。私が答えたら、次の質問をしてください。質問は全部で8〜10問程度でお願いします。すべての質問が終わったら、ホームページのトップページに掲載するコンテンツ案（文章の下書き）を以下の6セクション分まとめて出力してください。 ①キャッチコピー ②サービス説明 ③こんな方へ ④選ばれる理由 ⑤プロフィール ⑥お問い合わせでは、最初の質問から始めてください。

AIとの対話で出てきた文章案を確認・修正して、コンテンツを確定させましょう。この段階でブランドのトーン・オブ・ボイスに合った文体になっているかもチェックします。

ステップ2：ClaudeにHTMLを生成させる

コンテンツが準備できたら、いよいよAIにHTMLコードを書いてもらいます。「HTML？難しそう」と思うかもしれませんが、あなたがやることは「プロンプトを入力して、出てきたコードをコピーする」だけです。

AIプロンプト②：ホームページHTMLを生成する

AIプロンプト例以下の情報をもとに、1ページのホームページのHTMLコードを作成してください。【ビジネス名】（例：〇〇コーチング）【キャッチコピー】（ステップ1で決めたもの）【サービス説明】（ステップ1で決めたもの）【こんな方へ】（ステップ1で決めたもの）【選ばれる理由】（ステップ1で決めたもの）【プロフィール】（ステップ1で決めたもの）【連絡先】（メールアドレス等）【ブランドカラー（メイン）】（例：#2B6CB0）【ブランドカラー（アクセント）】（例：#D4741A）要件： - スマートフォンでも見やすいデザイン（レスポンシブ対応） - 外部ライブラリなしの純粋なHTML/CSS - シンプルで読みやすいレイアウト - お問い合わせボタンはメールリンクで - すべて1つのHTMLファイルに収める

ClaudeはArtifacts（アーティファクト）機能でHTMLコードを出力し、画面右側にプレビューも表示してくれます。プレビューを見ながら「ここをもっとシンプルに」「色をもう少し明るく」などと指示を出して、気に入るデザインになるまで調整できます。

よくある修正指示の例

デザインを変えたい場合：「ヘッダーの背景色を濃い紺色にして、ロゴ文字を白にしてください」
文章を変えたい場合：「キャッチコピーを『〇〇〇〇』に変更してください」
構成を変えたい場合：「実績セクションをプロフィールの前に移動してください」
機能を追加したい場合：「お問い合わせフォームを追加してください（Googleフォームへのリンクで）」

満足のいくHTMLが完成したら、コードをすべてコピーして「index.html」という名前でパソコンに保存します。

ステップ3：サーバーにアップして公開する

HTMLファイルができたら、インターネット上に公開する作業です。ここでは無料で使えるサービスを4つ紹介します。いずれも難しい設定は不要ですが、サービスごとに商用利用の可否や帯域の上限に違いがあります。自分のビジネスサイトとして使う場合は、下記の注意点を必ず確認してください。

無料で公開できる4つの方法

① Netlify（ネットリファイ） — 無料プランあり。HTMLファイルをブラウザからドラッグ＆ドロップするだけで公開できる。最も手軽。商用利用を明示的に許可しており、ビジネスサイトにも安心して使える。
⚠️ 注意：無料プランの転送量は月100GBまで。超過するとその月の残り期間はサイトが停止します（翌月自動で復活）。創業期のサイトであれば通常は問題ない水準です。
② Cloudflare Pages（クラウドフレア・ページズ） — 完全無料。商用利用を明示的に許可しており、帯域は無制限。日本のCDNサーバーに対応しており、国内からのアクセスが速い。GitHubと連携したデプロイにも対応。
⚠️ 注意：大量ファイル配信や動画ストリーミングへの転用は禁止されています。通常の会社紹介・サービス紹介サイトであれば問題ありません。
③ エックスサーバースタティック — エックスサーバー（国内大手）が提供する完全無料の静的サイトホスティング。転送量無制限、カスタムドメイン・SSL対応。日本語サポートが充実しており、国内サービスを使いたい方に向いています。
⚠️ 注意：無料プランのストレージは1GBと少なめです。画像が多いサイトでは早期に上限に達する可能性があります。また商用利用の可否が利用規約上で明確に記載されていないため、ビジネス用途での利用を検討する場合は事前にエックスサーバーへ確認することをお勧めします。
④ GitHub Pages（ギットハブ・ページズ） — 完全無料。独自ドメインの設定も可能。少し操作に慣れが必要ですが、拡張性が高い。URLは「ユーザー名.github.io」形式。
⚠️ 注意：商用利用には制限があります。GitHubの公式利用規約では「オンラインビジネスの運営、ECサイト、または商取引の促進を主目的とするサイトのための無料ウェブホスティングサービスとして使用することは意図されていない」と明記されています。コーポレートサイトや名刺代わりの情報サイトはグレーゾーンですが、決済・ECが絡む場合は利用できません。また無料プランではリポジトリ（サイトのソースコード）が世界に公開されます。ビジネス目的での利用は①〜③のいずれかをお勧めします。

初めての公開には Netlify がお勧めです：商用利用が明示的に許可されており、HTMLファイルをドラッグ＆ドロップするだけで数秒で公開できます。以下の手順でさっそく試してみましょう。

Netlifyで公開する手順（最も簡単）

手順1 — Netlify（netlify.com）にアクセスして無料アカウントを作成する
手順2 — ログイン後、「Add new site」→「Deploy manually」を選ぶ
手順3 — 先ほど保存した「index.html」をブラウザにドラッグ＆ドロップする
手順4 — 数秒でサイトが公開され、URLが発行される（例：amazing-cake-123.netlify.app）
手順5 — URLを確認してスマートフォンでも表示を確認する

独自ドメインについて：「netlify.app」ではなく「あなた自身のドメイン（例：yourname.com）」にするには、ドメイン取得が必要です（年間1,000〜2,000円程度）。最初は無料のURLでも十分です。ビジネスが軌道に乗ってきた段階で独自ドメインを取得するのがお勧めです。

公開後にやること——育てるホームページへ

ホームページを公開したら、それで終わりではありません。公開後に少しずつ改善・充実させることで、長期的な資産になっていきます。

公開後すぐにやること

Google Search Consoleに登録する — 無料のGoogleツール。自分のサイトがGoogle検索でどう見られているかを確認できます。URLを登録するだけで、検索への表示が促進されます
名刺・SNSプロフィールにURLを追加する — せっかく公開したURLを活用しましょう
スマートフォンで表示を確認する — 訪問者の多くはスマートフォンで閲覧します。文字のサイズ・ボタンの押しやすさを確認しましょう

AIプロンプト③：公開後の改善点を洗い出す

AIプロンプト例私のホームページのHTMLを確認して、以下の観点で改善点を教えてください。【HTMLコード】（ここにHTMLを貼り付ける）確認してほしいこと： 1. スマートフォンでの見やすさに問題はないか 2. Google検索に表示されやすくするためのSEO対策で不足している点 3. 訪問者が問い合わせしやすい導線になっているか 4. 読み込み速度を落とす不要な記述がないか改善が必要な点を優先度（高・中・低）付きで教えてください。

よくある質問

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フォームを埋め込むには？」と聞けば手順を教えてもらえます。