マーケティング施策を実行する際、ランディングページ(LP)制作が必要になるシーンは多くあります。例えば、「DMを発送してWeb申込の先にLPを用意する」「大規模キャンペーン時に自然流入・Web広告の飛び先としてLPを用意する」など、様々なケースがあります。
しかし、LP制作の外注費用は決して安くありません。株式会社ユーティルのWeb幹事の調査[1]によると、LP制作外注の平均費用は55.4万円(中央値は40.0万円)となっています。IT補助金を活用する方法もありますが、やはり高額な投資と感じる方も多いでしょう。
近年はノーコードツールで中程度の品質のLPを作成できるサービスも増えていますが、本記事では生成AIを活用して高品質なLPを1時間で低コストで制作する方法をご紹介します。
本記事のターゲット
- マーケティング部署の施策担当者
- LP制作担当者
- 施策のROIを高めたい方
- LP制作を自分で行いたい方
LP制作の進め方とAIの活用ポイント
一般的なLP制作は、「1. 施策企画」「2. 構成案作成」「3. デザイン作成」「4. コーディング」「5. テストリリース/本番化」の5つのステップで流れていきます。
本記事では特に「2. 構成案作成」「3. デザイン作成」「4. コーディング」について、AIツール等を活用することで効率化していきます。具体的には、「2. 構成案作成」でClaudeとPowerPoint、「3. デザイン作成」でClaude、「4. コーディング」でCursorを活用します。
使用するAIツールの費用
今回使用するAIツールは、ClaudeとCursorです。いずれのClaudeとCursorも月額サブスクリプションサービスであり、3,000円/月程度で利用可能です。外注費用と比較すると、大幅なコスト削減になります。
それでは、実際にLPを制作してみましょう！
LP制作実践：1時間でLPを完成させる方法
LP制作の全体フローは約1時間(目安)で完了します。その内訳は以下の通りです。
- 施策企画：5分
- 構成案作成：10分
- デザイン作成：10分
- コーディング：20分
- テストアップ/本番化：15分
それでは実際に手を動かしながら制作手順を見ていきましょう。
STEP1. 施策企画 (5分)
LP制作の前に、施策の目的を明確にすることが重要です。5W1Hを具体的に言語化することで、以降の作業がスムーズに進み、競合との差別化も図ることができます。
今回は、横浜中華街に2025年4月に開店する餃子店を想定し、以下のように設定します
STEP2. 構成案作成 (10分)
LPの構成案とは、全体のストーリーラインや情報の流れを決める重要なステップです。ただ、LPのストーリーは、分かりやすく説得力のある「PREP法」に基づき作成されるのが一般的です。
「PREP法」とは、「Point(結論)」「Reason(理由)」「Example(具体例)」「Point(結論)」の順で情報伝達する文章構成手法です。こちらを踏まえて、構成案をClaudeに考えてもらいましょう。以下の文章をチャットして、構成案となるHTMLファイルを作成してもらいます。
以下の仕様を実現する飲食店のランディングページをHTML形式で作成してください。
また作成時にPREP法を用いて、初見の方でもわかりやすいページにしてください。
また大企業にも見劣りしない高品質で、レスポンシブなページにしてください。
# 仕様
場所：横浜中華街
誰向け：日本全国からの観光客、地元横浜市民、餃子好きな方
何を提供する：餃子とチャーハンとドリンク
開店時間：平日10:00~19:00、土日祝休み。2025年4月開店
企業ビジョン：地元食材にこだわり、美味しい餃子にこだわるこのプロンプトを入力すると、Claudeがコーディングを開始し、以下のようなHTMLファイルを生成してくれます。構成としては悪くないように思います。
STEP3. デザイン作成 (10分)
先ほど生成されたHTMLをブラウザで開いて画面キャプチャし、デザイン上修正したいポイントをまとめましょう。ここでは、PCに導入されている可能性が高い「PowerPoint」に貼り付け、修正ポイントを書き込んでいくと便利です。
修正内容をPowerPointにまとめたら、内容をPDFエクスポートし、同様にClaudeに修正指示を出してきましょう(生成AIはPDF形式のほうが解釈しやすいため)。
修正ポイントを添付した
内容を確認し、修正してください
無事修正してくれたようですので、実際に画像を差し込んでいきましょう。
画像差し込み
LP用の画像を準備する際も、Claudeに必要な画像リストを作成してもらうと効率的です。今回は、画像を格納するフォルダをimgフォルダとします。
Claudeでリストアップされたファイル名称でimgフォルダに画像を格納します。実際の画像がない場合は、商用利用可能な素材サイトや生成AI等を活用するのも一つの方法です。
STEP4. コーディングと調整 (20分)
コーディングと言われると「難しそう」と感じる方も多いかと思いますが、安心してください。AIエディタツール「Cursor」を使用して効率的に行います。Cursorは「AIと対話しながら情報を更新できるコードエディタ」です。
先ほど作成したHTMLファイルをCursorで開き、「Go > Add Symbol to New Chat」をクリックすることで、左手に「コード編集画面」、右手に「チャット画面」の以下の表示になります。
サイトをリリースするにあたり内容をチェックし、問題のある点をCursorのチャット画面で修正指示していきましょう(リリースする際の注意事項・チェックリストについても、別途記事をリリースしますので、参考にされてください)
今回のケースの場合、以下のような修正指示出しをするケースがありそうです。
以下を修正してください
- FVの「横浜中華街で、至極の餃子体験」を「横浜中華街で、極上餃子を」に変更してください
- 一部の文章が「横浜餃子工房」となっているため、「ワニラボ餃子飯店」に変更してください
- こだわりメニューエリアで、チャーハン・ドリンクのタブについても作成してください。また必要な画像pathも教えてください
- 営業時間の時計アイコンを黒色にしてください
- 「今すぐ予約する」の遷移先URLをXXXXXに変更してくださいCursorが自動的にコードを修正した結果を反映すると、以下のようになりテストアップが迎えられる品質になってきました。
STEP5. テストアップ/本番化 (10分)
コーディングが完了したら、Webで閲覧できる状態にして、レイアウトの崩れや動作ミスがないかチェックします。契約している管理サーバーに対してFTP接続しファイルをアップロード、テスト環境が存在しない場合は、HTMLのメタタグに以下を追加し、検索結果に表示されない対策を施しましょう。
<meta name="robots" content="noindex,nofollow" />
崩れや動作ミスがなければ、本番環境や先ほどのメタタグを取り除くことで本番化完了です。以下にテストアップしたサイトリンクを添付しておきますので参考にされてください。
最後に
本記事では、生成AIツール「Claude」「Cursor」を使って、高品質なLPを低コストで効率的に制作する方法をご紹介しました。最大のメリットは以下3点です。
- コスト削減：外注費用(平均55.4万円)と比較して、大幅なコスト削減が可能
- スピード：1時間程度でLP制作が完了
- 内製化：生成AIの活用により、専門知識がなくてもLP制作が可能
LP改修は定期的に発生するものです。その都度、外注費用が発生する仕組みでは、施策のROI（費用対効果）が思うように上がりません。生成AIを活用したLP制作を内製化することで、迅速かつ低コストでマーケティング施策を展開できるようになります。
特にコーディングの知識がなくても、本記事で紹介した方法なら自分でLP制作を行うことが可能です。ぜひこの機会に、生成AIによるLP制作に挑戦してみてください。
参考文献
[1] 「LP（ランディングページ）の制作費用と料金相場を徹底解説【相場早見表・事例あり】」(https://web-kanji.com/posts/landing-page-price)
[2] 「Claude」(https://claude.ai/)
[3] 「Cursor」(https://www.cursor.com/ja)
