「ホームページを自分で作りたいけれど、コードは書けないし外注の予算もない」。そう感じている方に向けて、Claude Codeでホームページを作り、公開するまでの手順をまとめました。いきなりゼロから理想のサイトを作ろうとすると、何をどう指示すればよいか迷いやすくなります。小さな編集から始め、確認しながら少しずつ広げていくのが進めやすい順番です。ここでは、準備から作成の手順、公開の方法、自分で作るかプロに頼むかの判断軸までを解説します。
Claude Codeでホームページを作る全体の流れ
公式ドキュメントでは、Claude Codeはコードベースを読み、ファイルを編集し、コマンドを実行するエージェント型のコーディングツールとされています。ホームページ作りに当てはめると、HTMLやCSSといったページのファイルを、利用者の代わりにClaude Codeが書き換える形です。利用者はコードを書かず、表示された結果を見て、直したい点を言葉で伝えます。
全体の流れは次のとおりです。
| 段階 | やること |
|---|---|
| 準備 | デスクトップアプリを入れ、プランと承認モードを確認する |
| 手順1 | 載せたい文章・写真・連絡先などを先にまとめる |
| 手順2 | 既存のページの文章や画像を変えるところから始める |
| 手順3 | 構成や配色・余白などを言葉で指示して整える |
| 手順4 | 差分とプレビューで変更内容を確認する |
| 手順5 | ホスティングサービスに置いて公開する |
始める前の準備：環境構築はほぼ不要になった
Claude Codeは以前、ターミナル操作やNode.jsのインストールが必要なツールとして紹介されることが多くありました。今はデスクトップアプリを使えば、こうした準備はほとんど要りません。
デスクトップアプリならインストーラーとサインインだけ
公式ドキュメントによると、デスクトップアプリを使えば、ターミナルを使わずにパソコン内のフォルダの作業をClaudeに頼み、変更内容を確認できます。始めるまでの流れは次の3つです。
- インストーラーをダウンロードして実行し、Anthropicのアカウントでサインインする
- 画面上部の「Code」タブを開く
- 「Local」を選び、「Select folder」で作業するフォルダを選ぶ
インストーラーはMac・Windows向けに用意されており、Linux版はベータ版です。同じページには、デスクトップアプリにClaude Codeが含まれているため、Node.jsやCLIを別にインストールする必要はないとも書かれています。
GOROでも以前は、VS Code・Homebrew・Node.jsを入れるCLI前提で研修を設計し、環境構築に約1時間をとっていました。デスクトップアプリなら、この準備はインストーラーの実行とサインインで済みます。
ターミナル版（CLI）についても、Advanced setupでNode.jsが必要と書かれているのは、npmでインストールする場合（Node.js 22以降）です。デスクトップアプリの画面構成や操作は、Claude Codeデスクトップアプリの使い方を解説した記事で詳しく紹介しています。
有料プランと承認モードを確認する
Claude Codeを使うには有料プランが必要です。Advanced setupでは、Pro・Max・Team・Enterprise・Consoleのいずれかのアカウントが必要で、無料のclaude.aiプランには含まれないと案内されています。料金やプランの内容は変わることがあるため、申し込み前に公式サイトで確認してください。
もう一つ確認しておきたいのが承認モード（permission mode）です。Claude Codeがファイルを書き換えたりコマンドを実行したりする前に、利用者の確認を求めるかどうかを決める設定です。デスクトップアプリの公式ドキュメントでは、主に次のモードが説明されています。
| モード | 公式ドキュメントの説明（要約） |
|---|---|
| Manual | ファイルの編集やコマンドの実行の前に確認を求める。差分を見て、変更ごとに受け入れるか断るかを選べる |
| Accept edits | ファイルの編集を自動で受け入れる。ほかのコマンドを実行する前には確認を求める |
| Plan | ファイルを読んで調べ、ソースコードは編集せずに進め方の案を示す |
| Auto | 通常の確認なしで進める。コマンドの実行などの前に、裏側の仕組みが依頼内容に沿っているかを確かめる（使える環境でのみ表示） |
同じページには、変更を一つずつ自分で承認したい場合はManualに切り替えるよう書かれています。慣れるまではManualにしておくと、意図しない書き換えに早く気づけます。
Claude Codeでホームページを作る5つの手順
準備ができたら、実際に作っていきます。
手順1：載せる内容を先に文章でまとめる
最初に、ホームページに載せる情報をテキストでまとめておきます。美容サロンなら、メニュー・料金・営業時間・スタッフ紹介・アクセス・予約方法などです。公式ドキュメントにも、Claudeに渡す文脈が多いほど結果がよくなるとあります。写真やPDFは、入力欄の添付ボタンから付けるか、ドラッグ＆ドロップで渡せます。
GOROが制作会社向けに行った研修でも、参加者がまずNotionにサイトに載せたい情報を整理し、Claude Codeがその内容を参照して構成やデザインを生成したあと、参加者が追加の指示で仕上げました。
手順2：既存ページの文章・画像を変えるところから始める
いきなりゼロから作るより、手元にあるページを少し変えるところから始めるのがおすすめです。公式ドキュメントでも、最初はよく知っている小さなプロジェクトから始めるよう勧めています。
先ほどの制作会社向けの研修では、先方が実際の業務で扱ったWebサイトのHTMLを使い、文章や画像の変更から始めました。
実録支援先の声（GOROの事例より）
先に小さな変更を成功させてから、自由制作に進んだ
いきなりゼロからサイトをつくるのではなく、先に小さな変更を成功させることで、Claude Codeの基本的な動かし方をつかみました。
出典：Claude Code未経験のクリエイター12名が、たった4時間の研修でWebサイトを公開した事例（GOROの事例記事）
事業会社のデザインチーム向けの研修も、既存のHTMLファイルを修正する小さな体験から始めてゼロから採用サイトの制作まで進め、参加者全員が2時間でAIのみでWebサイトを公開しました（Claude Code未経験の非エンジニア10名が、2時間の研修でサイト公開まで到達した事例）。
自分のホームページで試すなら、次のような小さな指示から始めると負担が少なくなります。手元にページがない場合は、まず「美容サロンの1ページのホームページを作ってほしい」のように簡単な下書きを作ってもらい、それを編集の土台にする方法もあります。
| 試す内容 | 指示の例 |
|---|---|
| 文章の修正 | 「この文章をもっと親しみやすい言い方にしてほしい」 |
| 画像の差し替え | 「トップの画像を、添付した写真に差し替えてほしい」 |
| 細部の調整 | 「この見出しの文字をもう少し大きくしてほしい」 |
手順3：構成とデザインを言葉で指示して整える
小さな編集に慣れたら、ページ全体の構成や見た目を指示で整えていきます。デザインチーム向けの研修で採用サイトを作った場面では、テキストで指示を出すとワイヤー（ページの骨組み）が生成され、余白・色・フォント・コンポーネントのルールを反映しながら、先方のブランドのトーンに沿った見た目へ調整されていきました。
代表・旭俊成のnote「板前さんの鮨と一緒に、AI活用事例を共有する鮨会を開催しました」でも、GOROのデザイナーが構成の検討からワイヤーまでをAIと相談しながら通しで作り、「かかる時間は半分になり、浮いた時間でディスカッションにより考えられるようになった」と話していたことが紹介されています。研修の流れは、AI Web制作とは？非エンジニアでもできる仕組みと実際の進め方を解説で詳しく扱っています。
指示を出すときは、見た目の要素を具体的な言葉に分けて伝えます。「おしゃれにしてほしい」のような指示は、人によって受け取り方が変わるためです。
| 曖昧な指示 | 具体的な言い換え |
|---|---|
| おしゃれにしてほしい | フォントを細めの書体に変えてほしい |
| 余白が気になる | 見出しと本文の間の余白を今より広げてほしい |
| 色の印象を変えたい | 背景をベージュ系、文字を濃いグレーにしてほしい |
余白・色・フォントは一つずつ指示し、画面の変化を確かめてから次に進むと、どの変更が狙いどおりだったかがわかります。「見出しのデザインはそのままで、背景色だけ変えてほしい」のように変えない範囲も伝えると、意図しない箇所の書き換えを防げます。
手順4：差分とプレビューで変更内容を確認する
Claude Codeがファイルを書き換えたら、何が変わったかを確認します。公式ドキュメントによると、編集後に表示される「+12 -1」のような表示をクリックすると差分（diff）の画面が開き、ファイルごとに変更を確かめられます。特定の行にコメントを付けると、Claudeがそれを読んで修正します。
見た目の確認には、アプリ内のBrowserの画面が使えます。デスクトップアプリの公式ドキュメントでは、プロジェクト内の静的なHTMLファイルをBrowserの画面で開けることや、Claudeが開発用のサーバーを起動して変更を確かめられることが説明されています。
公開する前には、スマートフォンでの見え方や、電話番号・住所・営業時間などの記載に誤りがないかも、自分の目で確かめておきましょう。
手順5：ホスティングサービスに置いて公開する
完成したHTMLやCSSのファイルは、インターネット上の置き場所（ホスティングサービス）に置くことで、誰でも見られるホームページになります。
事業用のホームページなら、たとえばCloudflare Pagesが使えます。Cloudflare Pagesの公式ドキュメントによると、作ったファイルを管理画面にドラッグ＆ドロップで上げるだけで公開でき、Gitの操作は要りません（ドラッグ＆ドロップで上げられるのは1,000ファイル・1ファイル25MiBまで）。無料プランの上限は、1サイト2万ファイル・1ファイル25MiBで、独自ドメインもつなげられます。このAI推進室のサイトも、Cloudflare Pagesで公開しています。
GitHub Pagesも静的なサイトを公開できるサービスです。ただしGitHub Pagesの制限を説明したページには、オンラインビジネスやECサイトなど、商取引を主な目的とするサイトの無料のホスティングとして使うことは認められていないと書かれています。どのサービスを使う場合も、規約と料金を公式ページで確認してから選んでください。
自分で作るか、プロに相談するかの判断軸
ここまでの手順で作れる範囲と、プロに任せたほうがよい範囲の目安を整理すると、次のようになります。
| 状況 | 向いている進め方 |
|---|---|
| ページ数が少なく、載せる情報も自分で把握している | 自分でClaude Codeに指示しながら進める |
| 文章や写真の差し替えなど、更新を自分で続けたい | 自分で操作に慣れておく |
| ブランドの見せ方を一貫させたい、複数ページで統一感を出したい | 構成の段階からプロに相談する |
| 会員登録・決済・予約システムなど、複雑な仕組みが必要 | プロに依頼するか、研修で基礎を押さえてから判断する |
会員登録やログイン、決済のような仕組みは、個人情報やお金を扱います。こうした機能が必要になりそうなら、すべてを自分の指示だけで完結させようとせず、専門的な知識を持つ人に確認してもらう前提で計画しておくと安心です。
自分で続けられそうだと感じたら、まずは小さな編集から試してみてください。ページ数が増えたり、ブランドの見せ方に迷いが出てきたりしたら、一人で抱え込まずに相談するタイミングです。社内で制作の内製化を検討している場合は、Web制作の内製化とは？判断軸・失敗パターンと外注に頼らない進め方もあわせて参考にしてください。
この記事と合わせて読みたい
- Web制作の内製化とは？判断軸・失敗パターンと外注に頼らない進め方 — ホームページ作成を自社で内製化すべきかどうか、判断軸をさらに深掘りしたい読者に向けた記事です。
- Claude Codeはデザイナーの仕事をどう変える？非エンジニアでもできる活用法 — ホームページ作成だけでなく、デザイナーの仕事全体がどう変わるのかを知りたい読者が次に抱く疑問に答える記事です。
Claude Codeを業務で使いたい方へ
自分の業務を題材に試したい方には、1対1で進めるClaude Code マンツーマン講座があります（オンライン・回数制）。部署やチームで導入する場合は、業務に合わせて内容を設計するClaude Code法人研修をご覧ください。
