参照主導プレミアムランディングページビルダー

韓国語出力スタイル: 韓国語のユーザー向けテキスト（HITL質問、ステータスレポート、回答）には、$CLAUDE_PLUGIN_ROOT/docs/development/korean-style.md を適用します — §「HITL 질문 작성 규칙」および§「답변·보고 원칙」。ディスクに書き込まれる韓国語ファイルは、korean-style PostToolUse フックによって自動的にスタイルチェックされます。

3つのプラクティスを組み合わせることで、プロフェッショナルな成果物を一般的なAI出力から差別化する、プロダクショングレードの自己完結型ランディングページを生成します。

ビジュアル参照を最優先 — 設計判断の前に、実際のブラウザを使用してPinterest（および類似ギャラリー）から実際のアニメーション/レイアウト参照を収集し、参照に基づいたデザインブリーフに凝縮します（コピーはしません）。
AIビデオをデザイン素材として活用 — ヒーローバックグラウンドは、Google Veo 3.1で生成されたシームレスループビデオであり、デザイントークンに合わせてアートディレクションされ、ウェブ用に後処理され、ループの継ぎ目を隠す無限ループスクリプトで再生されます。
ワンショットではなく収束 — 完成したページは、完了報告前に敵対的 screen-quality-loop を通過します。

中核原則:

参照に基づき、参照をコピーしない — 参照は パターン（レイアウトアーキタイプ、モーションボキャブラリ、パレットの方向性）に貢献します。特定のデザインは再現されず、サードパーティのアセットが出荷されることはありません。
DESIGN.mdが絶対 — docs/design-system/DESIGN.md が存在する場合、そのトークンと aesthetic_rules がステップ0で導出されるトーンのデフォルトを上書きします。
すべての外部依存関係でグレースフルデグラデーション — Pinterestアクセス不能、Veoツールなし、ffmpegなし、ブラウザなしのすべてのケースで生存可能です。各フォールバックは最終レポートに明記され、黙って置き換えられることはありません。
コスト規律 — デフォルトの生成予算は正確に 1枚の静止画 + 1つのVeoクリップ（8秒、veo-3.1-lite）です。これを超える場合は、明示的なユーザーリクエストが必要です（references/veo-loop-video.md §6 の制限付きワンタイムSeam-QA再生成はデフォルト予算の一部であり、超過ではありません）。
モーションアクセシビリティは譲れない — prefers-reduced-motion フォールバック、可視の一時停止コントロール（WCAG 2.2.2）、およびポスター優先のLCP戦略は必須であり、追加の手間ではありません。

出力場所: landing/{slug}/（デリバラブル）+ landing/{slug}/.work/（生クリップ、静止画、QAエビデンス — ページから参照されることはありません）。

🌐 言語ルール: このスキルを実行する前に、プロジェクトの CLAUDE.md を読み、## Language セクションを確認してプロジェクト言語を検出します。プロジェクト言語が韓国語（ko）ではない場合、すべてのユーザー向けページコピーとレポート出力をプロジェクト言語に翻訳します。技術的な識別子（ファイルパス、CSS変数、クラス名）は翻訳されないままです。CLAUDE.md または ## Language セクションが存在しない場合、デフォルトで韓国語になります。

実行手順

ステップ 0: インテークとデザイントーンの決定

A. 引数の解析

引数	アクション
テキストブリーフ（例：`フリーランサー向けAI経理SaaS`）	製品/ブランドブリーフとして使用
URL	`WebFetch` でページを取得 — 製品、オーディエンス、既存のブランドキューを抽出
`docs/planner/{NNN}-*/` パス	プランナーの成果物（ペルソナ、KPI、画面デザイン）をブリーフとして読み込む
`--refs=<dir>`	ユーザー自身の参照画像を `<dir>` から使用、ステップ1のキャプチャをスキップ（分析は実行）
`--slug=<name>`	デリバラブルディレクトリ名、指定がない場合はブランド/機能からケバブケースを導出
`--no-video`	Veoを完全にスキップ — ヒーローはCSSアニメーションフォールバックを使用（パスC）
`--auto`	HITLをゼロに — 表明された前提で処理を進める（パイプライン用）
(空)	`docs/planner/` 内の最新パッケージをスキャン、なければ1行のブリーフを要求

B. 曖昧さのチェック（コードを書く前に考える — 最大1回のHITL）

ブリーフが (1) ターゲットオーディエンス と (2) 単一の主要コンバージョンアクション（サインアップ/購入/問い合わせ/ダウンロード）を特定していない場合、解釈の選択肢を提示して1回だけ質問します。--auto では、最も可能性の高い解釈を選択し、最終レポートの「前提」に記録します。1回以上のインテーク質問は決して行いません。

