Claude Codeでホームページを作る方法｜手順・公開・注意点を解説

「Claude Codeでホームページを作れると聞いたけれど、プログラムが分からない自分でも使えるのか」「作ったあと、どうやって公開すればよいのか」と迷っている担当者の方や、個人で事業を始めた方は多いのではないでしょうか。

Claude Codeは、Anthropic社が提供する、プログラムを書いて作業を進めるAIです。ホームページの正体は、HTMLやCSSといったプログラムのファイルなので、日本語で依頼すれば、ページのファイルを作り、直し、公開できる状態まで整えるところを任せられます。一方で、何を載せるかを決めることと、できあがりの確認、公開先との契約は、人が行います。

この記事では、Claude Codeで作れるホームページの範囲、始める前の準備、計画から完成までの手順、見た目の確かめ方、公開先の選び方、公開前の確認、頼むかどうかの目安を順に解説します。内容は2026年10月時点の公式ドキュメントと公式ページで確かめたものだけを載せています。Claude Codeも公開先のサービスも更新が頻繁なので、使う前に最新の案内もあわせて確認してください。

Claude Codeで作れるホームページ

最初に、Claude Codeで何が作れて、何が向いていないのかを整理します。ここを押さえておくと、依頼する内容を決めやすくなります。

Claude Codeは何をしてくれるのか

公式ドキュメントでは、Claude Codeは、ファイルを読み、変更し、コマンドを実行しながら、問題を自分で解いていくAIと説明されています。ふつうのチャットのAIは質問に答えて待つだけですが、Claude Codeは、パソコンの中のフォルダにあるファイルを直接作ったり書き換えたりします。

ホームページ作りでは、たとえば次のような仕事を任せられます。

• 「会社案内のホームページを、トップ・事業内容・会社概要・問い合わせの4ページで作って」と頼み、ページのファイルを作ってもらう
• 「トップの見出しを短くして」「ボタンの色を濃い青にして」と、見た目や文章を直してもらう
• 全ページを見て、表記のゆれやリンクの切れを探してもらう
• お知らせのページを1件増やす、といった更新をしてもらう

Claude Codeの中心的な使い方は、パソコン上のファイルを作って直すことです。作成サービスやWordPressの管理画面に、文章や写真を1つずつ入力していく方法とは、作り方が異なります。

作れるものと、向いていないもの

Claude Codeで作る場合、できあがるのは多くの場合「静的サイト」です。静的サイトとは、完成したHTMLファイルや画像を、そのまま公開先に置いて表示する仕組みのことです。構造が単純なので、表示が速くなりやすく、管理する部品も少なくて済みます。

「向いていない」としたものも、コードを書けるAIである以上、作ること自体はできてしまいます。ただ、個人情報や支払いを扱う仕組みは、間違いがあったときの影響が大きく、初めて作る人が確認しきれる範囲を超えがちです。まずは会社案内やLPのような、情報を見てもらうためのページから始めるのがおすすめです。

人が行うことと、Claude Codeに任せること

ホームページ作りの作業を、役割で分けると、次のようになります。「任せる」と「確認する」を分けて考えるのがポイントです。

表の左側は、AIが代わりにはできません。とくに、何を伝えるホームページにするかは、会社のことをいちばん知っているあなたが決める部分です。

ほかの作り方との違い

自分でホームページを作る方法は、ほかにも作成サービスやWordPressがあります。Claude Codeで作る方法は、デザインや構成の自由度が高く、AIにそのまま修正を頼める反面、公開先の契約や更新の段取りを自分で用意する必要があります。4つの方法の比較や、ドメイン・サーバーの用意については、別の記事で詳しく解説しています。

この記事では、Claude Codeで作ると決めた方に向けて、その後の具体的な手順に絞って説明します。

始める前の準備

Claude Codeを開く前に、用意しておくものがあります。ここを済ませておくと、作り始めてからの手戻りが少なくなります。

用意するもの

