「ホームページを作りたいけど、制作会社に頼むと30万円って言われた……」

個人事業主や小さなお店を経営している方なら、一度はこの壁にぶつかったことがあると思います。名刺代わりのホームページが欲しいだけなのに、見積もりを見て諦めた経験はありませんか。

結論から言います。ホームページの制作費は0円にできます。必要なのはサーバー代（月1,000円）とAIの利用料（月3,000円程度）だけです。

この記事では、僕が実際にAIだけでカフェのホームページを5分で作ったプロセスを、操作画面のスクリーンショット付きで紹介します。読み終わったら、そのまま真似できるはずです。

目次 [ close ]
  1. まず、制作会社とノーコードツールの相場を知っておく
  2. 実際にAIで作ったカフェのホームページがこれです
  3. 【手順①】エックスサーバーを契約してWordPressを入れる（10分）
  4. 【手順②】Claude Codeをセットアップする（5分）
  5. 【手順③】AIに「ホームページを作って」と頼む（5分）
  6. 普通のChatGPTじゃダメな理由
  7. ノーコードツールと何が違う？
  8. なぜエックスサーバーなのか
    1. WordPressが10分で立ち上がる
    2. 国内シェアNo.1で情報が豊富
    3. 年契約でドメイン永久無料
  9. 制作会社に頼んだ方がいいケース
  10. まとめ：月4,000円でプロレベルのホームページが持てる
    1. おすすめ記事

まず、制作会社とノーコードツールの相場を知っておく

「自分でやる」選択肢の前に、他の方法のコストを整理しておきます。

方法 初期費用 月額 特徴
制作会社 30〜100万円 5,000〜30,000円 プロ品質。ただし更新の度に追加費用
Wix 0円 900〜2,600円 テンプレート豊富。無料だと広告表示
ペライチ 0円 1,465〜3,940円 簡単だが1ページ特化。複数ページは高い
STUDIO 0円 980〜4,980円 デザイン性高いが操作に慣れが必要
サーバー＋AI（本記事の方法） 0円 約4,000円 自由度最高。SEO最強。データも自分のもの

ノーコードツールは手軽ですが、テンプレートの中でしか作れない、SEOが弱い、サービスが終了したらサイトごと消える、という問題があります。

「長く使うちゃんとしたホームページ」が欲しいなら、WordPress＋AIの方がいいです。そしてWordPressは、AIがあれば誰でも作れる時代になりました。

実際にAIで作ったカフェのホームページがこれです

先に完成物を見てください。架空のカフェ「Café Komorebi」のホームページです。

→ AIで作ったカフェのデモサイトを見る

AIとWordPressで作ったCafé Komorebiデモサイトのファーストビュー
実際にAIと一緒に作ったCafé Komorebiのデモサイト。/cafe-demo/ で公開中。
AIで作成したカフェのデモサイト
AIだけで作ったカフェのホームページ。ナビ・ヒーロー画像・コンセプト・メニュー・店内写真・アクセス情報が全部入っている

ナビゲーション、ヒーロー画像、コンセプト、メニュー表、店内写真、アクセス情報、フッター。企業のホームページに必要な要素が全部入っています。

制作時間は5分。コードは1行も書いていません。

正直、自分でも驚きました。「こんなすぐに、こんな高いレベルのものができるの？」と。

ここから、この結果に至るまでの全手順を公開します。

【手順①】エックスサーバーを契約してWordPressを入れる（10分）

まずはホームページの「置き場所」を用意します。ここではエックスサーバーを使います。

エックスサーバー公式サイト
エックスサーバー公式サイト。「お申し込み」から始める
STEP 1-1

エックスサーバーの公式サイトにアクセス

右上の「お申し込み」ボタンをクリック。「10日間無料お試し 新規お申込み」を選択します。

エックスサーバーのプラン選択画面
プランは「スタンダード」で十分。月額693円〜
STEP 1-2

プラン選択と契約

プランは一番安い「スタンダード」でOK。おすすめは年契約です。月額が安くなるのに加えて、独自ドメインが永久無料でついてきます。

STEP 1-3

WordPressクイックスタートを利用する

申し込みフォームの中に「WordPressクイックスタート」のチェックがあります。これをONにするだけで、サーバー契約と同時にWordPress本体のインストール、独自ドメインの取得、SSL（https）の設定まで全部自動で終わります。

