プレミアムデザイン — キネティックラグジュアリー
プレミアムでエディトリアル、ハイエンドなインターフェースを構築するためのカタログ駆動型スキル。一般的なdesignスキルとは異なり、タイポグラフィ、モーション、そして抑制に重点を置いています。
デザイン哲学 — 5つのルール
1. タイポグラフィが主役
ディスプレイタイプ（見出し）はセリフ体または特徴的なディスプレイサンセリフ体を使用。ボディは洗練されたサンセリフ体（Inter、Geist、Satoshi）を使用。見出しは大きく — text-[clamp(2.5rem,8vw,10rem)] の領域。ディスプレイでは文字間隔を詰め（tracking-tight 以上）、行間は広く（leading-[0.9] または leading-none）、ボディではタイトに（leading-[1.45]）。
効果的なフォントペアリング：
- Fraunces（ディスプレイ）+ Inter（ボディ） — エディトリアル雑誌風
- Canela（ディスプレイ）+ Geist（ボディ） — 現代的なラグジュアリー
- Migra（ディスプレイ）+ Manrope（ボディ） — シャープなエディトリアル
- Reckless（ディスプレイ）+ Inter（ボディ） — ソフトなエディトリアルの温かみ
フォントは index.html 内の <link> タグまたはCSSの @import で読み込みます。ディスプレイにシステムフォントは使用しないでください。
2. モーションは意図的に、決して装飾的にしない
バウンドするスプリングは使用しません。素早い ease-out-200ms のフェードも使用しません。プレミアムモーションでは以下を使用します：
- 長い持続時間: 表示に800～1800ms
- 洗練されたイージング:
cubic-bezier(0.16, 1, 0.3, 1)(easeOutExpo)、cubic-bezier(0.22, 1, 0.36, 1)(easeOutQuint)、またはカスタムカーブ - ページロードよりスクロール駆動: モーションをユーザーアクションに結びつけるために、framer-motionの
useScroll+useTransformを使用 - セクションごとに1つの特徴的なモーション: ヒーローに5つものアニメーションを重ねない。コンテンツを引き立てるものを1つ選ぶ
アニメーションがコンテンツに貢献しない場合は、削除します。
3. レイヤーによる奥行き、シャドウではない
プレミアムな奥行きは、微妙なレイヤーを重ねることで生まれます：
- ベース：ノイズテクスチャオーバーレイ（CSSまたはSVG）
- コンテンツの下：暖色/寒色のグラデーションウォッシュ（非常に微妙、5～15%の不透明度）
- 中間層：装飾要素（大きなディスプレイ文字、かすんだ写真、グリッド）
- 最前面：コンテンツ
shadow-lg / shadow-2xl は避けてください — これらは一般的すぎます。代わりに shadow-[0_1px_0_rgba(255,255,255,0.05)] またはグラデーションボーダーを使用します。
4. 色は抑制を、構成には自信を
パレットは通常次の通りです：
- 背景: 暖色または寒色のオフホワイト/オフブラック（純粋な
#000や#fffは不可）。例：#0A0908（暖色ブラック）、#F7F5F1（暖色オフホワイト）、#0F1117（寒色ブラック） - テキスト: 背景に対して高いコントラストだが、柔らかく。例：
#0A0908上に#F7F5F1、#F7F5F1上に#1A1A1A - アクセント: 1色のみ、控えめに使用。例：
#C8522C（テラコッタ）、#4C3F2F（エスプレッソ）、#B8A978（ブラス）、#D9C2A4（シャンパン）
虹色のグラデーションは使用しません。ティール/パープルのテックスタートアップ風も避けます。
5. 構成は意図的にグリッドを破る
標準的な3カラムグリッドは一般的すぎます。プレミアムなレイアウトでは以下を使用します：
- 非対称: 一方のカラムがもう一方の2倍の幅の2カラム、またはコンテンツが3+4にまたがる7カラムグリッド
- 意図的な余白: 60%が余白で、コンテンツが片隅にあるセクション
- スケールのコントラスト: 巨大な見出しの隣にある小さなラベル
- オーバーラップ: コンテナの境界からはみ出す要素
迷ったら、カラムを減らすか、余白を増やします。
このスキルが対象としないもの
ユーザーが以下を求める場合：
- 標準的なB2B SaaSランディングページ（チャットバブル、プロダクトモックアップ、機能グリッド） →
designを使用 - 管理ダッシュボード / データ密度の高いUI →
designを使用 - スマートフォンモックアップ付きモバイルアプリランディング →
designを使用 - ストックフォトヒーロー付きコーポレートサイト →
designを使用
このスキルは以下に使用します：ファッションブランド、ラグジュアリー製品、デザインエージェンシー、クリエイティブポートフォリオ、建築事務所、エディトリアル出版物、デザイン重視として位置づけられたプレミアムSaaS。
ワークフロー — ステップ0：カタログを読む
ページを書き始める前に、以下を読んでください：
references/design-tokens.md— 色、タイポグラフィスケール、スペーシングreferences/motion-principles.md— イージング、タイミング、モーション哲学references/catalog/内の該当カテゴリ.md— 利用可能なバリアント
次にバリアントを選び、references/catalog/components/ 内の対応する .tsx を読んでください。
ページ → カタログファイルのマッピング：
| ページタイプ | カタログファイル |
|---|---|
| ランディング / ホーム | hero.md + features.md + testimonials.md + cta-sections.md + footers.md |
| 価格 | pricing.md |
| アバウト / スタジオ / マニフェスト | about.md |
| お問い合わせ | contact.md |
| ポートフォリオ / 作品 | gallery.md |
| FAQ / 備考 | faq.md |
| ナビゲーション（全ページ） | navigation.md |
現在のカタログ在庫 — 11コンポーネント、すべて独自のもの：
navigation.md— 1バリアント（エディトリアルマストヘッド）hero.md— 1バリアント（キネティックマスクヒーロー）features.md— 1バリアント（エディトリアルインデックス）stats.md— 1バリアント（エディトリアルナンバーズ）logos.md— 1バリアント（エディトリアルクライアントレッジャー）gallery.md— 1バリアント（エディトリアルワークインデックス）about.md— 1バリアント（エディトリアルストーリー / マニフェスト）testimonials.md— 1バリアント（エディトリアルプルクォート）pricing.md— 1バリアント（エディトリアルアシンメトリック）faq.md— 1バリアント（エディトリアルFAQ / 備考）cta-sections.md— 1バリアント（モーメントCTA）contact.md— 1バリアント（エディトリアルお問い合わせフォーム）footers.md— 1バリアント（エディトリアルマニフェストフッター）
絶対条件チェックリスト
完了報告の前に：
- 基礎の読み込み:
design-tokens.md+motion-principles.mdがコードを書く前に必ず読まれていること。 - カタログ参照: カタログから特定のバリアントが選択されていること。その名前を明記すること。
- フォントの読み込み: 必要なディスプレイフォントとボディフォントが
index.htmlの<link>またはCSSの@importで読み込まれていること。システムフォントはプレミアム感を損なう。 - 単一アクセントカラー: デザインは1つのアクセントカラー（＋ニュートラル）を使用していること。虹色パレットは不可。
- モーションのタイミング: 少なくとも1つのセクションがスクロール駆動のモーションを使用していること（ページロード時のフェードだけではない）。イージングは
easeOutExpoまたは同等のもの — デフォルトのeaseOutではないこと。 - 構成の破れ: 少なくとも1つのセクションが非対称レイアウト、意図的な余白、またはスケールのコントラストを使用していること。全て等幅カラムのグリッドではないこと。
- モバイル: 375pxでテストされていること。ディスプレイタイプは縮小されてもキャラクターは維持されていること（標準的なモバイルH1よりも大きいこと）。