ランディングページビルダーは何をしますか？

クライアントのウェブサイトやドキュメントからブランディングとコンテンツを抽出し、検証済みの画像とクリーンな構造を備えたレスポンシブなHTML/CSSページを生成することで、高品質でデプロイ可能なランディングページを構築します。

このスキルが必要な理由は、ランディングページにはブランディング、コンテンツ、画像、レスポンシブデザインの慎重な調整が必要であり、最も一般的な失敗モードはソースドキュメントをテキストのみとして扱い、マーケティングメッセージの半分を担う画像を見逃すことだからです。

黄金のルール

1. 画像はコンテンツであり、装飾ではありません。 マーケティングPDFに教室の写真が学生の幸福に関する段落の隣に表示されている場合、その写真こそがメッセージです。その画像なしのランディングページは、コピーがどれだけ優れていても不完全です。毎回、最初のパスで画像を抽出して統合してください。

2. 選択したスタック内でスタイルを管理可能に保ちます。 静的ページの場合は、CSSをインラインHTMLではなくstyles.cssに配置します。既存のフレームワークプロジェクトの場合は、確立されたCSSモジュール、コンポーネントスタイル、ユーティリティクラス、またはトークンシステムを維持します。理由なくスタイリングアーキテクチャを移行しないでください。

3. コンテンツを決して発明しないでください。 ソースドキュメントが提供するもののみを使用します。画像のキャプション、ビジュアルの方向性、推薦の引用、統計、クライアント名をでっち上げないでください。コンテンツが欠落している場合は、フラグを立てて質問し、AI生成のプレースホルダーコピーでギャップを埋めないでください。

4. フロントエンドスタックを意図的に使用します。 コーディングする前に、以下に名前が挙げられている利用可能な補助スキルを読み込んでください。これらは補完的な役割であり、盲目的に貼り付けるための重複した指示ではありません。名前付きのスキルが利用できない場合は、利用可能なスタックで続行し、ギャップを記録してください。それが実行されたふりを決してしないでください。

フロントエンドスキルスタック（必須ルーティング）

スクリーンショットで提供されたフロントエンドツールは、以下のようにこのランディングページワークフローにマッピングされます。完全なルーティングと競合ルールについては references/frontend-skill-stack.md を参照してください。

frontend-design — 主題固有のビジュアルテーゼ、タイポグラフィ、パレット、レイアウトコンセプト、シグネチャー要素、モーション意図を確立します。新しいビルドと意味のあるビジュアルリシェイプに使用します。
design-taste-frontend — アンチスロップ実装規律、レスポンシブレイアウトメカニクス、アクセシブルなインタラクション状態、コンポーネント選択、パフォーマンスチェック、そして最終デザインプリフライトを適用します。
imagegen-frontend-web — 生成されたビジュアルリファレンスがあいまいさを実質的に減らす場合に使用します：未知のビジュアル方向性、画像主導のキャンペーン、カスタムイラスト/アートディレクション、またはユーザーがモックアップを要求した場合。リファレンスを生成します。実際のブランドアセットや実装を置き換えるものではありません。
design-taste-frontend-v1 — レガシーフォールバックのみ。既存のプロジェクトが明示的にv1の動作に依存している場合にのみ使用します。v1と現在のDesign Tasteを一緒にロードしないでください。
imagegen-frontend-mobile — ウェブサイトのランディングページビルドの一部ではありません。独立したモバイルアプリ画面の成果物にのみ使用し、ページのレスポンシブWebデザインステップとして決して使用しないでください。
Aidesigner Frontend — この正確なスキルがインストールされて発見可能になった場合、承認されたアートディレクションのオプションの2回目の批評として使用します。現在は利用可能と想定されておらず、ワークフローをブロックしてはなりません。

儀式のためにすべてのツールを実行しないでください。新しいランディングページの最小スタックは frontend-design + 現在の design-taste-frontend + landing-page です。ビジュアルリファレンス生成が正当化される場合に imagegen-frontend-web を追加します。レスポンシブモバイルWebは実装とQAの一部であり、モバイルアプリ画像スキルに委任されません。

必須のプレコードデザインゲート

実装前に、以下を含む内部ビルドブリーフを作成します。

ページのオーディエンス、単一のコンバージョン目標、および信頼できるソースコンテンツ。
ジェネリックなSaaS美学ではなく、実際の主題に結びついた1つの一貫したビジュアルテーゼ。
ライセンス/可用性が確認されたパレットとタイポグラフィの役割。
セクションの順序と各セクションの役割。
アセットマップ：保存、取得、生成、または省略。
1つのシグネチャービジュアルアイデアと控えめなモーションプラン。
最初のフォールドと複雑なセクションに対するデスクトップ、タブレット、モバイルの動作。
ブランドとリファレンス監査に基づく明示的な回避リスト。

ユーザーがリファレンスを提供した場合は、そのアイデンティティを複製せずに原則を抽出します。ソースが既存のクライアントサイトまたは承認されたテンプレートである場合は、ユーザーが明示的にリデザインを許可しない限り、承認されたコピー、ブランドアセット、コンポーネント文法、セクション順序を維持します。

