12-brief-landing-page

Name: 12-brief-landing-page
Author: minhnv0807

github.com/minhnv0807マーケティング・グロース63878 回インストール2 日前に更新

リポジトリ

12-brief-landing-page について

コンバージョンを目的とするランディングページを、要件整理から構成設計、HTML作成まで支援するスキルです。7つのセクションを基本形とし、流入元やページの目的に応じて構成を調整し、フォームや計測、公開前の確認項目も扱います。

主な機能

01商品、目標、流入元、素材の情報を収集
02単一の目標とCTAを軸にページを構成
03一般的な7つのセクションを定義
04流入元とページ目的に合わせて構成を調整
05フォーム、計測、公開前チェックに対応

活用シーン

01リード獲得ページのブリーフ作成
02広告流入向けの予約・販売ページの計画
03承認済みブリーフからHTMLページを作成

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/minhnv0807/ai-business-skills --skill 12-brief-landing-page

インストール後、Claude Code で/12-brief-landing-pageを入力して読み込まれたか確認します。

同梱ファイルreferences/ky-thuat-tracking-va-ab-test.mdreferences/template-brief-landing-page.md

詳細

簡潔なランディングページ

1ページ＝1つの目標＝1つのCTA。メニューなし、外部リンクなし、気を散らす要素なし。

情報収集

ユーザーには最大4つ質問します。

どのような製品／サービスですか？ 簡潔な説明、販売価格、ターゲット層。
ランディングページの目標は何ですか？ リード獲得（フォーム）、予約、購入、登録のどれですか？
主なトラフィックの流入元は何ですか？ Meta Ads、TikTok Ads、Google Ads、オーガニック、それとも組み合わせですか？
アセットはすでにありますか？ 製品の画像／動画、推薦コメント、ソーシャルプルーフの数値など。

基本原則

1ページ — 1つの目標 — 1つのCTA

原則	説明
目標は1つだけ	各ページは、フォーム入力、予約、購入のいずれか1つの行動だけを促します
ナビゲーションメニューなし	ヘッダーのメニューをなくし、ユーザーがページから離れるのを防ぎます
外部リンクなし	すべてのリンクはCTAまでスクロールするアンカーにし、外部へ誘導しません
モバイルファースト	ベトナムではトラフィックの70％以上がモバイルからです。まずモバイル向けに設計し、その後デスクトップ向けに設計します
読み込み速度は3秒未満	First Contentful Paint < 1.5s、Largest Contentful Paint < 3s
緊急性を促す要素	カウントダウン、数量限定、締め切りなどを常に1つ以上設けます

デバイス別の長さの目安

デバイス	ページ全体の長さ	平均閲覧時間
モバイル	6～8画面分のスクロール	90～120秒
デスクトップ	4～5画面分のスクロール	60～90秒

7つのセクション構成

セクション1 — ヒーロー（ファーストビュー）

目的： 5秒以内にユーザーの関心を引き、核心的な価値を伝えます。

要素	要件	文字数制限
見出し	主なメリットを明確に伝え、曖昧な表現を避けます	60文字
サブ見出し	メリットを得る方法を簡潔に説明します	120文字
メインCTA	動詞＋メリット、オレンジ色（#ff6b00）	25文字
ビジュアル	製品または成果の画像／動画	メイン画像1点
信頼バッジ	顧客数、評価、パートナーのロゴ	3～5個

コピーのテンプレート：

Headline: [Ket qua mong muon] — [Thoi gian/Dieu kien]
  Vi du: "Da sang min trong 4 tuan — khong can xam lan"

Sub-headline: [Phuong phap/San pham] giup [doi tuong] [dat ket qua] ma [loai bo noi lo].
  Vi du: "Lieu trinh facial chuyen sau giup chi em van phong lay lai lan da khoe manh ma khong mat thoi gian nghi duong."

CTA: [Dong tu] + [Loi ich]
  Vi du: "Dat lich tu van mien phi"

セクション2 — 課題（課題を顕在化させる）

目的： 悩みを的確に言い表し、ユーザーに「そうだ、まさにこの問題に直面している」と感じてもらいます。

要素	要件
3～5つの悩み	具体的な問題を、顧客の言葉で列挙します
影響	解決しないとどうなりますか？
感情	共感を呼ぶ言葉を使います：疲労、不安、落胆、自信喪失

テンプレート：

"Ban co dang gap nhung van de nay?"

- [Pain point 1 — mo ta cu the, co tinh huong]
- [Pain point 2 — hau qua cua van de]
- [Pain point 3 — cam xuc di kem]
- [Pain point 4 — da thu cach khac nhung khong hieu qua]

