導入
「LP（ランディングページ）を作りたいけど、デザインもコーディングもわからない」——そんな悩みを抱えている方は多いのではないでしょうか。Web制作会社に依頼すれば数十万円かかり、自分で作ろうとしても何から手をつけていいか分からない。そんな状況を一変させるのがClaudeCodeです。ClaudeCodeに対して「こんなLPを作りたい」と日本語で伝えるだけで、プロが作ったような構成・デザイン・コーディングを一気に出力してくれます。本記事では、初心者でも今日からLPを作れるよう、構成設計、デザイン指示プロンプト、HTML/CSSの生成、レスポンシブ対応、コンバージョン最適化までを実践的に解説します。読み終える頃には、自分のサービス紹介LPを公開できる状態になっているはずです。
結論：ClaudeCodeを使えばLPは半日で作れる
結論から言えば、ClaudeCodeを使えば未経験者でも半日から1日でLPを完成させられます。ポイントは次の5つです。第一に、LPの目的（問い合わせ獲得、商品販売、メルマガ登録など）を明確にし、ClaudeCodeに伝えること。第二に、ターゲット顧客とその悩みを具体的に伝え、構成案を提案させること。第三に、ファーストビュー・課題提起・解決策・実績・CTAという王道の構成を踏襲したHTML/CSSを生成させること。第四に、スマートフォン対応のレスポンシブデザインを最初から指示すること。第五に、計測タグ・フォーム・CTAボタンの最適配置を施し、本番環境にデプロイすること。これらの工程はすべてClaudeCodeとの対話で完結します。コードを一行も書く必要はありません。本記事ではこの流れを、実際に動くサンプルコードと使えるプロンプト例で示します。
1. LP制作の全体像とClaudeCodeが担う役割
LP制作は、おおまかに「企画」「構成」「ライティング」「デザイン」「コーディング」「公開」「改善」の7工程に分かれます。従来は工程ごとに別の専門家が必要でしたが、ClaudeCodeはこれらの大半を一人でこなせるようサポートしてくれます。企画段階では「誰に・何を・どう伝えるか」の整理を一緒に考え、構成段階では業界別のテンプレートを提示し、ライティングではキャッチコピーや本文を生成し、デザインとコーディングではHTML/CSSを直接出力します。公開後は計測結果をもとに「ここを改善したい」と伝えるだけで修正案を作ってくれるため、ABテストの仮説立案も容易です。
ClaudeCodeをLP制作に使う最大のメリットは「試行錯誤のコストがゼロに近い」ことです。デザイナーに修正を依頼すると数日かかる作業が、ClaudeCodeなら数分で別案を出せます。たとえばファーストビューの色味を「もっと信頼感のある青系に」と伝えるだけで瞬時に修正版が出てきます。これにより、A案とB案を並べて比較しながら最適解を探すという、本来は予算が必要な改善プロセスを個人でも回せるようになります。
一方で注意点もあります。ClaudeCodeはあくまで指示に忠実なアシスタントなので、「何を作りたいか」が曖昧だと出力もぼんやりします。LPの目的、ターゲット、競合、独自の強み、訴求ポイントを言語化しておくことが、良いLPを生む前提条件になります。本記事の後半で、この言語化を補助するヒアリングプロンプトも紹介します。
2. 事前準備：プロジェクトフォルダとClaudeCodeの起動
まずは作業フォルダを準備します。ターミナル（Macなら「ターミナル」、Windowsなら「PowerShell」）を開き、デスクトップに作業用フォルダを作成します。
mkdir ~/Desktop/my-lp
cd ~/Desktop/my-lp
claude
claude と入力するとClaudeCodeが起動し、対話モードに入ります。ここから日本語で指示を出していきます。最初に行うべきは、プロジェクトの全体方針を共有することです。次のプロンプトをコピーして使ってみてください。
プロンプト例1：プロジェクト初期化
これからLP（ランディングページ）を作ります。
まずは下記の前提を理解してください。
- 目的：問い合わせ数の最大化
- ターゲット：30〜50代の中小企業経営者
- 商品：業務効率化コンサルティングサービス
- ゴール：ファーストビューから問い合わせフォーム送信までの導線を最適化
- 技術：HTML / CSS / 軽微なJavaScriptのみ。フレームワークは使わない
- ファイル構成：index.html, style.css, script.js, images/
これから順を追って指示を出すので、勝手にコードを書き始めず、
まずは全体の構成案を5つの観点で提案してください。
このようにルールを最初に伝えておくと、ClaudeCodeが「いきなりコードを書く」ことを防げます。LPは構成が9割と言われるほど、骨子の設計が重要です。
3. LPの王道構成と構成案を引き出すプロンプト
LPには「読まれる順序」が存在します。多くの優良LPは次の8ブロックで構成されています。ファーストビュー（FV）、共感・課題提起、解決策の提示、商品の特徴、お客様の声・実績、料金、よくある質問、最終CTAです。この型に沿って依頼すると、ClaudeCodeはほぼ完璧な構成案を出してくれます。
プロンプト例2：構成案の依頼
業務効率化コンサルティングサービスのLPの構成案を作成してください。
以下のブロック構成で、各ブロックに「目的」「掲載する内容」「想定文字数」「
読了後に読者が感じてほしい感情」を表形式で提示してください。
1. ファーストビュー
2. 課題提起
3. 解決策
4. サービスの特徴（3つ）
5. お客様の声
6. 料金プラン
7. FAQ
8. 最終CTA
文字数は全体で3,000〜4,000字を目安にしてください。
ClaudeCodeは表形式で各ブロックの設計図を返します。ここで気に入らない部分は遠慮なく指摘してください。「課題提起をもう少し感情に訴える内容に」「お客様の声を3名から5名に増やしたい」など、自然言語で何度でも修正できます。構成が固まったら次のステップに進みます。
4. キャッチコピーと本文を生成するプロンプト
構成が決まったら、各ブロックの本文を生成していきます。ここでも大切なのは「具体性」です。漠然と「キャッチコピーを作って」と言うと月並みなものが返ってきますが、ターゲットの悩みや得たい未来を伝えると刺さるコピーが返ってきます。
プロンプト例3：キャッチコピー生成
ファーストビューのキャッチコピーを10案出してください。
条件は以下の通りです。
- ターゲット：従業員30〜100名の製造業の経営者
- 悩み：紙とExcelでの管理から脱却できず、残業が常態化している
- 提供価値：3ヶ月で業務時間を平均30%削減
- トーン：信頼感があり、誇張しない
- 文字数：30字以内
- 数字を入れた案を必ず3つ含めること
返ってきたコピーから1つを選び、「これをメインに、サブコピーも作って」と続けます。本文の生成も同様です。
プロンプト例4：課題提起ブロックの本文生成
構成案の「課題提起」ブロックの本文を執筆してください。
- 文字数：500字程度
- 構成：共感→課題の深堀り→放置するリスク
- 読者：紙とExcelで管理している製造業の経営者
- 文体：です・ます調、専門用語を避ける
- 最後の一文で「次の章を読みたくなる」流れを作る
ライティングの段階で重要なのは、ClaudeCodeに「読者の気持ちの動き」を意識させることです。読者がどこで頷き、どこで不安になり、どこで希望を感じるかを設計するよう促すと、単なる説明文ではない感情に訴えるLPコピーが生まれます。
5. HTML/CSSをClaudeCodeに生成させる実践
本文と構成が揃ったら、いよいよコーディングです。ClaudeCodeにHTML/CSSを書かせる際のコツは、「デザインの方向性」を最初に明確に伝えることです。色、フォント、雰囲気、参考にしたいサイトの傾向などを具体的に指示します。
プロンプト例5：HTML/CSSの生成
これまで決めた構成と本文をもとに、index.html と style.css を生成してください。
デザイン方針は以下の通りです。
- メインカラー：#1E3A8A（落ち着いた紺色）
- アクセントカラー：#F59E0B（行動を促すオレンジ）
- フォント：Noto Sans JP
- 雰囲気：信頼感、誠実、清潔感
- ボタンは角丸、ホバー時に少し浮き上がるアニメーション
- セクション間は十分な余白を取る
- ファーストビューは画面いっぱいに広がるヒーロー画像＋キャッチコピー
- フォームは最終CTAブロックに配置（氏名・会社名・メール・相談内容）
これで土台のコードが生成されます。実際に出てくるindex.htmlの一部は以下のようになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3ヶ月で業務時間30%削減｜製造業向け業務効率化コンサル</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<header class="hero">
<div class="hero__inner">
<h1 class="hero__title">紙とExcelの限界を、<br>3ヶ月で終わらせる。</h1>
<p class="hero__sub">製造業の業務時間を平均30%削減するコンサルティング</p>
<a href="#cta" class="btn btn--primary">無料相談はこちら</a>
</div>
</header>
<section class="problem">
<h2>こんなお悩みありませんか？</h2>
<ul class="problem__list">
<li>毎月の集計に3日かかっている</li>
<li>属人化していて休めない</li>
<li>残業が常態化している</li>
</ul>
</section>
<!-- 以下、解決策・特徴・声・料金・FAQ・CTAブロックが続く -->
</body>
</html>
CSSも同時に生成されます。
:root {
--color-main: #1E3A8A;
--color-accent: #F59E0B;
--color-bg: #ffffff;
--color-text: #1f2937;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Noto Sans JP', sans-serif;
color: var(--color-text);
line-height: 1.8;
}
.hero {
background: linear-gradient(135deg, var(--color-main), #2563eb);
color: #fff;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 24px;
}
.hero__title { font-size: 3rem; font-weight: 700; margin-bottom: 24px; }
.hero__sub { font-size: 1.25rem; margin-bottom: 40px; }
.btn {
display: inline-block;
padding: 16px 40px;
border-radius: 8px;
font-weight: 700;
text-decoration: none;
transition: transform .2s, box-shadow .2s;
}
.btn--primary {
background: var(--color-accent);
color: #fff;
}
.btn--primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(0,0,0,.15);
}
このコードをそのままindex.htmlとstyle.cssに保存し、ブラウザで開けば動作確認ができます。ClaudeCodeはファイルを直接作成・保存もしてくれるので、「これらをファイルに書き出して」と頼めばOKです。
6. レスポンシブ対応とアクセシビリティの実装
LPはスマートフォンでの閲覧が主流です。アクセスの7割以上がモバイルというデータもあります。ClaudeCodeにレスポンシブ対応を依頼するプロンプトを紹介します。
プロンプト例6：レスポンシブ対応
現在のstyle.cssに、以下のブレイクポイントでレスポンシブ対応を追加してください。
- スマホ：〜767px（1カラム、フォント縮小、余白も縮小）
- タブレット：768px〜1023px（コンテンツ幅720px）
- PC：1024px〜（コンテンツ幅1080px）
また、ボタンはスマホでは横幅100%にし、タップしやすい高さ（最低56px）を確保してください。
画像はwidth: 100%; height: auto; を必ず指定してください。
追加されるCSSの例は次のようになります。
@media (max-width: 767px) {
.hero__title { font-size: 2rem; }
.hero__sub { font-size: 1rem; }
.btn { width: 100%; min-height: 56px; padding: 16px; }
section { padding: 48px 16px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
.hero__inner { max-width: 720px; }
}
@media (min-width: 1024px) {
.hero__inner { max-width: 1080px; }
}
アクセシビリティもLPの完成度を左右します。altテキスト、aria-label、コントラスト比、キーボード操作対応をClaudeCodeに依頼すれば、見落としがちな部分まで網羅してくれます。
プロンプト例7：アクセシビリティ強化
現在のHTMLを以下の観点で見直し、修正版を出してください。
1. すべてのimgにalt属性を付ける
2. CTAボタンにはaria-labelで具体的な行動を示す
3. 見出しタグの階層が崩れていないか確認
4. フォーカス時のアウトラインを残す
5. 色だけで情報を伝えていないか確認
7. コンバージョン最適化のチェックリストと改善プロンプト
LPの目的はデザインの美しさではなく、コンバージョン（問い合わせや購入）を獲得することです。ClaudeCodeにLPを「コンバージョン目線」でレビューさせるのは非常に有効です。
プロンプト例：CV最適化レビュー
現在のindex.htmlとstyle.cssをコンバージョン最適化の観点でレビューしてください。
以下の項目それぞれについて、現状の評価（5段階）と改善案を提示してください。
1. ファーストビューで価値が3秒以内に伝わるか
2. CTAボタンの数と配置は適切か（最低3箇所推奨）
3. 不安を解消する要素（実績、保証、お客様の声）は十分か
4. 入力フォームの項目は最小限か
5. 離脱を防ぐ工夫（スクロール追従CTA、終了警告など）はあるか
このレビュー結果をもとに、改善案を一つずつ実装していきます。たとえば「スクロール追従CTAを実装して」と頼むと、JavaScriptで実装してくれます。
// script.js
const fab = document.createElement('a');
fab.href = '#cta';
fab.className = 'fab';
fab.textContent = '無料相談する';
document.body.appendChild(fab);
window.addEventListener('scroll', () => {
if (window.scrollY > 600) {
fab.classList.add('fab--visible');
} else {
fab.classList.remove('fab--visible');
}
});
.fab {
position: fixed;
bottom: 24px;
right: 24px;
background: var(--color-accent);
color: #fff;
padding: 16px 24px;
border-radius: 999px;
text-decoration: none;
font-weight: 700;
opacity: 0;
transform: translateY(20px);
transition: opacity .3s, transform .3s;
pointer-events: none;
}
.fab--visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
8. 公開と効果計測：GoogleアナリティクスとフォームをClaudeCodeで設定
完成したLPは、レンタルサーバー、Netlify、Vercel、Cloudflare Pagesなどに公開します。社内向けに公開する場合はCloudflare Workers＋Cloudflare Accessの構成を推奨します。これらの設定もClaudeCodeに任せられます。
プロンプト例：Googleアナリティクスの設置
Googleアナリティクス4の計測タグをHTMLに埋め込んでください。
測定IDは G-XXXXXXX です。
また、CTAボタンクリックをイベントとして送信するJavaScriptも追加してください。
イベント名は generate_lead としてください。
フォームの送信先についても、Google FormsのURLを渡すだけで設定してくれます。本格的にやるならNext.js＋Cloudflare Workersでサーバーレスフォームを作る方法もありますが、まずは無料で動くGoogle Formsで十分です。
公開後は最低1週間データを取り、CTAクリック率と問い合わせ完了率を確認します。クリック率が低ければファーストビューを、完了率が低ければフォームを改善します。改善のたびに「現在のCV率は2%、これを4%にしたい。考えられる原因と改善案を10個出して」とClaudeCodeに相談しましょう。
9. よくあるつまずきと解決策
初心者がLP制作で詰まりやすいポイントは決まっています。第一に、画像が用意できないこと。これはUnsplashやPexelsなど無料素材サイトから取得し、ClaudeCodeに「この画像のURLをヒーロー画像として使って」と伝えれば解決します。第二に、文字が画像で読みにくくなる現象。半透明のオーバーレイをかぶせる方法をClaudeCodeに依頼すれば一発で解決します。第三に、モバイルでレイアウトが崩れること。メディアクエリを追加し、Chrome DevToolsで実機サイズを確認しながら微調整していきます。
これらすべてに共通するのは「症状を具体的に伝える」ことです。「なんかダサい」「うまくいかない」では改善できません。「ファーストビューの文字が背景画像に埋もれて読めない。コントラストを上げたい」のように、現象と理想を分けて伝えるとClaudeCodeの精度が一気に上がります。
FAQ
Q1. デザインのセンスがなくても本当に作れますか？ A. 作れます。本記事のプロンプトをそのままコピーして使えば、ベースは整います。あとは色やフォントを2〜3回調整するだけで、十分公開できる品質になります。
Q2. 公開にはサーバーが必要ですか？ A. 無料のNetlifyやCloudflare Pages、Vercelで公開できます。ドメインを使う場合のみ年間1,500円程度かかります。
Q3. WordPressとどちらが良いですか？ A. 1ページのLPならHTML/CSSで作る方が速くて軽量です。ブログや更新が頻繁にあるならWordPressが向いています。
Q4. ClaudeCodeで生成したコードに著作権の問題はありませんか？ A. 生成されたコードは自由に使えます。ただし画像素材は別途ライセンスを確認してください。
Q5. ABテストはどうやりますか？ A. Googleオプティマイズの後継ツールやVercelのEdge Configなどを使います。最初はファーストビュー2案を週単位で入れ替える「手動ABテスト」でも十分です。
Q6. スマホでの表示確認はどうすれば？ A. Chrome DevToolsの「デバイスモード」で確認できます。「F12」で開発者ツールを開き、左上のスマホアイコンをクリックします。
Q7. 本格的にWebマーケティングをやりたい場合は？ A. LPの公開はスタート地点です。広告運用、SEO、メールマーケティングを組み合わせ、ClaudeCodeにそれぞれの戦略を相談しながら進めましょう。
まとめ
ClaudeCodeを使ったLP制作は、これまで専門家に任せるしかなかった作業を一人で完結させる革命的な手段です。重要なのは、目的とターゲットを言語化し、構成→ライティング→コーディング→改善という流れを丁寧に踏むこと。本記事のプロンプトをテンプレートとして使えば、初心者でも高品質なLPを今日中に公開できます。デザインや技術の壁に阻まれてきた方こそ、ClaudeCodeを試してみてください。あなたのアイデアを世に出すスピードが、別次元になります。