「LP（ランディングページ）をすぐ公開したいけれど、制作費が高い」「社内にWeb担当がいないのでサポートしてほしい」という相談が増えています。Eleventyという軽量なサイト生成ツールと、コードを書いてくれるAIのClaude Codeを組み合わせると、1人でも48時間以内に読み込みが速いLPを作って納品できるようになります。スピードが速いページは成果にも直結します。Portentの調査では、読み込み1秒のページは5秒かかるページよりも平均で約3倍コンバージョン率が高いと報告されています。Portent, 2023
この記事では、EleventyとClaude Codeを使って「48時間納品のLP制作代行」として月3万円の副収入を得るまでの流れを、できるだけ専門用語を避けながら紹介します。
なぜEleventyとClaude Codeの組み合わせが有利なのか
まずは道具の特徴を押さえましょう。
- Eleventy: HTMLファイルをまとめて自動で作るツールです。WordPressのようなサーバー処理がいらないので、ページが表示されるまでの時間がとても短くなります。ページ速度が上がると、広告の無駄打ちを減らせます。Think with Google, 2023
- Cloudflare Pages: 出来上がったファイルを世界中のサーバーに置いてくれる無料ホスティングです。訪問者は近くのサーバーからデータを受け取るため、体感速度が上がります。Cloudflare, 2024
- Claude Code (Claude 3.5 Sonnet): 長い指示やファイルを読み込んで、HTMLやCSSのコードを提案してくれるAIアシスタントです。約20万トークンまでまとめて読み込めるので、テンプレートや画像なども見ながら修正案を返してくれます。Anthropic, 2024
この3つを使えば、設計・コーディング・公開までをほぼ1人で完結させられます。スピードが売りの副業サービスを作りやすいのが大きな強みです。
48時間納品のパッケージ設計
差別化するために「48時間以内にLPを公開用データまで渡す」と約束しましょう。基本的な流れは以下の3ステップです。
- ヒアリング内容を整理し、ターゲット読者の悩みや強みをまとめる
- Claude CodeにLPの構成と文章のたたき台を作ってもらう
- Eleventyでページを生成し、Cloudflare Pagesにアップして確認リンクを渡す
問い合わせフォームはNetlify FormsやFormspreeの無料枠を組み合わせれば、コードの知識が少なくてもメール受信ができます。付け合わせとして、編集方法をまとめた簡単なマニュアルを作っておくと安心です。
| 役割 | 使うツール | お金 | ポイント |
|---|---|---|---|
| 調査と文章案 | Claude 3.5 Sonnet (Claude Pro) | 月$20 | 競合比較、CTA（行動喚起ボタン）案、FAQ案を一気に下書きしてもらう |
| コーディング | Claude Code + Eleventy | 無料 | Claudeにコードを生成させ、Eleventyで静的ページを作る |
| 公開 | Cloudflare Pages | 無料 | GitHubと連携して自動でデプロイできる |
| 計測 | Google Analytics 4 / Splitbee無料枠 | 無料 | 訪問・クリック・離脱率を確認し改善提案に使う |
| 画像 | nano banana（クレジット制） / Midjourney / DALL·E 3 | クレジット金額に応じて調整 | nano bananaのテンプレートでメインビジュアル・OGP・faviconを一括生成 |
実際の作業手順とClaude活用術
1. ヒアリングとリサーチ（0〜6時間）
GoogleフォームやNotionで、ターゲット顧客、魅力的なポイント、想定キーワードを簡単な言葉で記入してもらいます。回答をそのままClaudeに渡し、「強み」「お客様の悩み」「よくある質問」に分類してもらうと構成案が作りやすくなります。競合サイトのURLを貼れば、差別化できる要素も自動でまとめてくれます。
2. 構成とライティング（6〜12時間）
「AIDA（Attention→Interest→Desire→Action）」の順番でLPを組み立てたいときは、その意味も一緒に指示すると、初めての人でも扱いやすい文章を出してくれます。Claudeが生成したHTMLやテキストをEleventyのsrc/_layoutsに貼り付け、Tailwind CSSで見た目を整えましょう。わからないプロパティはClaudeに質問すれば、初心者向けの説明で返してくれます。
3. 実装と公開（12〜24時間）
完成したLPをGitHubに公開すると、Cloudflare Pagesが自動で公開用URLを発行します。クライアントにはそのURLを共有し、テキストの言い回しや料金表の数字などをチェックしてもらいます。同時にPageSpeed InsightsやLighthouseでページ速度を測り、LCP（ページが表示されるまでの時間）が2.5秒以内に収まっているか確認します。Web.dev, 2024
4. マニュアル作成と納品（24〜36時間）
Eleventyで文章を更新する手順、フォームの送り先を変える手順、OGP画像の差し替え方法などをスクリーンショット付きでNotionにまとめます。専門用語には「※」で補足を入れ、クライアントが迷わないようにしましょう。納品物はGitHubリポジトリ、公開URL、アクセス解析の閲覧権限、改善チェックリストの4点セットにすると丁寧です。
料金設定と利益の目安
標準プランとして「LP1本＋文言修正1回＋アクセスレポートの型」を30,000円で提供すると仮定します。ヒアリングや修正対応を含めても、1案件の実働は15時間前後で収まるので、時給2,000円以上を確保できます。追加オプションとして以下を用意すると単価を上げられます。
- ABテスト（2種類の案を比べる方法）用にCTA（行動喚起ボタン）文言やファーストビューの差分を2パターン追加（+10,000円）
- 英語やタイ語などの多言語対応（+15,000円）
- 月次のアクセス解析と改善提案レポート（+15,000円）
固定費はClaude Proと画像生成ツールを合わせても月5,000円程度です。月2件の案件を受注できれば、営業時間を含めても月6万円前後の粗利が期待できます。
集客とSEOキーワード戦略
依頼主になりやすいのは、広告運用代理店、toC向けSaaS企業、自治体案件を扱う制作会社です。ブログやnoteで「Eleventy LP制作代行」「Claude Code LP制作」「高速LP 制作 代行」といったキーワード記事を公開し、制作事例はX（旧Twitter）やLinkedInに投稿すると目に留まりやすいでしょう。過去案件があれば、公開前と公開後のPageSpeed Insights計測結果を並べて、改善効果を数値で示します。名刺管理サービス（SansanやEight）を活用して担当者に直接連絡するのも有効です。
品質保証と継続収益の作り方
納品後30日間は軽い文言修正やフォーム調整を無償対応すると、信頼につながります。その上で月額15,000円の保守プランを用意し、月1回のアクセスレポートと改善提案を届ければ、安定した継続収入になります。色やボタン文言を変えたときはClaude Codeに差分チェックをしてもらい、想定外の崩れがないか確認しましょう。慣れてきたら、予約システム付きテンプレートやNotionデータベースと連携したLPテンプレートを作り、学習スクールやサロン、オンライン講座など業界別に展開できます。
画像・ビジュアルの作り方
nano bananaを使うと、LPに必要な画像をテンプレートでまとめて作成できます。ブランドカラーやフォントを一度登録しておけば、同じトーンで複数のサイズを出力できるのでおすすめです。
nano bananaで3種類の画像を揃える手順
- nano bananaで新規プロジェクトを作成し、テンプレートから「Landing Page」カテゴリを選びます。ブランドカラー・ロゴ画像をアップロードしてワークスペースに保存しておくと後で再利用が簡単です。
- メインビジュアル（ヒーロー）: 比率1.9:1（1280×670px目安）のキャンバスを選び、「Claude Codeがコードを書いているノートPCと、完成したLPが並ぶ」イメージをプロンプトに入力します。背景色はブランドカラーに寄せ、完成した画像を
./images/main.webpとして書き出します。 - OGP画像: プロジェクト内でキャンバスを複製して1200×630pxにリサイズし、キャッチコピーとサービス名を大きめに配置します。完成したら
./images/ogp.pngとして保存し、src/_data/site.jsonのogImageや記事ごとの設定ファイルで参照パスを更新します。 - favicon: 512×512pxのキャンバスを追加し、ロゴの一部や
CCなどの頭文字をシンプルに配置します。書き出し後に24×24px用へ圧縮し、./images/favicon.pngとして配置します。
ヒアリング→構成→制作→公開→計測の5ステップがひと目で伝わる図解は、nano bananaで作ったデザインをPNGで書き出し、として記事内に挿入しましょう。速度改善の根拠としてPageSpeed Insightsの計測結果をキャプチャし、./images/pagespeed.pngに保存します。すべての画像には日本語ラベルを入れ、専門用語が出る場合は図の中やキャプションで補足してください。
まとめ
Eleventyの軽さとClaude Codeの自動コーディング支援を組み合わせると、個人でも短納期のLP制作代行を提供できます。Cloudflare Pagesの無料ホスティングを活用すれば、保守費用を抑えつつスピード重視のクライアントに応えられます。まずは自分のポートフォリオとして1本LPを作成し、制作プロセスと成果を公開して信頼を積み上げましょう。そこから月3万円の副収入を目指し、案件数を増やしていけば安定したAI活用副業に成長させられます。