WordPressダッシュボード
契約完了後、WordPressの管理画面にログインできる状態になる
STEP 1-4

WordPressの管理画面にログイン

申し込み完了から数分〜十数分で、WordPressの管理画面（ダッシュボード）にアクセスできるようになります。URLは「https://あなたのドメイン/wp-admin/」です。ここまでで約10分。

【手順②】Claude Codeをセットアップする（5分）

ここが今回の肝です。Claude CodeというAIツールを使います。

Claude Codeは、Anthropic（Claudeの開発元）が提供しているAIコーディングツールです。普通のChatGPTやClaudeとの決定的な違いは、AIがあなたのPC上で直接ファイルを作成・編集できること。「ホームページを作って」と頼むと、AIがHTML・CSS・画像を生成して、実際にファイルとして出力してくれます。

Claude Codeの起動画面
Claude Codeの画面。ここに日本語で指示を入力するだけ
STEP 2-1

Claudeに課金する

まず最初に、Claude公式サイトでアカウントを作成し、Proプラン（月額約3,000円）に課金します。Claude Codeを使うにはこの課金が必須です。

STEP 2-2

VS Codeをダウンロード

次に、Microsoft製の無料エディタ「VS Code（Visual Studio Code）」をダウンロードしてインストールします。

→ VS Code 公式ダウンロードページ

Mac・Windows両対応。自分でコードを書く必要はありませんが、Claude Codeを動かすための土台として必要です。

STEP 2-3

ターミナルでClaude Codeをインストール

VS Codeを開いたら、上部メニューの「ターミナル」→「新しいターミナル」をクリック。画面下部にターミナル（黒い画面）が出てきます。そこに以下のコマンドをコピペして、Enterキーを押してください。

npm install -g @anthropic-ai/claude-code

インストールが完了したら、同じターミナルに claude と打ってEnter。Claude Codeが起動します。初回はClaudeアカウントへのログインを求められるので、画面の指示に従ってください。

→ Claude Code 公式ドキュメント

STEP 2-4

画像生成AIを繋ぐ（任意だけどおすすめ）

僕はClaude CodeにGemini（Googleの画像生成AI）を繋いでいます。これにより、カフェの外観・店内・料理の写真もAIが自動生成してくれました。

設定方法は簡単です。Claude Codeに以下のように入力するだけ。

MCP経由でClaude Codeから直接Gemini画像生成したい

これだけで、Claude Codeが自動的にMCP（AIと外部ツールを繋ぐ仕組み）を経由してGeminiの画像生成APIを接続してくれます。あとは「カフェの外観を生成して」と言うだけで画像が出てきます。

⚠ 注意：画像生成にはGemini APIの使用料がかかります（1回あたり数円程度）。事前にGoogle AI StudioでAPIキーを取得し、クレジットを確認しておきましょう。

※画像生成AIを繋がなくても、自分で撮った写真やフリー素材を使えばホームページは作れます。

Claude Codeに『MCP経由でClaude Codeから直接Gemini画像生成したい』と入力している画面
Claude Codeにこう入力するだけで、画像生成AIとの連携が完了する

【手順③】AIに「ホームページを作って」と頼む（5分）

準備ができたら、あとはClaude Codeに指示を出すだけです。

僕が実際に入力した指示がこれです。

架空のカフェ「Café Komorebi」のホームページを作って。

・ナビゲーション（Concept / Menu / Space / Access）
・ヒーロー画像（カフェの外観写真を生成して）
・コンセプトセクション（ラテアートの丸い画像＋説明文）
・メニュー表（ドリンクとフード、価格付き）
・店内写真セクション
・アクセス情報（住所・営業時間・電話番号）
・フッター

デザインは企業のホームページっぽく、おしゃれな感じで。

これを入力して送信。あとはAIが勝手に動きます。

AIがやってくれたこと
  1. カフェの外観・内装・料理・ラテアートの画像を4枚生成
  2. ヒーロー画像付きのフルスクリーンレイアウトを設計
  3. メニュー表（ドリンク6品＋フード6品）をテーブル形式で作成
  4. コンセプト文、店舗情報のテキストを生成
  5. HTML/CSSのコードを書いてWordPressに投稿

