このスキルは、ユーザーが明示的に選択するか、確認されたプロジェクト設定で指定された場合にのみ使用してください。説明のない新しいUIリクエストには、ユーザーの好みをここで判断する代わりに、スタイルセレクタ（例：select_style）を使用してください。既存のブランド、アクセシビリティ、およびユーザーのオーバーライドは、以下のすべての例よりも優先されます。以下のスタイルガイドは、スタイル選択前にUIコーディングを開始するための許可ではありません。
スタイルパック: クレイモーフィズム
ID: claymorphism
シグネチャ: 成型された、触覚的な、彫刻的な表面。二重の内側シャドウによる立体的な奥行き、ソフトな環境ドロップシャドウ、そして親しみやすい物理的な存在感。
これはスタイルパックであり、必須のデフォルトではありません。明示的な選択後、または確認されたプロジェクトスタイルに該当する場合にのみ読み込んでください。プロジェクトの指示は、個々の選択をオーバーライドできます。アクセシビリティ、ユーティリティ、ブランドの制約を維持してください。フォントは提案であり、必須の依存関係ではありません。角丸と1pxの境界線を持つフラットなカードは、クレイモーフィズムとはみなしません。
適した用途 / トレードオフ
- 適しているもの: 遊び心のある消費者向けエクスペリエンス、クリエイティブツール、個人用ダッシュボード、インタラクティブウィジェット、触覚的なWebアプリ、モダンな教育またはデザインプラットフォーム。
- 注意が必要なもの: 非常に密度の高い表形式データ、長文の法的読物、または過度なシャドウ計算がパフォーマンスを妨げる低電力デバイス。
- 参考方向性:
- 彩度の高いプライマリークレイ: リッチで鮮やかな紫（
#813FFC）の成型面。上部左側に明るい白の内側ハイライト、右下に深みのある色付きフォルムシャドウ、そして鮮明なタイポグラフィ。 - ライトポーセレンクレイ: 柔らかいオフホワイト（
#ECEBF5）の成型面。左上に純白の内側ハイライト、右下に柔らかなグレーラベンダーのフォルムシャドウ、そして濃いスレートパープルのタイポグラフィ。 - 沈み込んだインセットウェル: 凹んだフォーム入力。鮮明な白の浮き彫りリム（
3px solid rgba(255, 255, 255, 0.85)）、反転したインセットシャドウ、アクセシブルなプレースホルダーラベル。
- 彩度の高いプライマリークレイ: リッチで鮮やかな紫（
クレイ素材忠実度ゲート — 必須
クレイモーフィズムのページを完成と呼ぶ前に、最初のビューポートが彫刻されたクレイコンポジションとして視覚的に認識可能でなければなりません。 ユーザーがこのスタイルを選択した場合、角丸と1pxの境界線を持つフラットなカードは不合格です。たとえCSS変数がclayという名前であってもです。
成功したクレイモーフィズムの実装は、以下のすべてを示す必要があります。
- 立体的な二重内側シャドウ（ハイライト＋シャドウ）: クレイ表面は、対向する二重の内側シャドウを備えている必要があります。上部左側の内側ハイライトは入射光をシミュレートし（
inset 3px 4px 6px rgba(255,255,255,...)）、下部右側の内側フォルムシャドウは立体的な厚みをシミュレートします（inset -4px -6px 8px rgba(dark-tint,...)）。単一のフラットなハイライトラインや汎用的なベベルは不合格です。 - ソフトな着色環境ドロップシャドウ: 表面は、ソフトで方向性のある着色されたドロップシャドウ（
8px 16px 24px rgba(..., 0.20–0.35)）を落とし、硬い黒いドロップシャドウではなく、着色されたキャンバスの上に可塑性のある素材が浮かんでいるか、または置かれている感覚を生み出します。 - ふっくらとしたスクウィークルとピル形状: 余裕のある曲率（カードは
24px–32px、ボタンは20px–26px、ピルやサークルは9999px、スクウィークルチェックボックスは14px）。鋭い90度の角は不合格です。 - 沈み込み vs 隆起の極性: 操作可能なコンポーネント（ボタン、バッジ、トグルつまみ、カード）は外側に隆起します。格納ウェル（入力フィールド、非アクティブなスイッチチャンネル）は、逆のインセットシャドウとオプションの白い浮き彫りリムで内側に凹みます。
- インタラクション時の触覚的圧縮: ホバー時、フォーカス時、クリック時に、コントロールは微妙なスケールダウン（
scale(0.97–0.98)またはtranslateY(1–2px)）とシャドウの引き締めで物理的に反応し、指で押された本物の可塑性のあるクレイのように感じさせます。
ファーストビューポートテスト: デスクトップのスクリーンショットで、ページタイトルを読まずに、隆起した彫刻的なボタン、二重の内側ハイライト/シャドウ、そして凹んだ入力ウェルを特定します。それらがフラットに見えたり、単に角丸に見えたりする場合は、コンテンツを追加する前にシャドウトークンを修正してください。
カード枚数ルールではありません: 焦点を絞ったコンポーネントのショーケース（例：プライマリー「送信」ピル、セカンダリー「戻る」ピル、円形アクションボタン、触覚的なトグルスイッチ、チェックボックス、沈み込んだ入力フィールド）で、画面全体を入れ子のバルーンカードで埋め尽くすことなく、本物の素材忠実度を確立するのに十分です。
明示的なクレイ奥行き例外 — クレイは立体的な奥行きを持つことが許可される
クレイモーフィズム固有のオーバーライド: 過度なシャドウ、グロッシーエフェクト、ニューモーフィックなぼかしに対する普遍的な「アンチスロップ」注意事項は、ここでの二重内側シャドウ、ソフト環境ドロップシャドウ、白い浮き彫りアウトラインの禁止と解釈されてはなりません。これらは素材を可能にするプロパティであり、触覚的な物理的存在感に不可欠です。
- 許可される素材処理: 二重内側シャドウ（対向する明/暗）、ソフトなマルチストップ着色環境シャドウ、白い浮き彫り境界（
3px solid rgba(255,255,255,0.85)）、触覚的なプレス変換（scale(0.97)）。これらは、不可欠な触覚的な奥行きと物理的存在感を生み出します。静的CSSは、アニメーションライブラリのオーバーヘッドゼロで完全な素材忠実度を提供します。 - 色のコントラスト規律: 彩度の高いプライマリークレイボタンは、少なくとも4.5:1のコントラストで純白のテキスト（
#FFFFFF）を必要とします。ライトポーセレンクレイ表面は、濃い暗色テキスト（#28233Dまたは#1D1735）を必要とします。沈み込んだウェルは、明確でアクセシブルなプレースホルダーテキスト（#7C739Eまたはそれ以上に濃い色）を必要とします。 - アンチスロップ解釈: クレイの奥行きは、素材の目的、物理的な一貫性、可読性によって評価し、CSSシャドウ宣言の数で評価しないでください。汎用的な最小ヒューリスティックを満たすために二重内側シャドウを削除することは、デザインの後退です。
実装の開始点については examples/claymorphism/sculpted-surfaces.css を、視覚的な受け入れ基準については tests/claymorphism-visual.md を参照してください。
タイポグラフィとタイプライティング
親しみやすいヒューマニストまたはジオメトリックサンセリフ: Manrope、Nunito Sans、またはシステムサンセリフ。ラベルはウェイト500/600/700、見出しは700/800。スケールは14/16/20/26/34 px、行間は1.45–1.6。文の先頭のみ大文字（Sentence case）と簡潔で人間的なラベルを推奨します。立体的な表面の上で壊れやすく見える細いディスプレイフォントは避けてください。
カラーディレクション
まとまりのあるパステルと彩度の高いパレットを選択してください:
- ライトモード（ライトポーセレンクレイ）:
- キャンバスベース: 柔らかいパステルライラック/ラベンダー（
#D7D1F1または--taste-clay-bg: #d7d1f1）。 - 彩度の高いプライマリークレイ: 鮮やかな紫（
#813FFC）に白いテキスト（#FFFFFF）、明るい左上の白いハイライト、そして右下の濃い紫のフォルムシャドウ。 - セカンダリーライトクレイ: 柔らかいオフホワイトのポーセレン（
#ECEBF5/#F0EFF7）に濃いインク（#28233D）、明るい左上のハイライト、そして柔らかなラベンダーの右下フォルムシャドウ。 - 沈み込んだ入力ウェル: キャンバスに着色されたウェル（
#D7D1F1）を、鮮明な白の浮き彫りリム（3px solid rgba(255, 255, 255, 0.85)）で縁取り、凹んだインセットシャドウ、読みやすいプレースホルダー（#8F87B0）。
- キャンバスベース: 柔らかいパステルライラック/ラベンダー（
- ダークモード（ディープナイト彫刻クレイ）:
- キャンバスベース: ムーディーな黒曜石インディゴ（
#161326）。 - 彩度の高いプライマリークレイ: 鮮やかな紫（
#813FFC）に純白のテキスト（#FFFFFF）、左上のハイライト、そして濃い紫のフォルムシャドウ。 - セカンダリークレイ表面: リッチな彫刻的なプラム/スレート（
#26203D）に鮮明な淡いポーセレンテキスト（#F3F0FA）、ソフトな半透明の左上ハイライト（rgba(255, 255, 255, 0.15)）、そして深い黒の右下フォルムシャドウ（rgba(10, 5, 25, 0.60)）。 - 沈み込んだ入力ウェル: 深く凹んだウェル（
#1E1A33）を、微妙な浮き彫りリム（3px solid rgba(255, 255, 255, 0.20)）で縁取り、凹んだインセットシャドウ、読みやすいプレースホルダー（#A49BBF）。
- キャンバスベース: ムーディーな黒曜石インディゴ（
- テーマコントラスト結合: ダークモードに切り替えるとき、セカンダリークレイ表面のテキストは、暗いインク（
#28233D）から淡いポーセレン（#F3F0FA）に反転する必要があります。暗いクレイ上に暗いインクテキストを残すと、即座にコントラスト不良となります。彩度の高いプライマリーボタンは、両モードで4.5:1以上のコントラストで純白のテキスト（#FFFFFF）を保持します。
レイアウトとジオメトリ
カードは半径24–32 px、ボタンは20–26 px、フルピルまたはサークルは9999px、スクウィークルバッジとチェックボックスは14–16 px。一貫した8 pxのリズムと快適なガターを維持します。意味的なインタラクションのないランダムな円は避けてください。
表面、奥行き、テクスチャ
表面は、物理的なマットクレイから成形されたように感じられなければなりません:
- プライマリークレイ（隆起）:
box-shadow: inset 3px 4px 6px rgba(255, 255, 255, 0.45), inset -4px -6px 8px rgba(40, 10, 110, 0.40), 8px 16px 24px rgba(100, 45, 210, 0.35), 2px 4px 8px rgba(70, 20, 150, 0.20); - ライトポーセレンクレイ（隆起）:
box-shadow: inset 3px 4px 6px rgba(255, 255, 255, 0.95), inset -4px -6px 8px rgba(145, 135, 180, 0.35), 8px 16px 24px rgba(110, 95, 160, 0.20), 2px 4px 8px rgba(110, 95, 160, 0.12); - 沈み込んだウェル（凹み）:
box-shadow: inset 3px 4px 8px rgba(110, 95, 165, 0.25), inset -2px -2px 6px rgba(255, 255, 255, 0.70);border: 3px solid rgba(255, 255, 255, 0.85);で縁取ります。
コンポーネントのアナトミーとインタラクション
- プライマリーボタン（「送信 >」）: 彩度の高い紫色のピル、白い太字テキスト、方向性のある山形記号、クリック時の触覚的圧縮。
- セカンダリーボタン（「戻る ↶」）: ライトポーセレンのピル、暗いインクテキスト、戻る矢印アイコン、クリック時の触覚的圧縮。
- 円形アクションボタン: 50% ボーダー半径の丸いボタン（例：一時停止
❚❚）、彩度の高いクレイ、中央揃えのアイコン。 - トグルスイッチ: ピル形状のトラックと滑らかなクレイのつまみ球体。ライトトラック/紫のつまみと紫のトラック/白のつまみの間で切り替え。
- チェックボックス: 二重内側シャドウと鮮やかな紫色のチェックマーク（
✓）を持つスクウィークルコンテナ。 - 入力フィールド: 左側のアイコン、読みやすいプレースホルダー、白い浮き彫りリムの境界線を持つ、沈み込んだウェル。
モーション
140–200 msのスムーズなイーズアウト。プレス時の触覚的圧縮（scale(0.97) または translateY(2px)）とシャドウの引き締め。バウンス、オーバーシュート、連続フローティングループは決して使用しないでください。
オプションのAnime.js v4レシピ
- モーション決定: 1–2%の圧縮と短い戻りを持つ押下ボタン。既存の彫刻的なシェーディングを維持します。
- 開始期間: 180ms（0 = 即時）。タスクとユーザーの好みに応じて調整します。
- 避けること: バウンス、オーバーシュート、フローティングループ。
- 依存関係: デフォルトではCSS/ネイティブ。要求されたインタラクションが正当化される場合にのみ、Anime.js v4を使用します。利用可能な場合はTaste Engineの
references/motion-engine.mdに従ってください。スタンドアロンスキルは、上記のモーション抑制と装飾ループ禁止の原則に従います。
UIライティングとマイクロコピー
温かみと具体性。例：「送信」、「戻る」、「ユーザー名を入力」、「下書きに保存」。甘ったるいAIスローガンや偽のマーケティングハイプは避けてください。
スタータートークン（提案であり、完全なテーマではありません）
| トークン | ライトモードデフォルト | ダークモードデフォルト |
|---|---|---|
--taste-clay-bg | #d7d1f1 | #161326 |
--taste-clay-primary | #813ffc | #813ffc |
--taste-clay-light | #ecebf5 | #26203d |
--taste-clay-text | #28233d | #f3f0fa |
--taste-clay-muted | #7c739e | #a49bbf |
--taste-clay-shadow-primary | 8px 16px 24px rgba(100, 45, 210, 0.35), 2px 4px 8px rgba(70, 20, 150, 0.20) | 8px 16px 24px rgba(10, 5, 25, 0.50), 2px 4px 8px rgba(10, 5, 25, 0.30) |
--taste-clay-inner-primary | inset 3px 4px 6px rgba(255, 255, 255, 0.45), inset -4px -6px 8px rgba(40, 10, 110, 0.40) | inset 3px 4px 6px rgba(255, 255, 255, 0.45), inset -4px -6px 8px rgba(40, 10, 110, 0.50) |
--taste-clay-shadow-light | 8px 16px 24px rgba(110, 95, 160, 0.20), 2px 4px 8px rgba(110, 95, 160, 0.12) | 8px 16px 24px rgba(0, 0, 0, 0.45), 2px 4px 8px rgba(0, 0, 0, 0.25) |
--taste-clay-inner-light | inset 3px 4px 6px rgba(255, 255, 255, 0.95), inset -4px -6px 8px rgba(145, 135, 180, 0.35) | inset 3px 4px 6px rgba(255, 255, 255, 0.15), inset -4px -6px 8px rgba(10, 5, 25, 0.60) |
--taste-clay-inner-well | inset 3px 4px 8px rgba(110, 95, 165, 0.25), inset -2px -2px 6px rgba(255, 255, 255, 0.70) | inset 3px 4px 8px rgba(0, 0, 0, 0.50), inset -2px -2px 6px rgba(255, 255, 255, 0.15) |
--taste-clay-well-rim | 3px solid rgba(255, 255, 255, 0.85) | 3px solid rgba(255, 255, 255, 0.20) |
--taste-clay-radius-pill | 9999px | 9999px |
--taste-clay-radius-btn | 24px | 24px |
--taste-clay-radius-card | 28px | 28px |
--taste-clay-radius-squircle | 14px | 14px |
--taste-font-body | Manrope, system-ui, sans-serif | Manrope, system-ui, sans-serif |
--taste-motion-duration | 180ms | 180ms |
トークンは方向性を表し、すべてのパレット/プラットフォームでコピーペーストが保証されるわけではありません。プロジェクトレベルで --taste-clay-* を定義し、色のコントラストを確保し、リテラル値を散りばめるのではなく、テーマトークンを介して適応させてください。
ヒーローコンポジション（フルファーストビューポート）
公開向けのポートフォリオ/ランディング/ホームページにヒーローがある場合: 1画面のヘッダー＋ヒーローコンポジションを使用します。ベースの高さは min-height: 100svh とし、100vh をフォールバックに、ヘッダーがノーマルフローの場合のみ実際のヘッダーを差し引きます。アクセシビリティと短いモバイル画面のためにヒーローを拡張させてください。これをプライベートダッシュボードやその他のタスク画面に適用しないでください。ユーザーによる直接のオーバーライドが優先されます。スタイル固有の方向性: 彫刻的な1つのヒーロー表面、または注意深くバランスの取れたソフトマテリアル環境を使用します。実際のポートフォリオの導入部とCTAを最初の画面のコンポジションに配置します。100svhを埋めるためにパフカードを入れ子にしないでください。クレイの奥行きは、微妙で方向性を保ち、かなりのフラットスペースを残す必要があります。ルーターの references/hero-layout.md があれば参照してください。スタンドアロンでの使用も、同じレスポンシブおよびアンチスロップの原則に従います。
スタイル固有の品質ゲート
- 行うべきこと: 触覚的な二重内側シャドウが見えることを確認します。一貫した照明方向（左上から右下）を維持します。触覚的なアクティブ/プレス状態を提供します。プライマリークレイとライトクレイの両方でWCAG AAコントラストを確認します。ダーク/ライトモードの切り替えを確認し、テキストと表面の色が結合ペア（例：暗いクレイ上の淡いポーセレンテキスト、明るいクレイ上の暗いインクテキスト）で適応することを確認します。
- 行うべきでないこと: 単純な角丸をクレイとして扱わないでください。バルーンシャドウ、過度なグロッシーハロー、読みにくい明るい色の上の明るい色のラベル、装飾的なバッジ、暗いテキストが暗いクレイ上に残るダーク/ライトモードの衝突を避けてください。
- デスクトップとモバイルでの一貫性を確認します。