Claude Codeでホームページを1から作る手順｜最初の指示と手直しの回数

アプリは開いた。でも空の入力欄を前に、手が止まる。

何て打てばいいのか。何回直せば終わるのか。できたものをどこに置けばいいのか。この記事では、この3つにまとめて答えます。

結論: 材料をそろえる、計画だけ先に出させる、直しはまとめて送る。この順番なら手直しが減ります。

• 今日やること → 店名・説明文・写真・参考サイトのスクショを1つのフォルダに入れる
• 最初の指示 → デスクトップアプリのCodeタブをPlanモードにして、構成案だけを出させる
• 仕上げ → 直しは3〜5点ずつまとめて送り、完成したフォルダをNetlify Dropにドラッグして公開する

この記事の目次

1. プログラミングができなくても、Claude Codeで公開まで行ける？
2. 最初の指示は何と書けばいい？（コピペ用あり）
3. 手直しは何回くらいで終わる？
4. 初心者がつまずくのはどこ？
5. 作ったサイトはどこで公開する？Netlify・Cloudflare・GitHub Pages
6. よくある質問
7. この記事のまとめ

プログラミングができなくても、Claude Codeで公開まで行ける？

行けます。ターミナルもNode.jsも使わず、デスクトップアプリだけで最後までできます。

公式の手順はシンプルです。デスクトップアプリにサインインしてCodeタブを開き、Local →「Select folder」で作業フォルダを選ぶだけ。「Node.jsもCLIも入れなくてよい」と、公式ドキュメントにはっきり書かれています。

1つだけ先に確認を。無料プランではClaude Codeを使えません。かかる費用は次のとおりです（2026-10-11時点）。

← 表は横にスクロールできます →

利用上限は「5時間ごとの枠」と「週ごとの上限」の2本立てです。しかもチャットのClaudeと共有なので、昼にチャットを使い込むと、夜のサイトづくりに回せる分が減ります。

最初の指示は何と書けばいい？（コピペ用あり）

材料を渡して「作る前に質問して、計画を見せて」と書く。指示が具体的なほど、手直しは少なくなります。

「指示が正確なほど、必要な修正は少なくなる」。公式のベストプラクティスにある一文です。逆に「おしゃれなカフェのサイト」だけだと、どの店にも当てはまる、ふわっとしたページが出てきます。

最初に用意しておく材料は4つ。

• 店名・サービス名と、1〜2行の説明
• 載せたい項目（メニュー、料金、アクセス、問い合わせ先）
• 写真（images フォルダにまとめておく）
• 好きなサイトのスクリーンショット（デザインの方向性を伝える用）

そろったら、Planモードでこう送ります。

このフォルダの材料を使って、1ページのホームページを作りたいです。
・内容：店の紹介、メニュー、アクセス、問い合わせ
・雰囲気：添付したスクショのように、余白多めで落ち着いた感じ
・スマホで見る人が多いので、スマホ表示を優先
・HTMLとCSSだけで、公開しやすい形にしてください
分からない点は作業前に質問し、ファイル構成と作業計画を先に見せてください。

Planへの切り替えは、権限メニュー（Cmd+Shift+M）から。よく見かけるShift+Tabはターミナル版の操作なので、デスクトップアプリでは効きません。ここは引っかかりやすいところです。

個人的には、最初の1往復を計画だけに使うのが一番効くと思っています。後半の直しは「思っていた構成と違う」から始まることが多いからです。ファイルが作られる前にそこを止められるのは大きい。

素材の扱いも1つだけ。Instagramの投稿や他社サイトの文章・写真をそのまま流用するのは避けてください。自分で撮った写真、自分で書いた文章を使うのが安全です。

手直しは何回くらいで終わる？

公的な目安はありません。ただ、往復の段取りは先に決められます。下の表をそのまま記録用に使ってください。

← 表は横にスクロールできます →

基準は7往復。超えたら「どこで詰まったか」を表に書き足しておきます。次の案件で、最初の指示にそのまま足せるからです。

直しの送り方には、公式が勧める型があります。

