web-prototype-taste-soft

Web プロトタイプ — ソフトプレミアム

「Apple 風」「Linear クラス」「プレミアムなコンシューマー向け」「落ち着いた SaaS」「15 万ドル規模のエージェンシー」のような仕上がりを求めるブリーフ向けです。柔らかく、重厚で、入れ子構造にこだわり抜いた美学です。

ソース

Leonxlnx/taste-skill — skills/soft-skill/SKILL.md（「Vanguard UI Architect」）から要点を抽出しました。触覚的なマイクロ美学、二重ベゼル構造、モーションの振り付けルールが含まれます。完成版のテンプレートについては、このディレクトリの example.html をご覧ください。

厳守ルール

• キャンバス： シルバーグレーまたはウォームクリーム（#F2F2F0 または #FDFBF7）。純白は使用しないでください。
• 書体の組み合わせ： ディスプレイには Geist／Plus Jakarta Sans／Cabinet Grotesk の太字を使用し、本文には同じファミリーの書体、等幅メタデータには Geist Mono を使用します。
• ディスプレイ： clamp(48px, 7vw, 96px)、letter-spacing: -0.035em、line-height: 0.96。太字（700 以上）にします。
• スクワークルの角丸： 主要な面には border-radius: 28px–40px（rounded-[2rem] から rounded-[2.5rem]）を使用します。
• 二重ベゼル必須： 重要なカードはすべて、ラッパー（p-1.5、極細の境界線、柔らかな外側のシャドウ）の内側に、独自の背景と 同心円状の小さな角丸 を持つ内部コアを配置します（例：外側 2rem、内側 calc(2rem - 0.375rem)）。
• CTA = ボタン内ボタン： プライマリ CTA は全面ピル型（rounded-full px-6 py-3）にします。末尾の矢印は、右端にぴったり配置した独立した円形ラッパーの中に置きます。
• アンビエントな奥行き： ヒーローの背後に、ゆっくり漂う放射状のメッシュブロブを 1 つ配置します。opacity ≤ 0.18、pointer-events: none、固定配置にします。
• アイブロウタグ： 各セクション見出しの上に、ピル型、モノスペースの大文字、letter-spacing: 0.2em、text-[10px] のタグを配置します。

使用禁止

• Inter、Roboto、Helvetica、Open Sans。
• 汎用的な 1px のグレー実線の境界線（border-black/5／ring-1 ring-black/5 を使用）。
• shadow-md、shadow-lg、くっきりしたドロップシャドウ。拡散した広がりのある低不透明度のものだけを使用します（0 20px 40px -15px rgba(0,0,0,0.05)）。
• 上端に固定された、画面端から画面端まで広がるナビゲーションバー。フローティングのガラス風ピル型（mt-6 mx-auto w-max rounded-full）を使用します。
• linear または ease-in-out のトランジション。cubic-bezier(0.32, 0.72, 0, 1) またはスプリング物理を使用します。
• h-screen（min-h-[100dvh] を使用）。
• width／height／top／left のアニメーション。transform と opacity のみを使用します。
• 純黒の #000。Zinc-950／Off-Black を使用します。

必須コンポーネント

• backdrop-blur-2xl を使ったフローティングピル型ナビゲーションバー。
• 非対称なヒーロー：巨大な太字ディスプレイ、アイブロウタグ、max-w-[52ch] の本文リード、2 つの CTA（ボタン内ボタンの矢印付きプライマリピル＋ゴースト）。
• 二重ベゼルパターンを使った Bento グリッド。横長カードを 1 つ以上、縦長カードを 1 つ以上含めます。
• Z 軸カスケードまたは分割画像モジュールを使った機能紹介行。
• 顧客ロゴのマーキー帯。ゆっくりと無限に移動（-100% / 20s）し、ホバー時に一時停止します。
• 柔らかく反転した面（深いジンク／エスプレッソ）のクロージングバンド。
• フッター：モノスペースのメタデータ、その上に極細線。

モーション

• すべてのトランジション：最低でも transition: transform 700ms cubic-bezier(0.32,0.72,0,1)。
• CTA のホバー時：外側のピルは :active で 0.98 に拡大縮小し、内側の末尾アイコンの円は (+1px, -1px) 移動して scale(1.05) に拡大します。
• スクロール時の出現：translateY(16px) blur(8px) opacity(0) → translateY(0) blur(0) opacity(1)。IntersectionObserver のみを使用します。
• マーキー：複製されたトラックに適用し、transform: translateX(-50%) を 30s linear で無限に繰り返します。
• ヒーローのメッシュブロブ：24 秒以上のキーフレーム移動。不透明度のみ、または transform のみを使用します。

実装前チェック

• backdrop-blur と極細のリングを備えたフローティングピル型ナビゲーション
• 二重ベゼル（外側シェル＋内部コア、同心円状の角丸）を使ったカードが 1 つ以上ある
• プライマリ CTA がボタン内ボタンの末尾アイコンを使用している
• セクションのパディングが py-24 以上
• 使用禁止のフォントを使っていない。ディスプレイのウェイトが 700 以上
• ヒーローに min-h-[100dvh] を使用し、100vh は使用していない
• すべてのトランジションでカスタムの cubic-bezier またはスプリングを使用し、linear／ease-in-out は使用していない
• モバイル：768px 未満ではレイアウトが 1 列になり、回転と重なりをすべて解除している