所要時間、約5分。出来上がったのがさっきのカフェサイトです。

→ 完成したカフェのデモサイトをもう一度見る

制作会社に30万円払って作ってもらうものと比べても、正直遜色ないレベルだと思います。これが制作費0円、所要時間5分。

普通のChatGPTじゃダメな理由

ここは正直にお伝えしておきます。

普通のChatGPTやClaudeのチャット画面に「ホームページを作って」と頼んでも、コードのテキストが出てくるだけです。それを自分でファイルに保存して、FTPでアップロードして、WordPressに設定して……という作業が発生します。初心者には正直きつい。

今回のように「AIに頼んだら5分で完成」を実現するには、Claude Codeが必須です。Claude Codeなら、AIがファイル作成からWordPressへの投稿まで全部やってくれます。あなたがやるのは日本語で指示を出すことだけです。

Claude Codeの月額は約3,000円。制作会社に30万円払うことを考えたら、投資対効果は比較にならないレベルです。

ノーコードツールと何が違う？

「WixやSTUDIOでいいんじゃないの？」という疑問に答えます。

比較項目 ノーコードツール サーバー＋AI
デザインの自由度 △ テンプレート内 ◎ 完全自由
SEO（検索からの集客） △ 制限あり ◎ WordPress最強
データの所有権 × サービス依存 ◎ 完全に自分のもの
サービス終了リスク × サイトごと消える ◎ サーバー移行可能
制作の手軽さ ◎ ドラッグ&ドロップ ○ AIに指示を出す

ノーコードツールの唯一の優位点は「ドラッグ&ドロップの手軽さ」です。ただ、AIに「こういうサイトを作って」と日本語で伝えるのとどっちが楽かは、正直いい勝負です。

一方、デザインの自由度・SEO・データの所有権では、WordPress＋AIが圧倒的に上。特にサービス終了リスクは無視できません。ノーコードツールが終了したらサイトがまるごと消えます。WordPressなら、サーバーを変えてもデータをそのまま移行できます。

なぜエックスサーバーなのか

WordPressが10分で立ち上がる

クイックスタートで契約と同時にWordPressが即使える状態になります。昔のような面倒な設定は一切ありません。

国内シェアNo.1で情報が豊富

250万サイト以上が稼働中。困ったことがあっても検索すれば解決策がすぐ見つかります。初心者ほど、利用者が多いサービスを選ぶべきです。

年契約でドメイン永久無料

年契約にすると独自ドメイン（.comや.net）が永久無料。通常は年1,000〜3,000円かかるので、長く使うほどお得です。僕もこの特典で jirotana.blog のドメインを無料で取得しました。

制作会社に頼んだ方がいいケース

公平を期すために書いておくと、こういう場合は制作会社に頼んだ方がいいです。

  • ECサイト（ネットショップ）で決済機能が必要
  • 予約システムや会員機能など複雑な機能が必要
  • 大企業のコーポレートサイトでブランディングに予算をかけられる
  • そもそもPCを触る時間がない

逆に、「お店の情報を載せたい」「名刺代わりのサイトが欲しい」「ポートフォリオを公開したい」なら、AIとサーバーだけで十分です。

まとめ：月4,000円でプロレベルのホームページが持てる

  • 制作会社に頼むと30万円〜。ノーコードツールでも月1,000〜5,000円
  • エックスサーバー（月1,000円）＋ Claude Code（月3,000円）＝ 月4,000円で制作費0円
  • エックスサーバーのクイックスタートでWordPressは10分で立ち上がる
  • Claude Codeに「ホームページを作って」と頼むだけで5分で完成
  • 画像もAIが生成。写真がなくてもプロレベルのサイトが作れる
  • 実際に作ったカフェのデモサイト → こちら

ホームページに何十万円もかける時代は終わりました。まずはサーバーを契約して、AIに「作って」と言ってみてください。

おすすめ記事

AIの課金先で迷っている方はこちら
→ 【2026年版】AI課金するならどれ？”そのAIにしかできないこと”で選ぶのが正解だった

AIと外部ツールを繋ぐ「MCP」について知りたい方はこちら
→ MCP（Model Context Protocol）って何？｜AIと外部ツールを繋ぐ仕組みをわかりやすく解説