使い方ガイドへスキップ
Landing Page Design作者 elayadesign

Landing Page Design スキル。

ページの主張とビジュアルルールを、想定する単一のコンバージョンに結びつけます。

  • ランディングページ
  • コピーライティング
  • Webデザイン
ソースレビュー · Landing Page DesignSKILL.md
タスク ランディングページ 成果物 • ページのアウトライン、ヒーローコピー、ベネフィット、ワークフロー、FAQの下書き。 • 必要に応じて、タイトルと説明文を含むindex/noindexの推奨案。 • 選択したレイアウトとビジュアルルールに基づく、セクションごとの実装。 始める前に 単一のアプリケーションランタイムは必要ありません。実装例ではTailwindの値、IntersectionObserver、任意のモーションツールを参照しています。
編集部による要約 · ソース確認日 2026-10-07 · 生成されたサンプルではありません

01 機能概要

ひとつのアクションを軸にランディングページを作る

オファー、コピー、構成、SEO対応を計画したうえで、プロジェクトに合う範囲でソースの詳細なビジュアルルールを適用します。

ソースに基づくワークフロー実行ベンチマークではありません

進め方

Landing Page Designは、ひとつのオファー、ひとつのターゲット、ひとつの主要アクションから始めます。前半ではコンバージョン目標、懸念点、流入の状況、根拠、制約を整理し、構築の前にセクション構成とコピーを提案します。後半では、タイポグラフィ、余白、角丸、ヒーロー、アイコン、モーション、コンポーネントの状態について、詳細なビジュアルシステムを規定しています。

これは中立的なチェックリストではなく、かなり主張の強いスキルです。フォントや余白の選択肢の制限、必須のタグライン公開セクション、特定のアニメーション規約が含まれます。これらは既存のブランドシステムやアクセシビリティ要件と衝突する可能性があり、黙ってそれらを上書きしてはいけません。高コンバージョンをうたう位置づけは意図であり、コンバージョン改善が測定された証拠ではありません。

想定される成果物

  • ページのアウトライン、ヒーローコピー、ベネフィット、ワークフロー、FAQの下書き。
  • 必要に応じて、タイトルと説明文を含むindex/noindexの推奨案。
  • 選択したレイアウトとビジュアルルールに基づく、セクションごとの実装。
サンプルブリーフを見る

ブリーフからレビューまで

  1. 01
    オファーを明確にする

    ターゲット、アクション、懸念点、流入元、実際の根拠となる素材を、ひとつのヒアリングで集めます。

  2. 02
    主張の構成を選ぶ

    クラシックなヒーロー型、ロングフォームのストーリー型、ミニマルなコンバージョンページ、比較構成から選び、その理由を説明します。

  3. 03
    構築の前に下書きする

    実装の前に、アウトライン、コピー、SEO対応、レイアウトの推奨案を作成します。

  4. 04
    セクションごとに構築とレビューを行う

    ページを順に進めながら、状態、リンク、セマンティクス、メタデータ、ブランドの制約を確認します。

02 利用場面

使う場面

単一のアプリケーションランタイムは必要ありません。実装例ではTailwindの値、IntersectionObserver、任意のモーションツールを参照しています。

向いているケース

  • 単一オファーのキャンペーン訪問者に明確に定義されたひとつの次のステップを取ってほしい場合に役立ちます。
  • 戦略から実装までコピーや懸念への対応を、具体的なレイアウトや状態の判断につなげます。

確認すべき制限

  • コンバージョンの保証はありませんソースが提供するのはデザインとコピーのルールであり、あなたのオファーに対する実験結果ではありません。
  • ブランドルールと衝突する場合があります規定されたフォント、グラデーション、モーション、コピーの大文字小文字の扱いは、既存プロダクトすべてに共通する要件ではありません。
  • 根拠は本物でなければなりません具体的に見える統計、顧客名、保証を、事実としての根拠であるかのように捏造してはいけません。

用意する情報

  • オファーとコンバージョン訪問者が何を得られるか、どのアクションを成功とみなすかを示してください。
  • ターゲットと懸念点訪問者の状況、流入元、ためらう実際の理由を提供してください。
  • 根拠とブランドの制約承認済みのスクリーンショット、お客様の声、データ、条件、デザインシステムの要件を提供してください。

