Communitygithub.com

ランディングページ

1人の訪問者、1つの約束、本物の証拠、1つのコールトゥアクション、アクセシブルな単一HTMLファイルで構成される、オファーの需要をテストするランディングページを作成・構築します。起業家がランディングページ、ウェイティングリスト、予約注文ページ、またはアイデアをオンラインでテストしたい場合に使用します。

ランディングページ とは?

このスキルは、スタートアップやプロジェクトの初期段階において、訪問者の関心を本物の需要に変換するためのシングルページHTMLランディングページを作成します。1人のターゲット訪問者、1つの明確な約束、本物の証拠(引用、数字、ロゴなど)、そして1つのコールトゥアクション(CTA)に焦点を当て、外部リンクを排除することで訪問者を目的のアクションに集中させます。このスキルは、スモークテスト、ウェイティングリストの収集、予約注文の受付に理想的で、ブランド要素が既にある場合はそれらを活用し、無い場合でもプレーンなページとして機能します。出力はアクセシブルでモバイルフレンドリーな単一のHTMLファイルであり、フォームデータの送信先(メールツールやスプレッドシートなど)を設定可能で、プライバシー通知を含みます。また、テスト計画(トラフィックソース、目標コンバージョン率、期間)を事前に定義し、ローンチ後の訪問者数、登録数、ソース別コンバージョンを追跡・分析するための指標を提供します。品質基準として、全てのクレームや証言は本物である必要があり、偽の希少性や社会的証明は禁止されています。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/teodstr/garage/tree/HEAD/skills/landing-page

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

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

ドキュメント

ランディングページ は何をしますか?

ランディングページは、スタートアップにとって最初の本当の実験となることがよくあります。見知らぬ人がメールアドレスを残さなければ、お金を払う可能性は低いのです。このスキルは、ページを作成し、単一のHTMLファイルとして構築し、次に何が起こるかを決定する数値を設定します。

使用するタイミング

  • 構築前に需要をテストするため(スモークテスト)、ウェイティングリストを収集するため、または予約注文を受けるため。
  • brand-identityの後で、名前と色がすでにある場合。ただし、プレーンなページでも機能します。
  • フルウェブサイトや検索エンジン戦略には使用しません。

入力

  1. ターゲット訪問者、問題、約束、および本物の証拠(許可を得た引用、数字、ロゴ)。
  2. 必要な1つのアクション:メール、予約注文、デモリクエスト。
  3. 存在する場合はブランド要素、およびフォームデータの送信先。

方法

  1. 1ページ、1人の訪問者、1つのアクション。 ターゲット訪問者と単一のコールトゥアクションを選択します。それから遠ざかるリンクは削除します。
  2. 最初にページの上部を書く: 訪問者への結果を述べる見出し(技術ではなく)、方法を説明する一行、コールトゥアクション、製品または結果の画像。テスト:見知らぬ人が5秒でそれが何であり、誰のためのものかを理解できるか。
  3. 次に残り: 顧客自身の言葉での問題(customer-interviewsから)、3つのステップでの仕組み、本物の証拠、主な反論への回答(価格、信頼、時間)、短いFAQ、そして再びコールトゥアクション。
  4. 正直に: 製品がまだ存在しない場合は、「ウェイティングリストに参加」または「予約注文、配送予定日…」と言います。決して証言、カウンター、または希少性をでっち上げないでください。予約注文の場合は、配送日と返金条件を明記します。
  5. 1つのHTMLファイルとして構築: セマンティックな見出し、画像の代替テキスト、読みやすいコントラスト、スマートフォンで動作。フォームは創業者が選んだサービス(フォームツール、ニュースレターツール、スプレッドシート)に投稿し、短いプライバシー通知でメールの使用方法を説明します(EUではGDPR準拠)。
  6. テストを計画: 訪問者の来源(ページと同じくらい重要)、人数、事前に決定した目標コンバージョン率、期間。最大2つの見出しをテストします。
  7. 結果を読む: ソース別の訪問者とコンバージョン、人々が尋ねた質問、そして立ち上げ前に設定した基準に対する決定。

出力

### ページ計画
訪問者:… | 約束:… | コールトゥアクション:… | 成功条件:…日以内に…人の訪問者のうち…%がコンバージョン

### コピー
見出し:… | その下の一文:… | ボタン:…
セクション:問題、仕組み、証拠、反論、FAQ

### HTML
<アクセシブルなファイル1つ、フォームアドレス設定可能、プライバシー通知含む>

品質基準

  • 見出しは特定の訪問者に対する結果を述べており、ページには1つのメインコールトゥアクションがある。
  • ページ上のすべての主張、証言、数字は本物であり、偽の希少性や社会的証明は一切ない。
  • ページはアクセシブルで、スマートフォンで動作し、収集したデータの使用方法を説明している。
  • トラフィック計画と成功基準は立ち上げ前に書かれている。
  • ユーザーの言語で書かれており、以下の用語を使用している。

用語

英語日本語 (標準)
Landing pageランディングページ
Call to action (CTA)コールトゥアクション (CTA)
Above the foldファーストビュー (スクロールせずに見える部分)
Conversion rateコンバージョン率
Waitlistウェイティングリスト
A/B testA/Bテスト

出典

  • Krug, S. (2014). Don't Make Me Think, Revisited (3rd ed.). New Riders.
  • Ries, E. (2011). The Lean Startup. Crown Business.
  • W3C. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. https://www.w3.org/TR/WCAG22/

Individual skills in this repo

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

関連スキル