📅 開発期間: 2026年7月20日 〜 2026年7月23日（約4日間）
🤖 AIコーディングアシスタント（Cursor）を活用し、営業用の専用LP（ランディングページ）をゼロから4日間で公開しました。
はじめに
有限会社Macplanningでは、これまで会社概要と起業ブログを掲載した既存のホームページ（macplanning.com）を運用してきました。しかし、実際に業務改善システムのご相談をいただくには、会社紹介だけでは弱いと感じていました。
「うちの現場、何から相談すればいいか分からない」
そんな見込み客の背中を押すために、営業に特化した専用LP（consult.macplanning.com） を新しく構築することにしました。会社案内ではなく、「相談して行動してもらう」ことだけを目的にしたページです。
1. きっかけ — 会社紹介だけでは営業につながらない
こんな課題がありました
- 🏢 既存HPは会社概要・実績中心で、「今すぐ相談したい」と思わせる導線が弱い
- 📞 問い合わせのハードルが高く、「要件を整理してから連絡してください」感が出てしまっていた
- 🎯 想定顧客（情シスがいない学校・法人・団体）に刺さる言葉になっていなかった
- 📅 問い合わせ後の日程調整にメールの往復が発生していた
理想の姿
【Before】会社HP経由の問い合わせ
見込み客 → 会社概要ページを見る → 「相談していいのか分からない」→ 離脱
【After】専用LPでの導線
見込み客 → 現場課題への共感コピーを読む → 「要件なしでOK」の無料相談CTA
→ フォーム or カレンダーでその場で日程確定2. なぜAIでLPを自社開発したのか
選択肢の比較
| 方法 | 費用 | スピード | コピーの作り込み |
|---|---|---|---|
| LP制作会社に外注 | 数十万円〜 | 数週間〜 | ヒアリングに時間がかかる |
| ノーコードツール（STUDIO等） | 月額費用 | 早い | テンプレート依存 |
| AIと一緒に自社開発 | ほぼ無料 | 4日間 | 経営者の言葉で何度でも書き直せる |
今回の進め方
会社概要用の落ち着いたトーンではなく、現場の悩みに直接語りかけるコピーをAIと一緒に何度も書き直しました。
- 💬 「『情シスがいない学校・法人』に刺さる言葉に直して」
- 💬 「御用聞きにならない、経営者向けの提案スタンスを前面に出して」
- 💬 「相談フォームとカレンダー予約を1ページの中でタブ切り替えできるようにして」
コピーだけでなく、UIの構成・実装まで一貫してAIとの対話で進められるのが、外注やノーコードツールとの一番の違いだと感じました。
3. 作ったLPの全体像
consult.macplanning.com の構成
| セクション | 内容 |
|---|---|
| ヒーロー | 「現場の『手作業・属人化』を、AIの力で限りなくゼロへ。」というキャッチコピー＋即相談CTA |
| 現場の課題 | 「〇〇さんしか分からない」「ひたすらコピペと手書き」など、あるあるな悩みを提示 |
| ソリューション | Webhearingでの現場ヒアリング → 無料モック作成 → 既存システムへの「接木」導入、の3ステップを提案 |
| 実績 | SES受発注管理システム、情報保護型マッチングサイトなどの開発事例 |
| 無料相談 | 問い合わせフォームとGoogleカレンダー連携の予約枠を、タブで切り替えて選べる |
技術スタック
| 項目 | 技術 | 選定理由 |
|---|---|---|
| フレームワーク | Next.js（React） | コンポーネント単位でセクションを管理しやすい |
| 構成 | タブ切り替え式SPA | 1ページ内で「相談する」までの離脱を減らす |
| 予約機能 | Googleカレンダーの予約枠を埋め込み | 日程調整のメール往復をなくす |
| ホスティング | Cloudflareでmacplanning.comとは別サブドメイン公開 | 会社HPと営業LPの役割を分離 |
4. 開発の過程 — AIとの共同作業
Phase 1: ベースラインの保存
まず既存のCreate Next Appの初期構成をベースラインとして残し、コピーの方向性が違う案は variants/ 配下にアーカイブしながら試行錯誤しました。既存サイトを壊さずに複数案を比較できたのが良かった点です。
Phase 2: コピーのすり合わせ
「現場目線」と「経営者目線」、両方のトーンを行き来しながらコピーを調整。最終的に「御用聞きにならない、現場と経営の橋渡し役」という立ち位置に着地しました。
Phase 3: タブ式SPA・相談導線の実装
- ホーム／現場の課題／ソリューション／実績／無料相談、の5タブ構成に再設計
- 無料相談タブに、問い合わせフォームとカレンダー予約を並列で設置
- 「【要件なしでOK】無料相談する」ボタンをヒーロー直下に配置し、迷わず行動できる導線に
Phase 4: 公開
会社HP（macplanning.com）とは別ドメイン（consult.macplanning.com）として、Cloudflare経由で公開しました。
5. 現在の状況と次のステップ
現在のステータス
| 項目 | 状態 |
|---|---|
| LP開発 | ✅ 完了 |
| 公開 | ✅ 完了（consult.macplanning.com） |
| 問い合わせ・予約の効果検証 | 🔄 これから |
| コピー・導線の改善 | ⬜ 効果検証後に実施予定 |
LPはすでに公開していますが、実際にどれだけ相談につながるかの効果検証はこれからです。反応を見ながら、コピーやCTAの位置を改善していく予定です。
今後のブログ予告
- LP経由での問い合わせ・相談件数の実績報告
- コピーやCTAをA/Bで改善した過程
- 会社HPと営業LP、それぞれの役割分担の見直し
6. まとめ — 起業家へのメッセージ
AIでLPを自社開発するメリット
- ✅ 開発費用がほぼゼロ — AIコーディングアシスタントの利用料のみ
- ✅ コピーを何度でも書き直せる — 外注のように「1回のヒアリングで決め切る」必要がない
- ✅ 会社HPと営業LPを役割分担できる — 「紹介する」と「行動してもらう」を別ページに分離
- ✅ 4日間というスピード感 — 思いついたその週のうちに公開できる
注意点
- ⚠️ コピーの方向性が定まるまでは、何度も書き直す前提で進めた方がいい
- ⚠️ LPは「公開して終わり」ではなく、反応を見て改善し続けるもの
- ⚠️ 予約・フォームなど外部連携部分は、実際に自分でテストしてから公開する
伝えたいこと
「営業力の向上は、大きな広告予算がなくても始められる」
専用のLPを1本作るだけでも、見込み客に「相談していい」と伝わる導線ができます。AIコーディングアシスタントを使えば、その最初の一歩を数日間で踏み出せます。
この記事は有限会社Macplanningの実体験をもとに執筆しました。
LP公開後の効果検証について、続報をお届けする予定です。
コメントを残す