AIと一緒に、このサイト自体を作ってみた話(つまずいた所も全部書く)

前回の記事で「AIで本当に稼げるのか検証する」と宣言しましたが、何かを発信する以前に、まず発信する場所(このサイト)が必要でした。そこで今回は、このサイト自体をAIと一緒にどうやって作ったかを、最初の実験記録として公開します。

結論から言うと、「AIにお願いしたら一瞬で全部終わった」というわけではありませんでした。むしろ、私のような初心者が普段触らない画面(ターミナルというもの)を使う場面が多く、実際にエラーにも何度もぶつかりました。その過程をそのまま書きます。

今回使ったAIツールと料金

まず、実際に使ったツールと、実際に払っている金額を公開します。

ツール	用途	料金プラン	実際の請求額(円)	公式の米ドル価格
Claude(Pro)	サイト構成の設計・コード生成・エラーの調査と修正のやり取り	Claude Pro	3,611円	$20/月(公式ヘルプページより)
ChatGPT(Plus)	サイトのイメージ画像(バナー)の生成	ChatGPT Plus	3,000円	$20/月(公式ヘルプページより)

米ドルの価格は各社の公式ヘルプページに記載されている金額です。実際に私のカード明細に載る円建ての金額は、為替レートや請求タイミングによって変動するため、上表では両方をそのまま並べています。

サイト自体のホスティング(GitHub・Cloudflare Pages)は無料の範囲で利用しています。独自ドメインを取得する場合は、別途費用がかかる予定です(取得したら追記します)。

やったことの流れ

1. サイトの目的・必要なページ・デザインの方向性をClaudeに伝えて、まずは構成案を出してもらう
2. その構成をもとに、実際のコード(ページ・記事の仕組み・SEO設定など)を一式作ってもらう
3. 自分のパソコンに、サイトを動かすための環境(Node.js)を入れる
4. 作ってもらったコードを手元で動かして確認する
5. 記事のバナー画像をChatGPTで生成してもらい、サイトに組み込む
6. GitHub(コードの保管場所)にアップロードする
7. Cloudflare Pages(サイトを公開するサービス)に接続して、実際にインターネット上に公開する

言葉にすると7ステップですが、3〜7のところで、初心者ならではのつまずきがいくつもありました。

つまずいたポイント(正直に書きます)

ターミナル(黒い画面)自体が何か分からなかった

npm install や git push のようなコマンドを打つ「PowerShell」という画面を、今回初めてまともに使いました。普段クリックで操作しているぶん、「文字を打って操作する画面がある」ということ自体に慣れる必要がありました。

PowerShellでコマンドが拒否された

npm -v を打っただけで、「このシステムではスクリプトの実行が無効になっているため実行できません」というエラーが出ました。Windowsのセキュリティ設定が原因で、Set-ExecutionPolicy という設定を1回変更することで解決しました。

フォルダの移動でつまずいた

zipファイルを展開したフォルダを、そのままPowerShellにドラッグ&ドロップしても移動できず、「認識されないコマンドです」というエラーになりました。移動するには、先頭に cd と入力してからパスを貼り付ける必要がある、というのを知りませんでした。

zipを展開したら、フォルダが1階層余分に入れ子になっていた

展開したフォルダの中に、さらに同じ名前のフォルダが入っている状態になっており、目的のファイル(package.json)が見つからずエラーになりました。dir コマンドで中身を確認しながら、正しい場所まで移動しました。

コードそのものに、実際のバグがあった

サイトを起動したところ、「PAGE_SIZE is not defined」というエラーが表示されました。これはAIが書いたコードの中に、実際に動かして初めて分かる不具合があったためです。Astro(サイトを作るための仕組み)には、ある特定の関数の中では、その外側で定義した変数を参照できない、という細かい制約があり、そこに引っかかっていました。原因を特定してもらい、該当箇所を4つのファイルすべて直しました。

AIが書いたコードでも、実際に動かしてみないと分からない不具合はある、というのが正直な実感です。

GitHub関連で、初回ならではのエラーが複数

• git コマンド自体が入っておらず、別途インストールが必要だった
• 初めてGitを使うパソコンだったため、「あなたが誰か」(名前・メールアドレス)を設定していないとコミットができなかった
• docs フォルダの中の日本語ファイル名が、WindowsとLinuxの文字コードの違いで文字化けしてGitHubに登録されてしまい、ファイル名を英語に変更して直した

それでも分かったこと

今回はっきりしたのは、AIは「コードを書く・エラーの原因を説明する・次にやることを教える」ことはできるが、実際にパソコンを操作してコマンドを打つのは自分自身、ということです。 「AIに任せれば何もしなくていい」というよりは、「分からないことをその都度AIに聞きながら、自分の手で進める」という感覚に近いと感じました。

エラーが出るたびに正直心が折れそうになりましたが、1つずつ意味が分かって解決できると、思っていたよりも早く「自分のサイトが本当にインターネット上に公開される」ところまでたどり着けました。

今の状態

• サイトの土台(全ページ・SEO設定・記事を追加できる仕組み)は完成
• GitHubでのコード管理、Cloudflare Pagesでの自動公開が動いている状態
• 独自ドメインは未取得(今後の記事で扱う予定)

次回からは、いよいよ収益化に向けた具体的な取り組みについて書いていきます。