料金は、公式の料金ページによると、Proが月20ドル（年払いの場合は200ドルで、月17ドル相当）です。「Claude Codeは有料プランすべてに含まれる」と書かれています。使える量には上限があり、長い作業を頻繁に任せる場合は上位のプランが必要になることがあります。為替や税で実際の請求額は変わるため、契約の前に公式ページを確認してください。

入口を選ぶ：アプリかターミナルか

Claude Codeには、いくつかの使い方があります。非エンジニアの方は、デスクトップアプリから始めると迷いにくくなります。

パソコンの中のフォルダを直接扱うなら、デスクトップアプリかターミナルが分かりやすい選択です。以降の手順は、デスクトップアプリを中心に説明し、ターミナルの場合の違いにも触れます。

デスクトップアプリを入れる

公式のドキュメントでは、次の流れが紹介されています。

1. アプリをダウンロードして入れるClaudeの公式サイトから、MacまたはWindows用のインストーラーを入れます。Windowsは、通常のパソコン（x64）用と、ARM64用が別に用意されています。
2. サインインするアプリを開き、Anthropicのアカウントでサインインします。
3. 「Code」タブを開く画面上部の中央にあるタブです。有料プランに入っていないと、アップグレードを求められます。

ターミナルで使いたい場合は、Windowsでは「Windows PowerShell」を開き、公式の案内にある次のコマンドを貼り付けます（Macは別のコマンドです）。入れ終わったら、新しいウィンドウを開いてclaudeと入力すると、ログインの案内が始まります。

irm https://claude.ai/install.ps1 | iex

Macでは、ターミナルを開いて、次のコマンドを貼り付けます。

curl -fsSL https://claude.ai/install.sh | bash

Windowsでは、Git for Windowsを入れておくことが推奨されていますが、入れていない場合はPowerShellが代わりに使われます。ターミナルの開き方から順に確認したい方は、公式の「Terminal guide for new users」も参考になります。

まず1ページだけ作って、動作を確かめる

本番の依頼をする前に、1ページだけ作らせて、仕組みを体験しておくと安心です。公式のターミナルガイドにも、初めて使う人向けの例として、次のような依頼が紹介されています。

「Hello World」と表示するだけの簡単なホームページを作ってください。

ファイルの作成や変更の前に、許可を求められることがあります。その場合は、内容を確かめて「Yes」を選びます。ファイルができたら、そのHTMLファイルをダブルクリックして、ブラウザで開きます。文字が表示されれば、依頼から確認までの流れは問題なく動いています。

この練習で、次の3点を体験しておくと、本番での迷いが減ります。

• どのフォルダに、どんな名前のファイルができるか
• 変更の前に、どんな確認が出るか
• できあがったファイルを、どうやってブラウザで開くか

練習で作ったファイルは、本番のフォルダに混ざらないよう、別のフォルダで試して、あとで削除します。

原稿と写真を用意する

準備のなかで、いちばん時間がかかるのが、原稿と写真です。Claude Codeに任せられるのは「文章を整えて、ページの形にする」ところまでで、会社の強みや、実績の事実は、あなたが用意する必要があります。

原稿は、きれいな文章でなくても構いません。次のように、項目ごとに箇条書きで書いたメモで十分です。

【会社概要】会社名：〇〇株式会社／所在地：〇〇県〇〇市〇〇／電話：000-0000-0000／営業時間：平日8:30〜17:30
【事業内容】金属部品の切削加工／試作から量産まで／図面の相談に対応
【強み】小ロットに対応／納期の相談に応じる
【問い合わせの流れ】メールまたは電話→図面の確認→見積り

写真は、作業用フォルダの中に「写真」というフォルダを作って入れます。ファイル名は「外観.jpg」「作業風景.jpg」のように、中身が分かる名前にしておくと、Claude Codeに「トップページの上には外観の写真を使って」と頼みやすくなります。

作る手順