C. デザインSSoTの読み込み

docs/design-system/DESIGN.md が存在する → トークン + aesthetic_rules を読み込む、以下のトーンテーブルはギャップを埋めるためだけに使用。
存在しない場合 → ブリーフからデザイントーンを導出:

ブランド/製品のシグナル	デザイントーン	ヒーローモーションの方向性
SaaS / 開発ツール / AI製品	ダークグラデーションテック	ゆっくりとしたオーロラ/グラデーションのドリフト、疎らなパーティクルフィールド
ラグジュアリー / 高級品	エディトリアルラグジュアリー	マクロなマテリアルドリフト（シルク、リキッドメタル）、浅い被写界深度
コンシューマーアプリ / ライフスタイル / ウェルネス	ソフトアンビエント	ソフトフォーカスなシーン、漂うライトリーク、穏やかなパララックス
ファイナンス / B2B / エンタープライズ	コンフィデントミニマル	抽象的な幾何学、ゆっくりとしたライン＆メッシュの動き、抑制されたパレット
クリエイティブスタジオ / イベント / ポートフォリオ	ボールドキネティック	ハイコントラストな形状、広がるカラーフィールド

2つのUXガイドを読み込む — これらがステップ2〜4のすべての美的およびモーション決定を統治します:
- $CLAUDE_PLUGIN_ROOT/docs/ux/vibe-coding-design-guide.md（§4 プロンプティング技法、§4.1 反AI美学、§4.2 参照に基づくプロンプト）
- $CLAUDE_PLUGIN_ROOT/docs/ux/vibe-coding-animation-guide.md（§15 モーションアクセシビリティ、§18 AI生成ビデオ背景）

D. メインワークツリーガードとdev同期

ランディングページは計画フェーズの成果物です — 他のdev同期スキルと同様に、dev 上のメインワークツリーで実行します:

PLUGIN_ROOT="${CLAUDE_PLUGIN_ROOT:-$(find ~/.claude/plugins/cache -maxdepth 3 -type d -path '*/astra-methodology/*' 2>/dev/null | sort -V | tail -1)}"
if [ -z "$PLUGIN_ROOT" ] || [ ! -f "$PLUGIN_ROOT/scripts/worktree-helpers.sh" ]; then
  echo "ERROR: CLAUDE_PLUGIN_ROOT not found. Check the plugin cache path." >&2; exit 1
fi
source "$PLUGIN_ROOT/scripts/worktree-helpers.sh"
astra_ensure_main_worktree || exit 1

次に、/catalog-generator ステップ0.Gとまったく同じ方法で dev を同期します（ブランチ確認 → ダーティな場合はスタッシュ → git fetch origin dev && git checkout dev && git pull origin dev → スタッシュをポップ、dev がない場合は main/master にフォールバック）。

ステップ 1: 参照収集（Pinterest）

デザインを始める前に、6〜12件のアニメーション/レイアウト参照を収集します。完全な手順、クエリレシピ、ポップアップ処理、ボードテンプレートは、このステップを開始する前に $CLAUDE_PLUGIN_ROOT/skills/landing-page/references/reference-collection.md を読んでください。

A. ブラウザバックエンドの解決

プラグイン全体の順序に従います（egoデフォルト → Chrome MCPフォールバック、SSoT: $CLAUDE_PLUGIN_ROOT/docs/development/browser-backend-policy.md）:

command -v ego-browser >/dev/null 2>&1 && echo ego || echo ""

出力が空の場合 → mcp__chrome-devtools__* ツールが存在すれば chrome-mcp。どちらも利用できない場合 → キャプチャフォールバック: WebSearch で現在のランディングページ/アニメーションショーケースの説明（アワードギャラリー、モーションショーケース）を検索し、テキストのみの参照ボードを構築、最終レポートに「参照ボード: 検索由来（ブラウザなし）」と記載します。

B. 検索とキャプチャ

