ホーム / 全スキル / コンテンツ制作 / landing-page-design
English (EN)简体中文 (ZH)日本語 (JA)
コンテンツ制作 · skills-shell/superpowers

landing-page-design

レイアウト規則、ヒーローセクション設計、CTA心理学を備えたランディングページCVR最適化。ファーストビュー（above-the-fold）のフォーミュラ、ソーシャルプルーフの配置、モバイル設計、Fパターン閲覧に対応。用途：スタートアップLP、プロダクトページ、SaaSマーケティング、CVR最適化。トリガー：landing page, hero section, above the fold, conversion optimization, landing page design, cta button, hero image, landing page layout, saas landing page, product page design, conversion rate, landing page best practices

L4 高権限 · 段階的認可と監査V1 コミット固定コマンド実行ネットワーク通信Dual-pass Audit
Author skills-shellGitHub skills-shell/superpowers ↗License MIT（仓库 README 徽标 'License: MIT' 与 .claude-plugin/plugin.json 中 "license": "MIT" 声明；但 pin 树内无 LICENSE 文件，GitHub API 对两 fork 亦报无 license —— 授权只出现在元数据/徽标，无正式许可文本）Commit becc256497
管理レベルは Skill の能力と推奨統制措置を示すものであり、品質や安全性の認証、利用可否の判定ではありません。使用の可否はユーザーおよび管理者が決定します。Agent 環境によって制約が異なるため、自動保護を仮定しないでください。第三者製 Skill の著作権は原著作者に帰属し、利用リスクは利用者が負います。

1仕組みと動作原理

