使用するタイミング
- ユーザーが新しいランディングページ（製品、サービス、イベント、ポートフォリオ、ウェイトリスト）を必要としている場合
- 既存のランディングページをプロフェッショナルでユニークなデザインにリニューアルしたい場合
- マーケティングページにアニメーション、スクロールエフェクト、マイクロインタラクションを求めている場合
- どのセクションを設けるか、どのようなメッセージを伝えるか、どのような構造にするか、計画段階にある場合
スタック（とその選定理由）
| 要素 | 選択肢 | 理由 | 却下した代替案 |
|---|---|---|---|
| フレームワーク | Astro 5 | デフォルトで静的（JSベースは0）、コンポーネント、astro:assetsによる画像最適化、デプロイはdist/をアップロードするだけ | Next.js（ランディングにはオーバーキル、デプロイが複雑）、プレーンHTML（コンポーネントも最適化もなし） |
| スタイル | Tailwind CSS v4 | CSS内で@themeを使った独自トークン、JS設定ファイル不要、自動パージ | UIキット（shadcn/DaisyUI/Flowbite → 凡庸な見た目）、プレーンCSS（反復に時間がかかる） |
| アニメーション | GSAP 3.13+（ScrollTrigger、SplitText） | スクロール/タイムラインにおける業界標準。v3.13以降、すべてのプラグインが無料 | Framer Motion（Reactに依存）、AOS（機能が限定的で「テンプレート感」がある） |
| スムーススクロール | Lenis | 軽量（約4kb）、ScrollTriggerとの統合がドキュメント化されている | Locomotive Scroll（より重く、メンテナンスが少ない） |
| デプロイ | Netlify / Cloudflare Pages / Vercel | リポジトリを接続 → プッシュ → デプロイ。サーバーレスな静的出力 | VPS（静的サイトには不要） |
厳格なルール: UIコンポーネントライブラリをインストールしない。デザインは独自のもの。これこそが、このスキルをテンプレートから差別化する点です。
ワークフロー（必須、この順序で）
決してコードから始めてはいけません。ブリーフィングなしのランディングは、単なる名前の違うテンプレートです。
- ブリーフィング — ユーザーと一緒に assets/brief-template.md を埋めます。目標、ターゲットオーディエンス、CTAが不足している場合は、先に進む前に質問してください。
- デザイン方向性 — references/design-direction.md に従います。ペルソナ → タイポグラフィ → カラー → レイアウト → ビジュアルアイデンティティ。これを assets/design-tokens.css に具体化します。
- セクションアーキテクチャ — ナラティブアーク（下記の表）と見出しのコピーを、マークアップの前に定義します。
- 構築 — セクションごとに、モバイルファースト（まず390pxから）で行います。アニメーションは references/animation-recipes.md に従います。
- 監査 — 納品チェックリスト（後述）を確認します。これに合格しなければ納品しません。
- デプロイ — 静的ビルド + ホスティング（コマンドは後述）。
ナラティブアーク（基本構造）
| # | セクション | 役割 |
|---|---|---|
| 1 | ヒーロー | 5秒以内に理解できる価値提案 + プライマリCTA |
| 2 | 問題 / コンテキスト | 訪問者が共感する課題を明確にする |
| 3 | 解決策 / メリット | どのように解決するか。機能ではなくベネフィット |
| 4 | 社会的証明 | 実際の顧客の声、ロゴ、実績数値 |
| 5 | 仕組み | ステップ、デモ、スクリーンショット |
| 6 | 反論への対応 | FAQ、保証、価格 |
| 7 | 最終CTA | ヒーローと同じ単一のアクションを再度促す |
ブリーフィングに応じてセクションを調整、統合、削除してください。すべてのランディングが7セクションすべてを必要とするわけではありません。
重要なパターン
- 単一のコンバージョン: ページ全体が一つのアクションに誘導されます。2つの異なるCTAがある場合、それはブリーフィングが不十分であることを示します。
- 真のモバイルファースト: 最初に390pxでデザイン・構築します。デスクトップはその拡張であり、その逆ではありません。
- LCPを触らない: LCP要素（ヒーローの見出しや画像）は、CSSで決して
opacity: 0にしないでください。エントリーはgsap.from()で行います（JavaScriptがなくてもページは完全に見える状態）。合計で1秒以内に完了します。 prefers-reduced-motion: すべてのアニメーションはgsap.matchMedia()内に配置します。例外はありません。- 最小限のアイランド: JavaScriptは実際のインタラクションがある場所にのみ使用します。FAQのアコーディオンは
<details>要素であり、ハイドレートされたコンポーネントではありません。 - 画像: 常に
astro:assets（<Image>）を使用し、AVIF/WebP形式、明示的な寸法、ヒーロー以外はloading="lazy"とします。 - フォント: セルフホスト（ローカルのwoff2またはFontsource）、
font-display: swap、最大2ファミリー、表示用フォントはプリロードします。
納品前チェックリスト
- Lighthouse モバイルでパフォーマンス、アクセシビリティ、SEOがすべて95以上
- CLS = 0（画像に寸法指定、フォントのフォールバック調整済み）
-
prefers-reduced-motion: reduceでアニメーションが無効になる - コントラスト比 AA: テキスト4.5:1、大きなUI要素3:1
- キーボードで操作可能、フォーカス可視、
h1は1つのみ - メタディスクリプション、OGタグ、ファビコン、ユニークなタイトル
- 390px、768px、1440pxでテスト済み
- ブランドテスト：ロゴを隠したとき、他の会社のページに見えるか？ もしそうなら、フェーズ2に戻る
コマンド
# プロジェクト作成
pnpm create astro@latest mi-landing -- --template minimal --typescript strict
cd mi-landing
pnpm astro add tailwind
pnpm add gsap lenis
# 開発とビルド
pnpm dev
pnpm build && pnpm preview
# デプロイ（いずれかを選択。Netlify/Vercel/Cloudflareの場合: ビルドコマンド "pnpm build"、出力ディレクトリ "dist"）
npx wrangler pages deploy dist # Cloudflare Pages 直接デプロイ
npx netlify deploy --prod --dir=dist # Netlify 直接デプロイ
リソース
- テンプレート: assets/brief-template.md — 計画用質問票。assets/design-tokens.css — 独自デザインシステム（Tailwind v4
@theme）のベース - ガイド: references/design-direction.md — 凡庸さを回避するアートディレクション。references/animation-recipes.md — すぐに適用・調整可能なGSAP/ScrollTrigger/Lenisのレシピ