"Neu ban dang gap it nhat 1 trong nhung dieu tren — [ten san pham/dich vu] la giai phap."

セクション3 — 解決策（ソリューション＋仕組み）

目的： セクション2の問題に対する答えとして、製品／サービスを紹介します。

要素	要件
ソリューションの紹介	短い文を2～3文。長く書きすぎないようにします
3～4つの手順	プロセスを番号で示します：手順1 → 手順2 → 手順3 → 結果
差別化ポイント	競合や従来の方法と比べた3つのUSP
ビジュアル	各手順を説明する画像／アイコン

テンプレート：

"[Ten giai phap] hoat dong nhu the nao?"

Buoc 1: [Hanh dong dau tien cua khach] → [Ket qua buoc nay]
Buoc 2: [Hanh dong tiep theo] → [Ket qua buoc nay]
Buoc 3: [Hanh dong cuoi] → [Ket qua cuoi cung]

Tai sao khac biet:
- [USP 1]: [Giai thich ngan]
- [USP 2]: [Giai thich ngan]
- [USP 3]: [Giai thich ngan]

セクション4 — ソーシャルプルーフ

目的： 実際の成果によって信頼を築きます。

要素	要件	数量
推薦コメント	実名、実際の写真、具体的な成果	3～5件
数値	総顧客数、平均評価、経験年数	3～4項目
パートナーのロゴ	B2Bの場合、または大手ブランドがある場合	ロゴ4～6点
ビフォー／アフター	成果を比較する画像	2～3組
レビュー動画	顧客が体験を共有する動画	1～2本

推薦コメントのテンプレート：

"[Ket qua cu the voi so lieu]"
— [Ten], [Nghe nghiep/Vi tri], [Thanh pho]
[Hinh anh hoac avatar]

セクション 5 — リード獲得フォーム／メイン CTA

目的： コンバージョン — このセクションが最も重要です。

要素	要件
フォームの見出し	メリットと緊急性を改めて伝える
フォームの項目数	最小：名前＋電話番号（2項目）。最大：＋メールアドレス＋任意項目1つ
CTA ボタン	オレンジ色（#ff6b00）、大きく、目立つデザイン
約束	「情報は保護されます」または「無料相談、契約義務なし」
緊急性	カウントダウンタイマー、または「今月の残り枠は［X］枠です」

フォームのルール：

モバイル：フォームは画面幅いっぱいに表示します
フォームの各項目に、分かりやすいラベルと入力例のプレースホルダーを付けます
CTA ボタンの高さは最低 48px にします（モバイルでタップしやすくするため）
送信後：サンキューメッセージを表示し、リダイレクトするか、成功メッセージを表示します
目的が電話やメッセージの受信なら、メールアドレスは求めません

セクション 6 — FAQ（懸念への対応）

目的： よくある質問に 5～7 件答え、購入の障壁を取り除きます。

質問の種類	例
価格	「費用はいくらですか？追加料金は発生しますか？」
効果	「どのくらいで効果が出ますか？」
安全性	「副作用はありますか？」
手順	「どのように申し込めばよいですか？」
競合	「［競合／他の方法］とどう違いますか？」
保証	「保証や返金はありますか？」
所要時間	「どのくらい時間がかかりますか？」

形式： アコーディオン（開閉式）— モバイルではスペースを節約するため、デフォルトで閉じます。

セクション 7 — 最終 CTA（クロージング）

目的： 最後に、最も強く行動を促します。

要素	要件
見出し	価値全体を 1 文にまとめる
CTA ボタン	セクション 5 と同様に、オレンジ色で大きく表示
緊急性	締め切り／期限を改めて伝える
直接連絡	ホットラインの電話番号＋Zalo／Messenger のリンク（フォームに入力したくない人向け）

技術要件

パフォーマンス基準値（FCP、LCP、CLS、TTI、モバイル PageSpeed）、必須の 7 つの連携（Meta Pixel、GA4、Google Sheets、Zalo、UTM、TikTok Pixel、GTM）、SEO メタタグのサンプル、レスポンシブ対応の 3 つのブレークポイントの表については、references/ky-thuat-tracking-va-ab-test.md の「Yeu cau ky thuat」を参照してください。

アナリティクス追跡計画

追跡する 11 個のイベント（PageView、ViewContent、4 段階のスクロール深度、FormStart、Lead、ClickCTA、ClickPhone、ClickZalo）と、それぞれに対応するトリガーおよびプラットフォームについては、references/ky-thuat-tracking-va-ab-test.md の「Analytics Tracking Plan」を参照してください。

A/B テスト計画