{トーン} + {業界} + 媒体 から4〜5つのPinterest検索クエリを構築します（レシピは参照ファイルにあります）。
クエリごとに: https://www.pinterest.com/search/pins/?q={query} を開き、オーバーレイモーダルを閉じ、window.scrollTo(0, 0)（egoのブランクフレームガード）、結果グリッドをキャプチャし、次に上位1〜2ピンを開いて詳細ビューをキャプチャします。
egoモード: 1つのヒアドキュメント = 1ラウンド、1キャプチャには3ラウンド以上が必要です（ナビゲート → 準備完了プローブ → スイープ＆キャプチャ、決して1ラウンドに圧縮しないでください。そうしないとキャプチャが空白になります — 参照ファイルを参照）。タスクスペース astra landing {slug}、captureScreenshot は絶対パスを使用、完了時に completeTaskSpace('astra landing {slug}', { keep: false }) で閉じます。
キャプチャを landing/{slug}/design/references/ref-{NN}.png に保存します。Pinterestにアクセスできない（ログイン画面が消えない/ネットワークブロック）場合 → 参照ファイルに記載されている類似ギャラリーで同じクエリを再試行します。それでもダメな場合 → ステップ1.Aのキャプチャフォールバック。

C. ビジョン分析 → 参照ボード

各キャプチャについて、構造化レコード（分析プロンプトは参照ファイルにあります）を抽出します: レイアウトアーキタイプ、ヒーローの処理、モーションボキャブラリ（何が動くか、どのくらいゆっくりか、どのイージングか）、パレットの方向性、タイポグラフィの特性、密度、適応する価値のある1つの特徴的な詳細。可能であれば mcp__fect-mcp__vision_analyze を使用し、そうでなければ各PNGを直接 Read します（マルチモーダル読み取り）。

landing/{slug}/design/reference-board.md を書き込みます — 画像ごとのレコード＋統合セクション（「これらの参照が一致している点」）。ボードが存在することを主張する前に、[ -f ] で確認します。

オリジナリティガード: ボードは パターン を記録し、特定のピンを再現する指示は決して記録しません。参照キャプチャは design/references/ に内部作業資料として残ります — index.html からリンクされることはなく、ページアセットとして出荷されることもありません。

ステップ 2: デザイン方針の合成

参照ボード + デザイントーン + DESIGN.md を landing/{slug}/design/direction.md にある確定デザインブリーフに統合します。このブリーフには以下の決定事項が正確に含まれます:

レイアウトアーキタイプ — 例：フルビューポートビデオヒーロー＋交互のフィーチャーバンド＋クロージングCTA。
モーションボキャブラリ — 参照ボードから抽出され、vibe-coding-animation-guide.md の技法にマッピングされたページ全体のモーションルール（持続時間、イージング、スクロールリビールスタイル）。
ヒーローメディア計画 — パスA/B/Cの決定（ステップ3のテーブル）、およびビデオの主題、ムード、カメラの動き。
パレット＋タイポグラフィ — DESIGN.md のトークンがある場合はそれを使用、ない場合はトーン＋参照から導出（OKLCH値、1つのディスプレイファミリー＋1つのボディファミリー）。
反AIの特徴的要素 — 少なくとも 2つの具体的な特徴的な選択（デザインガイド§4.1 / DESIGN.md aesthetic_rules に従う）: 例：非対称グリッド、エディトリアルセリフペアリング、グレイン/ノイズテクスチャ、カスタムスクロールインジケーター、特大の数字。一般的な中央ヒーロー＋3カード＋パープルグラデーションの出力は欠陥であり、ベースラインではありません。

HITL（--auto ではスキップ）: 5つの決定事項をコンパクトなサマリーとして提示し、1つの確認/調整質問をします。これが最後の決定ゲートです — 以降はすべて無人で実行されます。

ステップ 3: ヒーローループビデオ制作（Veo 3.1）

このステップの前に $CLAUDE_PLUGIN_ROOT/skills/landing-page/references/veo-loop-video.md を読んでください — プロンプトレシピ、ツールコールテンプレート、すべてのffmpegコマンドが含まれています。

A. パス決定

条件	パス
`mcp__fect-mcp__veo_*` が存在かつ `mcp__fect-image__nanobanana_text2img` が存在	A — ブックエンドループ（デフォルト）
`mcp__fect-mcp__veo_*` が存在、fect-imageが不在	B — text2video＋クロスフェードループ
Veoツールが不在、または `--no-video`	C — CSSアニメーションヒーロー（ビデオなし、テンプレートは `references/video-integration.md`）

ツールの存在はセッションで利用可能なツールから判断されます（fect-mcp サーバーはユーザーレベルでありバンドルされていません — 不在はエラーではなく正常です）。選択したパスを記録します。最終レポートはそのパスを記載し、B/Cの場合はその理由も記載する必要があります。

B. パスA — ブックエンドループ（最初のフレーム == 最後のフレーム）

シームレスループのトリック: アートディレクションされた静止画を1つ生成し、Veoにそのフレームから同じフレームに戻るアニメーションを生成させます — veo_img2video で lastImagePath を sourceImagePath と 同じファイル に設定します。クリップの最初と最後のフレームはピクセル単位で同一であるため、目に見える継ぎ目なくループし、静止画はLCPポスターとしても機能します。

