Claude Codeを使ってLPを30分で作成する方法（非エンジニア向け）

「ウェブサイトを作りたいけど、コードは書けないし、外注すれば数十万円かかるし……」そんな悩みを抱えているあなたに朗報です。この記事では、AIツールClaude Codeを使って、コーディング知識ゼロの非エンジニアでも商品販売用のランディングページをわずか30分で作成する方法を、プロンプトの書き方からデザイン指示のコツ、スマホ表示の修正、サーバーへのアップロードまで全手順を隠さず公開しています。しかも必要なコストは月額たったの約3,000円。事例も交えながら、AIにサイト制作を任せる際に知っておくべきポイントや、よくある疑問への回答までまとめています。「自分の商品をネットで売りたいのに、技術とお金の壁で諦めかけている」という方は、ぜひ最後まで読んでみてください。

月額3,000円で「数十万円のサイト」が作れる時代が来た

つい最近まで、ネット上で商品を売るためのウェブサイトを作ろうと思ったら、ライターに文章を書いてもらい、デザイナーにデザインしてもらい、エンジニアにコーディングしてもらう——という流れが当たり前でした。

その費用は、安くても数十万円。ちょっと凝ったものにすると100万円を超えることも珍しくありません。

しかも、完成したサイトに「ここの文章を変えてほしい」「スマホで見たら表示が崩れている」と修正をお願いするたびに、追加で費用がかかったり、何日も待たされたりするわけです。

私ヒルトル・フィリップ太郎も、長年オンラインでビジネスをしてきた中で、このサイト制作の費用と手間にはずっと頭を悩ませていました。

ところが今、その状況が完全にひっくり返りました。

AIツール「Claude Code」を使えば、コードが一切わからない非エンジニアでも、商品販売用のウェブサイトを30分程度で作れてしまうのです。しかも、かかるコストは月額約3,000円のプラン料金だけ。

「いやいや、さすがにそれは盛りすぎでしょう」と思いますよね。正直、私も最初はそう思っていました。でも実際にやってみたら、本当にできてしまったんです。

今回は、私が実際にClaude Codeを使って商品販売用のランディングページ（LP）を作り、1ヶ月で200万円を超える売上を出した方法を、プロンプトの書き方からサーバーへのアップロードまで、全手順を隠さずお伝えします。

「自分の商品やオンライン講座を売りたいけど、サイトを作るお金も技術もない」と悩んでいるあなたには、きっと役に立つ内容だと思いますので、ぜひ最後まで読んでみてください。

「自分でサイトを作る」のハードルが高すぎた問題

オンラインで商品を販売するには、どうしても販売用のウェブサイトが必要になります。いわゆるランディングページ（LP）やセールスレターページと呼ばれるものですね。

ところが、このサイトを自分で作ろうとすると、とんでもないハードルが立ちはだかります。

まず、コーディングの壁。HTMLやCSS、JavaScriptといったプログラミング言語を理解していないと、思い通りのサイトは作れません。WordPressのテンプレートを使うという手もありますが、細かいカスタマイズをしようとすると、結局コードをいじる必要が出てきます。

次に、外注費の壁。プロに依頼すれば当然お金がかかります。文章を書くライター、デザインを作るデザイナー、コーディングをするエンジニア。それぞれに費用が発生して、トータルで数十万円から100万円になることも珍しくありません。1人でビジネスをやっている個人事業主にとって、これはかなり痛い出費です。

そして、意外と見落とされがちなのが修正のやり取りの壁です。「ここのテキストを変えてほしい」「スマホで見ると文字がはみ出ている」——こういった細かい修正を外注先に伝えて、直してもらって、確認して、また修正して……このやり取りだけで何日も、下手すると何週間もかかったりするんですよね。

私自身、以前はサイトと動画を作るのに何週間もかかっていた時期がありました。その間に「もう販売のタイミング逃しちゃったな……」と感じることも正直ありました。