優先順位に沿った 3 ラウンドのテスト手順（ラウンド 1：見出し＋CTA の文言 · ラウンド 2：フォーム項目数＋配置 · ラウンド 3：CTA の色＋緊急性を示す要素）、A/B のバリエーション、結論を出すルールについては、references/ky-thuat-tracking-va-ab-test.md の「A/B Test Plan」を参照してください。

成果物テンプレート

コピーして使える完全な Markdown テンプレート：ヘッダー＋一般情報の表＋7 つのセクションすべての内容記入欄＋技術要件のチェックリスト＋A/B テスト計画の 3 行については、references/template-brief-landing-page.md を参照してください。

BUILD 工程 — ブリーフから実行可能な HTML ページへ

ブリーフの作成は、まだ道のりの半分です。この工程では、ブリーフを実際の HTML ページに変換します。自分で構築する場合（Ladipage Custom HTML、静的 HTML ファイル）や、開発者に依頼する場合に使用します。

考え方：ランディングページは見た目のためではなく、コンバージョンのためにあります。各セクションには存在する理由が必要です。誰も気にしないなら、思い切って削除してください。

ステップ 1 — 最初のコードを書く前にモードを選ぶ

	MVP	Production
目的	確認する人が 15 分でページを見て、方向性を決められるようにする	広告配信に使う実際のページ
所要時間	30 分 — 超過したら作り込みすぎです	1～2 日
フォント	システムフォント（Arial／system-ui）	実際のブランドフォント
コピー	プレースホルダー。実際の文字数に合わせる	承認済みの実際のコピー
画像	寸法を記したグレーのプレースホルダー	実際の画像、圧縮済み
Pixel／トラッキング	なし	すべて実装
レスポンシブ	レイアウト崩れがないことだけ確認	375px／768px／1440px で完全に仕上げる

ルール： Production にいきなり取りかかってはいけません。まず MVP を作成 → 方向性の承認 → その後で本番版を構築します。MVP でレイアウトを修正するのは 5 分ですが、Production では半日かかります。

ステップ 2 — 目的に応じてセクションを割り当てます（常に 7 セクションとは限りません）

目的／トラフィックの種類	セクションの順序
リード獲得 — コールドトラフィック	ヒーロー → 課題 → 解決策 → 実績 → フォーム → FAQ → 最終 CTA
ウォームトラフィック（リターゲティング、ブランドをすでに認知）	オファー → 緊急性 → 実績 → フォーム
講座／イベント	ヒーロー → 紹介 → プログラム内容 → 講師 → お客様の声 → 価格 → FAQ → フォーム
地域密着型サービスの予約	ヒーロー → 実績 → プロセス → 価格 → 予約フォーム → FAQ

トラフィックがウォームであるほど、ページは短くします。ブランドをすでに知っている人に「課題」のセクションを読み直させると、離脱の原因になります。

ステップ 3 — ブロックの作成順序

以下の順序どおりに作成し、各ブロックを完成させてから次へ進みます。

#	ブロック	必須	最低限の内容
1	ヒーロー	はい	プレヘッドライン（小さなラベル） · ベネフィットを伝える見出し（機能ではなく） · サブヘッドライン 1～2 文 · メイン CTA · 短いソーシャルプルーフ（「参加者 X 人」／星の数） · 実際の画像（ありきたりなストック画像は使わない）
2	課題	はい	3 つの悩み：アイコン + 見出し + 1 文の説明 · 次につなぐ文：「上記のうち少なくとも 1 つに心当たりがあるなら……」
3	解決策	はい	見出し「[brand] がどのように解決するかをご紹介します……」 · チェックマーク付きの項目 3～5 個 · イメージ画像または実際のデモ
4	ソーシャルプルーフ	はい	お客様の声カード 2～3 枚：実際のアバター + 名前 + 役職 + 実際の引用 · 数字を添える（「受講生 200 人以上」、「ROAS 4.2x」）
5	オファー／価格	任意	プラン名 + 「一番人気」ラベル · 取り消し線付きの通常価格 + 現在の価格 · 含まれる内容の一覧 · 特典 · 緊急性（「残り X 枠」／「[日付] まで割引」） · 大きな CTA · 保証（「X 日以内なら返金」）
6	FAQ	推奨	最後の不安を解消する質問 5～7 個をアコーディオン形式で表示
7	最終 CTA	はい	緊急性を再度伝える · フォームまたは CTA ボタン · 信頼性を示す要素（ロゴ、保証、電話番号）

配色とタイポグラフィ： ブランドハブから取得します — [mau primary]、[mau secondary]、[font heading]、[font body]。まだない場合は、先に 46-brand-guideline を実行してください。配色を独自に作らないでください。

ステップ 4 — フォームとトラッキング

