職場のホームページを、エンジニアではない私がClaude Codeとやりとりしながら作り替えました。きっかけは、旧ホームページのリース満了です。

春に作り始め、夏に公開し、その後も更新を続けています。作り始めから約半年を振り返ると、ページを作る作業以上に気を遣ったのは、AIが書いた内容を確かめ、直していくことでした。

この記事では、かかった費用や切り替え時のトラブル、実際の失敗から決めた運用ルールをまとめます。

この記事のまとめ

  • 旧ホームページのリース満了をきっかけに、勤務先のホームページをClaude Codeで作り替えた
  • 春に作り始めて夏に公開し、その後も更新を続けている（作り始めから約半年）
  • サーバー代は0円（Cloudflare Pagesの無料枠）。Claudeの利用料は月22ドル（会社負担）。アドレスの設定変更には、一度だけ約1万円強かかった
  • 今のところ反応はない。最大のメリットは、旧ホームページのリース代と保守費用がなくなったこと
  • ページを作るのはAIに任せられた。ただし誤りや行き過ぎは何度もあり、その多くは私の指摘で見つかった。そのたびにルールを決めた

なぜ作り替えたのか

旧ホームページは、リース契約のホームページ作成サービスで作られていました。このリースが夏で満了するため、解約して新しいサイトに移すことにしました。

旧サイトには次のような古さもありました。

  • 以前からブラウザに警告が出ていた
  • スマホ用が別のページになっている
  • 文字の大きさを変えられない

作り替える際に重視したのは、ホームページのアドレスを変えないことです。

使ったものと費用

以下は、このサイトを作った当時の構成と費用の記録です。同じ構成をそのまま勧めるものではありません。

役割 使ったもの 費用
ページの作成 Claude Code（Next.jsで作成し、HTMLに変換して公開） Proプラン：月22ドル（会社負担）
置き場所 Cloudflare Pages 無料枠
アドレスの切り替え ドメインの管理会社に、wwwの向き先だけ変えてもらう 約1万円強（最初の見積は5,000円程度）
問い合わせフォーム Formspree 無料枠
Instagramの表示 SnapWidget 無料版
アクセス解析 Cloudflare Web Analytics、Google Search Console 無料
控え GitHub（非公開）と毎日のバックアップ 無料

Claudeの月22ドルは会社が支払っている金額です。料金や無料枠の条件は、契約方法や時期によって変わることがあります。ここでいう「サーバー代0円」は置き場所の費用のことで、運用全体が無料という意味ではありません。

サーバーでプログラムは動かさず、出来上がったHTMLを置くだけの作りです。

AIとのやりとりの進め方

最初の依頼

旧ホームページと、参考にしたいホームページをClaudeに見せて「このように作って」と頼みました。ただ、手元には直近約1か月分の会話しか残っておらず、最初の数か月のやりとりは確認できません。この部分は記憶と変更の記録からの再現です。

写真は旧ホームページのものを使いました。まず全体を一通り作ってもらい、それを見て「ここを直して」と伝えて仕上げていく形でした。

ふだんの更新の流れ

  1. 私が、ページ名と変えたい文言を普通の言葉で伝える（例：「アクセス欄の所要時間を5分→10分に」）
  2. Claudeが直して、確認用のアドレスで見られるようにする。日付や曜日などの数字は、プログラムで機械的に照合する
  3. 変更内容を表で見せてもらう。判断に迷った点はClaudeが明示する（例：「同じ記述がほかの2ページにもあったので直しました」）
  4. 私が「更新して」と返事をしてから公開する
  5. 公開後、本番のページを取り寄せて反映を確認し、記録を残し、GitHubに控えを送る

経過

時期 出来事
春 作り始め。全体を作ってもらい、見ながら手直し
夏の前 管理会社にアドレスの向き先変更を依頼。旧サービスの解約申込
切り替えの少し前 Cloudflare側の準備。私が画面を操作し、Claudeが手順を案内
公開直前 全ページの点検。文言の直しが多数
夏 本番切り替え。1時間以上開けなかったが復旧
公開から半月 「反応がない」ので点検。アクセス解析などを導入
秋 ページの追加や、更新ミスを防ぐ点検の仕組みづくり

