- 投稿日：2026/04/27
👥 こんな方に読んでほしい
ペライチなどのHP作成ツールの月額費用が気になっている方「Claude Codeって聞くけど、自分にもできる？」と迷っている方プログラミング知識ゼロでもHPが作れるか知りたい方AIを副業・サイト運営に活かしたい方
【この記事でわかること】
コーディング知識ゼロでもHPが作れる具体的な流れ実際にかかったコストと節約額のリアルな数字試行錯誤した失敗談とその解決方法
🎉 はじめに｜結論から言います
Claude Codeで自分のHPを作り直したら、月4,378円だったHP維持費が実質0円になりました✨
具体的な数字はこちらです👇
💰 節約額、2通りの見方があります
① 「ペライチをやめた」という視点 → 4,378円がそのまま浮くので、年間約52,500円の節約
② 「Claude Code代もHP費用として差し引く」という厳しめの見方
→ 4,378円 − 約3,000円 = 月1,378円、年間16,536円の節約
どちらで計算しても、最低でも年間16,000円以上は確実に浮いたことになります😊
しかもClaudeは今、HP以外の作業にも活用し続けているので、月3,000円の元は十分取れています✨
※Claude Codeの月額は為替レートで変動します。
コーディング経験ゼロ。プログラミングスキルなし。
やったことは、日本語で指示を出しただけ。
それでも約1週間でHP公開まで完走できました🎀
🙋 自己紹介
N-noir🎀（エヌノワール）というAI双子アイドルプロジェクトを運営しているしょーやんです😊
本業はコールセンターのスーパーバイザー。プログラミングは完全に素人ですが、AIを活用することで「自分には無理」と思っていた領域にどんどん踏み込めるようになりました。
今回はその実例として、HP自作の体験談をシェアします！
😭 なぜペライチを卒業することになったのか
N-noirのHPはもともとペライチで作っていました。
ノーコードでサクッと作れるサービスです。
最初は「これで十分！」と思っていたのですが、ある落とし穴にハマりました💦
🎀 N-noirの世界観に合うテーマが「ビジネスプラン限定」だった
キャラクターブランドの繊細な雰囲気を出すため可愛いテーマを選んだところ、これがビジネスプランでないと維持できない仕様だったんです。
テーマを外すとブランドの雰囲気が崩れる。かといって、毎月4,378円は地味に痛い。
SNSが主流な今、HPがどこまで効果出るかは正直未知数。年間プランの方がお得だったけど、「もし合わなかったらすぐ辞めたい」という慎重な気持ちで、あえて月額プランを選んでいました😅
🔥 きっかけは「学長ライブ」の一言
学長ライブで「HPも一瞬で作ってくれるで！」という話を聞いて、「なら、ペライチいらんやん！」と思いながらClaude Codeに加入してみました。
まずチャット機能で「HPって作れるの？」と相談してみたところ、返答と同時にもうHPの叩き台を作り始めていたという😂
「あ、これいけるかも」
そう感じた瞬間に「Claude Codeタブで本格的に作るにはどうすればいいか」を質問して、そこからトントン拍子に進んでいきました🔥
💻 実際の作業。私がやったのは「ラリー」だけ
正直に言いますね。
私、コードを1行も書いていません。
やったのはこれだけ👇
① Claudeチャット（右タブ）でプロンプトを相談
「どんな指示を出せばいいか」をClaudeに相談。するとClaudeが指示文（プロンプト）を作ってくれます。
② Claude Code（左タブ）にそのプロンプトを貼り付ける
作ってもらったプロンプトをコピー＆ペーストするだけ。
③ 出来上がったコードを確認
④ ①に戻る
この繰り返し。右タブと左タブを行き来して、文章を貼り付けるだけです。プログラミング的な判断は一切していません。
HP完成後の「インターネット上への公開作業」も同じ流れ。「次は何をすればいい？」とClaudeに聞きながら、スクリーンショットを撮って状況を伝え、言われた通りの操作をする。それだけでした😊
💦 うまくいかなかったこと｜リアルな試行錯誤
「AIに頼めば一発完成」という幻想は、途中で崩れました💦
😅 失敗例①：TOPページのハート演出
最初はハート付きリボンのアニメーションを実装したかったんです。
画像を何度も差し替えて試したのですが、どうしてもN-noirの世界観と合わない……。
何度もやり取りを重ねた末、**「ハートだけのパーティクルアニメーション」**に絞ることにしました。これが今の完成形です✨
😱 失敗例②：セキュリティの問題
HP公開後、念のためClaudeに「セキュリティ上の問題はある？」と聞いてみました。するとまさかの2点の問題が発覚😱
XSS脆弱性（High）：悪意のある第三者からの不正なコードが実行される可能性がある状態
プロトコル相対URL（Medium）：通信の安全性が不十分な接続経路が残っていた状態
……正直、何のことかさっぱり分かりません😂
でも、Claudeが「これは直しておいた方がいい」と教えてくれているので、**「じゃあ修正お願い！」**と伝えるだけ。それで全部キレイに直してもらえました✨
自分では絶対に気づけなかった問題を、意味が分からないまま潰せた。これは本当に大きかったです🙏
セキュリティチェックも含めて、制作期間は約1週間でした。
🛠️ 最終的な構成と費用
💡 ちなみに：Vercelの無料プランは個人利用向けです。副業・商用目的で使う場合はCloudflare PagesかVercel Proを選びましょう！
月にかかるHP関連の純粋な追加コストはClaude Codeの約3,000円のみ。ペライチの4,378円と比べると、月1,378円・年間16,536円の節約になりました🎉
さらに言えば、Claude Codeはホームページ以外の作業にも毎日フル活用しています。それらをまとめると、ペライチをやめた年間52,500円分の価値は十分に回収できていると感じています😊
✅ まとめ｜ノーコードの次の時代が来ている
✅ Claude Codeなら、プログラミング知識ゼロでもHPが作れる
✅ HPをインターネットに公開・維持するサービスは無料で使える
✅ ペライチより月約1,400円・年間16,000円超の節約になった
✅ セキュリティチェックもClaudeに「聞くだけ」でOK
✅ 試行錯誤はあるけれど、ゴールまで伴走してくれる
「コーディングができないからノーコードツール」という前提は、もう古いのかもしれません。
Claude Codeに日本語で話しかけるだけなら、感覚としてはノーコードと変わらないんです😌
HP維持費が気になっている方、一度試してみる価値は絶対にあります🔥
N-noir公式サイト：https://n-noir.com
（トップページのハート演出、ぜひ見てみてください🎀）
この記事が参考になったら、いいね・ブックマークしていただけると嬉しいです🙏✨