ここからが本題です。計画を立て、トップページを作り、直しながら広げていく流れを説明します。公式のベストプラクティスにある「先に調べて、計画して、作る」という進め方に沿っています。

全体の流れ

1. 作業用のフォルダを選ぶデスクトップアプリでは、「Code」タブで「Local」を選び、「Select folder」から、準備したフォルダを選びます。ターミナルの場合は、そのフォルダに移動してからclaudeと入力します。
2. 権限モードを確認するClaudeがどこまで確認なしに動くかを選びます。最初は「Manual」（ファイルの変更やコマンドの実行のたびに確認する）か「Plan」（変更せずに計画だけ立てる）にしておきます。
3. 質問してもらって、計画を作るいきなり作らせず、Claudeから質問してもらい、ページ構成をまとめた計画書を作ります。
4. ルールを書いたファイルを置く「書いていないことを足さない」などの決まりごとを、CLAUDE.mdというファイルにまとめます。
5. トップページだけを作ってもらう全体の雰囲気、文章のトーン、色づかいを確かめます。
6. 見た目を確かめて、直すブラウザで開いて見た目を確認し、具体的に修正を頼みます。
7. 他のページを作るトップページの方針に合わせて、残りのページを作ってもらいます。
8. 全ページを通して確認するリンク、表記のゆれ、スマホでの見え方、事実の誤りを確かめます。

以降で、各段階のやり方を詳しく見ていきます。

権限モードを選ぶ

権限モードは、「Claudeが確認なしにできること」の範囲を決める設定です。デスクトップアプリでは、送信ボタンの横にあるセレクターで切り替えます。ターミナルでは、Shift+Tabで順番に切り替えられます。

最初に表示されるモードは、バージョンや契約によって異なります。公式のドキュメントには、バージョンや環境によって、Autoが最初のモードになる場合があると書かれています。始める前に、いま選ばれているモードを必ず確認してください。慣れるまでは、Manualにしておくのが安全です。

質問してもらって、計画を作る

ホームページ作りで失敗しやすいのは、いきなり「ホームページを作って」と頼んで、思っていたものと違うものができあがることです。公式のベストプラクティスには、大きなものを作るときは、先にClaudeから質問してもらい、計画書を作ってから始める方法が紹介されています。次のように頼みます。

これから会社のホームページを作ります。まず、私に質問してください。目的、見てほしい相手、必要なページ、載せる内容、デザインの好み、気をつけたいことについて、一度に2〜3問ずつ聞いてください。聞き終わったら、ページ構成と各ページに載せる内容を、plan.mdというファイルにまとめてください。この段階では、ページのファイルは作らないでください。

Claudeが質問してくるので、1つずつ答えます。「見てほしい相手は？」「問い合わせは電話とメールのどちらが多い？」といった、考えていなかった点を聞かれることもあります。聞き終わると、plan.mdに計画がまとまります。

この計画書は、必ず自分の目で読んでください。次の点を確認します。

• ページの数と名前は、希望と合っているか
• 各ページに載る内容に、原稿にないことが入っていないか
• 問い合わせの流れ（電話・メール・フォーム）は、実際の運用と合っているか
• 入れたくない表現や、載せられない情報が含まれていないか

直したい点があれば、「事例のページは今回は作らない」のように伝えれば、計画書が更新されます。ここで方針を固めておくと、後の修正が少なくなります。

ルールを書いたファイルを置く

Claude Codeは、作業を始めるたびに、フォルダにあるCLAUDE.mdというファイルを読み込みます。毎回伝えたい決まりごとを書いておくと、依頼のたびに繰り返す必要がなくなります。作り方は2通りあります。

• 入力欄に/initと入力して、Claudeに下書きを作ってもらう
• 「次の内容で、CLAUDE.mdを作ってください」と頼み、内容を貼り付ける

内容の例を示します。

