Communitygithub.com

ランディングページ(説得モード)

ランディングページ、マーケティングサイト、プライシングページ、プロダクトローンチページ、地域ビジネスサイトの設計や改善に使用します。AIテンプレートパターンに頼らず、ヒーローコンセプト、セクション構造、コピー、ソーシャルプルーフ、CTA、コンバージョンの詳細をカバーします。

ランディングページ(説得モード) とは?

このスキルは、説得を目的としたランディングページの設計・改善を支援するものです。訪問者に特定の行動を取らせるというページの唯一の役割に焦点を当て、ヒーローセクション、セクション構造、コピー、コンバージョンの各要素を、汎用的なAIテンプレートではなく、製品やサービスに固有の特徴から導き出す方法を提供します。プロダクト主導、証明主導、約束主導など7つのヒーロータイプから最適なものを選択するための判断基準や、問題→成果のストリップ、料金プラン、FAQなど5~8個のセクションをバリエーション豊かに構成するためのメニューを提示します。また、コピーライティングでは顧客の言葉を使うことの重要性、コンバージョン詳細ではスティッキーヘッダーやフォーム設計、モーションバジェットでは1つの印象的な動きに絞るといった具体的なガイドラインを提供し、Claude CodeやCursorなどのAIエージェントから参照できます。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/F0rger123/CLAUDE-DESIGN-GOD-MODE/tree/main/skills/landing

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

ランディングページ(説得モード) は何をしますか?

ページの仕事はただ一つ:適切な訪問者に、たった一つのアクションを起こさせること。すべての要素がその仕事に対して価値を証明しなければなりません。

ヒーロー:最も特徴的なもので始める

ヒーロータイプは習慣からではなく、プロダクトから選びます。

ヒーロータイプ使用する場面構築方法
プロダクト主導SaaS、CRM、アプリ製品が主要な仕事をしている実際の、判読可能なUI画面(ぼやけた画像ではなくHTML)。信頼できるデータを表示
証明主導地域サービス、職人、代理店実際の作業の力強い写真+言葉での結果+実在する場合の評価・レビュー数
約束主導新カテゴリ、ブランド主導一つの大きなタイポグラフィによる声明。タイプそのものがビジュアルとなる
デモ主導ツール、ゲーム、インタラクティブそれ自体を、フォールドの上でプレイ可能またはインタラクティブな状態で表示
オファー主導Eコマース、イベント製品写真/価格/日付を中央に前面表示

「大きな見出し+グラデーションブロブ+2つのボタン+架空の統計行」というヒーローはデフォルトです。上記のどれも当てはまらない場合にのみ使用してください。

ヒーローチェックリスト:見出しは何であるか、誰のためのものかを示す(10語未満)。サブラインは成果を示す(25語未満)。アクションを明示するプライマリCTAを1つ(「無料見積りを予約」、「14日間の無料トライアルを開始」)。迷っている人のためのオプショナルなセカンダリCTA(「料金を見る」)。ビジュアルはヒーローの40~60%を占める。

セクションメニュー(5~8個を選択し、形状を変える)

  • 問題→成果のストリップ(顧客の言葉でのビフォー/アフター)
  • 仕組み(本当にステップがある場合のみ。その場合は番号付けでOK)
  • 機能紹介:広い画像とテキストの行を交互に、またはタイル内に実際のUIを配置した弁当グリッド。同一のアイコンカード3枚は避ける。
  • ソーシャルプルーフ:名前、役割/地域、可能であれば写真付きの実際の testimonial。ロゴは実在の顧客の場合のみ
  • 料金プラン:2~3プラン。おすすめはレイアウトで示し、単なるバッジではない。含まれるもののプレーンなリスト。年間トグルが存在する場合はそれも
  • 地域ビジネス向けのサービスエリア/営業時間/地図
  • 実際の異議(価格、契約、スケジュール、もしもの場合)に答えるFAQ
  • プライマリアクションを繰り返す最終CTAバンド

リズムを変える:フルブリードとコンテイン、明るい面と色付きの面、テキスト主体と画像主体を交互に。同じレイアウトのセクションを隣接させない。

コピー

  • システムの言葉ではなく、顧客の言葉で。「統合運用可視性」よりも「今日のすべての仕事を確認」。
  • 具体的であることは、賢いことよりも優れている。数字は真実の場合のみ。
  • 見出しとボタンは文の先頭のみ大文字。UI内で感嘆符は使わない。
  • 同じアクションにはどこでも同じ名前を使用。

コンバージョンの詳細

  • ヒーローがスクロールして見えなくなった後、プライマリCTAを表示するスティッキーヘッダー。
  • 地域ビジネス向けにモバイルで電話番号をタップして発信できるようにする。
  • フォーム:ビジネスに必要な最低限のフィールド。フィールドの上にラベル。送信後に何が起こるかを明記。
  • CTAの近くに信頼要素:保証、応答時間、ライセンス/保険(真実の場合のみ)。
  • ページの重さ:ヒーロー画像は200KB未満(AVIF/WebP)。フォントはプリロード。ファーストペイントをブロックするものは何もなし。

モーションバジェット

1つの印象的な瞬間(ヒーローのエントランス、または製品UIが主要なアクションをアニメーションする)。その他はすべて静止しているか、ユーザーに反応する。motion スキルを参照。

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

関連スキル