制作会社を使わず、低予算(月額数百円)でホームページを作成・管理する方法
こんにちは。経営者向けClaude Code活用支援をしているShinc Partners代表のShinです。
個人で開業するにあたり、事業用のホームページを作ることにしたのですが、
制作会社に頼むと「制作コスト」「管理コスト」でまとまった費用がかかってしまうので、
Claude Codeを使って、どこまでできるのかを試してみることにしました。
やってみた結果、
制作費用:外注費ゼロ
制作期間:2週間
管理コスト:月額数百円
で、満足のいくホームページを作って運用できることがわかりましたので、
AIを使って低予算でホームページを自作したい方の参考になればと思い、実際に私が作ったときの流れを記事にまとめました!
はじめに:使ったツール、かかったお金
ホームページを作るにあたって使ったツールは、
Claude Design(デザイン)
Claude Code(実装)
Cloudflare(ホスティング)
管理にかかっている費用の内訳は、
Claudeのサブスク料金:3,000円/月
ドメイン代:160円/月
です。
ホスティングはCloudflareの無料の範囲に収まっているので、サーバー代は払っていません。
ここは考え方にもよりますが、私はClaudeを毎日様々なタスクに使用していますので、「ホームページ管理・運用にかかるコスト」としては、月額数百円程度という認識です。
ホスティングサービス(Cloudflare)の登録
ここからは私が実際にやったことを書いていきます。
最初はWordPressを検討しましたが、私が欲しかったのは、
サービスの紹介ページ
お問い合わせフォーム
ブログ
だけでしたので、Cloudflareを採用しました。
Cloudflareを選んだ理由は、
ページ表示速度が速い
セキュリティに定評がある
ドメイン取得からホスティングまで一気通貫
bot対策・問い合わせ内容のメール送信ができる
など、私のニーズに合っていたからです。
私のように「シンプルなホームページでいい」という方には、Cloudflareがオススメです。
GitHubとの連携
自分でホームページを作成・管理するのであれば、GitHubの活用はマストとなりますので、最初にリポジトリを作成しておきました。
GitHubを活用する理由は、
バックアップのため
ホームページが壊れた時に復元できるため
です。
PCに保存したホームページのファイルが事故で消えると、復元が難しくなってしまうので、こまめにGitHubに保存しておくと安心です。
ホームページのデザイン
まずは参考にするホームページをひとつ決めて、利用する色(カラースキーム)をClaude Designに作ってもらいました。

そこから、まずはトップ画面だけをClaude Designで作成しました。

そのデザインをClaude Codeに共有して、Claude Codeでホームページ全体を構築する流れで制作しました。
Claude Designでまずデザインのテイストを固めてから、Claude Codeで実装すると作業が早いと思います。
お問い合わせフォームの設置

最初はGoogleフォームを検討しましたが、サイトの雰囲気とデザインが合わないので却下しました。
Claude Codeと相談しながら、以下の対応をしました。
HTMLのフォームを置く
スパム対策(Cloudflareのbot判定)を設定
問い合わせ内容は、Cloudflareのプログラムが受け取る
内容は自分のメールに届くように設定
bot対策をしないと迷惑メールが自分のメールアドレスに直接届くようになるかもしれませんので、その対策が必要です。

個人情報の取り扱いはシビアですので、データベースは持たずにGmail(問い合わせ内容が届く先)を保管場所としました。
データベースを持たず、保管場所がGmailだけなら、管理もプライバシーポリシーへの記載もシンプルになります。
ブログの設置

ブログについては、ブログページ用のテンプレートのHTMLを1つ用意して、そこに流し込む形にしました。
記事はテキストファイルとして書く
Claude CodeがテキストをHTMLへ変換する
自分がデプロイ(投稿)する
といった形で運用しています。
ドメインの取得
Cloudflareで.comのドメイン(1,900円/年)を購入しました。
ホスティングでCloudflareを使っているのであれば、Cloudflareでドメイン取得してしまうのがラクだと思います。
お名前.comなどでもいいのですが、ドメイン取得とサイトの置き場所が別の会社になると、その2つをつなぐ設定を自分でやることになります。
同じ会社にまとめておけば、その手間がそもそも発生しないのでラクでした。
サイトのデプロイ
Cloudflareの利用は初めてだったので、基本的に全てClaude Codeに聞きながら対応しました。
Cloudflareの管理画面は初めて見たので、正直どうすれば良いのかわからない点も多々ありました。
そういう時は、その画面をそのままスクショしてClaude Codeに質問しながら対応していきました。
SEO・検索エンジン対策
正直私はSEOにはあまり詳しくないので、わからないことはClaude Codeに聞きながら設定しました。
metaタグ、OGP、canonical、構造化データ
sitemap、robots.txtの設置
検索キーワードの調査とtitleへの反映
noindexの設定
アナリティクス、サーチコンソールとClaude Codeの連携
といったあたりをやってもらいました。
細かい更新や修正
直したい箇所のスクリーンショットを撮って渡し、Claude Codeで修正しています。
注意するのは、
デプロイの実施は、Claude Codeに任せずに自分でやる
修正をしたら、GitHubへの保存を忘れずに
この2点です。
デプロイまでClaude Codeに任せてしまうと、まだ修正中の箇所が知らないうちに本番環境に勝手にアップロードされてしまった、なんてことも起こり得ます。
そしてGitHubへの保存をしておけば、そういった事故が起こった場合にも、
「やっぱり前の状態に戻して」とClaude Codeに一言伝えれば、GitHubに保存してある一つ前のバージョンを参照して、すぐに元の状態へ戻すことができます。
まとめ
Claude CodeとCloudflareを使うことで、
外注費:ゼロ
管理コスト:月額数百円
で、誰でも事業用のホームページを持つことができます。
ホームページを自作してみて一番良いのは、リリースした後も自分の手で修正・改善を高速で実施できることです。
気になった箇所はスクショを渡せばすぐに直せますし、
アクセス解析の数字を見ながらの改善まで、Claude Codeと一緒に回していけます。
この記事が、自分でホームページを作ってみたい方の参考になれば嬉しいです!
