Claude Codeで、外注なら10万円台の販売ページが約5分｜コードは書かずに、会社員でも隙間時間に【実演つき】

わど｜AI界隈のマスコット

2026年11月1日 16:47

先に、できあがったものをお見せします。

Claude Codeに日本語でお願いして作った、副業の販売ページです。コードは書いていません（コピーして貼るコマンドがいくつかあるだけです）。

このページがあると、できるようになることは2つです。

SNSのプロフィールやLINEにリンクを1本貼っておけば、知らない人でも読んで、そのまま申し込める
商品の説明を、1人ずつメッセージで送らなくてよくなる

1件目は、知り合いに直接声をかければ売れます。でも2件目からは、毎回1人ずつ説明していたら時間が足りません。説明はページに任せて、こちらはリンクを貼るだけにする。売れる回数を増やせるのは、ここからです。

販売ページを外注すると、構成と素材をこちらで用意しても10万円台が相場です（出典は記事の最後に）。副業の2件目のために出すには重いし、手作りもできない。そんな販売ページが、修正も入れて約5分でできました。題材は例として置いた商品で、「人事の経験がある会社員が、小さなお店・会社の社長向けに、求人票を一緒に書き直す60分のオンライン相談」です。

やることはシンプルで、見た目はAIに任せて、自分は「誰向け・何が手に入るか・中身・値段・申込先」の5つを決めるだけです。

この記事は「売る商品が1つある人」向けです

売る商品がまだ決まっていない場合は、先に下の記事から読んでください。

その記事では、1件目はページではなく、名前の浮かぶ1人に直接売る話を書きました。

名前の浮かぶ1人に送ったメッセージなら、返事が来ても来なくても、数日で答えが出ます。

販売ページの出番は、1件目が売れたあと。2件目からは名前を知らない人にも申し込んでもらいたいので、紹介文やメッセージに貼れるリンクが1本要ります。それが今回の販売ページです。

1件目の前にページだけ作り込むと、整ったページがあるのに売上はゼロ、になりやすい。

Claude Codeをまだ入れていない場合の導入は、この記事では扱いません。

海外で伸びた3本は、作る前に何をしていたか

海外のYouTubeで、Claude Codeでランディングページ（LP）を作る動画が10月に入って伸びています。10月18日時点で、Dara Denneyさんの回（10月14日公開）が再生5.6万、midudevさんの回（10月9日）が再生27万。3本の概要欄とチャプターを見比べました。

1本目はDaraさん。概要欄で「Claude Codeで23分、コードを書かずにLPを作った」と言い切り、Willさんのlanding page用スキルを配っています。チャプターは、準備と素材集め→生成→プレビューを見てプロンプトで修正→無料で公開の順で、この記事の実演もこの順番です。

2本目はmidudevさん（スペイン語）。レストランの写真から、デザイン用のスキルを入れてLPを作り、最後はスマホで仕上げる回です。動画生成サービスの提供を受けた回で、動画の生成は有料です。

3本目はSebastian Hardyさんの50秒のショート（10月10日公開）。無料のデザインスキル3本で「よくあるAIの見た目」を避ける話です。

共通点は次の3つでした。

3本とも、作る前にLP用・デザイン用のスキル（Claude Codeに読ませる手順書のファイル）を入れている
長い2本は、商品の情報や写真を先に集めてから作らせている
長い2本は、できたページをプレビューで見て、プロンプトで直している

AIに丸投げすると、見た目はAIっぽくなる。3本とも、その対策を人の手直しではなく、1のスキルで済ませていました。

Claude Codeで作る（実演）

実演は2026年10月19日、有料プランのClaude Codeです。空のフォルダから始めました。記録を残すために、普段の画面ではなく、指示を1本ずつ渡す動かし方にしています。黒い画像は、そのときの記録の文字をそのまま表示したものです。

私のMacの普段の設定のまま動かしたので、細かい結果は環境で変わるかもしれません。

スキルを入れる

スキルは、AIに渡す「作り方の手順書」のファイルです。使ったのは、Elayaさんが無料で公開している販売ページ用のスキル（landing-page-design）。下のコマンドを、作業フォルダで実行して入れます。

mkdir -p .claude/skills
git clone https://github.com/elayadesign/ai-design-skills
cp -r ai-design-skills/skills/landing-page-design .claude/skills/

コマンドはこれだけで、コピーして貼れば終わりです。コードを書く場面はありません。

入ったかどうかは、Claude Codeに聞けば分かります。

このフォルダで販売ページを1枚作ります。
landing-page-design スキルが使える状態か確認して、使えるならスキルの名前と、何をしてくれるスキルかを日本語で3行で教えてください。
まだファイルは作らないでください。

12秒で「使える状態」と返ってきました。

5項目を書いて、作らせる

本番のプロンプトです。自分の商品で作るときは、【商品】と【ページに入れる5項目】の中身を差し替えます。

このフォルダに、私の副業の販売ページを1枚作ってください。

