スクラッチから本番用ランディングページを構築します。このスキルは技術レイヤー（パフォーマンス、SEO、アイコン、画像、検証）を担当します。デザインはImpeccableが担当します。 ビジュアルを再発明せず、任せてください。
最初に：不足しているものだけを尋ねる
推測しないでください。以下のいずれかがリクエストから不明確な場合は、質問してください（2～4個ずつ、ユーザーの言語でバッチ処理）。
- ブランド: 名前、事業内容、一行のバリュープロポジション、ロゴファイル（または生成しますか？）。
- オーディエンス＋目標: 誰が訪問するか、単一の主要なコンバージョン（WhatsApp / フォーム / 電話 / サインアップ / 購入）。
- セクション/コンテンツ: どのようなブロックが存在し、その実際のコピー（サービス、概要、プロセス、お問い合わせ…）。事実、価格、統計、お客様の声を決して作り出さないでください。不明なものは
// PLACEHOLDER — editarとマークします。 - 外観: インスピレーション/参考画像、パレットまたはブランドカラー、言語/ロケール、ターゲットドメイン（SEO
SITE_URL用）。 - 画像: Geminiキーが
.envにGEMINI-IMAGES-APIとして設定されていることを確認します（画像の手順を参照）。
ワークフロー
-
スキャフォールド — Next.js App Router + TS + Tailwind。最初にプロジェクト自身のフレームワークドキュメントを読んでください（例：
node_modules/next/dist/docs/）。APIはトレーニングデータと異なる場合があります。ファイルは350行未満に抑えてください。 コンテンツの唯一の情報源: すべての編集可能な値（見出し、段落、リスト項目、ブランド名、リンク、電話/WhatsApp、価格、SEO文字列）は、単一の型付きファイル（lib/content.tsまたはsite.config.ts）に格納されます。コンポーネントはそこからインポートし、ハードコードされたコピーを含んではなりません。環境ごとの値（SITE_URL、連絡先番号）は.envから取得され、その1つのファイルを介して再エクスポートされます。目標：非開発者が1つのファイルを編集するだけで全てのコンテンツを変更できるようにすること。 -
デザイン → Impeccable。 これは画質のために必須です。新しいプロジェクトでは
/impeccable initを実行し（PRODUCT.md/DESIGN.mdを設定、ブランドレジスター＋パレットを選択）、その後ブロックごとに/impeccable craft <section>を実行します。Impeccableのアンチスロップルール（すべてのセクションにアイブロウを付けない、01/02/03のスキャフォールディングをしない、同一のカードグリッドをしない、コントラスト ≥4.5:1、意図的な動き）が基準です。目標：クリーンでミニマル、視覚的に印象的 — AIスロップではありません。 -
画像 — すべてのビジュアルスロットを埋めます。
public/images/manifest.jsonを作成し、scripts/generate-images.mjsを実行し、後処理し、確認します。1つの共有style= 統一感のあるセット。.envを決して読んだり出力したりしないでください —node --env-file=.envのみ使用してください。→ references/images.md -
パフォーマンス — next/image（AVIF、
sizes、LCPのみpriority）、next/font、ソースを縮小、opacity:0のリビールの背後に実際のコンテンツをゲートしない（プリレンダリング時に空白で表示される）、動きの軽減フォールバック。→ references/performance.md -
SEO + ファビコン — Metadata API（canonical、OG 1200×630、twitter）、
viewport、robots.ts、sitemap.ts、JSON-LD、<html lang>、およびscripts/make-icons.mjsを使用してロゴからアイコン/OGを生成。→ references/seo.md -
検証 —
npm run buildがクリーンに完了し、実際にレンダリングされるヘッドレススクリーンショット（大きな--virtual-time-budget、小さなPNG = 空白 = リビールトラップ）＋利用可能であればLighthouse 95+。画像を配線する前に生成された画像を読んでください。
スクリプト
scripts/generate-images.mjs— マニフェストからGemini画像生成。node --env-file=.env <script> public/images/manifest.json [names…] [--dry]。GEMINI-IMAGES-APIを読み取りますが、決してログに出力しません。scripts/make-icons.mjs— ロゴから favicon.ico + icon.png + apple-icon.png + og.jpg を生成（sharpが必要）。node <script> --logo public/logo.png [--mark …] [--out-app src/app] [--bg "#fafaf8"] [--title "…"] [--crop "L,T,W,H"]。
厳格なルール
.envやAPIキーを決して読んだりエコーしたりしないでください。- すべての編集可能なコンテンツは1つのファイルに。コンポーネントにハードコードされたコピーはありません。
- デザイン品質はImpeccableを通じて確保します。デフォルトの見た目の出力を出さないでください。
- 事実/統計/お客様の声を捏造しないでください — プレースホルダーとして明確にマークします。
- 実際のコンテンツをJSトリガーのリビールの背後にゲートしないでください（空白ページトラップ）。