# このフォルダについて
- 〇〇株式会社のホームページ。HTMLとCSSで作る静的なサイト
- 文章は「原稿」フォルダの内容だけを使う。書かれていない実績・数字・日付・社名を足さない
- 色は紺と白を基本にし、強調の色は1色まで
- スマホでも読みやすいレイアウトにする
- ファイルを変更したら、変えたファイル名と内容を一覧で報告する
- 公開（アップロード）の操作は、私が指示するまで行わない

公式のドキュメントでは、CLAUDE.mdの長さは200行以内が目安とされています。長くすると、読み込む量が増え、ルールが守られにくくなります。「これを消したら間違いが増えるか」を基準に、必要なことだけを残しましょう。

トップページから作る

計画とルールが整ったら、いよいよ作ります。最初は、トップページだけを作ってもらいます。全体の雰囲気や文章のトーン、色づかいは、トップページで確かめられるためです。

plan.mdの計画にしたがって、トップページ（index.html）だけを作ってください。
・文章は「原稿」フォルダの内容だけを使う
・写真は「写真」フォルダの「外観.jpg」を一番上に使う
・見出し、事業内容の3項目、問い合わせへのボタンを入れる
・スタイルはstyle.cssに分けて書く
・完成したら、ブラウザで開く方法を教えてください

ポイントは、条件を具体的に書くことです。公式のベストプラクティスでも、「どのファイルか、どんな条件かを指定すると、修正の回数が減る」と説明されています。また、既存のファイルを手本にしたいときは、「@トップ参考.jpgのような雰囲気で」のように、ファイルを指定して頼むこともできます。参考にしたいデザインの画像は、入力欄に貼り付けたり、ドラッグして渡したりできます。

依頼文の書き方の型

依頼のたびに、何を書けばよいか迷うときは、次の5つを順に書くと、条件がそろいます。公式のベストプラクティスで紹介されている、「対象を絞る」「手本を示す」「確認の方法を渡す」といった考え方を、ホームページ向けに並べ直したものです。

毎回この5つを書くのは大変なので、2〜4の共通部分は、先に説明したCLAUDE.mdに書いておきます。依頼文では「対象」と、そのページ固有の条件だけを書けば済みます。

ページごとの依頼の例

トップページが固まったら、ページの種類ごとに依頼します。載せる情報の型が違うので、条件も変わります。

事業内容のページ

事業内容のページ（business.html）を、トップと同じ色・文字・ボタンで作ってください。原稿の「事業内容」の3項目を、見出しと2〜3文の説明に整理して並べてください。原稿にない対応可能な範囲や、実績の数字は書かないでください。

会社概要のページ

会社概要のページ（company.html）を作ってください。会社名、所在地、電話番号、営業時間、設立年、代表者名を、表の形で並べてください。内容は原稿のとおりにして、言い換えないでください。

問い合わせのページ

問い合わせのページ（contact.html）を作ってください。電話番号とメールアドレスを大きく表示し、受付時間を添えてください。フォームは作らず、メールを送るリンクだけを置いてください。

どの依頼にも、「原稿にないことは書かない」「言い換えない」といった歯止めを入れています。会社概要のように、一字違うだけで意味が変わる情報には、とくに有効です。

他のページを広げる

トップページの方針が固まったら、残りのページを作ります。ここでも、1つずつ進めると、確認の手間が減ります。

1. 1ページずつ頼む「事業内容のページを、トップと同じ色・文字・ボタンで作って」のように、既存のページを手本に指定します。
2. 共通の部分を確認するメニュー、フッター（ページ下部）の会社情報が、全ページで同じになっているかを見ます。
3. リンクをつなぐメニューの項目を押して、正しいページに移動できるかを確かめます。
4. 気になる点をまとめて直す1つずつ頼むより、まとめて伝えた方が、やりとりの回数が減ります。

ページ数が増えるほど、同じ会話の中でやりとりが長くなります。公式のベストプラクティスによると、Claudeが一度に扱える情報量には限りがあり、会話が長くなると、前の指示を忘れたり、間違いが増えたりします。ページを区切りに、新しい会話を始めると、安定します。無関係な作業に移るときは/clearで会話をリセットする方法が紹介されています。

