【約58,000字】AIでホームページを0から作る完全ロードマップ。Claude CodeとWordPressで、問い合わせが届くまで

小さな事業のホームページを制作会社に頼むと、見積りはたいてい数十万円から始まります。かといって自分で作ろうとすると、今度はHTMLの入門書の最初のほうで手が止まってしまいます。タグの意味は分かったけれど、自分のサイトになる気配がまったくない、という状態です。同じところで一度あきらめた、という話はよく聞きます。

AIがコードを書けるようになって、必要な知識のハードルはかなり下がりました。ただ、初心者がつまずく場所がなくなったわけではなく、つまずく中身のほうが変わったのだと思っています。いま手が止まる原因は、コードの書き方そのものよりも、AIへの頼み方と、壊れたときの戻し方の2つにあります。

私自身、この方法で自分の事業のサイトを作って公開しています。途中で何度も壊しましたし、AIに「できました」と言われて開いたら画面が真っ白だった、ということも普通にありました。ただ、詰まる場所はだいたい決まっているので、ひとつずつ確認しながら進めれば、初めてでも公開までたどり着けると思います。

この記事の道のり

• 第0章　必要なものと費用をそろえて、CursorでClaude Codeを動かす
• 第1章　AIに毎回読ませる前提書を作り、戻せる備えを用意する
• 第2章　トップページを1枚だけ作る
• 第3章　サーバーとドメインを用意し、WordPressを入れてから、その1枚を公開する
• 第4章　残り2ページを足して、3ページを行き来できるようにする
• 第5章　スマートフォンで崩れないように整えて、仕上げる
• 第6章　壊さずに直し続けるための手順を身につける
• 第7章　作った見た目を、そのままWordPressのテーマに移す
• 第8章　Contact Form 7 で、問い合わせが自分に届く形にする
• 第9章　公開したあとの回し方を決める

今回、一緒に作るもの

題材は「とじしろ舎」という架空の工房にします。1950年創業、本の修理と論文の製本、オーダー製本を一冊から受けている小さな事業、という設定です。実在の会社ではないので、そのまま真似しても誰にも迷惑がかかりません。読みながら、自分の事業や活動に読み替えてください。

作るのは3ページです。トップページ（index.html）、工房について（about.html）、お問い合わせ（contact.html）。前半で使うのはHTMLとCSSとJavaScriptだけで、流行りのフレームワークは一切使いません。初心者が自分で直せる状態を保つには、部品が少ないほうが有利だからです。後半では、その見た目をそのまま持ったままWordPressに移すので、ゼロから作り直す必要はありません。

作り終わったら、レンタルサーバーに上げて、独自ドメインで誰でも見られる状態にします。さらに、問い合わせフォームの作り方と設定までお伝えするので、見た人が送った内容が自分のメールに届くようになります。サイトを公開するところと、問い合わせを受け取れるようにするところまでを、この1本にまとめてあります。

今回は扱わないこと

先に、今回扱わない範囲をお伝えしておきます。まず、デザインの良し悪しについては論じません。配色やフォントの決め方、ブランドの世界観をどう作るかは、別の回で詳しく扱います。何ページ必要で、どういう順番で並べるかというページ構成の決め方も、別の回にまわします。検索から人に見つけてもらうための工夫も、今回は触れません。

理由は単純で、全部入れると1本では終わらないからです。まず形にして公開してしまい、整えるのは自分のURLを持ってからでも間に合います。逆の順番にすると、整えている途中で手が止まって、公開まで届かないことが多いです。

読み終わったときの状態

ゴールは3つあります。自分のURLがあること、サイトを自分で直せること、そして見た人からの連絡が自分のメールに届くことです。文章を1行変えたい、写真を差し替えたいと思ったときに、誰かに連絡してお金を払って一週間待つ、という状態から抜けられます。個人的には、2つ目の価値がいちばん大きいと感じています。

かかる時間は、あえて書いていません。パソコンの慣れ具合で本当に差が出るからです。ただ、腰を据えて一日向き合えば公開まで届く、くらいの分量にはなっています。途中で止まっても、章ごとに区切ってあるので翌日から再開できます。

第0章　準備（道具・費用・Claude Code）

作り始めてから「サーバーの契約がまだだった」と気づくと、面倒になってストップしてしまう恐れがあります。契約や支払いを挟むと、その日のうちに作業へ戻れないこともあるでしょう。したがって、先に必要なものと、かかるお金を、最初に全部出しておきます。

用意するもの