つまり、お金がない人はサイトが作れない。時間がない人も作れない。技術がない人はもっと作れない。

これが、つい最近までの現実だったわけです。

Claude Codeとは？非エンジニアでも使えるようになった理由

そんな状況を一変させてくれたのが、Claude Codeです。

Claudeというのは、Anthropic（アンソロピック）社が開発しているAIツールで、ChatGPTやGeminiと並んで、今もっとも注目されているAIの一つです。

Claude公式サイトはこちら

https://claude.ai

その中でも「Claude Code」は、もともとエンジニア向けのコーディング機能として登場しました。ターミナル（黒い画面にコマンドを打ち込むやつです）を使って操作する必要があったので、正直なところ、私たちのような非エンジニアにはハードルが高いものでした。

ところが、最近大きな変化がありました。

Claudeのデスクトップアプリで誰でも使える

今では、Claudeのデスクトップアプリをインストールすれば、普通のチャット画面からClaude Codeを使えるようになっています。

つまり、ターミナルにコマンドを打ち込む必要は一切なし。日本語で「こんなサイトを作ってください」とチャットに書くだけで、AIがコードを書いて、サイトを作って、さらにはスクリーンショットを撮って表示を確認してくれるんです。

ブラウザ版のClaudeでも使えますが、個人的にはデスクトップアプリがおすすめです。デスクトップアプリなら、作成したファイルが自分のパソコンの中に直接保存されるので、いちいちダウンロードする手間がありません。

Proプラン（月額約3,000円）でも十分使える

「でもお高いんでしょ？」と思いますよね。

Claude Codeを使うには有料プランへの加入が必要ですが、Proプラン（月額20ドル＝約3,000円）で問題なく使えます。月額100ドルや200ドルのMaxプランもありますが、毎日大量のタスクをこなすのでなければ、Proプランで十分です。

私自身もProプラン（年間払い）を使っていて、最上位モデルのClaude Opus 4.6を選んでサイトを作っています。Opusは性能が高い分、使用制限に引っかかりやすいのですが、1つのサイトを作るくらいならProプランの範囲内で収まることがほとんどです。

もし途中で制限に引っかかってしまっても、大体5時間ほど待てばリセットされます。急ぎの場合は追加課金でリセットすることもできるので、必ずしもMaxプランを契約しなくても大丈夫です。

私が実際にClaude Codeで販売サイトを作った全手順

ここからは、私が実際にClaude Codeを使って「AIプロンプトマスター講座」の販売用LPを作った手順を、順を追ってお伝えします。

ステップ1｜まずは「売れる文章」をAIに書いてもらう

サイトを作る前に、まず必要なのは販売用の文章（セールスコピー）です。

「Claude Codeはコードを書くためのツールでしょ？」と思うかもしれませんが、実は普通に文章を書かせることもできます。もちろん、すでに文章が完成しているなら、それをそのまま渡して「この文章でサイトを作ってください」と言えばOKです。

私の場合は、文章の作成からClaude Codeにお願いしました。その際に重要なのが、プロンプト（AIへの指示文）の中身です。

具体的には、以下の情報をプロンプトに含めています。

• 背景情報：自分が何者で、どんなビジネスをしているのか
• 役割の指定：AIにどんな立場で仕事をしてほしいのか（例：「プロのコピーライターとして書いてください」）
• 商品の詳細資料：販売する商品がどんなものか、お客様のビフォーアフターはどうなるか
• フレームワーク：どんな流れで文章を書いてほしいのか（私の場合はPASTORフォーミュラを使っています）
• スワイプファイル：過去にうまくいったページの文章事例

「AIの性能が上がったんだから、プロンプトなんて適当でいいんじゃない？」という声もありますが、こちらが望む品質の成果物を素早く出してもらうためには、しっかりとした情報提供が欠かせません。適当な指示で出てくる文章と、背景情報やフレームワークを伝えて出てくる文章では、品質にかなりの差が出ます。