想定の流れ：金属加工の会社が、4ページで作る場合

ここまでの内容を、架空の例でつなげてみます。従業員が十数名の金属加工の会社で、総務の担当者が、会社案内のホームページを作る場合です。

1. 準備する「新ホームページ」というフォルダを作り、「原稿」「写真」の2つのフォルダを入れます。原稿は、会社概要と事業内容を、箇条書きのメモで書きます。
2. アプリを開いて、計画を作るデスクトップアプリのCodeタブでフォルダを選び、Planモードにします。「質問してください」と頼み、10問ほど答えると、4ページの計画書ができます。
3. ルールを置く「原稿にないことを足さない」「公開の操作はしない」などを、CLAUDE.mdにまとめます。
4. トップページを作るManualモードに切り替え、トップページを作ってもらい、承認していきます。ブラウザで開いて、見出しの大きさと色を直してもらいます。
5. 残りを作る事業内容、会社概要、問い合わせの順に頼み、そのたびにブラウザで確認します。
6. 確認して公開する全ページの確認を済ませ、公開先の規約を確認したうえで、公開します。

この流れのなかで、担当者が行うのは、原稿を用意すること、質問に答えること、できあがりを確認すること、公開先の契約をすることです。Claude Codeが行うのは、計画書の作成、ページのファイル作成、修正です。どこまでをAIに任せ、どこからを自分で行うかを分けておくと、迷いません。

見た目を確かめて直す

AIが書いたページは、見た目がきれいに見えても、思っていたものとずれていることがあります。公式のベストプラクティスには、「確認する方法を与えること」が最も効果の高い方法のひとつとして挙げられています。ホームページでは、実際の画面を見て、違いを直すことが、その確認にあたります。

見た目を確かめる方法

Chromeとの連携やデザインの確認方法は、別の記事で詳しく解説しています。

直したいところを具体的に伝える

見た目の修正は、「何がどう違うか」を伝えると、1回で直る確率が上がります。公式のベストプラクティスでも、画面の修正では、スクリーンショットを渡し、「結果の画面を撮って、元と比べて、違いを挙げて直して」と頼む方法が紹介されています。

画像を渡すときは、入力欄に貼り付けるか、ドラッグ＆ドロップで渡せます。デスクトップアプリでは、添付ボタンからも画像やPDFを渡せます。画像に実際の取引先名や電話番号が写り込んでいないかを、渡す前に確かめてください。

スマホでの見え方を確かめる

ホームページは、パソコンよりスマホで見られることも多くなっています。パソコンのブラウザだけで確認していると、スマホでの崩れを見落とします。確かめ方は、次のとおりです。

1. パソコンのブラウザで幅を狭めるブラウザのウィンドウを狭くすると、スマホに近い見え方になります。手軽ですが、実機とは細部が異なります。
2. 実際のスマホで開く公開後のアドレスを、スマホで開きます。公開前は、ファイルをスマホに送って開く方法もあります。
3. 気になる点を具体的に伝える「スマホで変」ではなく、「どのページの、どこが、どうなっているか」をスクリーンショットとあわせて伝えます。

確認するのは、文字がはみ出していないか、ボタンが指で押しやすい大きさか、写真が画面からはみ出していないか、電話番号を押したときに電話の画面が開くか、の4点です。電話番号のリンクは、見た目だけでは分からないので、実際に押して確かめます。

写真のファイルが大きいと、スマホでの表示が遅くなります。公開前に、写真を撮ったままの大きさのまま置いていないかを確認し、大きすぎる場合は、縮小してから使います。

うまく直らないときの考え方

同じ点を何度頼んでも直らないことがあります。公式のベストプラクティスでは、同じ問題を2回修正して直らない場合は、会話をリセットして、学んだことを入れた新しい依頼で最初からやり直す方がよい、と説明されています。失敗した試みが会話に積み重なって、判断を乱すためです。

