事業用のホームページを持ちたい。でも制作会社に頼むと、制作費に加えて月々の運用費もかかり、まとまった出費になります。かといって自分で作るのは無理そうだし、と悩まれている方は多いのではないでしょうか。
私は個人で開業するにあたり、事業用のホームページをClaude Codeで自作しました。結果は、外注費ゼロ、制作期間2週間、運用コストは月数百円です。いまご覧いただいているこのサイト自体がその成果物で、公開後の更新や改善も自分の手で回せています。この記事では、実際に作ったときの流れと、工程ごとの押さえどころを紹介します。
かかった費用と使ったツール
デザイン・実装・公開の基盤に、それぞれ次のツールを使いました。
- Claude Design（デザイン）
- Claude Code（実装）
- Cloudflare（公開・運用の基盤）
毎月かかっている費用は、Claudeのサブスクリプション3,000円とドメイン代160円だけです。公開に使っているCloudflareは無料の範囲に収まっているので、サーバー代は払っていません。Claudeは毎日いろいろな仕事に使っているため、ホームページ運用のためのコストとしては月数百円程度という認識でいます。
ホームページ制作の定番であるWordPressも検討しましたが、今回は見送りました。私が欲しかったのはサービス紹介のページ、お問い合わせフォーム、ブログの3つだけで、それにはWordPressは機能過多だったからです。プラグイン更新といったセキュリティ管理の手間や煩雑な管理画面を考えると、個人で運用していくには「管理コストや考えることを増やさないシンプルな選択」が大事だと思っています。
その点Cloudflareは、ページの表示が速く、セキュリティに定評があり、ドメインの取得から公開までを1社で完結できて、bot（機械による自動アクセス）への対策や問い合わせメールの送信までまかなえます。私と同じようにシンプルな構成でよい方には合う選択肢だと思います。逆に、会員ログインのような仕組みが必要ならWordPressなどが現実的になりますので、作りたいものに合わせて選んでください。
デザインから公開までの流れ
デザインはClaude Designで先に固める
まず参考にするサイトを1つ決め、Claudeに見せて対話を重ねながら、自分のホームページのイメージを固めていきました。そのうえで、Claude Designというデザイン専用のツールでトップページの見た目だけを先に作り、できあがった試作（モック）をClaude Codeに渡して、同じテイストのまま残りのページ全体を実装してもらいました。
注意点として、AIは参考サイトのデザインをかなり忠実に再現できてしまいますが、他の方が作ったデザインをそのまま使うのは著作権的にNGです。色使いや雰囲気を参考にする程度にとどめるのが安全です。また、いきなりClaude Codeに作らせるのではなく、先にClaude Designでデザインの方向性を決めてから実装に進めるのがおすすめです。
ドメインはCloudflareでまとめて取る
サイトの住所にあたるドメインは、候補の名前をClaude Codeに空きチェックしてもらいながら決めました。.comや.jpは既に埋まっているものが多い一方、.aiなど新しめのドメインは空きが多い印象です（ただし高額です）。私はCloudflareで.comのドメインを1,900円/年で購入しました。
ドメインの取得会社とサイトの置き場所が別々だと、その2つをつなぐ設定を自分ですることになります。同じ会社にまとめてしまえばその手間がそもそも発生しないので、Cloudflareを使うならドメインもCloudflareで取るのがラクです。
管理画面でわからないことは、スクショで聞く
公開作業では、初めて見るCloudflareの管理画面に戸惑う場面が何度もありました。そういうときは、その画面をスクリーンショットに撮ってClaude Codeに見せ、「次に何をすればいいか」を質問しながら進めました。疑問や不安をその都度つぶしながら進められたので、初めてのサービスでも詰まらずに公開までたどり着けました。
お問い合わせフォームと個人情報の扱い
お問い合わせフォームは、最初Googleフォームを検討したものの、サイトの雰囲気とデザインが合わないので却下しました。代わりに、Claude Codeと相談しながら、次の構成で自作しました。
- サイトにはHTMLのフォームだけを置く
- スパム対策として、Cloudflareのbot判定を組み込む
- 送信された内容は、Cloudflare上のプログラムが受け取る
- 内容は自分のメールアドレスに届く
フォームは、外からの情報が入ってくる唯一の場所です。考えるべきことは「botからの送信をどう防ぐか」と「送られてきた個人情報をどう管理するか」の2つでした。
bot対策をしないと、迷惑な送信が自分のメールアドレスに直接届きかねません。私はCloudflareのbot判定を組み込み、人間からの送信だけが通るようにしています。
個人情報については、あえてデータベースを持たず、問い合わせが届くGmailだけを保管場所にする方針をとりました。保管場所が1か所なら、管理もプライバシーポリシーへの記載もシンプルに済むからです。
ひとつ技術的な注意点として、bot対策で発行されるキー（鍵）には「HTMLに書いてよい鍵」と「外に出してはいけない鍵」の2種類があります。Claude Codeに相談しながら進めれば大きく間違うことはないと思いますが、ここは完全に任せきりにせず、目視での確認をおすすめします。
事故を起こさないためのバックアップと公開の習慣
自分でホームページを作って運用するなら、GitHubというサービスの利用はマストだと考えています。理由はバックアップのため、そしてホームページが壊れたときにすぐ元に戻せるようにするためです。AIの意図しない変更でサイトが壊れても、GitHubに保存してあれば「前の状態に戻して」とClaude Codeに一言伝えるだけで復元できます。修正のたびにGitHubへ保存しておく習慣が、そのまま保険になります。
操作自体はClaude Codeが代行してくれるので、コマンドを覚える必要はありません。ただし、必ずプライベート（非公開）設定で運用する、機密情報を誤って保存しない設定を入れる、といった最初にやるべき対応はあります。GitHubがよくわからない場合は、詳しい方に聞きながら設定することを強くおすすめします。
もうひとつの習慣は、デプロイ（本番への反映）だけはClaude Codeに任せず自分の手でやることです。そこまで任せてしまうと、修正の途中のものが知らないうちに公開されてしまう事故が起こり得ます。「反映のボタンは自分が押す」と決めておくだけで、この種の事故は防ぎやすくなります。
なお、Claude Code自体を安全に使うための設定は、Claude Codeのセキュリティ設定の記事に別途まとめていますので、あわせてご覧ください。
公開してからが本番：ブログ・SEO・日々の修正
振り返ると、公開までの2週間よりも、公開した後の磨き上げに多くの時間を使っています。とはいえ、直したい箇所のスクリーンショットを撮って日本語で指示すればすぐ直してもらえるので、この作業は苦になっていません。
ブログは、記事をテキストファイルとして書き、用意したテンプレートHTMLにClaude Codeが流し込む形で運用しています。管理画面にログインして公開設定をして、といった手順は一切ありません。書いた記事はClaude Codeがそのままサイトに反映してくれますし、記事がテキストファイルで手元に残るので、将来サイトを作り変えることになってもそのまま流用できます。
SEO（検索エンジン対策）は、正直私は詳しくないのですが、次のような対応をClaude Codeに任せられました。
- metaタグ・OGP・構造化データの設定
- sitemap、robots.txtの設置
- 検索キーワードの調査とタイトルへの反映
- アナリティクス・サーチコンソールとの連携
この連携があるおかげで、ホームページの中身とアクセスの数字の両方をClaude Codeが把握したうえで、改善案の立案から実装までを一気に進められます。ブログを投稿するたびに必要なsitemapの更新のような、自分では忘れてしまう細かい対応を確実に処理してくれるのも助かっています。
まとめ：自作の一番の価値は、公開後も自分で育てられること
Claude CodeとCloudflareを使えば、外注費ゼロ、運用コスト月数百円で事業用のホームページを持てます。AIの進化で「作ること」自体はどんどん簡単になっていますが、鍵の扱いやバックアップ、デプロイの方法といった「事故を起こさないための押さえどころ」を知っておくことは、やはり大事だと感じています。
そして自作の一番の価値は、公開した後も自分の手で育てていけることです。気になった箇所はスクショを渡せばすぐ直せますし、アクセスの数字を見ながらの改善まで、Claude Codeと一緒に回していけます。ホームページを「作って終わり」の成果物ではなく、事業に合わせて変えていける道具にできるのが、自作の醍醐味です。
とはいえ、GitHubの初期設定や鍵の扱いなど、最初の環境づくりには判断に迷うところもあります。周りに詳しい知人やエンジニアの方がいれば、その方を頼るのがベストです。
もし相談できる相手が見つからなければ、私が実施している無料相談会（30分・ビデオ通話）をご活用ください。この記事のようにホームページを自作してみたい、というご相談も大歓迎ですし、その場で解決できる問題は、その場で解決いたします。
どんな些細なことでも結構です。ぜひ気軽にお問い合わせください。