アンチスロップルール（必須）

これらのパターンはAI生成ページを安っぽくてジェネリックに見せます。絶対に使用しないでください：

禁止コピーパターン

「革命を起こす」「あなたの〜を変革する」「〜のパワーを解き放つ」「活用する」「強化する」
「最先端の」「次世代の」「最新鋭の」「クラス最高の」
「シームレスに」「簡単に」「スーパーチャージ」
「今日のペースの速い世界では」「〜の時代において」
段落を「想像してみてください...」や「これを想像してください...」で始める
コンテキストのない一般的なCTA「もっと詳しく」「始める」— 代わりに具体的なCTAを使用：「今すぐ見積もりを取得」「デモを予約する」「料金を見る」

禁止ビジュアルパターン

グラデーションメッシュブロブまたはオーロラ背景（AI生成ページの最大の兆候）
一次デザイン言語としての紫から青へのグラデーション
製品と関係のない浮遊3Dオブジェクト
ヒーロー背景としてのジェネリックな抽象幾何学パターン
極端に丸いカード（border-radius > 1.5rem）と重いドロップシャドウ
アイコンのみが変更された同一のカードレイアウトが3回以上繰り返される
ビジネスにマッチしないストックフォトのヒーロー画像（例：ジェネリックな握手写真）

禁止コードパターン

HTML要素へのインラインスタイル
CSSでの !important の使用（ユーティリティオーバーライドを除く）
フォントサイズへのハードコードされたピクセル値 — clamp() または rem を使用
画像の alt 属性の欠落
セマンティック要素（<section>、<article>、<nav>、<header>、<footer>）が存在する場合に <div> を使用する

ワークフロー概要

ビルドは7つのフェーズに従います。ユーザーに繰り返し尋ねる代わりに、提供されたソースから明白な事実を解決します。欠落した決定が結果を実質的に変える場合にのみ質問します。

コンテキストとリサーチ — プロジェクト/クライアントの指示、会議の決定、ブリーフ、承認状態、ライブブランド、リファレンス、コピー、デザイン文法を読み取ります
コンテンツ抽出 — 提供されたソースから承認されたすべてのテキストと画像を抽出します
アセット検証 — 出所を認識した使用可能なメディアのインベントリを構築します
フロントエンドの方向性と設計図 — Frontend DesignとDesign Tasteを適用します。コンバージョンフロー、トークン、レスポンシブ動作、アセット、受け入れチェックをロックします。正当化される場合にのみWebリファレンスを生成します
ビルド — ブリーフを満たす最もシンプルなスタックを使用し、完全なプロダクションコードを実装します
ブラウザQA — ビルド/テスト、デスクトップ/タブレット/モバイルのスクリーンショットを検査し、欠陥を修正して繰り返します
デプロイとライブ検証 — 要求された場合にのみデプロイし、実際のURLを検査して検証済みのエイリアスを報告します

フェーズ1: コンテキストとリサーチ

コードを書く前に、最も近いプロジェクト/クライアントの指示、承認されたブリーフ、会議の決定、ソースリンクを読み取ります。次に、クライアントの既存のブランドを理解し、必要なすべてのアセットを収集します。

ブランド抽出

クライアントのウェブサイトを取得して以下を抽出します：

色: CSSカスタムプロパティ、キー要素（見出し、ボタン、背景、アクセント）の計算済みスタイルを検査します。16進数値として記録します。
フォント: Google Fontsリンク、font-family宣言、@font-faceルールを確認します。推測しないでください — 多くのサイトは一般的なフォントのように見えるが実際にはそうではないフォントを使用しています。
ロゴ: ロゴ画像のURL（通常はヘッダーまたはフッター）を見つけます。利用可能な最高解像度のバージョンを取得します。
デザイン言語: スペーシングパターン、border-radiusの使用法、シャドウスタイル、セクション背景の処理に注意します。

アセット収集

これは重要です。サイトの画像ディレクトリをクロールして完全なカタログを構築します：

ホームページと主要なページを取得し、すべての<img> src属性とCSS background-image URLを抽出します。
画像パスのパターンを探します（例：WordPressサイトの/wp-content/uploads/YYYY/MM/）。
各画像について以下を記録します：
- 完全なURL
- 説明名（画像は何を示していますか？）
- 寸法（ファイル名またはヘッダー取得から）
- カテゴリ（写真、イラスト、アイコン、ロゴ、ステッカー）

このカタログを保存します。ビルド全体で参照します。

カタログエントリの例:

URL: https://example.com/wp-content/uploads/2023/08/image-13-1024x768.jpeg
説明: 教室で協力する学生たち
寸法: 1024x768
カテゴリ: 写真
使用箇所: 問題セクション、ギャラリー

フェーズ2: コンテンツ抽出

ユーザーがPDF、Word文書、またはその他のコンテンツドキュメントを提供した場合：

テキストコンテンツ

すべての見出し、本文コピー、統計、引用、CTAを抽出します
ドキュメントのセクション構造を維持します — 通常、ページのセクションにマッピングされます
逐語的に保持する必要がある特定のフレージングに注意します（タグライン、承認された主張、推薦の引用）

