enhance-web-landing

Surface router: /uiux。現在地：enhance-web-landing。ネイティブ iOS／Android（SwiftUI／Compose、Web レイヤーなし）は対象外です。Apple HIG／Material を直接使用してください。

enhance-web-landing — ありきたりさを排したランディングページ

自由度：混合。 デザインの読み取りとダイヤル設定は［自由度：高］、依存関係の確認、コントラスト、事前チェックは厳守ルール［自由度：低 — 正確に実行］です。

ランディングページ、ポートフォリオ、リデザインが対象です。ダッシュボード、データテーブル、複数ステップのプロダクト UI は対象外です。 以下のルールはすべて状況に応じて適用します。自動的に適用されるものはありません。まず依頼内容を読み、合うものだけを取り入れてください。

考え方

1. 読み取る — ページの種類、雰囲気を示す言葉、対象ユーザー、既存のブランド、暗黙の制約
2. ダイヤルを設定する — 読み取り結果に基づいて VARIANCE／MOTION／DENSITY を設定する（LLM のデフォルト設定ではなく）
3. システム — 依頼内容がシステムの場合は公式パッケージを使い、プロジェクトごとに 1 つのシステムを選ぶ
4. 事前チェック — ヒーローがビューポート内に収まること、コントラスト、ありきたりなデフォルトを避けること、実際の画像を使うこと

作業例

読み取り： 技術者向け B2B SaaS のランディングページ。ユーザーは「Linear 風」と指定。ブランドのセリフ体はなし。 ダイヤル： 5 / 3 / 3 — クリーンで、動きは控えめ、ゆとりのあるデザイン。 システム： Tailwind v4 + Geist。Inter + 紫のメッシュは使わない。shadcn はすでに採用されている場合に限る。 事前チェック： 分割型のヒーロー（中央揃えではない）、アクセントカラーは 1 色、実際のプロダクト画像、CTA のテキストは折り返さない。

報告前の自己批評

• デザインの読み取りを明示 — コードの前に 1 行で示し、暗黙のデフォルト美学を使わない
• デフォルトを避ける — 読み取り結果が求めない限り、Inter + 紫のグラデーション + 同じ大きさのカード 3 枚を使わない
• 厳守ルール — ヒーローが最初のビューポートに収まること、ボタンのコントラストが AA を満たすこと、CTA の意図を 1 つにすること
• 適切な担当領域 — ダッシュボード／プロダクト UI → enhance-web-ui、既存アプリの仕上げ → enhance-web-redesign

---

0. 依頼内容の推測（何よりも先に状況を読み取る） [自由度：高]

コードに触れたりダイヤルを調整したりする前に、ユーザーが本当に求めているものを推測してください。ページの種類、雰囲気を示す言葉、参考例のシグナル、対象ユーザー、既存のブランドアセット、明示されていない制約（アクセシビリティ優先、公共部門、規制対象、子ども向けなど）を読み取ります。制約は美的な好みより優先されます。 コードを書く前に、1 行で次のように述べてください：「次のように読み取っています：<page kind> を対象とする <audience> 向けのページで、<vibe> な表現を用い、<design system or aesthetic family> 寄りです。」 デザインの読み取りが実際に大きく異なる場合は、確認の質問を1 つだけしてください。文脈から推測できる場合は、質問しないでください。 デフォルト回避の徹底： AI 風の紫のグラデーション、暗いメッシュ背景に中央揃えのヒーロー、同じ大きさの機能カード 3 枚、ありきたりなグラスモーフィズム、延々と続くマイクロアニメーション、Inter／Roboto + slate-900、ページ全体のクリーム色の背景、すべての見出しにイタリック体のアクセント語、「01 / 02 / 03」のラベル、モノスペースのアイブロウ、すべてのコントロールにピル型ボタンをデフォルトで使わないでください。最初の案のあと、成果物が選んだデフォルトがあれば、このリストに追加してください。 シグナル一覧、読み取り例、デフォルト回避の完全なリスト：references/brief-dials-stack.md §0。

1. 3 つのダイヤル（基本設定） [自由度：高]