• パソコン：MacでもWindowsでも進められます。操作の呼び名が違うところは、その都度添えます。スマホやタブレットだけでは難しいので、パソコンを用意してください
• Cursor：ファイルと文章を扱うためのアプリです。今回はこのアプリの中でClaude Codeを動かします。無料のまま最後まで使えるので、お金はかかりません
• Claudeの有料プラン：この記事の主役であるClaude Codeを使うために契約します。無料で使える範囲では、この記事の作業を最後まで進めるのは難しいと考えてください。プランの区分や使える量、そもそも無料で使えるかどうかは変わるので、契約前に公式サイトで最新を確認してください
• レンタルサーバーと独自ドメイン：作ったサイトを置く場所と、住所にあたる名前です。Xserverなど、国内の大手であればどこでも構いません。ドメインもサーバー会社でまとめて取れます
• FTPの接続情報：FTPとは、作ったファイルを自分のパソコンからサーバーに送る手段のことです。今回は専用のソフトを入れずに、サーバー会社の管理画面で作った接続情報をもとに、Claude Codeに送るためのコマンドを作ってもらいます。パスワードだけは、AIに渡さずに自分で打ち込みます。用意するのは第3章なので、いまは名前だけ覚えておいてください
• ブラウザ：作ったページを確認するために使います。ふだん使っているもので大丈夫です
• もう1つのAI（任意）：第5章と第6章で、Claudeが作ったものを別のAIに見てもらう場面があります。本文ではCodexを使いますが、ブラウザで使える別のAIでも代用できます。無くても最後まで進められるので、いま用意しなくて構いません

制作にかかる費用

サーバーは月あたり千円前後、ドメインは年に千円台から数千円というのが、いまのところの相場感です。AIの有料プランは月20ドル前後から始まります。3つのうちでは一番大きく、年に直すと3万円台です。合わせると、年間で5万円前後を見ておくとよいでしょう。

ただし、金額は本当によく変わります。キャンペーンで初年度だけ安いサーバー、更新のときに値段が上がるドメイン、といった仕組みもよくあります。契約する前に、必ず公式サイトで最新の料金を確認してください。私がここに書いた数字をそのまま根拠にしないでください、というのが本音です。

それでも、制作会社に頼んだときの数十万円と比べると、何分の一かの金額に収まります。更新のたびに費用が発生しないことも含めて、金額の差はかなり大きいと思います。

Cursorを入れる

Claude Codeは、Cursorというアプリの中で動かします。まずはCursorのほうを先に入れます。ダウンロードは公式サイト（cursor.com）からで、MacとWindowsのどちらにも用意されています。有料プランもありますが、契約が要るのはCursor自身のAI機能を使いたいときで、今回はClaudeのほうを使うので無料のままで足ります。

Cursorは「エディタ」と呼ばれる種類のアプリです。名前だけ聞くと構えてしまうかもしれませんが、文章を書いて保存するという点ではメモ帳やWordの仲間で、怖いところはありません。違いは、フォルダの中のファイルを一覧で見られることと、書き換わった箇所に色が付いて分かることくらいです。プログラミング専用の特別な道具、と身構えなくて大丈夫です。

インストールが終わったら、一度起動するところまでやっておいてください。初回は見た目のテーマや設定を聞かれることがありますが、あとから変えられるので、迷ったら既定のまま進めて構いません。

Claude Codeの拡張機能を入れる

Cursorには、あとから機能を足せる「拡張機能」という仕組みがあります。スマートフォンにアプリを追加するのと似ていて、必要なものだけを選んで入れられます。Claude Codeも拡張機能として配られているので、Cursorの拡張機能の一覧から探して追加します。

探すときの言葉は「Claude Code」です。名前の似たものが並ぶことがあるので、Anthropic（Claudeを作っている会社）が提供元になっているかを一度確かめてから入れてください。

追加できたら、Claudeのアカウントでサインインします。案内に沿って進めるとブラウザが開いて、許可を確認する画面になります。許可するとCursorの側に戻って、使える状態になります。サインインに使うのは、有料プランを契約したアカウントです。別のアカウントで入ると、使える量が足りずに途中で止まってしまいます。

押す場所や画面の呼び名は、あえて書きません。バージョンが上がるたびに変わるからです。拡張機能を探して入れる、Claudeのアカウントでサインインする、という2つができていれば形は問いません。手順を確かめたいときは「Claude Code Cursor」で検索して、Anthropicの公式ドキュメントに出てくるページを見るのが確実です。個人のブログに書かれた手順は古くなっていることがあるので、後回しにしてください。

なお、Cursorの中にはコマンドを打つ場所（ターミナルと呼ばれる黒い画面です）もありますが、コマンドを自分で覚えて打ち込む場面はありません。ふだんは日本語で頼んで、出てきた確認に答えるだけで進みます。ターミナルを使うのはファイルをサーバーへ送るときだけで、AIが作ったコマンドを貼り付けて、パスワードを自分で打ち込みます。最初に出てくるのは第3章で、そのあと第4章・第7章・第8章でも同じやり方を繰り返しますが、覚えることは無いので、そのときに読めば大丈夫です。

作業フォルダを1つ作って、Cursorで開く