ステップ2｜キャッチコピーと構成案をAIに考えさせる

プロンプトを送ると、Claude Codeが内容を理解してくれます。ここで大切なのは、いきなり本文を書かせないことです。

まずは「キャッチコピー案と全体の構成案を考えてください」と指示を出します。すると、AIがキャッチコピーを5つほど提案してくれて、さらに文章全体の構成案も出してくれます。

その中から良さそうなキャッチコピーを選んで、「案Aを採用してください。その上で全体のコピーを書いてください」と伝えると、3分ほどで販売用の文章全体を書き上げてくれました。

この「構成案を先に確認する」というワンクッションを入れることで、後から大幅に書き直す手間を省けます。ちょっとしたことですが、こういう進め方が効率を大きく左右するんですよね。

ステップ3｜デザインの指示をAIに伝えてサイトを生成する

文章が完成したら、いよいよサイト制作です。

ここでも、ただ「サイトを作ってください」と言うだけではなく、デザインの方向性を具体的に伝えることがポイントです。

私が実際に使ったプロンプトはこんな感じです。

ダーク背景にネオンブルーとゴールドのアクセントカラーで、近未来感のある高級デザインにしてください。グラスモーフィズムのカード、スクロールアニメーション、フルスクリーンのヒーローセクションを取り入れてください。日本語フォントはNoto Sans JPを使用。CTAボタンは画面下部に固定表示してください。

このプロンプトを送ると、Claude Codeがコードを書き始めて、約6分後には完成したサイトがプレビュー表示されました。ふわっとしたスクロールアニメーションや、アコーディオン式のFAQセクションなど、なかなかおしゃれな仕上がりです。

ステップ4｜動画・画像・トラッキングコードを埋め込む

サイトの骨格ができたら、追加の要素を埋め込んでいきます。

私の場合は、セールス動画の埋め込みコード、商品のイメージ画像、Googleタグマネージャーのトラッキングコード、特商法やプライバシーポリシーへのリンク、申し込みボタンのリンク先を、まとめて1つのプロンプトで指示しました。

画像はあらかじめ自分のサーバーにアップロードしておいたものなので、そのURLをAIに渡して埋め込んでもらっています。動画の埋め込みコードを間違えて渡してしまい、一度表示がうまくいかないこともありましたが、正しいコードを再度伝えたら、すぐに修正してくれました。

こういった自分のミスで多少時間がかかることはありますが、それでもトータルで30分〜1時間程度で済んでしまいます。

ステップ5｜スマホ表示を確認して修正する

サイトがほぼ完成したら、忘れてはいけないのがスマホ表示の確認です。

今の時代、サイトを見る人の大半はスマートフォンからアクセスします。パソコンではきれいに見えていても、スマホで見たら文字がはみ出ていたり、ボタンが押しにくかったりすることがよくあります。

Claude Codeでは、ボタン一つでスマホ表示に切り替えて確認できるのがとても便利です。実際に確認してみると、ヘッダーの緊急性を示すテキストが中央揃えになっていなかったり、フッターの固定ボタンの表示がおかしかったりしたので、その旨をチャットで伝えました。

すると、AIが自分でスマホ画面のスクリーンショットを撮って問題箇所を特定し、修正してくれたのです。もちろん、最終的には実際のスマホ実機でも確認することをおすすめしますが、この段階でほとんどの表示崩れは解消されます。

ステップ6｜完成したファイルをサーバーにアップロードする

サイトが完成すると、指定したフォルダの中に「index.html」というファイルが自動的に作成されています。

あとはこのファイルを、FTPツールなどを使って自分の契約しているレンタルサーバー（私の場合はXサーバー）にアップロードするだけです。URLが発行されれば、もうそのサイトはネット上で公開されます。

ファイルをブラウザからダウンロードする必要もなく、自分のパソコンの中に直接保存されているので、そのままアップロードできるのがClaude Codeの便利なところです。