1. 会話をリセットする/clearと入力します。ファイルはそのまま残ります。
2. 原因を整理して書き直す「どのページの、どの部分が、どうなっているか」を、前より具体的に書きます。
3. 必要なら計画から立て直す方向性が違っていたときは、Planモードで方針から確かめ直します。

失敗したときの戻し方

直したら、ほかの部分が崩れてしまうこともあります。Claude Codeには、ファイルの変更を戻す仕組みがあります。

• 入力欄が空の状態でEscを2回押すか、/rewindと入力すると、これまでの依頼の一覧が出る
• 戻したい時点を選び、「コードと会話を戻す」「コードだけ戻す」などを選べる
• 依頼を送るたびに、その時点のファイルの状態が自動で保存される

公開する

ページができたら、インターネット上に公開します。ここで、Claude Codeの外側の作業が必要になります。公開先との契約と、ドメインの設定は、あなた自身が行います。

公開の仕組み

静的サイトの公開は、完成したファイル一式を、公開用のサービスに置くことです。公開先には、無料で使えるサービスもあれば、有料のレンタルサーバーもあります。選ぶときに最も気をつけたいのは、無料の公開先の「商用利用の条件」です。会社のホームページは、商用の利用にあたると考えておくのが安全です。

2026年10月時点で、公式のページで確かめられた内容を、次の表にまとめました。

表のとおり、無料で使えるように見えて、会社のホームページには使えないものがあります。公式に「商用可」と明記されていないサービスを選ぶときは、規約を読み、不明な点は提供元に問い合わせてから決めてください。確実に商用で使えるのは、条件が明記された有料のプランやレンタルサーバーです。

Cloudflare Pagesで公開する流れ

公開先の一例として、公式のドキュメントで手順が確かめられた、Cloudflare Pagesの流れを紹介します。利用規約の確認は、あなたが行ってください。方法は2つあります。

連携の方法を選ぶ場合、公式の静的HTMLの手順では、次の設定を行うと説明されています。

• 本番として使うブランチ（ファイルの履歴の枝）はmainにする
• ビルドコマンドはexit 0とする（HTMLだけで、組み立ての処理が要らないため）
• ビルド出力ディレクトリは、HTMLファイルが入っているフォルダを指定する
• 公開後、*.pages.devのアドレスで404が出る場合は、最上位にindex.htmlがあるかを確認する

Direct Uploadを選ぶ場合は、注意があります。公式ドキュメントに、Direct Uploadを選ぶと、そのプロジェクトは後からGit連携に切り替えられないと書かれています。更新を何度も行うなら、最初からGit連携を選ぶ方が、あとで困りません。

Git連携や、公開用のコマンドの実行は、Claude Codeに手伝ってもらうこともできます。公式のドキュメントには、ghのようなコマンドを使って外部サービスを操作させる方法が紹介されています。ただし、公開の操作は、Manualモードで、1つずつ内容を確認しながら承認するのがおすすめです。ログイン情報やパスワードを、依頼文に貼り付けないでください。

公開で出てくる言葉

公開先の画面や案内には、見慣れない言葉が出てきます。最低限、次の言葉の意味だけ知っておくと、迷いにくくなります。

Claude Codeは、Gitの操作を日本語で頼めると、公式のクイックスタートに書かれています。たとえば「変更内容を確認して」「分かりやすいメッセージでコミットして」と頼みます。仕組みを細かく知らなくても使えますが、どのファイルが公開されるのかだけは、自分の目で確認してください。

公開先を選ぶときの質問

公開先は、次の質問に順に答えていくと、絞り込めます。

1. 会社や事業のホームページか商用に使う場合は、公式に商用利用が明記されたプランか、レンタルサーバーを候補にします。非商用の個人利用に限られるプランは外します。
2. 公式に商用利用の可否が確認できるか確認できない場合は、提供元に問い合わせるか、条件が明記されたサービスを選びます。
3. 更新を、自分たちでできるか更新の手順を行える人がいるか。Git連携か、ファイルのアップロードかを選びます。
4. 独自ドメインを結びつけられるか名刺や案内に載せるなら、独自ドメインが使えることが条件になります。
5. 無料の範囲に収まるか表に載っている上限（ファイルの数、サイズ、通信量）を超えないかを確かめます。