切り替え当日、1時間以上開けなかった

切り替え当日、管理会社のアドレス切り替えは予定どおり行われました。ところがCloudflare側の設定が待ち時間切れで止まっていて、新しいアドレスが1時間以上開けませんでした。

当日は、Cloudflareの管理画面で次の操作をしました。

  1. Workers & Pages → 対象のプロジェクト → Custom domains を開く
  2. 状態が「Inactive」になっていたため「Reactivate」を押す
  3. 出てきた画面で「Check DNS records」を押す

これで数分後に「Active」になり、開けるようになりました。問い合わせフォームも、その日のうちに確認しました。

公開後「反応がない」→ 調べて分かったこと

公開から半月ほどたって、反応がないと感じてClaudeに点検してもらいました。分かったのは次の2点です。

  • アクセス解析が入っていなかった。反応がないのか、そもそも見られていないのか、判断できない状態だった
  • 旧サイトのアドレスから来た人を、全員トップページに飛ばしていた。検索結果には旧サイトの求人ページなどが残っていて、そこから来た人が目的のページにたどり着けない

やったことは次のとおりです。

  • Internet Archiveに残っていた旧サイトのトップページから、旧ページと新ページの対応表を作り、ページごとに転送するように変更
  • 検索エンジン用のページ一覧（sitemap.xml）とrobots.txtを追加
  • Cloudflare Web Analytics と Google Search Console を導入

残念ながら、今のところ反応はありません。現時点で最大のメリットと感じているのは、旧ホームページのリース代と保守費用がなくなったことです。

AIの誤り・行き過ぎと、決めたルール

この記事でいちばん残したい部分です。多くは私の指摘でClaudeの誤りや行き過ぎが分かり、ルールになりました。

起きたこと 決めたルール
「随時掲載します」など、守れない約束を書いていた 守れない約束は書かない
実際とは違う説明を書いていた（ボタンの位置など） 実物で確かめてから書く
実際より大げさな表現を書いていた 事実を誇張しない
1か所直しても、同じ内容がほかのページに残っていた 同じ記述はすべて探して、そろえて直す
私の確認の前に公開していた 公開は私が「更新して」と返事をしてから
指定したものと違う資料を使っていた 指定した資料を使う。ほかの資料は使う前に確認する
AIによる要約で、内容を読み違えていた 公開後は、本番のページそのものを確認する

やってみて分かったこと

  • ページを作る作業そのものはAIに任せられた。一方で「実際はどうか」（サービスの頻度、ボタンの位置、日付の切れ目）は、記録を見ると私の指摘で直ったものが多い
  • ルールの多くは、作っている途中ではなく公開前後の運用の中でできた
  • 手元の会話だけでは最初からの経過をたどれなかった。引き継ぎメモと運用マニュアルに、ファイルで記録を残しておく必要があった

ホームページを作るだけなら、すぐにできました。一方で、AIの表現の直しと、AIが勝手に追加した部分の修正には気を遣いました。間違ったことを載せるわけにはいかないからです。

これから

今後は、ほかの担当者でも更新できる体制を整えたいと考えています。

よくある質問

Q. 費用はいくらかかった？ サーバー・フォーム・アクセス解析は無料枠です。一度だけかかったのは、アドレスの設定変更の作業費 約1万円強です。ClaudeはProプランで、会社が月22ドルを支払っています。

Q. 更新は誰がやっている？ 私が変えたい文言を伝え、Claudeが直して、私の返事のあとに公開しています。掲載情報の定期更新では、決まった日にClaudeの方から声をかけてくる設定にしています。

Q. AIに任せきりで大丈夫？ 私の場合は任せきりにはできませんでした。上の表のとおり、誤りや行き過ぎは何度もあり、確認と判断は自分でしています。

関連記事