【作り方】
- index.html 1ファイルだけで作ってください（CSSも同じファイルの中に）
- 画像ファイルは使わず、文字と色と図形だけで作ってください
- スマホで見たときに読みやすいことを最優先にしてください
- 見た目は landing-page-design スキルに従ってください
- 日本語で書いてください

【商品】
人事の仕事を続けてきた会社員の私が、小さなお店・会社の社長向けに、求人票を一緒に書き直す60分のオンライン相談です。

【ページに入れる5項目】
1. 誰向け：求人を出しても応募が来ない、小さなお店・会社の社長
2. 得られる変化：相談が終わった時点で、求人サイトにそのまま貼れる書き直し済みの求人票が1枚手元に残る
3. 中身：オンライン60分×1回／事前に今の求人票を送ってもらう／終了後に修正版を1回送る
4. 値段：申込ボタンの直前に1回だけ表示。金額は「【価格】」と書いたままにする
5. 申込先：申込ボタンは1種類だけ。リンク先は「【申込フォームURL】」と書いたままにする

【守ってほしいこと】
- お客様の声・実績の数字・受講者数など、私が渡していない事実は書かないでください。入れたほうがよい場所には「【要記入】」と書いてください
- 「誰でも」「必ず」「絶対」は使わないでください
- 作り終わったら、私が書き換える場所（【価格】【申込フォームURL】【要記入】）の一覧を最後に出してください

約4分で、ページのファイル（index.html）が1つできました。最後の修正を終えたページを、スマホ幅で全体を撮るとこうなります。

見てほしいのは、渡していない情報の扱いです。担当者の名前、人事歴の年数、お客様の声。どれも作り話で埋めずに【要記入】で止まっていました。ページ全体で14か所。

ちなみに、頼んでもいないFAQが8問ついてきました。答えの欄は8問中6問に【要記入】。答えるのは結局こちらです。

最後に出てきた、書き換える場所の一覧です。

一番下には、特定商取引法に基づく表記とプライバシーポリシーも【要記入】で入っていました。

スキルなしと並べる

同じプロンプトを、スキルを入れていない別の空フォルダでも1回実行しました。AIは「スキルが入っていないので使えていない」と書いたうえで、一般的な作り方で作っています。

上がスキルなし、下がスキルあり。どちらもスマホ幅の1画面目です。

スキルなし版は2分弱で、紺の背景にオレンジで強調する作り。スキルあり版は倍くらいの時間がかかって、余白が広く文字の大きい、落ち着いた配色になりました。どちらも画像は使っていません。

写真を1枚も用意しなくても、スキルあり版は文字と余白だけで販売ページの形になっていました。中身（5項目・担当者の欄・FAQ）はどちらにも入っているので、スキルが変えるのは見た目です。

プレビューを見て直す

次に、申込ボタンの位置を直すつもりでこう頼みました。

index.html をブラウザで開いてください。
スマホの幅で見たときに、申込ボタンが最初の2画面のうちに1回出るように直してください。
直したら、どこを変えたかを3行で教えてください。

46秒で返ってきた答えの1行目は「ブラウザで開くことはできませんでした」。私の実行方法ではファイルの書き換えだけを許可して、コマンドの実行は許可していなかったからです。AIはページを1度も見ていません。それでも価格と申込ボタンの枠を1画面目のすぐ下へ移し、ページ下部のボタンは文字のリンクに変えていました。位置は計算上の見込みです。

上が直す前、下が直した後。1画面目の一番下に価格の欄が見え始める位置に上がりましたが、ボタン自体はまだ1画面目の外です。スマホの画面で見ると、ボタンは2画面目の頭に入っていました。AIはページを見ずに計算で合わせてきた。それを確かめるのは人の側です。

最後に自分のスマホで開いて見る作業は、人の側に残ります。midudevさんの動画がスマホで仕上げていたのと同じです。

申込先を1本つなぐ

最後に、申込ボタンのリンク先を差し替えます。今回は練習用のダミーURLです。

申込ボタンのリンク先「【申込フォームURL】」を、次のURLに差し替えてください。
https://example.com/form
ほかに【申込フォームURL】が残っていないかも確認してください。

14秒で差し替わりました。AIの返事には「文字を探すコマンドが動かないので全文検索はしていない」とあったので、検索すると、【申込フォームURL】の残りは0件でした。

フォルダの中には index.html が1つ。ブラウザで開けば、冒頭のページが出ます。

自分で決める5項目

実演でAIがやったのは、見た目と並べ方です。ページの中身は、プロンプトに書いた5項目からしか出てきていません。5項目が空欄のままなら、出てくるのは整った空っぽのページだ。

自分の商品で書くとしたら、どれで手が止まりそうですか？

