mcpField
T
the-homepage

the-homepage

github.com/aidevgtmマーケティング・グロース329178 回インストール2 日前に更新
リポジトリ

the-homepage について

the-homepageは、開発者向けツールのウェブサイトを作るチーム向けのマーケティングスキルです。ホームページの訴求、セクションの順序、根拠、開発者が始めるための導線を解説します。

主な機能

  1. 01エンドユーザーの開発者に向けて書く
  2. 02ホームページの構成を明確に整える
  3. 03製品とその価値を説明
  4. 04根拠と始めやすい導線を追加
  5. 05購入担当者向けの訴求を分ける

活用シーン

  1. 01製品がすぐに伝わらないページを見直す
  2. 02開発者向けにページ構成を再編
  3. 03ヒーロー部分の主・副CTAを選ぶ
  4. 04企業向けやROIの訴求をホームページから分離

インストール

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

$npx skills add https://github.com/aidevgtm/gtm-cofounder --skill the-homepage

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

詳細

ホームページ

実際に読む人、つまり小切手を切る CTO ではなく、エンドユーザーである開発者に向けてホームページを書きましょう。開発者はあなたの支援者となり、社内で製品を売り込んでくれます。

こんな場合に使いましょう： ホームページが購入者や ROI に向けた内容になっている、気の利いた表現ではあるものの製品の内容が曖昧、開発者が 5 秒で関心を持つべきか判断できず、関心を持っても 5 分で使い始められない場合。

基本ルール（Czakon）

ホームページではエンドユーザーである開発者に語りかけ、エンタープライズ／ROI／購入者向けのメッセージは別のページ（エンタープライズ、料金、導入事例）に載せましょう。購入者向けにホームページを書くのは、そこにいない人に向けて書いているのと同じです。

フレームワーク：各セクションの順番（Czakon）

  1. フック／中心となるメッセージ：まず、これは何なのかをすぐに伝えます。カテゴリー（「モノレポ向け CI」）、有名な既存製品との比較（「Datadog の代替」）、または平易な説明を使いましょう。見出し＝それが何か · 小見出し＝誰向けか／どんな仕事に役立つか。
  2. ヒーロー：実際の製品画面を見せます。CTA は 2 つ用意します。使い始める（サインアップ）とドキュメントです。「自分にどんなメリットがあるのか？」に最初に答えましょう。理由ではなく、方法から伝えます。
  3. ヒーローの直後にソーシャルプルーフ：見覚えのあるロゴは、最も手早く信頼を得る方法です。実績があるなら、ユーザー数やスター数など、目を引く動的な指標を掲載しましょう。
  4. 価値提案と差別化：10 個ある代替製品の中から、あなたを選ぶ理由を伝えます（value-prop-that-converts を参照）。
  5. 使い始める方法：コンバージョンを大きく左右します。無料トライアル、クレジットカード不要、簡単なセットアップを用意しましょう。少しでも面倒な条件があると、開発者はすぐに競合へ向かいます。

デザイン： 読みやすいタイポグラフィ、ゆとりのある余白、「いかにも営業的な誇張」は避け、重いインタラクションは最小限にします。埋め込み型プレイグラウンドやコピーして貼り付けられるスニペットがあれば、すぐになるほどと思ってもらえます。

フレームワーク：必ず含めるもの（Frankl）

コピーに次の 6 つがすべて含まれているか確認しましょう。

  1. 解決策の前に、顧客の言葉で表した課題
  2. 悪役／否定できないトレンド
  3. 数字を含む出典が明確な証拠（名前 · 肩書き · 会社名）
  4. きっかけとなる出来事／緊急性
  5. ソーシャルプルーフ（匿名ではないもの）
  6. 試すまでの手間が少ない経路（無料プラン · ドキュメント · GitHub）

MVP ウェブサイト（Czakon）

すべてを作る必要はありません。まずは ホームページ · ドキュメント · 料金 · ナビゲーションバー（ログイン、サインアップ、お問い合わせ、GitHub） · 会社概要 から始めましょう（知名度のないブランドにとって、会社概要ページは信頼につながります）。その後、意図的に追加します：導入事例 → 比較ページ → ブログ → テンプレート → サンドボックス → エンタープライズページ。

透明性のある料金。 「料金については営業にお問い合わせください」は、「高額で手続きも遅い」という印象を与えます。できるだけ価格を明示しましょう。

判断フロー：ヒーローの CTA

Can a developer get value self-serve?
├─ YES → primary CTA "Get started" (signup/download) + secondary "Docs".
└─ NO  → primary CTA "Read the docs" / "See how it works"; don't fake a signup that dead-ends.

もっともらしく見える間違い

  • 購入者向けに書く：冒頭で ROI を語ると、開発者は離れてしまいます。
  • 何より先に理由を語る：何なのかを説明する前に、ビジョンを 3 文も並べてしまいます。
  • 「料金は営業にお問い合わせください」：セルフサービスへの信頼を瞬時に損ないます。
  • 使い始める方法がない：美しいヒーローがあっても、最初の一歩がわかりません。
  • 誇張したヒーローコピー：「現代のチームのための強力でシームレスなプラットフォーム」。何も伝わりません（value-prop-that-converts を実行してください）。

次の 30 分でやること

  • 懐疑的な開発者の視点でヒーローを読みましょう。5 秒で、何なのか、そして自分向けなのかがわかりますか？
  • 5 つのセクションが順番どおりに揃っているか確認し、購入者／ROI 向けのコピーは専用ページに移しましょう。
  • クレジットカード不要で始められる手順を、ファーストビュー内か、1 回のクリックで見られる場所に置きましょう。
  • ShipReady でページをチェックし、10 項目のスコアカードを確認しましょう。

実際の開発者向けツールの GTM 経験をもとに、Adam Frankl（The Developer-Facing Startup）と Jakub Czakon（markepear.dev）のフレームワークを取り入れて作成しました。 実際のホームページを、数百件のレビュー経験をもとに一行ずつ徹底分析してほしい場合は、LinkedIn からご連絡ください。

コメント

Markdown 対応