• 「もっと良くして」とは書かない
• 目標のスクショを貼り、結果のスクショと比べさせる
• 違いを書き出させてから直させる

デスクトップアプリにはBrowserペイン（作ったページをアプリ内で表示する画面）があります。Claudeが自分で画面を撮って確認できるので、この型と相性がいいです。

同じ問題で2回以上直してもだめなら、/clear で会話をリセットします。分かったことを入れて指示を書き直す、というのが公式のすすめです。

地味ですが、これが効きます。会話が長くなるほど利用量も増えるので、上限対策にもなります。

初心者がつまずくのはどこ？

よく詰まるのは5か所。先に知っておけば慌てずに済みます。

← 表は横にスクロールできます →

「Bypass permissions」は、隔離されたコンテナやVM（PCの中の仮想の作業部屋）の中だけで使うように、と公式に書かれています。自分のPCでホームページを作るなら、Accept editsで足ります。

もう1つは「戻す」操作です。ターミナル版では、Escを2回押すか /rewind で、会話とファイルを前の状態に戻せます。

ただし、コマンドで変わったファイルは戻りません。公開前のフォルダは、日付をつけて丸ごとコピーしておくと安心です。

作ったサイトはどこで公開する？Netlify・Cloudflare・GitHub Pages

Gitを触ったことがないならNetlify Drop。更新を自動にしたいならCloudflare。GitHubに慣れているならGitHub Pages。

← 表は横にスクロールできます →

選び方の基準：公式ドキュメントにある手順の少なさ、無料枠、更新方法の3点で比べました。

3つの中では、Netlify Dropが一番分かりやすいと感じました。GitもGitHubも要りません。Claude Codeで作ったフォルダを置けば、そのままURLが出ます。

公式の手順で気をつけたいのは2点です。

• ZIPは解凍してから、サイトのファイルが入ったフォルダをドラッグする
• 本番デプロイは1回15クレジット。こまめに入れ直すより、まとめて直してから入れるほうが無料枠に収まる

Cloudflareは、Pagesの公式ページで「新規プロジェクトはWorkersから」と案内しています。これから始めるなら、Workersの手順を見るのが近道です。

GitHub Pagesは、オンラインビジネスやECを主な目的にしたサイト向けではないとされています。あなたのサイトが予約や販売中心なら、ほかの2つが合います。

クライアント確認用のURLを出すときも、同じ流れが使えます。LPの叩き台をNetlify Dropに置けば、送るのはURL1本だけです。

よくある質問

Q. 無料プランのClaudeでも作れますか？ Claude Codeは使えません。Pro・Max・Team・Enterpriseのどれかが必要です。Proは月$20（2026-10-11時点、税は地域で変わります）。

Q. Claude Designとはどう使い分けますか？ 見た目の試作ならClaude Design、ファイルとして作り込んで公開するならClaude Codeです。DesignからCodeへ引き継ぐ機能もあります。ただしDesignはリサーチプレビュー（試験提供）なので、仕様が変わることがあります。

Q. 公開したあとに文章を直すには？ 同じフォルダを選び、Codeタブで直しを頼みます。Netlifyなら、直したフォルダをDeploysページに入れ直せば反映されます。毎回同じ説明をしたくないなら、/init でCLAUDE.md（毎回最初に読まれるメモ）を作りましょう。「スマホ優先」「画像はimagesフォルダ」などのルールを書いておけば済みます。

この記事のまとめ

• 道具はデスクトップアプリのCodeタブだけ。Node.jsもターミナルも要らない
• 最初の1往復はPlanモードで計画だけ。材料とスクショを先に渡す
• 直しは3〜5点ずつまとめて送る。同じ所で2回つまずいたら /clear で書き直す
• 公開はまずNetlify Dropで。フォルダごとドラッグする
• 次にやること：今日のうちに空のフォルダを1つ作り、店名・説明文・写真・好きなサイトのスクショを入れておく

この記事は、Webサイトの動く部品集 AETHER Motion の制作チームが書いています。