デザインを読み取ったあと、DESIGN_VARIANCE（1＝対称、10＝カオス）、MOTION_INTENSITY（1＝静的、10＝シネマティック）、VISUAL_DENSITY（1＝ゆったり、10＝コックピット）を設定してください。読み取り結果による上書きがない限り、基本値は 8 / 6 / 4 です。値の上書きは会話の中で行い、このファイルを編集してはいけません。 常にこれらの変数名をそのまま使い、LAYOUT_VARIANCE や ANIM_LEVEL のような別名を作らないでください。 ダイヤル推定表（シグナル → 値）とユースケース別プリセット：references/brief-dials-stack.md §1。

2. ブリーフ → デザインシステム対応表 ［自由度：高］

ブリーフが実在するシステム（Fluent、Material 3、Carbon、Polaris、Atlaskit、Primer、GOV.UK、USWDS、Bootstrap 5.3、Radix Themes、shadcn/ui、Tailwind v4）を示している場合は、公式パッケージをインストールして使用してください。CSSを手作業で再現したり、トークンをインポートしてその90％を上書きしたりしないでください。 プロジェクトごとにシステムは1つです。 1つのツリー内でFluentとCarbonを併用したり、Material 3アプリ内でshadcnを使ったりしないでください。 ブリーフが美的スタイル（グラスモーフィズム、ベントー、ブルータリズム、エディトリアル、ダークテック、オーロラ、キネティックタイポグラフィ、Apple Liquid Glass）を示している場合、公式パッケージはありません。ネイティブCSS＋Tailwind＋保守されているコンポーネントライブラリを使用し、近似表現であることを正直に明記してください。公式のliquid-glass.cssはありません。 2つの対応表はreferences/brief-dials-stack.md §2を参照してください。

3. デフォルトのアーキテクチャと規約 ［自由度：高］

セクション2.Aでシステムが選択されていない限り、React / Server Componentsを使用するNext.js、Tailwind v4（tailwindcss PostCSSプラグインではなく、@tailwindcss/postcss）、motion/reactからインポートするMotion、next/fontまたはセルフホストの@font-face＋font-display: swapを使用してください。Motion、スクロール、ポインターのコードは、独立した'use client'リーフに配置します。 マウス、スクロール、磁石のようなホバーなど、連続的に変化する入力値をuseStateで決して追跡しないでください。useMotionValue / useTransform / useScrollを使用してください。 アイコン：@phosphor-icons/react → hugeicons-react → @radix-ui/react-icons → @tabler/icons-reactの順に使用してください。lucide-reactは、指定された場合またはすでに依存関係に含まれている場合に限り使用してください。プロジェクトごとにアイコンファミリーは1つとし、SVGアイコンを手作業で作成しないでください。ユーザーが遊び心のある雰囲気を求めていない限り、絵文字は避けてください。 レイアウト：ブレークポイントはsm 640 / md 768 / lg 1024 / xl 1280 / 2xl 1536です。max-w-[1400px] mx-autoまたはmax-w-7xlでコンテンツ幅を制限し、ヒーローにはmin-h-[100dvh]を使用して、h-screenは使用しないでください。割合計算によるflexよりCSS Gridを優先してください。 3.F 依存関係の確認［自由度：低 — 必ず実行］： サードパーティライブラリをインポートする前にpackage.jsonを確認してください。見つからない場合は、最初にインストールコマンドを出力してください。ライブラリが存在すると決して決めつけないでください。 フルスタック、状態管理、アイコン、絵文字、レイアウトの規則はreferences/brief-dials-stack.md §3を参照してください。

4. デザインエンジニアリング指針（バイアス補正） ［自由度：高］