次に、サイトのファイルを全部入れておくフォルダを作ります。名前は my-site にしてください。置き場所はデスクトップで構いません。以降の作業は、すべてこのフォルダの中で完結します。

フォルダ名に日本語やスペースを使わないでください。「私のサイト」「my site」のような名前にすると、あとでサーバーに上げるときや、ファイルの場所を指定するときに面倒が増えます。半角の英数字とハイフンだけにしておくと、後がずっと楽です。

最終的には、こういう中身になります。

my-site/
├── index.html      … トップページ
├── about.html      … 工房について
├── contact.html    … お問い合わせ
├── css/
│   └── style.css   … 見た目をまとめて書くファイル
├── js/             … 動きをつけるファイルの置き場
├── images/         … 写真やロゴを入れる場所
└── CLAUDE.md       … AIに毎回読ませる前提書（第1章で作ります）

いま作るのは、いちばん外側の my-site フォルダだけで十分です。中のファイルは、これから一緒に作っていきます。空の css や images をわざわざ手で作る必要もありません。AIに頼めば必要なときに作ってくれます。

フォルダを作ったら、Cursorで開きます。ファイルを1つずつ開くのではなく、フォルダごと開くのが大事なところです。Cursorのメニューから「フォルダを開く」を選んで my-site を指定するか、フォルダのアイコンをCursorのウィンドウにドラッグ&ドロップしても開きます。

開くと、画面の左側にフォルダの中身が一覧で並びます。いまは空なので何も出ませんが、作ったファイルがこれから1つずつ増えていきます。何がどこにできたのかが目で見えるので、進んでいる実感を持ちやすいです。

Cursorでフォルダを開くと、その中で作業する状態になります。Claude Codeも、開いているフォルダのファイルを読み書きします。したがって、作業を始める前に確かめることは1つだけです。いまCursorで開いているフォルダが my-site になっているかどうかです。別のフォルダを開いたまま頼むと、ファイルが思っていない場所に作られて、この先ずっと噛み合わなくなります。

翌日に作業を再開するときも同じ流れです。Cursorを開いて、my-site を開いて、Claude Codeに話しかけます。最近開いたフォルダは履歴から選べるので、2回目からは数秒で戻れます。

最初の動作確認

必要なものはひととおりそろったので、一度話しかけて動くことを確かめます。Claude Codeの入力欄に、日本語でそのまま書いて送るだけです。

【1】Cursor で my-site フォルダを開いておく

【2】Claude Code を開いて、下の文章をそのまま貼って送る

    こんにちは。動作確認です。
    いまどのフォルダで作業していますか。
    中にあるファイルも教えてください。

【3】my-site という名前が返ってくれば、準備は終わりです

フォルダの名前が my-site と返ってくれば大丈夫です。まだファイルを1つも作っていないので、中身は空だと言われます。空でも失敗ではありません。まったく違うフォルダの名前が出てきたときは、開いているフォルダが違っているので、my-site を開き直してから、もう一度同じことを聞いてください。

返事の書き方も、あわせて見ておいてください。日本語で話しかければ日本語で返ってきます。専門用語が多くて読みにくいと感じたら、「専門用語を使わずに説明してください」と足せば言い換えてくれます。以降の章でも、詰まったときは同じように頼めます。

エラー文は読まずに、そのまま貼る

インストールや拡張機能の追加でつまずいて、赤い英語の文字がずらっと出ることがあります。よくあることなので、心配は要りません。

やることは1つです。エラー文をまるごとコピーして、AIにそのまま貼ります。読もうとしなくていいですし、意味が分からなくても構いません。ただし、長いからといって途中を省略しないでください。全部貼るほうが、返ってくる答えの精度が上がります。

貼り先は、進み具合で決めてください。Claude Codeがまだ動いていない段階なら、ブラウザで開くClaude（claude.ai）に貼ります。拡張機能が入って返事が返ってくる状態になっているなら、Cursorの中のClaude Codeにそのまま貼って構いません。聞き方の型を置いておきます。

コピペ用：入れるところで詰まったときの聞き方

Cursor に Claude Code の拡張機能を入れようとして、下のエラーが出ました。

〔ここにエラー文をそのまま貼る〕

・私のパソコンは 〔Mac / Windows〕 です
・プログラミングは初めてで、Cursor を使うのも今回が初めてです

次にやることを、押す場所も含めて、順番に書いてください。
専門用語には短い言い換えを添えてください。
一度に全部ではなく、まず1つ目だけ教えてください。

最後の「まず1つ目だけ」も、意外と大切です。初心者向けと言いながら10個の手順を一気に返してくるAIは多く、途中で何をやっているか分からなくなります。1つずつ進めて、結果を報告して、次を聞きます。同じ往復を、この先ずっと繰り返すことになります。

AIに助けてもらう、という感覚そのものが初めての方は、AIで業務効率化を個人から始める手順を先に眺めておくと、この先の往復が楽になると思います。