プロンプトの書き方が「サイトの出来」を左右する

ここまで読んで「手順はわかったけど、プロンプトの書き方がよくわからない」と感じたあなたに、もう少し詳しくお伝えします。

AIに渡すべき3つの情報

Claude Codeに限らず、AIに質の高い成果物を出してもらうためには、最低でも以下の3つの情報を伝えることが大切です。

1つ目は「背景情報」。あなたが何者で、どんなビジネスをしていて、誰に向けて商品を売りたいのか。これがないと、AIはあなたのことを何も知らない状態で文章を書くことになるので、的外れな内容になりがちです。

2つ目は「役割の指定」。「プロのコピーライターとして」「SEOに詳しいブログライターとして」など、AIにどんな立場で仕事をしてほしいのかを明確に伝えます。これだけで文章のトーンや品質が大きく変わります。

3つ目は「詳細な資料」。販売する商品の内容、お客様の悩みや理想の状態、過去にうまくいった文章の事例（スワイプファイル）など、AIが参考にできる材料を渡してあげましょう。

デザインの「言語化」もAIに手伝ってもらう

サイトのデザインを指示するときに困るのが、「こんな感じの雰囲気にしたいんだけど、なんて言えばいいかわからない」という問題です。

グラスモーフィズム、ニューモーフィズム、ヒーローセクション——こういった専門用語は、プロのウェブデザイナーなら知っていますが、私たちは知らなくて当然です。

そこでおすすめなのが、AIにデザインの指示文そのものを考えてもらう方法です。

たとえば「最近のトレンドを意識したかっこいいウェブサイトを作りたいんだけど、そのために有効なプロンプトのバリエーションをいくつか教えてください」とAIに聞いてみてください。すると、「ダークゴールド高級編」「ミニマルホワイト洗練系」「ネオンサイバー未来系」など、さまざまなデザインパターンのプロンプト事例を教えてくれます。

これをメモしておけば、次からは好きなデザインテイストを選んでコピペするだけです。デザインの知識がなくても、AIに「言語化」を手伝ってもらえば、プロ並みの指示が出せるようになります。

Claude Codeの「スクリーンショット機能」が修正の手間を激減させた

Claude Codeを使っていて、私が一番「これはすごい」と感じたのが、自動スクリーンショット機能です。

以前のAIモデルでサイトを作らせていたときは、こんなやり取りが日常茶飯事でした。

「ここの表示がおかしいので直してください」→（修正される）→「いや、まだ直ってないです」→（また修正される）→「うーん、まだちょっと違う……」

AIが実際のサイトの見た目を確認できないので、こちらが言葉で問題箇所を説明しても、なかなか伝わらなかったんですよね。

ところが今のClaude Code（Opus 4.6）は、サイトを作成した後に自分でスクリーンショットを撮って、表示に問題がないか自動的にチェックしてくれます。問題があれば自分で修正までしてくれるので、こちらが細かく指示を出す必要がほとんどありません。

しかもデスクトップ表示だけでなく、スマホ表示のスクリーンショットも撮って確認してくれるので、モバイル対応の修正も驚くほどスムーズです。

この機能のおかげで、以前は何往復もしていた修正のやり取りが、ほぼ1回で済むようになりました。サイト制作にかかる時間が劇的に短縮された最大の理由は、このスクリーンショット機能だと思います。

よくある疑問に答えます

無料プランでもClaude Codeは使えますか？

2026年3月時点では、無料プランではClaude Codeは使えません。最低でもProプラン（月額20ドル＝約3,000円）への加入が必要です。ただ、月3,000円で数十万円相当のサイトが作れると考えれば、投資対効果は抜群だと思います。

ChatGPTやGeminiでも同じことはできますか？

