全体を録画し、ステップごとに分解して解説したので、そのままコピーして使えます。以下のサイトは、フリーランサーに5桁（ドル）の報酬を支払って作らせたように見えるでしょう。訪問した誰も、コードをAIが書いたとは気づきません。公開までの総費用は、約60ドルでした。
GIF
まず、正直な事実確認
幻想を売りつけるつもりはありません。そこで、方法の前に、現実とそうでないものを明確にしておきます。
現実的なこと:
- Claude Code は、あなたの説明に基づいて、サイトのコード全体を ゼロから 作成します。テンプレートは使わないので、他の Wix/Squarespace クローンのようなサイトにはなりません。これこそが、結果がプレミアムな品質になり得る中核的な理由です。
- 私が使う 2 つのスキルは実際に存在し、無料です。1 つは Anthropic 製の frontend-design で、バックグラウンドで動作し、最も使い古された AI フォントやレイアウトを禁止します。もう 1 つはコミュニティ製の UI/UX Pro Max で、オンデマンドで呼び出せる数十の UI スタイル、カラーパレット、フォントペアリングが含まれています。
- 画像/動画のワークフローは現実的です。ElevenLabs は現在、主要なビジュアルモデル (GPT Image、Google Veo 3.1) に Topaz アップスケーリングを加え、1 つのタブに集約しています — これは確認済みで、2025 年後半に画像・動画分野に事業転換しました。そのため、ページから離れることなく静止画を生成し、アニメーション化し、アップスケールできます。
- Claude Code は、Claude Pro プラン ($20/月、年払いなら $17/月) に含まれています。Max プランは必要ありません。2026 年 6 月現在の情報です。
- 格安ホスティングと無料の初年度ドメインを組み合わせれば、年間約 $40～45 で済みます。
魔法ではないこと: 「$10,000」というのは、出力されたサイトの価値であり、あなたに確実に支払われる金額ではありません。このようなサイトを制作会社に依頼すると、$5,000～$15,000 かかります。実際にその価値で収入を得られるかどうかは、あなたがそれを販売できるかどうかにかかっています — 収益については後で詳しく説明します。ここに記載したプロンプトは出発点であり、自動販売機ではありません。
記載されているツールはすべて実在します。価格はすべて 2026 年 6 月現在のものです。
$10,000 のサイトと $200 のサイトを分けるもの
構築を始める前に、目標を定める必要があります。Claude に、サイトを高価に見せる要素を尋ねたところ、3 つのグループ、8 つの項目に集約されました。
センス
- 視点 — ムードボードではなく、明確なデザインの方向性
- タイポグラフィ — 意図的に選ばれたフォント（そして使い古されたものではない）
- カラー — 抑制の効いた、最大 4～5 色、虹色は禁止
中身 4. ヒエラルキー — サイズで視線を誘導し、読み手に 1st、2nd、3rd と伝える 5. イメージ — カスタムまたは説得力のある AI 生成（決してストック素材の粗悪品ではない） 6. コピー — 抑制が効き、感覚的で、人間が書いたように自然で、形容詞の羅列ではない
体感品質 7. モーション — カーソルエフェクトやマイクロインタラクションで、サイトに命を吹き込む 8. モバイル対応 — デスクトップを縮小したものではなく、スマートフォン向けにデザインする
このリストは保存しておいてください。最後に、自分のサイトをこれら 8 つの項目すべてで評価します。この自己評価こそが、仕上がりのクオリティを平凡なものから洗練されたものへと変える唯一の重要なステップです。
こんな人におすすめ
以下のような方に有効です:
- 地元のビジネス（レストラン、ジム、クリニック、不動産など）向けにウェブサイトを販売したいが、コーディング方法がわからない
- すでにフリーランスで活動しており、アウトプットと価格を 10 倍にしたい
- 自分のビジネスやパーソナルブランド向けのプレミアムなサイトが欲しい
- 集中できる午後 1 日を費やすことができ、ワンクリックで完璧を期待するのではなく、反復して改善する意思がある
「ボタンを押せばビジネスが生まれる」ようなおもちゃを求めている方には向いていません。作成するサイトの品質は、あなたの指示の質と、何かが物足りないと感じたときに調整を求める姿勢にかかっています。
必要なもの（とその費用）
1 つのサイトを完成させるための現実的な総費用: 約 $60（Claude Pro 1 か月分 + ホスティング + ドメイン 1 年分）。
完全な構築手順（ステップバイステップ）
ステップ 1 — Claude Code をセットアップする
claude.com で Claude Pro にサインアップしてください。デスクトップアプリをダウンロードします（ダウンロードアイコン、左下 → Claude Code セクション → デスクトップアプリ → インストーラーを実行）。サインインします。
チャットモード から コードモード に切り替えます（左上のタブ、または Cmd/Ctrl + 3）。
コンピューター上の任意の場所に新しい空のフォルダを作成します — これがワークスペースになります。チャットボックス近くのフォルダ選択ボタンをクリックし、アプリ内でそのフォルダを開きます。Claude Code は、専用のフォルダがあると最も効果的に動作します。
インターフェースは頻繁に更新されるため、ボタンが私の説明と完全に同じ場所にない場合でも、慌てないでください — 概念は同じなので、同等の機能を見つけてください。
ステップ 2 — 2 つのスキルで Claude をレベルアップする
標準の Claude はジェネラリストです。デフォルトのデザインは「まあまあ」で、AI サイトで見慣れたフォントやレイアウトを使ってしまいます。スキルを追加することで、この問題を解決できます。
スキル #1 をインストール — frontend-design（バックグラウンドで動作）: frontend-design スキルのリンクを、以下のテキストと一緒に Claude Code に貼り付けます:
1このスキルをグローバルにインストールしてください。
求められたら編集を許可します。
スキル #2 をインストール — UI/UX Pro Max（オンデマンドで呼び出す）: UI/UX Pro Max のリンクを、以下の正確な文言と一緒に Claude Code に貼り付けます — この表現が重要なのは、ターミナル経由で綺麗にインストールされるためです:
1このプラグインを npm を使ってグローバルにインストールしてください。
編集を許可します。
ステップ 3 — 自動モードをオンにする
左下、チャットの下にあるモードセレクターを auto mode に切り替えます。これにより、Claude が各ステップで許可を求めて停止することなく作業を進められるようになります。自動モードがオンになり、両方のスキルがインストールされていれば、構築を開始する準備は完了です。
ステップ 4 — 参考資料を集める（センスを身につける近道）
視覚的なセンスを言葉で説明するのは難しいものです。特にデザイン初心者にとっては。参考資料があれば解決します。あなたが気に入ったサイトのスクリーンショットを Claude に渡せば、その雰囲気に合わせてデザインしてくれます。センスを「説明する」よりも「見せる」方がはるかに簡単です。
参考資料の入手先:
- Dribbble — デザイナーが自身の作品を投稿する場所
- Awwwards — 受賞歴のあるサイト、非常に高いレベル
- Pinterest — そのものを検索（例：「モダンなレストラン ウェブサイト デザイン」）
気に入ったサイトを 3～5 つ見つけ、スクリーンショットを保存してください。これらをコピーするのではなく、Claude に方向性を示すために使います。
ステップ 5 — サイトを構築する 1 つのプロンプト
これが、単一のアクションで動画全体を実現する方法です。デザインスキルを呼び出し、概要を与え、参考スクリーンショットを添付し、最後に魔法の一文で締めくくります。
私の構築では、シアトルのレストラン向けサイトを作りました。以下がプロンプトの構造です — プロジェクトに合わせて概要を調整してください:
1/ui-ux-pro-max23[BUSINESS — 例：シアトルの高級ステーキハウス] 向けのシングルページウェブサイトを構築してください。45方向性：[あなた自身の言葉で雰囲気を — 例：ダークでムーディな高級感、ただし太平洋岸北西部の雰囲気をベースに、マンハッタンの一般的なステーキハウスではなく]67セクション（順番に）：[例：ヒーロー、哲学/ストーリー、メニュー、店内の様子、予約]8ギャラリーや予約システムは不要 — ただ上から下へスクロールする 1 ページです。910視覚スタイルの参考として、3～5 枚のスクリーンショットを添付します。11それらを「コピー」するのではなく、「雰囲気」を合わせてください。1213技術スタック：シングルファイルの静的 HTML/CSS/JS（React は使わない — シンプルに保つ）。1415コードを書き始める前に、明確にするための質問をしてください。
最後の行 — 「明確にするための質問をしてください」 — が、Claude に構築前に一度立ち止まって考えるよう促す鍵です。Claude からは約 7 つの質問が返ってきました。サイト名、スタイルの方向性、セクション、コピーの作成者、技術スタック、アニメーションレベル、その他もろもろです。
最も重要な部分は、Claude がメニューのように 3 つのスタイルの方向性を提案してくれたことです。私は「ダークでムーディな高級感、太平洋岸北西部をベースに、5 つのセクション、ギャラリーなし、予約システムなし — スクロールする 1 ページ」を選びました。
これが構築プロセス全体で最も重要な瞬間です。 ここでの回答がサイト全体の設計図になります。今、具体的に答えれば答えるほど、後で Claude と格闘する時間が減ります。時間をかけてじっくり考えてください。
その後、送信します。Claude はコードを書き始める前に約 3 分間読み取りと計画に費やし、その後約 4～5 分で構築します。結果の表示までスキップしてください。
Claude からの質問
1st バージョン公開
ステップ 6 — 8 項目のチェックリストで自己評価する
磨きをかけ続ける前に、設定した基準に照らしてサイトを確認しましょう。8 項目のチェックリスト（この記事の前半にあります）を Claude に貼り付け、以下のように質問します:
1以下は、$10,000 の価値があるウェブサイトのための 8 項目チェックリストです。2現在のサイトを確認し、各項目について正直に評価してください：3strong（優れている）、mixed（混合）、missing（欠けている）。4遠慮なく厳しく評価してください。
私の構築では、Claude から以下の評価が返ってきました。視点 — strong、カラー — strong、ヒエラルキー — strong、タイポグラフィ — mixed、そしてイメージ/モーション/モバイル/目に見えない要素 — すべて mixed。同様の結果になるでしょうが、それで問題ありません。重要なのは、何が残っているかを正確に把握することです。
ステップ 7 — ここがプロフェッショナルから高級へと変わるポイントです
この章がすべての違いを生みます。問題を一つずつ修正していくのは避けてください — トークンを無駄に消費し、結果は継ぎ接ぎのように感じられます。意図を前面に出し、具体的な指示ではなく、一括での変更を依頼しましょう。
以下が私が使用する正確なプロンプトです:
1手作りのマイクロインタラクションをもっと追加する必要があります。下部のセクションはやや平凡に感じられます。2より賑やかにする必要はなく、ただ「より高級に見える」ようにしたいのです。3改良案を一括で提案し、それらをすべて一度に適用してください。
Claude に「何を」追加するかを指示しているのではなく、「どのように感じさせたいか」を伝えている点に注目してください。Claude は意図を具体的な成果に変換することにおいて、ほとんどの人間が仕様書を書くよりも優れています。返ってきたのは一括の変更案でした。サイト全体にフィルムグレイン、セクション間にアニメーションする真鍮のライン、かすかに光るエンバーエフェクト、単語ごとに表示されるヘッドラインのリビール。5 つの変更を 1 つのプロンプトで、同時に出荷しました。
次に、セクションごとの調整を自分で行います。 スクロールして、まだ平坦に感じられるセクションを見つけてください — 必ず 2、3 箇所あります — そして、セクションごとに 1 つ のモーションまたはカーソルインタラクションを Claude に指示します:
1[ストーリー] セクションが静的で動きがありません。ここに、1 つのエレガントなマイクロモーションまたはカーソルインタラクションを追加してください。2繊細で洗練されたものに — 生き生きとしているが、うるさくないように。
最初の試みが大げすぎる場合は、修正を依頼します: 「もっと繊細に、カーソルを追従するように少し遅延を加えてください。」 私の構築では、これにより静的なキャンドルライトのハローが、カーソルをソフトなディレイで追跡するものに変わりました。2 つのプロンプト、2 つのセクション — このレイヤーこそが、「見た目が」高価なサイトと、操作しているときに「感じられる」高価なサイトの違いです。
ステップ 8 — イメージ：用意するか、生成するか
GIF
イメージは、Claude だけでは完全には解決できない唯一の柱です。最良の選択肢は、カスタム写真撮影です。画像をプロジェクトフォルダにドロップし、それが何であり、どこに配置するかを Claude に伝えます。
写真の予算がない場合？ AI 生成は今や誰にも見分けがつかないほど優れています。これを高速化するコツは、画像生成プロンプトを自分で書かないことです — Claude はプロジェクトをすでに理解しているので、あなたの代わりにプロンプトを書くよう依頼しましょう:
1このサイトのヒーロー画像用の画像生成プロンプトを書いてください。2これまでに構築してきた正確なムード、カラーパレット、方向性に適合するものでなければなりません。3プロンプトのみを出力してください。
それを画像生成ツールに貼り付ければ、最初の試行でブランドに合ったものが得られます。ElevenLabs では、静止画を生成し（GPT Image）、その正確なフレームを Google Veo 3.1 にドロップしてアニメーション化し、Topaz でアップスケールできます — すべて 1 つのタブ内で。最終的なアセットをプロジェクトフォルダにドロップします。
ステップ 9 — 21st.dev からプロ用コンポーネントを取り込む
GIF
印象的なビジュアル要素（スクロールエフェクト、派手なヒーローなど）が必要な場合、21st.dev は実際の開発者によって構築された無料のコンポーネントライブラリです。気に入ったものを見つけたら、Copy Prompt をクリックし、それを Claude Code に貼り付け、アセットを添付し、Claude にそのコンポーネントを使ってヒーローを構築するよう指示します。
ここで重要なのは、Claude はあなたの アーキテクチャを保護する ということです。私が選んだスクロールコンポーネントは React 用に作られていましたが、私のプロジェクトはシンプルな静的サイトだったので、Claude は React バージョンを導入することを拒否しました。それはプロジェクト全体の動作方法を変えてしまうからです。そして、代わりにプレーンな HTML でエフェクトを再構築しました。（あなたのプロジェクトが本当に React を必要とする場合 — ダッシュボード、チェックアウト、ログインなど — Claude は受け入れます。あなたが依頼したという理由だけで、プロジェクトを壊したりはしません。）
最初の試行でエフェクトが正しく動作しなかった場合 — 私の場合はそうでした — 何が問題かを説明するだけです:
1動画は表示されますが、コンポーネントが意図した通りにスクロールしていません。2もっと深く調査してください — ブラウザでページを開き、実際に何が起こっているかを検査し、3本当の原因を修正してください。
Claude は自分でページを開き、ライブで検査し、3 層奥にあった本当のバグを見つけました。教訓: 押し続けること。 何が壊れていて、何を期待していたかを説明すれば、Claude はあなたにさらに詳しく調べさせることで、ほとんどの問題を解決できます。
ステップ 10 — コピー、フォント、モバイル対応（クイックウィン）
GIF
コピー: AI が生成するコピーは、デフォルトで説明過多になります。プレミアムなコピーは抑制が効いていて感覚的です。「ドライエイジドリブアイ。16oz。60 日間。暖炉で焼く。」は、シェフが書いたように読めます。frontend-design スキルは Claude をこの方向に導くため、すべてのプロジェクトでその価値を発揮します。
フォント: Inter というフォントは非常に多用されているため、すぐに「AI が作った」とわかってしまいます。出力でこれを見つけた場合:
1Inter を、あまり使われていないフォント（Geist が適しています）にすべて置き換えてください。2見出しのフォントはそのままにしてください。
モバイル対応: 「レスポンシブ」は「スマートフォン向けにデザインされている」という意味ではありません。あなたのサイトはデスクトップよりもスマートフォンで見られることの方がはるかに多いでしょう。専用の対応を依頼してください:
1専用のモバイル最適化を行ってください。小さな画面で何を非表示にするか、2何をよりコンパクトにするか、何をリサイズするかを決定してください。3これは、ほとんどの人が実際に目にするバージョンです。
私の構築では、ナビゲーションが折りたたまれ、ワードマークの間隔が狭くなり、ボタンはより小さなバリエーションになりました。これで、8 項目すべてのチェックリストが完了しました。
ステップ 11 — 公開する（多くの人がつまずく部分）
現在、あなたのサイトは自分のコンピューター上にしか存在しません — その localhost URL はあなたのマシンでしか動作しません。共有するには、ホスティングと実際のドメインが必要です。
初年度ドメイン無料のホスティング会社を選んでください。シンプルな静的サイト（ログイン、チェックアウト、データベースなし）の場合、最も安い「プレミアム/共有」ティアで十分です。契約期間は 12 か月に設定してください — これが無料ドメインを受け取るための最低条件です。希望のドメインを検索し、取得します。私の場合、年間合計は約 $43 でした。ホスティング + ドメイン + メールです。
もし Claude が構築したものに実際のバックエンドがある場合（React に「はい」と言った、Node.js、データベースなどをセットアップした場合）、代わりに
ビジネス
ティアを選んでください — Node.js をサポートしています。ステップ 9 で Claude が React を受け入れたか拒否したかが、必要なプランを教えてくれます。
空白のページが読み込まれる原因となる唯一のミス: アップロードする際は、プロジェクトフォルダ「の中身」 を zip 圧縮してください — フォルダ自体ではありません。プロジェクトフォルダを開き、中身をすべて選択し（Cmd/Ctrl + A）、圧縮します。index.html が最上位にある zip ファイルを 1 つ作成してください。フォルダ全体を zip 圧縮すると、ホストが解凍時に 1 階層深くなり、ドメインにアクセスしても空白のページが表示されます。
ホスト側のオンボーディングで Migrate Existing Site → Upload Backup Files を選択し、ドメインを選び、zip ファイルをドラッグ＆ドロップし、送信します。ドメインをクリックします — すると、カスタム URL であなたの $10,000 のサイトが公開されています。
これで実際にいくら稼げるのか
サイト自体は $10,000 の価値を持つ資産です。これをどのようにしてお金に変えるか、以下に示します:
- 地元企業へのサイト販売 が最も早い道です。レストラン、歯科医院、ジム、不動産業者、請負業者は、1 ページのプレミアムサイトに$1,000～$5,000 を支払うのが一般的です。午後 1 回で構築し、それに見合った料金を請求します。月に 2 件のクライアントで $2,000 ずつ = 副業で 月額 $4,000。
- 経験豊富なフリーランサー / 小規模エージェンシー は、この種のカスタムでアニメーション化されたモバイルデザインのサイトに $5,000～$15,000 を請求します — そしてそれを数週間ではなく数時間で納品できます。このマージンこそが全てです。
- プロダクト化されたサービス: 「プレミアムワンページを 5 日間 $1,500 で」という固定パッケージを販売します。予測可能で、反復可能で、同時に複数実行できます。
- 自身のブランド: 自分のために使用する場合、「収益」とは、5 桁に見えるサイトがもたらす取引や信用です。
今日から始める人の現実的な軌道: 数週間以内に最初の有料クライアントを獲得し、実際に営業活動を行えば数ヶ月以内に月額 $1K～$5K の副収入 が可能です。構築自体はもはやボトルネックではありません — 営業が鍵です。
この後、何が変わるのか
GIF
以前は、プレミアムなカスタムウェブサイトを手に入れるには、コーディングを何ヶ月も学ぶか、開発者に数千ドルを支払うかのどちらかでした。この後、技術的な壁はなくなります。あなたは、本当に高価に見える、完全にカスタマイズされた、アニメーション化された、モバイルデザインのサイトを半日で制作でき、それを販売したり、自分のプロジェクトを本格的に見せるために使用したりできるようになります。
あなたが実際に身につけるスキルは「コーディング」ではありません。それはディレクションです — 高価に見えるものが何かを知り、それを正確に指示し、正しい状態になるまで調整を求めること。このスキルは、この後あなたが構築するすべてのサイトで複利的に成長します。
次のステップ（今日実行すること）
- Claude Pro にサインアップし、デスクトップアプリをインストールします。
- 両方のスキル（ステップ 2）をインストールし、自動モードをオンにします。
- Dribbble や Awwwards から 3～5 枚の参考スクリーンショットを保存します。
- ステップ 5 の構築プロンプトを実行します — 「明確にするための質問をしてください」を含めて — そして、注意深く回答します。
参考資料の収集と明確化のための質問をスキップしないでください。品質の 80% はここから生まれます。販売を心配する前に、1 つ のサイトを最初から最後まで構築してください — まずはそれが機能するのを自分の目で確認する必要があります。
正直なところ
これは魔法の薬ではありません。これは実際の作業を行う実際のツールです — しかし、その結果はあなた次第です。上記のプロンプトは出発点であり、スクリプトではありません。テンプレートのように見えるサイトと $10,000 に見えるサイトの違いは、あなたがもたらすセンス、あなたが選ぶ参考資料、そして「十分良い」で妥協せずに平坦なセクションに対して何度調整を求めるかです。
Claude は実行を担当します。あなたのディレクションと努力が結果を決定します。それをどうするかは、完全にあなた次第です。
*
*ブックマーク、リツイート、そして @thegreatest_sv のフォローをお願いします。さらなる最新情報、AI ツール、質の高いリサーチを提供します。免責事項（収益と情報）この記事に示されている収益や統計は、私の調査、自身の経験に基づく例であり、あなたが稼げる金額を保証するものではありません。結果は、ニッチ、コンテンツの質、RPM/CPM、オーディエンスのエンゲージメント、一貫性、努力、その他の要因によって異なります。これは財務、税務、法律、専門的なアドバイスではありません。ビジネス上の意思決定を行う前に、適切な専門家に相談してください。リソースとリンク
Claude Code のツールとリソース: https://claude.com/
**Frontend Design スキル (Anthropic 製):
**https://github.com/anthropics/skills/tree/main/skills/frontend-design
**UI/UX Pro Max スキル:
**https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
$10K ウェブサイト チェックリスト (無料 PDF ダウンロード): https://drive.google.com/file/d/1CCRCvSbJ1tNXmd2YDnUNr1XkTAguYG7v/view
デザイン参考サイト
Dribbble: https://dribbble.com
Awwwards: https://www.awwwards.com
Pinterest: https://pinterest.com