<form action="[WEBHOOK_URL]" method="POST">
  <input type="hidden" name="source"     value="landing-[ten-chien-dich]">
  <input type="hidden" name="utm_source" value="">
  <input type="hidden" name="utm_medium" value="">
  <input type="hidden" name="utm_campaign" value="">
  <input type="text"  name="name"  placeholder="Ho va ten *" required>
  <input type="tel"   name="phone" placeholder="So dien thoai *" required>
  <input type="email" name="email" placeholder="Email">
  <button type="submit">Dang ky ngay</button>
</form>

URL の UTM は 自動的に hidden field に入力される 必要があります — この手順がないと、どのキャンペーンからリードが来たのかわかりません。
Meta Pixel のイベント Lead と対応する GA4 イベントは、ボタンをクリックしたときではなく、フォーム送信が成功したとき に発火させます。
フォームにフィールドを 1 つ追加するごとにコンバージョン率が下がります。必須フィールドは最大 3 つにしてください。

Pixel／CAPI／UTM の設定詳細 → 53-tracking-setup。

ステップ 5 — 技術的なコンバージョンチェックリスト（公開前）

ステップ 6 — キャンペーンの標準タイムライン

時点	作業	担当者	ゲート
T-14	キャンペーンのブリーフを読み、ランディングページがアセット一覧に含まれていることを確認する	デザイナー / 開発者	`41-campaign-asset-list`
T-7	30分でMVPを作成 → レビューに提出する	デザイナー / 開発者	15分以内に方向性を承認（`47-design-review`）
T-6	MVPへのフィードバックに基づいて修正する（1回）	デザイナー / 開発者
T-5	完全な本番版を構築する（ランディングページは複雑なアセットのため、最初に着手する）	デザイナー / 開発者
T-3	トラッキングを設定し、フォームと速度をテストする	パフォーマンス担当	`53-tracking-setup`
T-1	コンバージョンチェックリストに沿って最終確認する	パフォーマンス担当 + リード	リリース前チェック
T-0	広告を配信する前に公開する		ランディングページのテストが完了する前に広告を配信しないでください

ルール： ランディングページは、キャンペーンで常に最初に作成するアセットです。広告、メール、Zaloなど、ほかのすべての施策がこのページに誘導するためです。ランディングページが遅れると、キャンペーン全体が遅れます。

品質チェックリスト

コンテンツ

Heroの見出しで60文字以内にメリットを伝えている
各セクションの目的が明確で、重複していない
ペインポイントに顧客の言葉を使っている（社内用語を使っていない）
実名と具体的な成果を記載したtestimonialが3件以上ある
すべてのCTAに動詞とメリットが含まれている。「Click here」や「詳しくはこちら」は使っていない
緊急性を促す要素（カウントダウン、数量限定、期限）がある
FAQですべての主な反論に対応している

デザイン

ナビゲーションメニューがない
外部ページへのリンクがない
モバイルレイアウトは1列で、フォントサイズは>= 16px
CTAボタンはオレンジ色で、モバイルでは幅いっぱいに表示される
画像にaltテキストがある
フォームの項目数は最大3つ

技術

4Gでの読み込み時間が< 3秒
Meta Pixel + GA4を設置済み
フォームのデータがGoogle Sheetsに送信される
新しいリードが発生したときにZaloで通知される
UTMパラメーターがフォームデータに保存される
OG image 1200x630を用意済み
noindex、nofollow（ランディングページにSEOは不要）

公開前

モバイル（iOS + Android）でフォームをテストする
PageSpeed Insightsで速度をテストする
リンクを共有したときのOG表示を確認する
Events ManagerでMeta Pixelをテストする
CTAリンクとアンカースクロールが正しく動作する

HTMLを自分で構築する場合

構築前にモードを選択済み（MVPまたはProduction）— いきなりProductionに着手しない
MVPを30分以内に完成させ、本番版の構築前に方向性の承認を得ている
セクションの順序は目的とトラフィックの温度感に基づいて選ぶ — 7セクションをデフォルトにしない
色とフォントはブランドハブ（[mau primary]、[font heading]）から取得する — 独自に決めない
フォームのhidden fieldがURLからUTMを自動取得する
Leadイベントはボタンをクリックしたときではなく、送信成功時に発火する
Hero画像は< 200KB、その他の画像にはloading="lazy"を設定する
375px幅で横スクロールが発生しないことを確認する
広告配信前にランディングページを完成させる — 未テストのページに広告を配信しない

Markdown 対応

ログインしてコメント

基本情報

作者: minhnv0807
リポジトリ: minhnv0807/ai-business-skills
カテゴリ: マーケティング・グロース
インストール数: 78
GitHub スター: 638

問題を報告