静止画: mcp__fect-image__nanobanana_text2img → landing/{slug}/.work/hero-frame.png — 16:9、トークンにマッチしたパレット、ヘッドラインが配置される場所は落ち着いたネガティブスペース、テキスト、ロゴ、顔はなし（トーンごとのプロンプトテンプレートは参照ファイルにあります）。
クリップ: mcp__fect-mcp__veo_img2video — sourceImagePath = lastImagePath = hero-frame.png、durationSeconds: 8、resolution: "1080p"（1080pには8秒必要）、aspectRatio: "16:9"、デフォルトモデル（veo-3.1-lite — ライト出力がSeam QAに2回失敗した場合のみ fast/フルに上げる）。プロンプト = 開始に視覚的に戻る周期的なアンビエントモーション（トーンごとのレシピは参照ファイルにあります、カット、新しい被写体、テキストはなし）。
確認（これなしで主張しない）: [ -f ] でmp4を確認 + ffprobe で持続時間 ≥ 7秒。不足/短い場合 → 1回再生成、それでも失敗 → パスB、Veoが完全にエラー → パスC。
Seam QA: 最初と最後のフレームを抽出し、mcp__fect-mcp__vision_compare（または両方を Read）で比較。目に見えるジャンプがある場合 → 参照ファイルのffmpegクロスフェードループを上から適用。

C. パスB — text2video＋クロスフェードループ

ループフレンドリーなプロンプトレシピで mcp__fect-mcp__veo_text2video を実行し、次にffmpegの自己クロスフェード（最後の1秒を最初の1秒にブレンド、コマンドは参照ファイルにあります）でシームレスにします。ポスター = 抽出された最初のフレーム。

D. ポストプロダクション（すべてのビデオパス）

ffmpeg（command -v ffmpeg）を使用: オーディオを削除（-an — バックグラウンドビデオは常にミュート、Veoのネイティブオーディオトラックは無駄）、ラダーエンコード hero-desktop.mp4（1920 w、H.264 CRF 24、+faststart）+ hero-mobile.mp4（720 w、CRF 26）、hero-poster.jpg を生成（パスA: hero-frame.png から変換、パスB: 最初のフレーム）。出力は landing/{slug}/assets/video/ に配置。

ffmpegなし → 生のVeo mp4を両方のバリアントとして使用、JSクロスフェードプレーヤー（ステップ4）が残りの継ぎ目を隠します。最終レポートで圧縮不足を記載 — ページをサイズ最適化済みとして提示しないでください。

予算ゲート: hero-desktop.mp4 ≤ 4 MB、hero-mobile.mp4 ≤ 1.5 MB、ポスター ≤ 200 KB（stat -f%z / du -k で確認）。予算超過 → CRFを上げて再エンコードしてから次に進みます。

9:16のポートレートバリアント（2回目のVeo生成）は、明示的なユーザーリクエストがあった場合のみ生成されます — デフォルトのモバイル戦略は720 wダウンスケール＋ポスター優先読み込みです。

ステップ 4: ページ実装

このステップの前に $CLAUDE_PLUGIN_ROOT/skills/landing-page/references/video-integration.md を読んでください — ヒーローマークアップ、完全な loop-video.js 無限ループプレーヤー、CSSアニメーションフォールバックテンプレート、レスポンシブブレークポイント、アクセシビリティパターンが含まれています。

A. HTML生成

landing/{slug}/index.html を単一の自己完結型HTMLファイルとして生成します:

インラインCSS（クリティカルパスは内、非クリティカルCSSは rel="preload" で非同期的に読み込み）
インラインJS（defer 属性付き）
すべてのアセットは assets/ から相対的に参照
パフォーマンスとSEOのベストプラクティスに従う

B. ヒーローセクション

video-integration.md のテンプレートを使用:

パスA/B: loop-video.js がビデオループを処理、ポスターは hero-poster.jpg
パスC: CSSアニメーションフォールバック、パスA/Bの構造を模倣
prefers-reduced-motion の完全サポート
可視の一時停止コントロール（WCAG 2.2.2）
ポスター優先のLCP戦略

C. フィーチャーセクション

デザインブリーフに従って:

交互のコンテンツバンド
レスポンシブグリッド
スムーズなスクロールリビールアニメーション
マイクロインタラクション

D. CTAセクション

単一の主要コンバージョンアクションに焦点を当てる:

目立つ配置
明確なバリュープロポジション
最小限のフォームフィールド（該当する場合）