ChatGPT 5.4やGeminiでも、サイトを作ること自体は可能です。実際、日本語の性能もかなり上がっています。ただし、文章執筆の品質とサイト作成のコーディング性能を総合的に見ると、2026年3月時点ではClaude（Opus 4.6）が一番優れているというのが私の実感です。特にスクリーンショットを撮って自動修正してくれる機能は、他のAIにはない大きなアドバンテージです。

使用制限に引っかかったらどうすればいいですか？

Proプランの場合、Opusモデルでサイトを1つ作ると、かなりの使用量を消費します。制限に引っかかった場合は、約5時間待てばリセットされます。急ぐ場合は追加課金でリセットすることも可能です。また、最近は週間制限も導入されているので、使いすぎると週単位でリセットを待つ必要があることも覚えておいてください。

本当にコードの知識ゼロでも大丈夫ですか？

大丈夫です。 私自身、エンジニアではなくマーケッターですが、コードを一行も書かずにサイトを作っています。日本語で「こんなサイトを作ってください」「ここを直してください」「動画を埋め込んでください」とチャットするだけです。HTMLやCSSの知識は一切必要ありません。

30分で作ったサイトから1ヶ月で200万円超の売上が出た話

ここまでの手順で作成したのが、「AIプロンプトマスター講座」の販売用LPです。

1〜2万円ほどの価格で販売させていただいたところ、おかげさまで多くの方にご購入いただき、大体1ヶ月ほどで200万円を超える売上になりました。

やったことはシンプルです。Claude Codeで作ったサイトのURLを、メルマガやLINEで告知しただけ。広告費をかけて大量にアクセスを集めたわけでもなく、自分が持っているメディアで案内をしただけで、これだけの結果が出ました。

以前なら、サイト制作に数十万円、動画制作にも別途費用がかかり、完成まで何週間もかかっていたものが、今はすべてAIの力を借りて、数時間で完了してしまいます。人件費がほとんどかからないので、売上がそのまま利益に近い形で残るんですよね。

もちろん、サイトを作るだけで商品が勝手に売れるわけではありません。売れる文章の書き方を知っていること、信頼できるメディア（メルマガやLINE）を持っていること、そして商品そのものに価値があること——この3つが揃って初めて成果につながります。

ただ、その中の「サイト制作」という部分のハードルが、AIのおかげで劇的に下がったのは間違いありません。技術やお金がないから商品を売れない、という時代はもう終わりつつあります。

ぜひあなたも試してみてください

今回は、Claude Codeを使って非エンジニアでも30分で商品販売用のウェブサイトを作る方法をお伝えしました。

ポイントをまとめると、こうなります。

• Claude Codeはデスクトップアプリのチャットから、日本語で指示するだけで使える
• Proプラン（月額約3,000円）で十分にサイト制作が可能
• プロンプトには背景情報・役割・詳細資料を含めることが大切
• デザインの指示はAIに言語化を手伝ってもらうのがコツ
• スクリーンショット機能のおかげで修正の手間が激減
• 作成したHTMLファイルをサーバーにアップロードするだけで公開できる

これだけの手順でLPを作ることができてしまいますので、ぜひ試してみてください。以下にYouTube動画も貼っておきますので、この記事の内容を動画でみたい方はぜひご覧ください。

この記事の内容をYouTube動画で見てみる！

無料Eブック「最新AIツール大全」はこちら

「AIを使ってみたいけど、何から始めればいいかわからない」というあなたには、まず私が無料でお配りしている「最新AIツール大全」というEブックをおすすめします。200ページ近くあるボリュームで、Claudeをはじめとした最新のAIツールの活用法をまとめています。

上記の記事内のリンクから無料でダウンロードできますので、ぜひお気軽に手に取ってみてください。ダウンロードいただいた方には、今回のようなプロンプトの活用法や、私が販売しているオンライン講座のご案内もお届けしています。

ぜひお気軽にダウンロードして読んでみてくださいね。（可能な限り毎月アップデートを続けていきますので。）

関連記事はこちら