tools/* シリーズと同構造の belt ホワイトリスト実行層を採用しつつ、本体は「ナレッジ・ルールベース」：9つのルール表（5大要素、Headline公式、セクション順序、ソーシャルプルーフ種別、フォーム、モバイル、ページ速度、よくある間違い）でLP設計手法を可読ルール化し、belt の画像生成例を添付。単なるツールカタログではなく「ガイド＋素材ツール」のハイブリッド構成。

guides/design/landing-page-design/SKILL.md
Everything visible before scrolling must communicate value in 5 seconds.
ASCIIワイヤーフレームにより above-the-fold の公式を可視化されたレイアウトテンプレート（Logo/Nav/CTA/Headline/Subheadline/Hero/Social proof）として提示し、agent が直接構造を模倣可能。

コピーライティング層を「公式＋良否対照例」で制約：Headline に5つのCV公式（Outcome without pain、Outcome in timeframeなど）を提供し、❌/✅ の対照リストで中身のない表現を回避。

guides/design/landing-page-design/SKILL.md
❌ "Welcome to Our Platform" (says nothing about value)
公式表＋NG例リストの二重制約：生成の方向性と除外対象を明確に示すことで、ポジティブプロンプトのみの場合よりも「高尚だが中身のない」コピーを抑止。

CTA心理学の明文化：コピー公式（動詞＋価値/成果＋任意のリスク低減策）と視覚ルール（高コントラスト、最小44px高、ファーストビューでの反復、プライマリ/セカンダリCTAの階層構造）を表形式で提示。

guides/design/landing-page-design/SKILL.md
**Formula:** Action verb + value/outcome + (optional: reduce risk)
「Learn More / Submit / Sign Up」を低コミットメントな悪例として指定するなど、ボタン文言レベルまで詳細に規定。

外部ファクトの取得は自前ロジックではなく検索アプリに委託：競合・データ調査に tavily/search-assistant と exa/answer の2つの belt アプリを使用し、ファクトチェックをプラットフォーム検索サービスに委任。

guides/design/landing-page-design/SKILL.md
belt app run tavily/search-assistant --input '{
「競合LPの調査」や「ソーシャルプルーフ用の統計調査」の例が示すように、agent が推測ではなく事前調査に基づいて設計することを意図。

素材生成向けに本番品質のプロンプトを直接提供：ヒーロー画像（flux-dev-lora 1248x832、seedream-4-5 2K）、OGPシェアカード（flux 1200x630、または html-to-image 埋め込みHTMLテンプレート）—プロンプト自体をデザインアセットとして活用。

guides/design/landing-page-design/SKILL.md
belt app run infsh/html-to-image --input '{
html-to-image の例では、インラインHTML/CSSを入力としてリモートレンダリングサービスに渡し、1200x630の画像を生成する軽量な「コード即デザイン」手法を採用。

2コア機能

01ファーストビュー（above-the-fold）の構造設計（5秒での価値伝達＋5大要素ルール表）
02Headline/Subheadline コピー生成（5つの公式＋❌✅ 対照リスト）
03CTA コピーおよび視覚ルール（動詞＋価値公式、44px、高コントラスト、主副CTA階層）
049段階のページセクション順序と各セクションの要点（Hero→Social Proof→Problem→Solution→How It Works→Testimonials→Pricing→FAQ→Final CTA）
05ソーシャルプルーフ6類型×配置マトリクスおよび競合データ調査（tavily/exa）
06フォーム・モバイル・パフォーマンス規則（入力項目1つごとにCV約11%減、48x48pxタップ領域、LCP <2.5秒など）
07ヒーロー画像およびOGP画像の素材生成・テンプレート出力（flux/seedream/html-to-image）

3外部依存関係

KindDependency / Endpoint
clibelt（inference.sh CLI）
packagebelt-sh/cli（npx skills add 安装）
api素材生成与检索 app：falai/flux-dev-lora、bytedance/seedream-4-5、infsh/html-to-image、tavily/search-assistant、exa/answer
network安装说明托管
package相关技能包 inference-sh/skills@ai-image-generation / web-search / prompt-engineering

4推奨統制措置と判定根拠

安全運用のための推奨統制措置
Agent 向け
段階的・都度認可、サンドボックス推奨
管理者向け
承認フロー、ロールバック可能、全履歴監査
判定根拠（ファイルパスと抜粋）
  • 网络端点: 外部ネットワークアクセスの宣言：platform belt CLI → inference.sh プラットフォーム（画像生成アプリ）。tavily/exa 検索アプリがクエリをサードパーティ検索エンジンに送信
  • SKILL.md: ホストCLIインタプリタまたは外部実行環境の呼び出しを宣言
監査ノート： 内蔵スクリプトや認証情報の読み取りは含まれていません。ナレッジ規則部分に副作用はなく、belt 部分は画像生成と検索のみに使用され、外部送信先も予見可能です（inference.sh および tavily/exa 検索サービス）。留意事項：① 検索クエリやプロンプトが外部送信されるため機密情報のマスキングが必要、② 検索結果を直接コピーに組み込むことによる低品質なWeb情報混入のリスク、③ サプライチェーン上の留意点（バージョン未固定のnpx、リネーム前のinference-shミラー、リポジトリ内のLICENSEファイル不在）、④ 本文規則に含まれる出典不明の統計値は事実ではなく経験則として扱うのが妥当。共通分類基準に基づき、本skillが呼び出す `belt` はサードパーティのnpm/npx配布CLI（`npx skills add belt-sh/cli` で導入）であり、`belt login` によるログイン状態で実行され inference.sh のアカウント枠・課金を消費します。「サードパーティCLIの呼び出しを伴い、クォータや認証状態に関与する」ため、判定はオレンジ（評価後使用）。なお、skillソースコード自体にはトークンや秘密情報の読み取り処理は含まれていません。

5二重目の独立検証

  • [discrepancy] description 声称覆盖 F-pattern reading — grep -i 'f-pattern|reading pattern' 仅命中第 3 行 description 自身，正文全篇无 F-pattern 阅读模式相关规则——该宣称在源码内无内容支撑。
  • [ok] above-the-fold / 5 元素 / section order / social proof / form / mobile / page speed 均有正文支撑 — 各主题均有独立小节与规则表（Above-the-Fold Formula、The 5 Elements、Section Order、Social Proof Types、Form Design、Mobile Optimization、Page Speed）。
  • [ok] 检索与出图调用点 — tavily/search-assistant（Quick Start 竞品调研）、exa/answer（social proof 数据）、falai/flux-dev-lora（hero/OG）、bytedance/seedream-4-5（2K hero）、infsh/html-to-image（模板 OG）调用点均真实存在。
  • [unlocatable] 数字断言出处（~11%/field、48x48、LCP 2.5s、60%+ mobile） — 正文以断言形式给出（'Every field reduces conversion ~11%'、'60%+ traffic is mobile'），无引用/来源链接，无法在本源码内核实其依据。
  • [ok] 无脚本/无凭证/无本地写入 — 目录仅 SKILL.md；curl/wget/密钥 token 零命中；无 shell 重定向；执行面为白名单 belt。
  • [ok] 知识规则与 tools/* 目录型 skill 的分工 — 本文件不含模型目录表，模型选择（flux/seedream）内嵌在示例中；与 ai-image-generation 以 Related Skills 互链，无内容重复。
  • [ok] license/stars/commit 元数据 — pin == 本地 HEAD == becc25649700；skills-shell/superpowers stars=0、pushed_at 2026-09-02T14:16:56Z；MIT 声明见 plugin.json/README 徽标，树内无 LICENSE。
  • [unlocatable] installs 安装量 — 无公开安装量数据源，置 null。

6結論

  • LP設計手法を即時実行可能なルール表に凝縮：公式、正否例、9セクション順序を明確に固定しており、アドリブに依存せず安定した出力を維持。
  • NGリスト（❌ リスト）により、空虚なコピーや質の低いCTAを防止。ポジティブな指示のみよりも高い実効性を発揮。
  • 調査・コピー・画像生成の一貫パイプライン：検索アプリでエビデンスを収集し、公式でコピーを書き起こし、belt でヒーロー/OGP素材を出力するエンドツーエンドの納品が可能。
  • 素材プロンプトがLP用途専用に調整済み（1248x832 ヒーロー、1200x630 OGP、2K seedream）であり、汎用的な画像生成パラメータと差別化。
    • 最適な用途： SaaSやスタートアップチームが、構造が整っており具体性のあるLP案（コピー＋構造＋ヒーロー/OGP素材）を agent に迅速作成させたい場合に最適。特に画像生成やWeb検索機能が整っており、推論コストや外部通信を許容できるワークフローに適している。
    不向きな用途： CVR改善を厳密な科学実験として扱うグロースチーム（ルールの出典やA/Bテストの裏付けなし）、完全なフロントエンドコードや本番実装を求める環境（本skillはコピー・構造・画像の出力でありHTML/CSS納品ではない。html-to-imageも画像化用途のみ）、デザインシステムが確立されており既存テンプレートの流用で足りる大企業の社内LPには不向き。
    Install Agent-Ready
    ① Verified Mirror 2026-09-09
    Option A · Direct DownloadDownload landing-page-design.tar.gz
    sha256: 86b2ef761ae5147b…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit becc256497.