独自ドメインを設定する

公開直後のアドレスは、公開先のサービス名が入った長いものになります。会社のホームページとして名刺や案内に載せるには、「自社の名前.jp」のような独自ドメインを取得して、公開先に結びつけます。ドメインの取り方、費用、設定したのに表示されないときの確認は、別の記事で詳しく解説しています。

設定の画面は、公開先ごとに異なります。この記事では具体的な手順を書きません。公開先の公式の手順に従ってください。設定したあとは、「https」で始まるアドレスで開けること、スマホでも表示されることを確かめます。

問い合わせフォームの扱い

静的サイトでは、フォームの入力画面を作れても、送信された内容を受け取る仕組みは含まれません。外部のフォームサービスを組み合わせるか、メールアドレスと電話番号を載せる方法を選びます。

• 最初は、メールアドレスと電話番号を載せるだけにして、フォームは後から足す
• フォームを置くなら、公開前に自分でテスト送信し、担当者の受信箱に届くことを確かめる
• 迷惑メールのフォルダに入っていないかも見る

Claude Codeに「問い合わせフォームを作って」と頼むと、見た目は整ったフォームができますが、実際には何も届かないことがあります。見た目ができていることと、受け取れることは別です。

公開前の確認と更新

公開は、終わりではなく始まりです。公開前の確認と、公開後に更新を続ける仕組みを整えておきましょう。

公開前の確認表

AIが作ったページは、人が確かめてはじめて、会社の看板として使えます。次の表を使って、公開の前に1項目ずつ確かめてください。

法律に関わる表示（特定商取引法に基づく表記、個人情報の取り扱いなど）や、検索に見つけてもらうための設定は、別の記事で詳しく解説しています。Claude Codeに「全ページのリンクの切れと表記のゆれを一覧にして」と頼むと、確認の手間を減らせますが、最後の判断は人が行います。

Claude Codeに確認を手伝ってもらう

確認の一部は、Claude Codeに手伝ってもらえます。ただし、AIに確認させても、事実の正しさまでは保証されません。公式のベストプラクティスにも、「確認できないものは、公開しない」という趣旨の注意があります。

全ページを調べて、次の点を一覧にしてください。
・リンク先のファイルが存在しないリンク
・会社名、電話番号、住所の表記が、ページによって違う箇所
・「原稿」フォルダにない数字や固有名詞が書かれている箇所
・画像のファイル名と、画面上の説明（altテキスト）が合っていない箇所
まだ修正はせず、見つけた箇所だけを報告してください。

依頼の最後に「修正はせず、報告だけ」と添えているのは、確認の依頼で、勝手に書き換えられるのを防ぐためです。報告を読んで、直す箇所を自分で選びます。

更新の手順

公開したあとの更新も、Claude Codeに頼めます。たとえば、お知らせを1件増やしたいときは、次のように進めます。

1. 更新したい内容を文章で用意する日付、見出し、本文を、メモ帳などに書きます。
2. 作業用のフォルダを開いて頼む「お知らせのページに、次の内容を追加してください」と伝えます。
3. ブラウザで確認する追加した部分と、ほかのページに影響がないかを見ます。
4. 公開先に反映するGit連携なら、ファイルを送ると自動で反映されます。Direct Uploadなら、フォルダをもう一度アップロードします。

更新を頼める人が1人だけだと、その人が不在のときに止まります。手順をメモにして、2人以上が行える状態にしておきましょう。

公開後の見直しの目安

公開したあとは、時期を決めて見直します。次の表は、最初の3か月間の目安です。