LLMにありがちな表現を先回りして避けてください。すべての規則に、状況に応じた例外を設ける余地があります。対象：タイポグラフィ（デフォルトではサンセリフのディスプレイ書体。セリフ体はブランドで指定されている場合、または美的スタイルが本質的にエディトリアル／ラグジュアリー／ヘリテージの場合に限る。デフォルトでFrauncesとInstrument_Serifを使用することは禁止。イタリック体のディセンダーに十分な余白を確保）、色（アクセントカラーは最大1色、彩度は80％未満、lilaルール、プレミアム消費者向けのベージュ＋真鍮＋エスプレッソの組み合わせは禁止、色の一貫性を維持）、レイアウト（DESIGN_VARIANCE > 4の場合、中央揃えのヒーローは禁止）、素材感と形状の一貫性を維持、インタラクティブ状態、フォーム（ラベルは上に配置し、プレースホルダーをラベルとして使用しない）、画像戦略（画像生成ツール → 実写真 → プレースホルダーであることを明記した領域。divベースの偽スクリーンショットは禁止。実際のSVGロゴを使用）、コンテンツ密度（見出しは8語以下、補足文は25語以下。データを詰め込んだセクションは禁止。コピーを自己監査し、偽の精密な数値にはフラグを立てる）、引用（最大3行、emダッシュは使用しない）、ページテーマの一貫性。 4.7 レイアウト規律［自由度：低 — 必ず実行］： ヒーローは初期ビューポートに収めてください（見出しは2行以下、補足文は20語以下、テキスト要素は最大4つ、上部パディングはpt-24以下）。ロゴ一覧はヒーローの下に置き、内部には置かないでください。ナビゲーションは1行、80px以下にしてください。ベントーのリズムとセル数を厳守してください。各レイアウトファミリーは1ページにつき最大1回とし、8セクションあたり4ファミリー以上を使用してください。画像＋テキストの交互配置は連続2回までです。アイブロウは3セクションあたり最大1つです（機械的な確認：uppercase trackingの数がceil(sections / 3)を超えたら不合格）。デフォルトで分割ヘッダーを使用することは禁止です。ベントーには、見た目に変化のあるセルを2～3個配置してください。各セクションで< 768px時の折りたたみを明示してください。 プリフライト不合格条件：ボタンまたはフォームのコントラストがWCAG AA未満、デスクトップでCTAラベルが折り返す、意図が同じCTAが2つある。 指針4.1～4.11の全文：references/design-directives.md。

5. コンテキストに応じたプロアクティブな動作 ［自由度：高］

ツールであり、デフォルトではありません。自動で実行されるものはありません。 Liquid Glass は、高級消費者向け／Apple 関連／ラグジュアリーな用途に限り、内側のボーダー、内側のシャドウ、prefers-reduced-transparency のフォールバックを適用します。マグネティックなマイクロフィジックスと絶え間ないマイクロインタラクションは、MOTION_INTENSITY > 5 で、かつセクションに効果がある場合にのみ使用します。スプリング物理（type: "spring", stiffness: 100, damping: 20）を使い、線形イージングは使用しません。 動きを謳うなら、実際に動かす： MOTION_INTENSITY > 4 の場合、ページは実際に動作する必要があります（ヒーローの登場、スクロールに応じた表示、CTA のホバー時の物理演算）。動作するモーションを実装できない場合は、ダイヤルを 3 に下げ、静的な状態でリリースしてください。各アニメーションには、理由を一文で示す必要があります。マーキーは 1 ページにつき最大 1 つです。 スティッキースタックと水平パンは、実際にピン留めしてください：start: "top top" を設定し、ラッパーをピン留めして、内側のトラックをスクラブします。 箇条書きの完全なリストと標準 GSAP スケルトン（5.A Sticky-Stack、5.B Horizontal-Pan、5.C Scroll-Reveal Stagger、5.D 禁止パターン）：references/details.md §5。

6–14. ガードレール、兆候、再設計、リリース前チェック

パフォーマンスとアクセシビリティのガードレール、ダイヤルの定義、ダークモードのプロトコル、AI の兆候（§9.F の本番環境テストに関する兆候と §9.G のダッシュを含む）、参考用語、再設計のプロトコル、ブロックライブラリの契約、対象範囲外の項目、最終リリース前チェックリスト：references/details.md §6–14。付録 A–C には、インストールコマンド、標準的なソース、Liquid Glass の近似表現が記載されています。

参考資料

• 概要、ダイヤル、システムマップ、スタック規約（セクション 0–3）
• デザインエンジニアリング指示（セクション 4）
• モーションスケルトン、ガードレール、AI の兆候、再設計プロトコル、リリース前チェック、付録（セクション 5–14）