このスキルは、ユーザーが明示的に選択した場合、または確認されたプロジェクト設定で指定された場合にのみ使用してください。説明のない新しいUIリクエストについては、ユーザーの好みをここで判断する代わりに、スタイルセレクタ（例：スタイルを選んでください）を使用してください。既存のブランド、アクセシビリティ、ユーザーによるオーバーライドは、以下のすべての例よりも優先されます。以下のスタイルガイドは、スタイル選択前にUIコーディングを開始するための許可ではありません。
スタイルパック: スイス / エディトリアル
ID: swiss-editorial
シグネチャ: グリッド駆動の厳格なタイポグラフィ階層、劇的なスケールコントラスト、構造的なヘアライン罫線、番号付きインデックス、意図的なネガティブスペース。
これはスタイルパックであり、必須のデフォルトではありません。明示的な選択後、または確認された該当プロジェクトのスタイルの場合のみロードしてください。プロジェクトの指示は個々の選択を上書きできます。アクセシビリティ、ユーティリティ、ブランドの制約を維持してください。フォントは提案であり、必須の依存関係ではありません。黒いサンセリフテキストだけのプレーンなページは、スイス・エディトリアルとして認定されません。
適切な用途 / トレードオフ
- 適している: ハイエンドデザインエージェンシー、建築出版物、エディトリアルポートフォリオ、カルチャーマガジン、年次報告書、高級ブランドのナラティブ。
- 注意が必要: 大規模なディスプレイタイポグラフィが繰り返しのデータ入力を遅くする、ペースの速いトランザクション業務ツール。
- 参考方向性:
- クラシックチューリッヒ国際スタイル: シャープなペーパーホワイトの背景（
#FFFFFFまたは#F7F7F7）、漆黒のタイポグラフィ（#111111）、1pxの構造的な仕切り罫線、番号付きインデックス（01、02）、そして一発のスイスレッド（#E3000F）。 - モダンエディトリアル・クライン・ブルー: ウルトラクリーンなモノクロームキャンバスに、インターナショナル・クライン・ブルー（
#002FA7）をナビゲーションとプライマリ行動の高精度フォーカルアクセントとして使用。
- クラシックチューリッヒ国際スタイル: シャープなペーパーホワイトの背景（
スイス・エディトリアル忠実度ゲート — 必須
スイス・エディトリアルページを完了と呼ぶ前に、最初のビューポートが厳格でグリッドに整列されたタイポグラフィ作品として視覚的に読み取れる必要があります。 ユーザーがこのスタイルを選択した場合、劇的なスケールコントラストと構造的な罫線を欠いた汎用的なミニマルページは**不合格（FAIL）**です。
成功するスイス・エディトリアルの実装は、以下すべてを示す必要があります：
- 極端なタイポグラフィスケールコントラスト: 巨大なグロテスク調ディスプレイ見出し（デスクトップ48px–72px / モバイル32px–44px、タイトなトラッキング）と、規律ある本文（16px、行間1.55）との間の、決定的で妥協のないコントラスト。大文字のセクションラベルにはトラッキング（
letter-spacing: 0.08em）を適用。 - 構造的な水平ヘアライン罫線: コンテンツセクション、カラム境界、メタデータヘッダーは、クリーンな1pxソリッド罫線（
border-top: 1px solid #111111）で区切られ、明確な視覚的な棚を確立。 - 番号付きセクション階層: 主要な記事ブロックの上または横に配置された、明確なエディトリアルインデックス番号（
01、02、03）により、スキャン可能な視覚的アンカーを作成。 - 厳格なマルチカラムグリッドアラインメント: レイアウトは、広い非対称のガターとマージンを備えた、デスクトップ12カラムグリッドに厳密に従う。コンテンツはグリッドアンカーなしにルーズに浮遊しない。
- モノクロームベース + 1つのハイインパクトシグナルアクセント: レイアウトは厳密にモノクローム（黒、オフホワイト、ペーパーグレー）を保ち、正確に1つの意図的なシグナルアクセント（スイスレッド
#E3000Fまたはクラインブルー#002FA7）がアクティブリンク、インデックスタグ、またはプライマリCTAに控えめに使用される。
最初のビューポートテスト: デスクトップスクリーンショットで、ページタイトルを読まずに、巨大な見出しスケール、1pxの構造的な仕切り罫線、番号付きセクションマーカー、意図的な非対称グリッドを識別してください。標準的なブログテンプレートのように見える場合は、タイポグラフィのスケールとグリッドルールを引き上げてください。
明示的なスイス・エディトリアルタイポグラフィ例外 — 劇的なスケールが必要
スイス・エディトリアル固有のオーバーライド: 過剰なフォントサイズや空きスペースに対する普遍的なアンチスロップ（手抜き防止）の注意は、ここでは大きなディスプレイ見出し（48px–72px）や豊富なホワイトスペースの禁止と解釈してはなりません。スイスタイポグラフィ（ヨーゼフ・ミューラー＝ブロックマン、マックス・ビル）において、アクティブなネガティブスペースと大胆なスケールコントラストは、装飾的なグラフィックや影に代わる主要な構造的素材です。
- 許可されるタイポグラフィ処理: 大規模なディスプレイスケール（最大72px）、番号付きインデックスタイポグラフィ、ヘアライン構造境界線、大文字トラッキングメタデータ、ハイインパクトな単一アクセントリンク。
- アンチスロップ境界: エディトリアルコンテキストのないランダムなフローティング引用、偽の出版物号数、実際の読みやすいコンテンツを圧迫する特大の見出しを貼り付けないでください。
- アンチスロップ解釈: スイスレイアウトは、グリッドの規律、タイポグラフィのリズム、情報の明瞭性によって評価し、すべての平方インチをカードで埋めようとしないでください。焦点を導くホワイトスペースは本物のデザインです。
タイポグラフィとタイプライティング
目的指向のグロテスクサンセリフ体: Helvetica Neue、Neue Haas Grotesk、Arial、Inter、またはシステムサンセリフ。見出し: 48–72 px（デスクトップ、ウェイト700–800、letter-spacing: -0.03em）；小見出し: 24–32 px；本文: 16–18 px（行間1.55–1.65）；インデックス数字とキャプション: 12–14 px 大文字（letter-spacing: 0.08em）。
カラーディレクション
- ライトモード（シャープなギャラリーホワイトペーパー）:
- キャンバスベース: ペーパーホワイト（
#FFFFFFまたは温かみのあるギャラリーホワイト#FBFBFA）。 - インク / タイポグラフィ: 深い漆黒（
#111111）。 - 仕切り罫線: ソリッドヘアラインストローク（
#111111または#D1D5DB）。 - セカンダリグレー: エディトリアルニュートラル（
#6B7280）。
- キャンバスベース: ペーパーホワイト（
- ダークモード（ドラマチックなダークモノリス）:
- キャンバスベース: ピッチブラックオブシディアンキャンバス（
#0D0D0D）。 - インク / タイポグラフィ: ボーンホワイトのディスプレイタイポグラフィ（
#F5F5F5）。 - 仕切り罫線: 半透明の白いヘアライン罫線（
rgba(255, 255, 255, 0.20)または#2A2A2A）。 - セカンダリグレー: ストーングレー（
#9CA3AF）。
- キャンバスベース: ピッチブラックオブシディアンキャンバス（
- 単一シグナルアクセント: スイスレッド（
#E3000Fライト /#EF4444ダーク）またはインターナショナル・クライン・ブルー（#002FA7ライト /#3B82F6ダーク）。 - テーマ反転ルール: スイス・エディトリアルでは、ダーク/ライトモードは権威あるタイポグラフィの極性反転です。ダークモードでは、キャンバスは
#0D0D0D、タイポグラフィは#F5F5F5です。プライマリボタンはクリーンに反転します（ライトモード：ソリッドブラックブロックに白テキスト、ダークモード：ソリッドホワイトブロックに黒テキスト）。暗いキャンバスに黒いテキスト、または白いキャンバスに白いテキストは厳格に禁止されています。
レイアウトと幾何学
コーナーは鋭利（デフォルト 0px のボーダー半径、最大 2px）；余白はたっぷり；厳格な12カラムグリッドアラインメント。構造的な1pxの水平罫線がコンテンツブロックを囲みます。
サーフェス、奥行き、テクスチャ
サーフェスは完全にフラットで、装飾がなく、インクのようにシャープです。ドロップシャドウ、背景グラデーション、ブラーは一切なし。奥行きは、純粋にタイポグラフィのスケール、ウェイト、空間的な並置によって伝えられます。
コンポーネントの構造とインタラクション
- エディトリアルプライマリCTA: シャープなソリッドブラックブロックに白いタイポグラフィ、または2pxのストロークオフセットを持つクリーンな下線付きテキストリンク。
- 番号付きインデックスタグ: 小さい大文字タグ:
[ 01 / ARCHITECTURE ]。 - 仕切り罫線:
border-top: 1px solid #111111; padding-top: 1.5rem; margin-top: 2rem;。 - 表形式メタデータ: ヘアライン区切りで区切られた2カラムのキーと値のペア。
モーション
最小限、瞬間的、または120〜160msのクリーンなリニアトランジション。スプリングバウンスやフローティングパララックスはなし。シャープな状態変化に焦点を当てます。
オプションのAnime.js v4レシピ
- モーションの決定: スクロール時のクリーンなテキストフェードインまたは水平罫線の展開。
- 開始時間: 140ms（0 = 即時）；タスクとユーザーの好みに応じて調整。
- 避けるもの: 弾性モーション、3D回転、遊び心のある揺れ。
- 依存関係: デフォルトでCSS/ネイティブ。要求されたインタラクションが正当化する場合のみAnime.js v4を使用。利用可能な場合はTaste Engineの
references/motion-engine.mdに従ってください。スタンドアロンスキルは上記の軽減モーションと装飾ループ禁止の原則に従います。
UIライティングとマイクロコピー
洗練され、簡潔で、明確。例：「Selected Works 2026」「Index」「Read Documentation」「01 / Overview」。口語的なスラングや熱狂的なセールスハイプは避けてください。
スタータートークン（提案であり、完全なテーマではありません）
| トークン | ライトモードデフォルト | ダークモードデフォルト |
|---|---|---|
--taste-swiss-bg | #ffffff | #0d0d0d |
--taste-swiss-ink | #111111 | #f5f5f5 |
--taste-swiss-accent | #e3000f | #ef4444 |
--taste-swiss-muted | #6b7280 | #9ca3af |
--taste-swiss-rule | 1px solid #111111 | 1px solid rgba(255, 255, 255, 0.20) |
--taste-swiss-radius | 0px | 0px |
--taste-swiss-font-heading | 'Helvetica Neue', Inter, system-ui, sans-serif | 'Helvetica Neue', Inter, system-ui, sans-serif |
--taste-swiss-font-body | 'Helvetica Neue', Inter, system-ui, sans-serif | 'Helvetica Neue', Inter, system-ui, sans-serif |
--taste-swiss-motion-duration | 120ms | 120ms |
トークンは方向性を表し、すべてのパレット/プラットフォームでコピーペーストで保証されるものではありません。プロジェクトレベルで --taste-swiss-* を定義し、カラーコントラストを確保し、リテラル値を散在させるのではなくテーマトークンを介して適用してください。
ヒーローコンポジション（最初のビューポート全体）
パブリック向けポートフォリオ/ランディング/ホームページにヒーローがある場合: 1画面のヘッダー＋ヒーローコンポジションを使用します。ベースの高さは min-height: 100svh と 100vh のフォールバックとし、ヘッダーが通常フローにある場合のみ実際のヘッダーを差し引きます。アクセシビリティと短いモバイル画面のためにヒーローを拡張できるようにします。これをプライベートダッシュボードやその他のタスク画面に適用しないでください。ユーザーによる直接のオーバーライドが優先されます。スタイル固有の方向性: 最初の画面を、権威ある巨大なディスプレイタイトル、明確なセクション番号、ヒーローナラティブと主要ナビゲーションの間の非対称グリッド分割でアンカーします。ホワイトスペースは意図的に構成された感じを与え、空っぽに見えてはいけません。存在する場合はルーターの references/hero-layout.md を参照してください。スタンドアロン使用も同じレスポンシブおよびアンチスロップの原則に従います。
スタイル固有の品質ゲート
- すべきこと: 厳格な12カラムグリッドアラインメントを確認する。劇的な見出し対本文のスケール比を維持する。1pxのヘアライン罫線がセクションをクリーンに区切っていることを確認する。アクセントカラーは厳密に単一にする。ダーク/ライトモードの切り替えを確認し、タイポグラフィ、キャンバス、ヘアライン罫線、プライマリアクションが色の衝突なくクリーンに反転することを確認する（最低4.5:1のコントラスト）。
- してはいけないこと: ドロップシャドウ、丸いバブル、装飾的なグラデーションを追加しない。意味のないバッジチップでホワイトスペースを散らかさない。小さなラベルに低コントラストのグレーテキストを避ける。暗いオブシディアンキャンバスに黒いタイポグラフィを残さない。
- デスクトップとモバイルの一貫性を確認する。キーボードフォーカス（
:focus-visible）を可視化する。ローディング、空、無効、エラー、成功状態を実装する。軽減モーション動作（prefers-reduced-motion）に対応する。 - 無関係なプロジェクトにスタイル固有の想定を注入しない。スタイルを組み合わせる場合は、プライマリスタイルと借用した機能を明示的に名前付けする。
ユニバーサルアンチスロップゲート（自己完結型）
すべての要素はその場所に値するものでなければなりません。装飾よりもコンテンツ。不確実なものを装飾しないでください。 バランス、指標、推薦の言葉、ユーザー、ロゴ、承認、確認済み/ライブ/オンラインステータス、偽のアクティビティ、成功確認を発明しないでください。代わりに、正直な空/ローディング/エラー状態を使用してください。デモデータは、要求され、表示上ラベル付けされている場合のみ許容されます。
装飾的なカード内カードレイヤーを追加しないでください：ネストされたサーフェスは、明確なインタラクションまたは情報の境界を表していなければなりません。自動生成された3フィーチャーグリッド、4統計ダッシュボード、偽のヒーロークレーム、目的のないチャート、バッジ/チップ/アイコンのスパム、無関係な装飾アート、単にビューポートを埋めるためのランダムループを避けてください。タイポグラフィ、スペーシング、アラインメント、仕切りによるグループ化を優先してください。同等のピアには意図的な視覚的バランスが必要です。
アンチスロップコピーライティング: 「Unlock your potential」「Experience the future」「Supercharge your workflow」「seamless」などの汎用的なクレームやその翻訳は禁止。見出しは実際のコンテンツを伝え、CTAはアクションを命名し、空/エラー/成功テキストは実際の状態と次のステップを説明しなければなりません。偽の緊急性、でっちあげられたカウント、漠然としたAI誇大広告、不必要な絵文字、アクセシブルでないオールキャップスの壁を避けてください。真実を変えずに、文言をこのスタイルとユーザーの言語に適応させてください。
テーマとモードのコントラストの完全性: ユーザーがダークモードまたはライトモードを要求した場合（またはテーマスイッチャーを構築した場合）、背景色と前景色は、すべてのサーフェス、テキスト、境界線、入力、セマンティックバッジにわたって同期したペアで反転しなければなりません。暗い背景に黒いテキスト、白い背景に白いテキスト、または読みにくい低コントラストのステータスピルを決して残さないでください。すべての状態はWCAG AAコントラスト（本文/通常テキストで最低4.5:1、大きな見出しとインタラクティブ境界で3:1）を満たさなければなりません。
レスポンシブとモーション: モバイルを意図的に構成し、長いラベル、フォーカス状態、アクセシブルなコントラストを確認し、流行のレイアウトに合わせてテキストをクリッピングしないでください。デフォルトで静的。意味のあるインタラクションにモーションを使用し、軽減モーション設定を尊重し、本当の状態なしにバウンス/フローティング/パルス装飾を避けてください。
重大/高評価の項目ブロック完了: 偽造されたステータス/データ、壊れたアクション、アクセス不可/クリップされたコントロール、誤解を招くコピー、テーマコントラストの衝突、または重大なモバイル障害は修正されなければなりません。実際に検証されたものを報告し、実行されなかったテストを主張しないでください。
美的拒否権ではありません: 表現力豊かな色、影、グラデーション、カードレイアウト、装飾的な処理は、それらが選択された美学の意図的な一部であり、ユーザビリティチェックに合格する場合、正当なものです。ミニマリズムを黙って強制しないでください。
アンチスロップ: スタイル固有
タイポグラフィの権威、汎用的なミニマリズムではない。
- 拒否: 弱々しい見出し、テキストの周りの装飾的なカードラッパー、複数の競合するアクセントカラー、低コントラストの小さなキャプション、テーマの衝突（例：暗いエディトリアルキャンバスに黒いタイポグラフィが残っている）。
- 代わりに: スケールコントラスト、正確なカラムアラインメント、単一のアクセントシグナル、同期されたダーク/ライトの極性反転に依存する。
- コピーチェック: テキストはエディトリアル出版物のように読める必要がある—明確で、構造化され、意図的。
- 監査: ユニバーサルアンチスロップ（目的、真実、ネストサーフェス、コピーライティング、レスポンシブ）を実行する。
…
[翻訳のために切り詰めました]