見出し画像

制作会社を使わず、低予算(月額数百円)でホームページを作成・管理する方法

こんにちは。経営者向け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 Designの画面

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

ホームページのHEROのスクリーンショット

そのデザインをClaude Codeに共有して、Claude Codeでホームページ全体を構築する流れで制作しました。

Claude Designでまずデザインのテイストを固めてから、Claude Codeで実装すると作業が早いと思います。


お問い合わせフォームの設置

作成したお問い合わせフォーム

最初はGoogleフォームを検討しましたが、サイトの雰囲気とデザインが合わないので却下しました。

Claude Codeと相談しながら、以下の対応をしました。

  • HTMLのフォームを置く

  • スパム対策(Cloudflareのbot判定)を設定

  • 問い合わせ内容は、Cloudflareのプログラムが受け取る

  • 内容は自分のメールに届くように設定

bot対策をしないと迷惑メールが自分のメールアドレスに直接届くようになるかもしれませんので、その対策が必要です。

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と一緒に回していけます。

この記事が、自分でホームページを作ってみたい方の参考になれば嬉しいです!

いいなと思ったら応援しよう!