E. フッター

法的および補助情報:

プライバシーポリシーへのリンク
ソーシャルプルーフ（該当する場合）
コピーライト表記

ステップ 5: 画面品質確認（screen-quality-loop）

最終ページは、完全として報告される前に、敵対的 screen-quality-loop を通過しなければなりません。このループは、レスポンシブデザイン、アクセシビリティ、パフォーマンス、ブラウザ互換性の観点からあらゆるページ寸法をチェックします。

A. レスポンシブチェック

ビューポート幅: 320px、480px、768px、1024px、1440px、1920px
ビューポート高さ: 短い（600px）と標準（900px）のシナリオ
テキストのオーバーフロー、レイアウトの崩れ、画像のゆがみのチェック

B. アクセシビリティチェック

prefers-reduced-motion ファースト: モーションが優先されることを確認、削減ではない
タブナビゲーション: すべてのインタラクティブ要素にフォーカスできる
フォーカスインジケーター: 見える
カラーコントラスト: WCAG AA（少なくとも4.5:1の通常テキスト、3:1の大きいテキスト）
セマンティックHTML: 適切な見出し構造、ランドマーク
一時停止/停止/非表示コントロール: すべての自動再生メディアで機能

C. パフォーマンスチェック

初期読み込みサイズ（圧縮済み）: 目標 ≤ 500 KB（ビデオ除く）
LCP: 目標 ≤ 2.5秒（ポスター画像がLCP要素であることを確認）
レイアウトシフト: 累積レイアウトシフト（CLS）≤ 0.1
アセット最適化: 画像とビデオの適切なサイズ設定と圧縮

D. ブラウザ互換性チェック

モダンブラウザ: Chrome、Firefox、Safari、Edge（最新版）
CSS機能のサポート: 使用されている機能の @supports クエリまたはフォールバック
ビデオ形式: H.264 が広くサポートされていることを確認

E. ループ出力

ループの結果は landing/{slug}/.work/screen-quality-report.md に記録されます。すべてのチェックが合格するか、不合格の理由が文書化されてトリアージされるまで、ページは完全として報告されません。

ステップ 6: 最終レポート

最終レポートを生成し、プロジェクトに提供します:

# ランディングページ生成レポート — {ブランド/製品名}

## 概要
- スラッグ: `{slug}`
- デザイントーン: {トーン}
- ヒーローパス: {A / B / C}
- ビデオ: {はい / いいえ} — {理由、該当する場合}
- ページサイズ: {合計KB}
- LCP: {秒数}

## 参照
- 参照ボード: `landing/{slug}/design/reference-board.md`
- 参照キャプチャ: {枚数} 画像（`landing/{slug}/design/references/`）

## デザイン決定
- レイアウトアーキタイプ: {説明}
- モーションボキャブラリ: {説明}
- パレット: {色}
- タイポグラフィ: {フォント}
- 反AI要素: {リスト}

## 画面品質
- レスポンシブ: {合格/不合格 — 不合格の詳細}
- アクセシビリティ: {合格/不合格 — 不合格の詳細}
- パフォーマンス: {合格/不合格 — 不合格の詳細}
- ブラウザ互換性: {合格/不合格 — 不合格の詳細}

## 前提（`--auto` 下でのみ）
- ターゲットオーディエンス: {前提}
- 主要アクション: {前提}

## フォールバック状態
- Pinterest: {利用可能 / 検索由来 / なし}
- Veo: {利用可能 / なし — 理由}
- ffmpeg: {利用可能 / なし}
- Chrome MCP: {利用可能 / なし}

参照

$CLAUDE_PLUGIN_ROOT/skills/landing-page/references/reference-collection.md — Pinterest検索とキャプチャの手順
$CLAUDE_PLUGIN_ROOT/skills/landing-page/references/veo-loop-video.md — Veoプロンプト、ツールコール、ffmpegコマンド
$CLAUDE_PLUGIN_ROOT/skills/landing-page/references/video-integration.md — ヒーローマークアップ、JSプレーヤー、CSSフォールバック
$CLAUDE_PLUGIN_ROOT/docs/ux/vibe-coding-design-guide.md — デザイン原則とプロンプティング
$CLAUDE_PLUGIN_ROOT/docs/ux/vibe-coding-animation-guide.md — モーション設計とアクセシビリティ
$CLAUDE_PLUGIN_ROOT/docs/development/browser-backend-policy.md — ブラウザバックエンドの選択ポリシー
$CLAUDE_PLUGIN_ROOT/docs/development/korean-style.md — 韓国語テキストのスタイルガイド

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

ドキュメント