画像コンテンツ（これをスキップしないでください）

ドキュメント内のすべての画像を特定します
各画像について、何を示しているか、どのセクションに属するかを判断します
ドキュメントの画像をクライアントのウェブサイトからの実際のホストURL（フェーズ1のカタログから）に一致させます
ドキュメントの画像がカタログ化されたURLと一致しない場合は、「ソースが必要」としてメモし、ユーザーに質問します

これが重要な理由：マーケティングドキュメントは画像を戦略的に使用します。脳科学コンテンツと一緒にキャラクターイラストを示すPDFは、それらのイラストがランディングページの脳科学セクションに属することを示しています。それらを無視すると、テキストが重く、要点を逃したページが生成されます。

フェーズ3: 画像カタログと検証

何かを構築する前に、使用する予定のすべての画像URLを検証します。

検証プロセス

各画像URLについて：

URLを取得し、HTTPステータスコードを確認します
200応答で正しいcontent-typeであれば問題ありません
404またはその他のエラーはURLが間違っていることを意味します

壊れたURLの修正

画像URLが404を返す場合：

ライブサイトに戻り、部分的なファイル名で画像を検索します
元々画像を含んでいたページソースを取得します
正しいパスを探します — ファイル名にはしばしばわずかなバリエーションがあります（例：GYM_Kid-at-Desk-300x295.png vs GYM_Kid_AtDesk-222x300.png）
ファイル名を決して推測しないでください。常に実際のサーバーに対して検証します。

最終カタログ

各コンテンツセクションをその画像にマッピングする検証済みリストを作成します：

ヒーロー: logo.png（検証済み）、character-teaching.png（検証済み）、sticker-owl.png（検証済み）
問題: classroom-photo.jpeg（検証済み）
脳科学: character-1.png（検証済み）、character-2.png（検証済み）、character-3.png（検証済み）、character-4.png（検証済み）
シフト: school-kits.jpg（検証済み）、home-products.jpeg（検証済み）
ギャラリー: classroom.jpeg、confidence.png、founders.jpeg（すべて検証済み）

フェーズ4: フロントエンドの方向性と設計図

必要なフロントエンドスキルスタックをロードし、このファイルの上部にあるプレコードデザインゲートを完了します。生成されたWebリファレンス画像が有用かどうかを判断します。実装前に、コンバージョンフロー、セクションの役割、ビジュアルトークン、メディアプラン、モーション意図、レスポンシブ動作、受け入れチェックをロックします。

方向性が無関係なクライアントに対して変更せずに再利用できる場合は、自己拒否します。1つの一貫したアートディレクションは、いくつかのスキルの美学を平均化するよりも優れています。

フェーズ5: ビルド

実装スタックの選択

すべてのランディングページを1つのテクノロジーに強制しないでください。実際のプロジェクトに基づいて選択します：

既存のリポジトリまたはテンプレート: 移行が明示的に要求されていない限り、そのフレームワーク、ランタイム、コンポーネント、ルーティング、アセットパイプラインを維持します。
静的キャンペーンページ: コンポーネントアーキテクチャやアプリの動作が必要ない場合は、セマンティックHTML、外部CSS、最小限のJavaScriptが推奨されます。
コンポーネント指向またはインタラクティブなページ: React/Vite、Next.js、またはリポジトリの既存のスタックは、再利用可能なコンポーネント、統合、状態、または複雑なモーションがそれを正当化する場合に有効です。
インポートする前に依存関係を検証します。ファッショナブルなパッケージを追加するよりも、既存のプロジェクトライブラリを優先します。

以下の古いデフォルトは、真に新しい静的ページにのみ適用されます。

静的ページのファイル構造

シンプルに保ちます — 2つのファイルを持つ単一のディレクトリ：

project-name/
├── index.html
└── styles.css

シンプルな静的ページの場合、不要なビルドツールやフレームワーク依存関係を避けます。これはデフォルトであり、プロジェクトの実際のスタックを使用することを禁止するものではありません。

デザインシステムのセットアップ（styles.css）

抽出されたブランドシステムでスタイルシートを開始します：

:root {
  /* ブランドカラー — クライアントサイトから抽出 */
  --primary: #0f4661;
  --primary-dark: #0a3347;
  --accent: #f37b78;
  --accent-hover: #e06560;
  /* ... すべてのブランドカラーをカスタムプロパティとして */

  /* ニュートラルスケール — 常にこれらを定義 */
  --gray-50: #f8f9fa;
  --gray-100: #f0f2f5;
  --gray-200: #e2e5ea;
  --gray-300: #c8cdd5;
  --gray-400: #9ca3b0;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* ユーティリティトークン */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.12);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.16);
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;

  /* トランジション */
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body {
  font-family: 'ExtractedFont', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--gray-700);
  background: var(--white, #ffffff);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

タイポグラフィルール（重要）

悪いタイポグラフィは、AIページがアマチュアに見える最大の理由です。以下に厳密に従います：

/* 最小サイズ — これより小さくしないでください */
body { font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); } /* 16-18px */
h1 { font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem); }       /* 36-64px */

…

[翻訳のために切り詰め]

ランディングページビルダー