Claude Codeを使えば、プログラミング未経験の方でも、日本語で指示を出すだけでホームページを形にできます。必要なのは「サーバー（公開場所）」「ドメイン（住所）」「サイトのデータ」の3つだけ。この記事では、サーバーの選び方からClaude Codeの操作、伝わる指示の出し方、公開までを一本道で解説します。
皆さんこんにちは！事業構想×生成AI活用アドバイザー（中小企業診断士）の津田です。
実は、いまあなたが読んでいるこのSperanza PartnerのウェブサイトそのものをClaude Codeで作り直しました。「AIにホームページを作らせる」と聞くと難しそうに感じるかもしれませんが、順番さえわかれば想像よりずっとシンプルです。今回は、初めての方がつまずきやすいポイントを先回りしながら、ゼロから公開までの流れを丁寧にお伝えします。
この記事でわかること：ホームページに必要なものは何か／初心者に向いたサーバーの選び方／Claude Codeのインストールと操作／AIに伝わる指示の出し方／公開までの手順
Claude Codeでホームページは本当に作れるのか
結論から言うと、作れます。Claude Codeは、Anthropicが提供する「AIが直接コードを書いてくれる開発支援ツール」です。チャット型のAIのように「コードを教えてもらって自分で貼り付ける」のではなく、AIがあなたのパソコンのフォルダを直接見て、HTMLファイルを作り、文章やデザインを書き込んでくれます。
つまり、あなたがやることは「どんなホームページにしたいか」を言葉で伝えることだけ。たとえば「税理士事務所のトップページを作って。落ち着いた紺色を基調に、サービス紹介・料金・問い合わせの3つのセクションを入れてください」と伝えれば、Claude Codeがその通りにファイルを組み立ててくれます。
一言で言うと：Claude Codeは「言葉で伝えると、AIがホームページのファイルを作って書き換えてくれるツール」です。あなたは社長、Claude Codeは制作スタッフ——そんなイメージが近いです。
ただし、万能ではありません。出てきたものが意図通りか、文章に誤りがないかを確認するのは人間の役目です。「丸投げして完成」ではなく「対話しながら一緒に作る」道具だと考えると、うまく付き合えます。
作り始める前に——ホームページに必要な3つのもの
道具の話に入る前に、そもそもホームページを公開するには何が要るのかを整理しておきましょう。難しく見えて、必要なのは次の3つだけです。
| 必要なもの | 役割 | たとえると |
|---|---|---|
| サイトのデータ | HTMLや画像など、ページの中身そのもの | お店の「商品・内装」 |
| サーバー（ホスティング） | データを置いて24時間公開する場所 | お店を構える「土地・建物」 |
| ドメイン | 「example.com」のような住所 | お店の「住所・看板」 |
このうち「サイトのデータ」を作る作業を担当してくれるのがClaude Codeです。残りの「サーバー」と「ドメイン」は、サービスを契約して用意します。まずはサーバー選びから見ていきましょう。
初心者向けサーバー（ホスティング）の選び方
サーバー選びは初心者が最初に迷うところです。ポイントは、「どんな仕組みのサイトを作るか」で選ぶサービスが変わることを知っておくことです。Claude Codeで作るサイトは、大きく2つのタイプに分かれます。
タイプ別：あなたに向いているのはどちら？
| サイトの種類 | 向いているホスティング | こんな人に |
|---|---|---|
| 静的サイト（HTMLで作る軽いサイト） | Netlify／Cloudflare Pages／Vercel／GitHub Pages | 会社案内・お店の紹介・ポートフォリオなど。表示が速く、無料から始められる |
| 動的サイト（WordPressなど） | エックスサーバー／ConoHa WING／ロリポップ／さくらのレンタルサーバー | 自分で記事を頻繁に更新したい、管理画面から運用したい人 |
Claude Codeと特に相性がよいのは「静的サイト」です。HTMLファイルをそのまま置くだけで公開でき、表示も速く、NetlifyやCloudflare Pagesなら無料枠でスタートできます。最初の一歩としては、この組み合わせを強くおすすめします。
選ぶときに見るべき5つのポイント
- 料金：静的サイトのホスティングは無料枠で十分始められます。レンタルサーバーは月数百円〜1,000円程度が目安です。
- 独自ドメイン対応：「example.com」のような独自の住所が使えるか。信頼感に直結するので必ず確認します。
- 無料SSL（https化）：今や必須。ほとんどのサービスが無料で対応していますが、念のためチェックを。
- 管理画面のわかりやすさ：初心者ほど「画面の親切さ」が効いてきます。日本語サポートの手厚い国内サービスは安心材料です。
- 表示速度とサポート：来訪者の離脱を防ぐ表示速度、困ったときに頼れるサポート体制も比較しましょう。
支援の現場で感じること：創業まもない方ほど「まず立派なサーバーを契約しなければ」と気負いがちです。でも実際は、最初は無料のホスティングで小さく公開し、アクセスや更新頻度が増えてから乗り換えても全く遅くありません。完璧な構成を最初から目指すより、「公開して動かしてみる」ほうが学びが何倍も早いと感じています。
Claude Codeを使う準備（デスクトップアプリで始める）
サーバーの方向性が決まったら、いよいよClaude Codeの準備です。以前はターミナルでのインストール作業が必要でしたが、いまはClaudeのデスクトップアプリを使えば、難しいコマンド操作なしで始められます。パソコンの操作が苦手な方は、まずこちらの方法がおすすめです。
準備の4ステップ
- ステップ1：デスクトップアプリをダウンロード — claude.ai/download から、Mac／Windows用のClaudeデスクトップアプリをダウンロードしてインストールします。
- ステップ2：サインインする — アプリを起動し、Claudeアカウントでサインインします。Claude Codeを使うには有料プラン（Pro／Max）が必要です。お持ちでない場合は案内に従ってアップグレードします。
- ステップ3：「Code」を開く — 画面上部の「Code」を選び、続けて「Local（このパソコンで作業）」を選びます。これでお使いのパソコン内のファイルを編集できる状態になります。
- ステップ4：作業フォルダを選ぶ — 「フォルダを選択」から、ホームページ用のフォルダを指定すれば準備完了です。あとは日本語で指示するだけで作業が始められます。
ターミナルもインストールコマンドも不要なので、パソコン操作に不安がある方でも安心です。（Windowsの場合のみ、別途「Git」というツールの導入が必要になることがあります。アプリが案内してくれるので、その指示に従えば大丈夫です。）
Claude Codeの基本操作——起動から確認まで
準備ができたら、ホームページ用のフォルダを1つ作り、それをデスクトップアプリの「Code」で開きます。あとは日本語で会話するだけです。
はじめの一歩：この順番でやってみる
- デスクトップなどに「mysite」といった名前の空フォルダを作る
- デスクトップアプリの「Code」で、作った「mysite」フォルダを選んで開く
- 「シンプルな会社紹介のトップページ（index.html）を作ってください」と日本語で指示する
- Claude Codeが
index.htmlを作成するので、そのファイルをブラウザで開いて表示を確認する - 気になる点を「見出しをもっと大きく」「色を緑系に」と伝えて直してもらう
ポイントは、変更のたびにブラウザで表示を確認することです。Claude Codeはファイルを書き換える前に「こう変更します」と提案し、あなたが承認してから実行します。意図しない変更が勝手に入る心配は少ないので、安心して試せます。
操作のコツ：最初に「このフォルダに何があるか説明して」と聞いてみてください。Claude Codeが全体像を把握してくれるので、その後の指示が驚くほどスムーズになります。迷ったら「次に何をすればいい？」と聞けば、進め方そのものを教えてくれます。
伝わる指示の出し方——5つのコツ
Claude Codeを使いこなせるかどうかは、ほぼ「指示の出し方」で決まります。これは人にお願いするときと同じで、伝え方が具体的なほど、欲しいものに近づきます。支援の現場でよくお伝えしている5つのコツを紹介します。
- ① 誰のための何かを伝える：「ホームページを作って」より「個人の整体院の集客用トップページを作って」。目的と相手が決まると、AIの判断がぶれません。
- ② 1回の指示は1つの作業に絞る：「全部作って」より「まずトップページの骨組みだけ作って」。小さく区切るほど、確認もやり直しも楽になります。
- ③ 具体例を添える：「おしゃれに」では伝わりません。「白背景・紺の見出し・余白広めで、参考にしたいのは◯◯のサイト」のように、イメージを言葉と例で示します。
- ④ 望む結果を先に言う：「スマホで見たときに文字が小さくならないようにして」のように、ゴールの状態を伝えると手戻りが減ります。
- ⑤ できた後に必ず確認・指摘する：「ここの文章を一文短く」「この画像の説明文（alt）を入れて」と、遠慮なく注文してOK。対話を重ねるほど精度が上がります。
よくあるつまずき：初心者の方は「うまく動かないのは自分のせいかも」と一度で諦めてしまいがちです。でもAIへの指示は、最初から完璧である必要はありません。「思っていたのと違う、ここをこう直して」と伝え直すこと自体が正しい使い方です。一発で当てるより、何度も言い直して近づける——その前提に立つと、ぐっと気が楽になります。
ホームページを公開するまでの流れ
サイトのデータができたら、いよいよ公開です。ここでは初心者に最もやさしい「静的サイト＋無料ホスティング」を例に、流れをざっくり示します。
- サイトのデータを完成させる — Claude Codeと対話しながら、トップページや各ページを仕上げます。
- ホスティングサービスに登録する — NetlifyやCloudflare Pagesなどでアカウントを作成します。
- データをアップロードする — 作ったフォルダをドラッグ＆ドロップするだけで公開できるサービスもあります。「公開のやり方を教えて」とClaude Codeに聞けば、手順を案内してくれます。
- 独自ドメインをつなぐ — お名前.comなどでドメインを取得し、ホスティング側で設定します。
- https化（SSL）を確認する — 多くのサービスは自動で対応してくれます。鍵マークが出ていればOKです。
公開後も「お問い合わせフォームを足したい」「ブログ機能を付けたい」といった要望が出てきます。そのたびにClaude Codeに相談すれば、少しずつ育てていけます。ホームページは作って終わりではなく、育てるもの。その伴走相手としてAIはとても頼りになります。
【参考テクニック】GitHubと連携して「更新を自動公開」する
慣れてきたら、ぜひ知っておいてほしいのがGitHub（ギットハブ）との連携です。GitHubはサイトのデータを保管・記録できる無料サービスで、ここを経由すると「直すたびにファイルを手動でアップロードし直す」手間がなくなります。
カギになるのがGitHub Actions（ギットハブ・アクションズ）という仕組みです。これは「ある操作をきっかけに、決めた作業を自動で実行してくれる」機能で、これを使うと更新内容をGitHubに送るだけで、サイトが自動的に公開され直す状態を作れます。
- GitHubにリポジトリ（保管場所）を作る — github.com で無料アカウントを作り、サイト用のリポジトリを1つ用意します。
- サイトのデータを送る（push） — 作ったフォルダの中身をリポジトリに送ります。「このフォルダをGitHubに上げる手順を教えて」とClaude Codeに頼めば、最初の設定から案内してくれます。
- 自動デプロイの設定を置く — リポジトリに「pushされたら公開先へ反映する」という指示書（ワークフローファイル）を1つ用意します。これもClaude Codeに「GitHub Actionsで自動デプロイする設定を作って」と頼めば作成してくれます。
- あとは更新するだけ — 以降は、Claude Codeで直した内容をGitHubに送れば、GitHub Actionsが自動でサイトに反映します。手動アップロードはもう不要です。
これは私自身が使っている方法です：このSperanza PartnerのサイトもGitHubで管理していて、mainに変更を送ると、GitHub Actionsが自動でレンタルサーバー（Xserver）へ反映する仕組みで運用しています。おかげで記事の追加や修正は「直して、送るだけ」で公開まで完結します。最初の設定こそ少し戸惑いますが、そこさえ越えれば毎回の更新が驚くほど楽になります。専門用語が多くて不安なときも、Claude Codeに「初心者向けに一つずつ教えて」と頼めば、隣で伴走してくれます。
まとめ
Claude Codeを使ったホームページ作りは、「専門知識がないと無理」という思い込みを大きく変えてくれます。大切なのは、技術を完璧に覚えることではなく、やりたいことを言葉にして、確認しながら一緒に作る姿勢です。
- 必要なもの — サイトのデータ・サーバー・ドメインの3つ。データ作りをClaude Codeが担う
- サーバー選び — 初心者はまず「静的サイト＋無料ホスティング（Netlify等）」が手軽。更新重視ならレンタルサーバー
- 準備 — Claudeのデスクトップアプリを入れて「Code」を開き、作業フォルダを選ぶだけ。ターミナル操作は不要
- 指示のコツ — 目的を明確に・小さく区切る・例を添える・ゴールを先に言う・対話で直す
「自分のお店や事業のサイトを、自分の手で持ちたい」——そう感じている方にこそ、Claude Codeは心強い味方になります。まずは1ページ、小さく作ってみるところから始めてみてください。
よくある質問
Q. プログラミング未経験でもClaude Codeでホームページは作れますか？
作れます。Claude Codeは日本語の指示でコードを書いてくれるため、コードを自分で書けなくても形にできます。ただし「出てきたものが正しいか」を判断するために、HTMLとは何か・サーバーとは何かといった基礎概念は知っておくと安心です。最初は小さな1ページから始め、ブラウザで表示を確認しながら少しずつ広げるのがおすすめです。
Q. ホームページを作るのにサーバーは必ず必要ですか？
インターネット上に公開するなら、サイトのデータを置く「サーバー（ホスティング）」と、住所にあたる「ドメイン」が必要です。Claude Codeで作るような静的サイトであれば、NetlifyやCloudflare Pagesなど無料から使えるホスティングサービスが手軽です。WordPressのように動的なサイトを使いたい場合は、国内のレンタルサーバーが向いています。
Q. Claude Codeの利用にはいくらかかりますか？
Claude Codeを動かすには、Claudeの有料プラン（ProやMax）またはAnthropic APIのクレジットが必要です。個人が小さなサイトを作る程度であれば、月20ドル前後のProプランで十分始められます。毎日たくさん使う場合はMaxプランのほうが割安になることもあります。料金体系は変わるため、公式サイトの最新情報を必ず確認してください。