見直しの依頼も、Claude Codeに頼めます。「トップページの文章を、読む人が最初に知りたいことが先頭に来るように整理する案を、3つ出して」のように、案を出してもらい、採用するかどうかを自分で決める使い方が向いています。

続けるための仕組み

作ったあとは、次の3つを決めておくと、放置されにくくなります。

• 更新の担当と頻度：月に1回、会社概要や営業時間に変更がないかを確認する日を決める
• 契約情報のまとめ：公開先、ドメイン、Claudeのプランの契約者・更新日・支払い方法を1か所にまとめる
• バックアップ：作業用フォルダを、定期的に別の場所へコピーしておく

Claudeのプランを解約しても、作ったファイルは手元と公開先に残ります。ただし、以降の更新をClaude Codeに頼むことはできなくなります。この点も、続け方を考えるときの材料になります。

注意点・頼むかの目安

便利な反面、Claude Codeでホームページを作るときには、気をつけたい点がいくつかあります。最後に、トラブルと、制作会社に頼むかどうかの目安を整理します。

事実の確認は、人が行う

AIは、文章を自然に仕上げようとして、事実と違う内容や、存在しない実績を書き足してしまうことがあります。ホームページに載る情報は、会社としての約束になるため、数字・固有名詞・日付は、元の原稿と1つずつ突き合わせて確認してください。依頼文に「原稿にないことは書かない」と入れておくことも有効ですが、守られたかの確認は、人の仕事です。

渡す情報の線引き

Claude Codeに渡した文章や画像は、Claudeに送られます。次のような線引きをしておくと、安全です。

会社のパソコンで使う場合は、情報システムの担当者に、使ってよいか、渡してよい情報の範囲を確認しておきましょう。外部のサービスとつなぐ機能（MCPなど）は、信頼できるものだけを接続します。

公式の案内は、定期的に確かめる

Claude Codeは更新が頻繁で、権限モードの初期値や画面の名称が変わることがあります。この記事の内容は2026年10月時点のものです。画面の表示が記事と違うときは、公式ドキュメント（code.claude.com）の最新の案内を確認してください。公開先の無料枠や規約も、予告なく変わることがあります。契約や公開の前に、必ず現在の公式ページを見直しましょう。

写真・フォント・参考にしたデザインの権利

使う写真、ロゴ、フォントは、自社が使う権利を持つものにします。他社のホームページを参考にすることはできますが、できあがりが参考にしたものとそっくりになっていないかは、人が確かめます。Claude Codeが写真やイラストを新しく描く機能については、確認した公式の案内に記載がありませんでした。写真は、自社で撮るか、権利のある素材を用意する前提で進めてください。

うまくいかないときの対処

かかる費用の見通し

Claude Codeで作る場合の費用は、おもに次のとおりです。金額は、各社の公式ページで確認できる範囲のものだけを書いています。

制作会社に頼む費用との比べ方や、費用を抑える方法は、別の記事で詳しく解説しています。自分の時間を費用として数えると、「安く済むはず」と思っていた比較が変わることもあります。

自分で作るか、頼むかの目安

Claude Codeを使っても、ホームページを「作る作業」は減らせますが、「決める作業」と「確認する作業」は残ります。次の目安で、自分に合うかを考えてみてください。

すべてを任せなくても、「構成だけ相談する」「デザインだけ頼む」「公開前の確認だけ頼む」といった部分的な依頼も選べます。制作会社を選ぶときの確認点や、費用を抑える方法については、別の記事で詳しく解説しています。

よくある質問

まとめ

Claude Codeを使えば、ホームページを作る作業は大きく短縮できます。一方で、何を伝えるかを決めること、公開先の規約を確かめること、できあがりを確認することは、これまでと同じく人の仕事です。まずは4ページ分の原稿を用意し、トップページだけを作ってみることから始めてみてください。

「計画づくりや確認に時間を取れない」「公開先やドメインの選び方に不安がある」という場合は、INTERCREATE JAPANでも、ホームページの制作や、公開まで含めたご相談をお受けしています。