誰向け：2件目以降に来てほしい人を1文で。業種・規模・今の状況も入れる。書けないときは、1件目の買い手の肩書きと、そのとき困っていたことを書く
得られる変化：受け取った直後に手元に残る物。例なら「書き直した求人票」。書けないときは、1件目の買い手に「何が一番助かったか」を聞く
中身：時間・回数・形式・事前に用意してもらう物・終わった後の対応。1件目で実際にやったことを、そのまま書けば埋まる
値段の置き場所：申込ボタンの直前に1回だけ。金額が決まっていなければ、【価格】のまま公開しない
申込先1本：ボタンは1種類で、リンク先は1つ。LINE公式アカウントの友だち追加URLか、Googleフォームなどの申込フォーム。決まらないうちは公開しない

お客様の声と実績の数字は、書かないと決めておきます。2件目を取りに行く段階では、まだ無いからです。無い項目をAIに埋めさせると作り話になるので、プロンプトで禁止して【要記入】にさせる。声が集まってから足せば十分です。

公開前に確かめること

出す前に見るのは4つです。

【価格】【申込フォームURL】【要記入】が残っていないか
申込ボタンを押して、自分のLINEかフォームに本当に飛ぶか
自分のスマホで開いて、ボタンが早めに出てくるか
有料の商品なら、特定商取引法に基づく表記が要る場面がある。要否は公開前に確認する

一般公開は今回は実演していません。Daraさんの動画では無料のホスティングサービス（Vercel）で公開していますが、ここではパソコンに保存して、ブラウザで開いて確かめました。

よくある質問

Q. Claude Codeは無料で使えますか？

A. 無料プランでは使えません。Claudeの有料プラン（Proは月払いで20ドル〜）に含まれています（2026年10月19日に公式の料金ページで確認）。

Q. スキルを入れなくても作れますか？

A. 作れます。スキルなし版も2分弱で、5項目と【価格】【申込フォームURL】が入ったページになりました。違うのは見た目です。紺×オレンジのはっきりした作りが自分の商品に合うなら入れなくていい。余白の広い落ち着いた見た目にしたいなら入れる。上の2枚を見比べて、好みで決めてください。

Q. 写真や画像は入れられますか？

A. 今回は「画像ファイルは使わない」と指定したので、画像入りは試していません。midudevさんの動画は写真から作っていますが、動画の生成は有料サービスでした。

Q. 特定商取引法の表記は必要ですか？

A. 有料の商品を売るなら、要る場面があります。今回もAIがフッターに【要記入】として置いてきました。要否はこの記事では判断していません。

見た目はAIに任せて、5項目を決める

販売ページは、デザインとコードが分かる人の仕事に見えます。今回の実演では、見た目はスキルを入れたClaude Codeが約5分で形にしました。止まるとしたら、誰向けか、何が手に入るか、どこで申し込むかが決まっていないときです。

まずは5項目のうち「誰向け」だけ書いて、プロンプトの【ページに入れる5項目】の1番に入れてみてください。そこが書ければ、残りは1件目でやったことを思い出せば埋まります。

作ってみて5項目のどこで手が止まったか、コメントで教えてもらえたらうれしいです。参考になったら「スキ」もください。次にどこを深掘りするか、それを見て決めます。

販売ページができたら、その先へ

まずはこの記事の手順を、そのまま試してみてください。自分の商品の5項目を書いて、プロンプトを渡し、販売ページを出す。ここは一人でもできる。

その先で、こんな壁にぶつかることがあるかもしれない。

「ページはできたけど、誰にどう届ければ申込が来るのか分からない」

「一人だと、公開ボタンを押す手前で止まってしまう」

「2件目のあと、商品を増やして売り上げを伸ばしていく流れを体系的に学びたい」

そうなった時に、わどAIスクールを思い出してもらえたらうれしいです。

下のLINEに友だち追加すると、0からAIで月100万までのロードマップを52分にまとめた限定動画が届きます。合言葉を送る必要はありません。作ったページを誰に届けるかで止まったら、集客から販売までの全体像を先にそちらで見てください。
▶ LINE 友だち追加　https://bit.ly/46ioegH

で、これとは別に、個別ロードマップ作成会に来てくれた人限定で、豪華50大特典も渡しています。

0から100までのロードマップ説明動画、AIツールの使い方をまとめた無料の会員サイト、AIの実例やマネタイズの方法まで詰め込んだ50個のコンテンツが全部もらえます。販売から改善までの流れを学べる素材が揃っています。

個別ロードマップ作成会でできること：

60分、Zoomで1対1。話すのは参加者ひとりのことだけです。

これまでの経験・失敗・いまの強みを、直接聞いて棚卸し
「本当はこうなりたい」から逆算して、現在地から収益までの一本道をその場でロードマップに
コンテンツ販売か、AIを使った運用代行か。商品がなくても進める方向性まで一緒に決める
話した内容はまとめて、振り返りとして後から送る

▶ LINE 友だち追加　https://bit.ly/46ioegH

羊軍団で待ってますね🐑

出典

#ClaudeCode #副業 #販売ページ #LP制作 #AI副業 #会社員 #生成AI #AI活用 #ノーコード #コンテンツ販売