このスキルは、ユーザーが明示的に選択した場合、または確認済みのプロジェクト設定で指定された場合にのみ使用してください。説明のない新しいUIリクエストに対しては、ユーザーの好みをここで決めつけず、代わりにスタイルセレクタなどを使用してください。既存のブランド、アクセシビリティ、ユーザーによるオーバーライドは、以下のすべての例よりも優先されます。以下のスタイルガイドは、スタイル選択前にUIコーディングを開始する許可を与えるものではありません。
スタイルパック: スキューモーフィズム
ID: skeuomorphism
シグネチャ: デジタルコントロールは、物理的なオブジェクト、産業機械、アナログハードウェアから触覚的なアフォーダンスを借用する。
これはスタイルパックであり、必須のデフォルトではありません。明示的な選択または確認済みの該当プロジェクトスタイル後にのみロードしてください。プロジェクトの指示は個々の選択を上書きできます。アクセシビリティ、ユーティリティ、ブランドの制約を維持してください。フォントは提案であり、必須の依存関係ではありません。微妙なグラデーションを持つフラットカードはスキューモーフィズムとは見なされません。
適した用途とトレードオフ
- 適している: 音楽制作およびシンセサイザーソフトウェア、オーディオギアツール、特殊なシミュレーター、触覚的なダッシュボードウィジェット、クリエイティブなデジタルインストルメント、遊び心のある触覚体験。
- 注意が必要なもの: 密度の高いトランザクションデータテーブルやモバイルのエンタープライズフォーム。派手なハードウェアテクスチャが視覚的な乱雑さを生み出す可能性があります。
- 参考となる方向性:
- ブラシ加工された工業用アルミ/スタジオハードウェア: 機械加工されたシルバーまたはガンメタルのシャーシに、放射状の金属反射、ローレット加工されたダイヤル、くぼんだインジケーターウェル、そしてクリスプなメカニカルトグルスイッチ。
- 精密マットインストルメント: 深いグラファイト/マットコンポジットベースに、彫刻された白い読み出しタイポグラフィ、LEDジュエルステータスインジケーター、物理的なロッカースイッチ。
スキューモーフィック素材忠実度ゲート — 必須
スキューモーフィックなページを完了と呼ぶ前に、開始ビューポートが物理的で触れられる楽器またはハードウェアインターフェースとして視覚的に読み取れなければなりません。 ユーザーがこのスタイルを選択した場合、標準的な角丸と単一のグラデーションを持つフラットカードは不合格です。たとえCSSクラスにskeuoが含まれていても同様です。
成功したスキューモーフィックな実装は、以下のすべてを示している必要があります。
- 光源モデルの方向とスペキュラーハイライト: サーフェスは一貫した単一の光源（通常はトップダウン）に従う。上端はクリスプな1pxのスペキュラーハイライト（
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35)）を捉え、下端は物理的なドロップシャドウを落とす。 - マルチストップ反射素材サーフェス: ノブ、フェースプレート、ロッカースイッチは、ブラシ加工アルミ、マットプラスチック、または陽極酸化金属をシミュレートするマルチストップのリニアまたはラジアルグラデーションを使用する。フラットな単色塗りつぶしは不合格。
- 彫刻または凹型の極性: テキスト表示、スライダー、メーターウェルは、深いインセットシャドウ（
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6)）を使用してシャーシ内に視覚的に沈められ、動くコントロールとそれらを収容するコンテナを明確に区別する。 - インタラクション時の機械的な動き: ボタンはクリック時に物理的にシャーシ内に沈み込み（
transform: translateY(1.5px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.7);）、実際のバネ式スイッチのメカニズムを模倣する。 - 読み取り可能なアナログアフォーダンス: 物理的なダイヤルとスライダーには、明確なデジタル読み出しまたはラベル付きの数値目盛りが含まれ、キーボードアクセシビリティと正確なデータ入力を保証する。
最初のビューポートテスト: デスクトップのスクリーンショットで、ページタイトルを読まずに、物理的なシャーシ、スペキュラーベベルのハイライト、凹型ウェル、触覚的なハードウェアコントロールを特定できるか。もしそれが純粋にデジタルでフラットに見えるなら、グラデーションの反射とベベルハイライトを強化せよ。
明示的なスキューモーフィック素材の例外 — ハードウェア反射は許可
スキューモーフィズム固有のオーバーライド: 装飾的なグラデーション、テクスチャ、シャドウに対する普遍的なアンチスロップの注意事項は、ここではマルチストップ素材グラデーション、金属反射、ベベルリム、物理的な動きの禁止として解釈されてはなりません。これらは素材を有効にするプロパティであり、機械的なアフォーダンスを伝えるために不可欠です。
- 許可される素材処理: マルチストップのメタリックリニア/ラジアルグラデーション、1pxのハイライトベベル、凹型ウェルチャンネル、ローレット加工されたノブの境界線、ジュエルLEDステータスライト。
- アンチスロップの境界: すべての機械的なメタファーは、実際の機能するアクションに対応していなければなりません。画面を偽のネジ、回らない装飾用ノブ、または作り物の測定値を表示する静的メーターで飾ってはいけません。
- アンチスロップの解釈: スキューモーフィックな詳細は、触覚的なアフォーダンス、機能的なユーティリティ、読みやすさによって評価し、グラデーションのカラーストップの数で評価してはいけません。一般的なフラットヒューリスティックを満たすために物理的なベベルを削除することはデザインの後退です。
タイポグラフィとタイプライティング
実用的なテクニカルサンセリフまたは表示用モノスペース: IBM Plex Sans、DIN Next、Roboto Mono、またはシステムサンセリフ。コントロールラベル: 11–13px 大文字でトラッキングあり（letter-spacing: 0.08em）；表示メーター: 高コントラストLCD/LEDモノ（16–24px）。暗いフェースプレートに対して高いコントラスト（少なくとも4.5:1）。
カラーディレクション
- ダークモード（陽極酸化ガンメタルダークシャーシ）:
- シャーシベース: 機械加工されたスレート/陽極酸化ガンメタルグラデーション（
linear-gradient(180deg, #323741 0%, #262A32 100%)）。 - サーフェスハイライト: スペキュラーホワイトヘアライン（
rgba(255, 255, 255, 0.40)）。 - 凹型インセットウェル: 深い空洞の黒（
#141619から#181A1E）。 - コントロールラベル: クリスプに彫刻された白/シルバーのタイポグラフィ（
#F3F4F6）。
- シャーシベース: 機械加工されたスレート/陽極酸化ガンメタルグラデーション（
- ライトモード（ブラシ加工アルミ/シルバーシャーシ）:
- シャーシベース: 機械加工されたアルミ/シルバーグラデーション（
linear-gradient(180deg, #F5F7FA 0%, #E4E7EB 100%)）。 - サーフェスハイライト: スペキュラーホワイトヘアライン（
rgba(255, 255, 255, 0.85)）。 - 凹型インセットウェル: ソフトな凹型スレート空洞（
#D1D5DBにインセットシャドウ）。 - コントロールラベル: 深く彫刻されたチャコールインク（
#1F2937または#111827）。
- シャーシベース: 機械加工されたアルミ/シルバーグラデーション（
- 物理的なアクセント: シグナルアンバー（
#FFAE00）、アビエーショングリーン（#10B981）、またはスタジオコバルト（#2563EB）。 - LEDインジケーター: 明確なアクティブ発光対ダーク非アクティブ状態を持つクリスプなジュエルカラー。
- テーマ結合と衝突防止ルール: ライトスキューモーフィックシャーシモードでは、彫刻ラベルとコントロールテキストは必ず深いチャコール（
#1F2937）に変更しなければなりません。ブラシ加工シルバー/アルミシャーシに白いラベルを残すとテキストが見えなくなり、固く禁止されています。
レイアウトとジオメトリ
コンポーネントの形状は、その物理的なメタファーに厳密にマッピングされる：ロータリーダイヤル、触覚的なプッシュボタン、ロッカースイッチ、セグメント化されたメーター。パネルは4–12pxの角丸、ノブは円形の半径。一般的なテキスト段落にハードウェアスキンを適用しないでください。
サーフェス、深み、テクスチャ
- シャーシパネル: マルチストップリニアグラデーション（
linear-gradient(180deg, #323741 0%, #262A32 100%)）に1pxのトップハイライトと下部ドロップシャドウ。 - 物理的なプッシュボタン: トップハイライトとラジアルボタンサーフェス、クリスプなアクティブ押下状態を持つベベルリム。
- 沈んだウェル/ディスプレイ:
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.65), 0 1px 0 rgba(255, 255, 255, 0.15);
コンポーネントの構造とインタラクション
- 触覚的なプッシュボタン: 機械加工されたアルミ仕上げ、白い彫刻ラベル、リリース時に機械的にバネで戻る。
- ロッカー/トグルスイッチ: アクティブ側に目に見えるキャストシャドウを持つデュアルステート物理トグル。
- 凹型LCD/データ表示: モノスペース値、微妙なラスターグリッド、高コントラストを持つ沈んだ画面。
- ロータリーダイヤル/スライダー: ARIAスライダーセマンティクスとキーボード矢印キーサポートを備えた触覚的な位置インジケーター。
- LEDステータスライト: アクティブ時に放射状の輝きを持つ小さな円形ジュエルレンズ（
box-shadow: 0 0 8px currentColor）。
モーション
140–200 msの機械的な応答。クリック時に直接1–2pxの物理的な沈み込み。弾むような漫画のオーバーシュートはなし。動きは重みがあり、減衰しているように感じられなければなりません。
オプションのAnime.js v4レシピ
- モーションの決定: 減衰ばねまたは線形機械的な押下時の沈み込み、ダイヤルには正確な回転。
- 開始時間: 160ms（0 = 即時）。タスクとユーザーの好みに合わせて調整。
- 避けるべきこと: 永久振動、プロンプトなしのニードルの揺れ、浮遊要素。
- 依存関係: デフォルトではCSS/ネイティブ。要求されたインタラクションがそれを正当化する場合にのみAnime.js v4を使用。利用可能な場合はTaste Engineの
references/motion-engine.mdに従う。スタンドアロンスキルは、上記のモーション軽減および装飾ループなしの原則に従う。
UIライティングとマイクロコピー
技術的で、正確で、簡潔。例: "Master Output"、"Bypass"、"Channel 01"、"Gain: +3.5 dB"。インストルメントパネルに冗長なマーケティング用語を避ける。
スタータートークン（提案であり、完全なテーマではありません）
| トークン | ダークシャーシデフォルト | ライトシャーシデフォルト |
|---|---|---|
--taste-skeuo-chassis-bg | linear-gradient(180deg, #323741 0%, #262a32 100%) | linear-gradient(180deg, #f5f7fa 0%, #e4e7eb 100%) |
--taste-skeuo-chassis-border | 1px solid rgba(0, 0, 0, 0.8) | 1px solid rgba(0, 0, 0, 0.15) |
--taste-skeuo-chassis-highlight | inset 0 1px 0 rgba(255, 255, 255, 0.25) | inset 0 1px 0 rgba(255, 255, 255, 0.90) |
--taste-skeuo-text | #f3f4f6 | #1f2937 |
--taste-skeuo-btn-bg | linear-gradient(180deg, #3c424f 0%, #2a2e37 100%) | linear-gradient(180deg, #ffffff 0%, #e2e8f0 100%) |
--taste-skeuo-btn-bevel | inset 0 1px 0 rgba(255, 255, 255, 0.40), inset 0 -1px 0 rgba(0, 0, 0, 0.50) | inset 0 1px 0 rgba(255, 255, 255, 0.80), inset 0 -1px 0 rgba(0, 0, 0, 0.20) |
--taste-skeuo-btn-shadow | 0 4px 8px rgba(0, 0, 0, 0.50), 0 1px 2px rgba(0, 0, 0, 0.40) | 0 4px 8px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08) |
--taste-skeuo-well-inset | inset 0 3px 6px rgba(0, 0, 0, 0.70), 0 1px 0 rgba(255, 255, 255, 0.12) | inset 0 3px 6px rgba(0, 0, 0, 0.18), 0 1px 0 rgba(255, 255, 255, 0.80) |
--taste-skeuo-led-active | #10b981 | #059669 |
--taste-skeuo-led-glow | 0 0 10px rgba(16, 185, 129, 0.75) | 0 0 8px rgba(5, 150, 105, 0.45) |
--taste-skeuo-radius-panel | 12px | 12px |
--taste-skeuo-font-mono | IBM Plex Mono, ui-monospace, monospace | IBM Plex Mono, ui-monospace, monospace |
--taste-skeuo-motion-duration | 160ms | 160ms |
トークンは方向性を表し、すべてのパレット/プラットフォームでコピーペーストで保証されるわけではありません。プロジェクトレベルで --taste-skeuo-* を定義し、カラーコントラストを確保し、リテラル値を散在させるのではなくテーマトークンを介して適応させてください。
ヒーローコンポジション（最初のビューポート全体）
公開ポートフォリオ/ランディング/ホームページにヒーローがある場合: 1画面のヘッダー+ヒーローコンポジションを使用します。ベースの高さは min-height: 100svh、フォールバックとして 100vh とし、ヘッダーが通常フローにある場合にのみ実際のヘッダーを差し引きます。アクセシビリティと短いモバイル画面のためにヒーローを拡張させます。これをプライベートダッシュボードや他のタスク画面には適用しないでください。ユーザーの直接オーバーライドが優先されます。スタイル固有の方向性: 最初のビューポートを本物のマスターコントロールコンソールまたはシグネチャーインストルメントのフェースプレートとして扱います。機能するコントロールと明白なプライマリCTAを提供します。機能しないネジ、装飾用ケーブル、接続されていないアナログメーターでキャンバスを散らかさないでください。存在する場合はルーターの references/hero-layout.md を参照。スタンドアロン使用も同じレスポンシブおよびアンチスロップの原則に従います。
スタイル固有の品質ゲート
- 推奨事項: すべてのコントロールで一貫したトップダウンのスペキュラーハイライトを確認する。機械的なプレス状態が滑らかに沈み込むことを確認する。ダイヤル/スライダーとともに数値読み出しを提供する。キーボードフォーカスをテストする。ダーク/ライトモードの切り替えを確認し、シャーシ、ベベルハイライト、ウェル、ラベルタイポグラフィが結合ペアで適応することを確認する。
- 禁止事項: プレーンなダークテーマをスキューモーフィズムとして扱わない。実際のデータに接続されていない機能しない装飾用ネジや偽のアナログ針を追加しない。暗いフェースプレートで読みにくい低コントラストのテキスト、またはシルバーのライトフェースプレートで白いラベルを使用するのは避ける。
- デスクトップとモバイルの一貫性、表示可能なキーボードフォーカス（
:focus-visible）、ローディング、空、無効、エラー、成功状態、モーション軽減動作（prefers-reduced-motion）を確認する。 - スタイル固有の仮定を無関係なプロジェクトに注入しない。スタイルを組み合わせる場合は、プライマリスタイルと借用した機能を明示的に名前付けする。
ユニバーサルアンチスロップゲート（自己完結型）
すべての要素はその場所に値する必要があります。コンテンツは装飾よりも優先。不確かなものを装飾してはいけません。 残高、指標、推薦の言葉、ユーザー、ロゴ、承認、確認済み/ライブ/オンラインステータス、偽のアクティビティ、成功確認をでっち上げないでください。正直な空/ローディング/エラー状態を使用してください。デモデータはリクエストがあり、表示可能にラベル付けされている場合にのみ許容されます。
装飾的なカード内カードのレイヤーを追加しないでください。ネストされたサーフェスは、明確なインタラクションまたは情報の境界を表す必要があります。自動生成された3機能グリッド、4統計ダッシュボード、偽のヒーロー主張、目的のないチャート、バッジ/チップ/アイコンのスパム、無関係な装飾アート、ビューポートを埋めるためだけのランダムなループを避けてください。タイポグラフィ、スペーシング、配置、区切り線によるグループ化を優先してください。同等のピアには意図的な視覚的バランスが必要です。
アンチスロップコピーライティング: 「可能性を解き放て」「未来を体験せよ」「ワークフローを加速」「シームレス」などの一般的な主張や、その翻訳に相当するものは使用しないでください。見出しは実際のコンテンツを伝え、CTAはアクションを名前付けし、空/エラー/成功テキストは実際の状態と次のステップを説明する必要があります。偽の緊急性、作り物のカウント、曖昧なAI誇大広告、不必要な絵文字、アクセスできない全大文字の壁を避けてください。真実を変えずに、文言をこのスタイルとユーザーの言語に適応させてください。
テーマとモードのコントラストの整合性: ユーザーがダークモードまたはライトモードをリクエストした場合（またはテーマスイッチャーを構築した場合）、背景色と前景色は、すべてのサーフェス、テキスト、境界線、入力、セマンティックバッジで同期ペアで反転する必要があります。暗い背景に黒いテキスト、白い背景に白いテキスト、または読みにくい低コントラストのステータスピルを決して残さないでください。すべての状態はWCAG AAコントラスト（本文/標準テキストは最小4.5:1、大きな見出しとインタラクティブな境界は3:1）を満たしている必要があります。
レスポンシブとモーション: モバイルで意図的に構成し、長いラベルを確認し、フォーカス…