Claudeに課金してサイト開発を任せてみた。まずは収益化に向けた土台づくり【96NEKO LAB開発記録 #2】

はじめに

前回までは、無料版のチャッピーに相談しながらサイトを作ってきました。

今回からは、Claudeの有料プラン（Pro）に課金して、Claude Codeにサイトの開発を任せてみることにしました。

Claude Codeは、パソコンの中のファイルを直接読んで、コードを書いて、動作確認までしてくれるAIです。

「こうしたい」と伝えると、

今のサイトを読む
↓
やり方を提案する
↓
コードを書く
↓
実際に動かして確認する

という流れで進めてくれます。

この日にやったことが多かったので、テーマごとに記事を分けて記録していきます。今回は最初に取り組んだ「サイトの土台づくり」です。

なぜ課金したのか

無料版のチャッピーでも、相談しながら少しずつ作ることはできました。

ただ、

• コードを自分でコピーして貼り付ける手間が多い
• サイト全体を見てもらうのが難しい
• 記事やツールをどんどん増やしたい

という理由から、ファイルを直接扱えるClaude Codeを使ってみることにしました。

ちなみに、この日の作業でかかったお金は

• Claudeの有料プラン（Pro）：課金あり
• サイトの公開（Vercel）：無料プランのまま
• アクセス解析（Google アナリティクス）：無料

です。追加の料金がかかるAPIなどは使っていません。

最初のお願い：「おかしいところを直して」

まずはざっくりと、

「現状必要なことと、おかしいと思うところは直してみて」

とお願いしました。

すると、自分では気づいていなかった部分をいくつも見つけてくれました。

• トップページのゲームの数が、実際は2つなのに1つと表示されていた
• 空っぽの広告枠が、本番のサイトにそのまま表示されていた
• ポケカ相場の説明が、サンプルのデータなのに本物の相場が分かるように読めた
• スマホで見ると、ツールページのボタンの並びが崩れていた
• 見出しの順番がバラバラなページがあった

特に、サンプルのデータを本物のように見せてしまうのは、読む人に誤解を与えるところでした。

ゲームの数などは、今後ゲームやツールを追加すると自動で数が変わる仕組みにしてくれました。

収益化の審査に必要なページを用意

このサイトは、将来的に広告やアフィリエイトでの収益化を目指しています。

Googleの広告（AdSense）などの審査では、サイトに次のようなページがあることが大事だそうです。

• プライバシーポリシー・免責事項
• お問い合わせページ
• 運営者情報
• 「広告・アフィリエイトリンクを含みます」という表記

これらをまとめて作ってもらい、すべてのページの下に表示されるようにしました。

「広告を含みます」の表記は、いわゆるステマ規制への対応でもあります。

検索やSNSに向けた準備

あわせて、

• 検索エンジンにサイトのページ一覧を伝える仕組み（サイトマップ）
• SNSでシェアされたときに表示されるサムネイル画像
• 存在しないページを開いたときの「ページが見つかりません」画面

なども用意してもらいました。

やってみて感じたこと

一番助かったのは、

「作ったあとに、ちゃんと動くか確認までしてくれる」

ところです。パソコンとスマホ、両方の幅で表示を確認してから報告してくれました。

一方で、本番のサイトに公開する操作は、最後に自分で行う形になっています。勝手に公開されないので、そこは安心できました。

次の記事では、今回いちばんやりたかった「AIニュースを自動で記事にする仕組み」について書きます。