03 重要な判断

重要な判断

  1. 装飾の前に構成

    ビジュアルルールより先にページの主張を決めるため、説得上の役割がないセクションを磨き込むリスクを減らせます。

  2. 流入意図が重要

    意図の高い短いダウンロードページと、教育目的の検索向けランディングページでは、必要な主張が異なります。

  3. デフォルトを見直す

    ソースの具体性が役立つのは、その強いビジュアル上の前提がプロジェクトに合う場合だけです。

04 依頼例

焦点を絞ったブリーフで試す

以下のサンプルブリーフはテストされていません。使用前にスキルのセットアップを確認してください。

セットアップを確認する

リポジトリの最新のインストール手順を使い、スキルのフォルダ全体を含めてください。ソースはデザインルール集であり、ホスト型のページビルダーではありません。

アップストリームのソースファイル
https://github.com/elayadesign/ai-design-skills/blob/1c1e97cb9878e236552c772092dda7adcdddbcb2/skills/landing-page-design/SKILL.md

単一のアプリケーションランタイムは必要ありません。実装例ではTailwindの値、IntersectionObserver、任意のモーションツールを参照しています。

まずはひとつの成果物から

スキルを実行する前に、このブリーフの範囲、元資料、制約を調整してください。

サンプルブリーフ
landing-page-designを使って、当社のデザインレビュー製品向けのエバーグリーンなページを計画してください。ターゲットは小規模な代理店で、アクションはデモの依頼です。提供されたスクリーンショットと検証済みの根拠のみを使用してください。コーディングの前に、アウトライン、ヒーローコピー、懸念点に沿ったFAQ、SEOの推奨案、レイアウトの選択を返してください。既存のブランドトークンと、モーション低減の要件は維持してください。

結果を確認する

実際の出力を、以下の観察可能な基準で確認してください。

  • ヒーローから最後のCTAまで、主要アクションが一貫している。
  • 事実に関する根拠はすべて、提供された証拠に基づいている。
  • ビジュアルルールが、既存のブランドおよびアクセシビリティ要件と調整されている。

OpenDesignは、コーディングエージェント向けのローカルデザインワークスペースを提供します。このリストは、スキルが同梱されていること、または外部ツール、認証情報、ソフトウェア依存関係が含まれていることを意味しません。

05 ソースとライセンス

ソースとライセンス

このページは、以下にリンクされた固定のソースリビジョンについて説明しています。アップストリームの挙動や要件は変更される可能性があります。

ソースの所有者
elayadesign
ライセンス
MIT
確認したスナップショット
2026-10-07 · 1c1e97cb9878
編集部によるソース要約
オファー、コピー、構成、SEO対応を計画したうえで、プロジェクトに合う範囲でソースの詳細なビジュアルルールを適用します。

リンク先のソースに基づく、OpenDesignによるオリジナルの要約です。リポジトリのスター数は日付付きの人気の指標であり、スキルの利用数や品質スコアではありません。

06 開始前の質問

始める前の質問

ホームページ専用のスキルですか?

いいえ。中心的な違いは、ランディングページがひとつのオファーと意図に対応するのに対し、ホームページは複数のターゲットや目標に対応するという点です。

既存サイトでもすべての推奨に従う必要がありますか?

いいえ。スキル自身の対象範囲でもユーザーの明示的な指示を認めており、確立されたブランドやアクセシビリティ要件は、黙って上書きせず調整すべきです。

FAQを追加すれば検索での表示が保証されますか?

いいえ。有用な質問と回答のコンテンツや適切なメタデータを推奨していますが、インデックスされるかどうかや検索パフォーマンスは別の結果です。

OpenDesign

次のデザイン反復のための余地をつくりましょう。

ブリーフ、元資料、デザイン作業をローカルワークスペースにまとめましょう。ワークフローに加える前に、スキル自体のセットアップを確認してください。

アップストリームのソースファイル
https://github.com/elayadesign/ai-design-skills/blob/1c1e97cb9878e236552c772092dda7adcdddbcb2/skills/landing-page-design/SKILL.md