visual-style-presets

ビジュアルスタイルのプリセット

1つのスキルに、9つのプリセット。各プリセットは、サーフェスの段階、アクセントのルール、書体の組み合わせ、そしてアイデンティティを担う1つの特徴的な構造モチーフを備えた、完全なデザイン指針です。プリセットを選び、そのトークンを適用したら、モチーフを徹底してください。

使い方

1. リクエストに合うプリセットを選びます。ユーザーが「高級感のあるダーク」「紙のような」「エンジニアリング調」といった雰囲気を指定している場合は、以下から最も近いプリセットを選びます。
2. そのプリセットのトークンブロックをそのまま土台としてコピーします。色相はブランドに合わせて調整します。
3. 特徴的なモチーフを実装します。プリセットをプリセットらしく見せるのはこの要素です。省略すると、配色にかかわらずありきたりな仕上がりになります。
4. 最後に、下部にある共通ルールを適用します。配色よりも重要です。

1つのインターフェース内で2つのプリセットを混ぜないでください。 グラスモーフィズムとスキューモーフィズムとフレームの組み合わせは、最もよくある失敗です。1画面につき、マテリアルシステムは1つにしてください。

---

プリセット

1. dark-glass-workspace

高級感のあるダークなコンソールです。曇りガラスのシェル、複数列のワークスペース、浮遊するデータカードが特徴です。

:root {
  --bg: #08090b;           /* near-black base */
  --surface: rgba(24, 26, 31, 0.72);   /* frosted shell fill */
  --surface-raised: rgba(38, 41, 48, 0.78);
  --edge: rgba(255, 255, 255, 0.10);   /* 1px top-edge highlight */
  --edge-strong: rgba(255, 255, 255, 0.22);
  --ink: #f4f5f7;
  --ink-muted: #a1a7b3;   /* contrast floor — do not go dimmer */
  --accent: #60a5fa;
  --blur: 18px;
}

特徴的なモチーフ： 1pxのグラデーションボーダーで囲み、その内側をより暗い半透明の塗りにします。内側がボーダーより暗いからこそ、エッジがくっきり見えます。これを逆にすると、シェルが平坦に見えます。backdrop-filter: blur(var(--blur)) と組み合わせます。

レイアウト：左にナビゲーション、中央にメイン領域、右に運用サイドバーを配置し、細い縦レールを備えたシェルを中央に配置します。中央は落ち着いた印象に保ち、カードはそれを支える役割にします。

必ずぼかしが効かない場合のフォールバックを用意してください。backdrop-filter は、多くの人が思う以上にさまざまな環境で機能しません。

@supports not (backdrop-filter: blur(1px)) {
  .glass { background: rgba(20, 22, 27, 0.94); }
}

2. dark-technical-framed

エンジニアリング調のモノクロです。アイデンティティを生むのは、柔らかく浮遊するカードではなく、フレームの構造です。

:root {
  --bg: #0a0a0a;
  --panel: #121214;
  --panel-raised: #1a1a1e;
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.28);
  --ink: #fafafa;
  --ink-muted: #8b8b93;
  --accent: #e4e4e7;   /* monochrome by default; brand accent used sparsely */
}

特徴的なモチーフ： シェルを越えて伸びる縦レールです。ガイドラインをコンテナの上下端から少しはみ出させ、さらに境界を示す小さな四角形を角に配置します。このはみ出しによって、単なる「枠線」ではなく「エンジニアリング調」に見えます。

レイアウト：非対称のパネルグリッド（大きなヒーロー領域と、小さめのユーティリティ／可視化パネル）を、細い区切り線で分割します。アクティブなリスト行には左端のバー、明るいテキスト、控えめな半透明の塗りを適用します。非アクティブな行は、アウトラインのみでコントラストを抑えます。セクションコードやメタデータには、文字間を広げた大文字の等幅ラベルを使います。

3. cobalt-contrast-dark

彩度の高いブルーを主役にした、高コントラストのダークスタイルです。dark-glass-workspace より大胆な印象です。

:root {
  --bg: #05070d;
  --surface: #0d1220;
  --edge: rgba(96, 165, 250, 0.24);
  --ink: #f8fafc;
  --ink-muted: #94a3b8;
  --accent: #2563eb;
  --accent-hot: #dbeafe;   /* near-white core for beams/highlights */
}

特徴的なモチーフ： ビームやレーザーのアクセントを使う場合は、コアの太さとグローの幅を分けてください。ほぼ白色の細いコア（約2～5px）と、広く柔らかなハロー（約30～40px）を組み合わせます。グローを強くするためにコアを太くするのは、典型的な間違いです。にじんだ印象になります。コアは彩度を上げず、ほぼ白色に保ち、色相はハローに持たせます。

4. matte-accent-dark

ダークなニュートラルカラーをベースに、アクセントカラーを1色だけ大胆に使います。色相はパラメーターです。

:root {
  --bg: #0b0b0c;
  --surface: #16161a;
  --line: rgba(255, 255, 255, 0.10);
  --ink: #fafafa;
  --ink-muted: #8f8f98;
  /* pick one: emerald #10b981 · lime #a3e635 · fuchsia #d946ef · violet #8b5cf6 */
  --accent: #10b981;
}

特徴的なモチーフ： アクセントを使うのは、ちょうど3つの役割だけです。それ以外には使いません。アクティブ状態、注目させる数値または指標、主要なCTAです。それ以外はすべてニュートラルカラーにします。この抑制がスタイルの要です。アクセントをどこにでも使うと、ありきたりなダークモードになります。

5. warm-paper-light

暗めの外側のシェルで縁取った、温かみのあるオフホワイトのサーフェスです。無機質ではなく、手触りを感じるデザインです。

:root {
  --page: #1c1a17;        /* dark outer field */
  --paper: #f7f3ec;       /* warm interior — never #fff */
  --paper-sunk: #ece6db;
  --line: rgba(28, 26, 23, 0.14);
  --ink: #21201d;
  --ink-muted: #6b665d;
  --accent: #c2410c;
  --radius-shell: 24px;
}

特徴的なモチーフ： 2つの領域で構成します。体験全体を収める大きく角の丸い明るいコンテナを、より暗いページ背景の上に配置します。フレームそのものがデザインの要です。広い紙面にはコントラストを抑えた斜めのテクスチャを加え、小さなL字型のブラケットを角に配置します。UIにはサンセリフ体を、タイムスタンプ、キャプション、メタデータには等幅フォントを使います。

6. beige-minimal-light

落ち着いた温かみのあるミニマリズムです。要素を減らし、余白を増やし、枠組みを設けません。

:root {
  --bg: #faf8f4;
  --surface: #ffffff;
  --line: rgba(30, 27, 22, 0.10);
  --ink: #1c1917;
  --ink-muted: #78716c;
  --accent: #1c1917;   /* accent is usually just ink — near-monochrome */
}

特徴的なモチーフ： 余白をたっぷりと使い、構造を作る主な手段にします。見出しには、少し大きすぎると感じるくらい、通常より1段階大きな文字サイズを使います。カードの代わりに極細の区切り線を使います。カードが必要なら、おそらくコンテンツを減らすべきです。

7. editorial-grid

雑誌の構成と精密なディテール。不均衡なレイアウトが必須です。

:root {
  --bg: #0e0e10;          /* works dark or light — swap ink/bg */
  --ink: #f5f5f4;
  --ink-muted: #a3a3a3;
  --line: rgba(255, 255, 255, 0.14);
  --accent: #eab308;
  --col: 12;
  --margin: clamp(24px, 5vw, 64px);
}

特徴的なモチーフ： グリッドを横切るシネマティックな横長のメディア帯を、隣接するカラムに意図的に重ねます。中央揃えのヒーローブロックは禁止です。片側に大きな見出しを置き、コンパクトな補足文をずらして配置します。

仕上がりを左右するディテール：ホバー時の拡大率は 1.02 以下、イージングは cubic-bezier(.22,.61,.36,1)、スタッガーは45～70ms、等幅フォントのカウンターと章マーカー、細いグリッドのトレースを使います。ホバーだけを唯一の操作手段にしないでください。

8. archival-book-serif

暗めのカタログシェルに収めた、セリフ体を主体とする閲覧サーフェスです。

:root {
  --shell: #17161c;
  --paper: #efe7d7;
  --paper-shade: #e2d8c4;
  --ink: #24211c;
  --ink-muted: #6d655a;
  --accent: #7c2d12;   /* oxblood; bronze/antique gold also valid */
  --leading-body: 1.75;
}

特徴的なモチーフ： 2つのゾーンで構成される書籍サーフェス。中央揃えのページ／見開きに、中央の綴じ目の表現、紙のグラデーション、端のシャドウ、ページごとのわずかな色調差を施し、暗いインターフェイスフレーム内に配置します。サイドバーのインデックスには等幅フォントを使い、章の項目をグループ化します。ドロップキャップ、欄外注記、ページ番号、引用など、学術的なディテールが活きるスタイルです。

9. wireframe-diagnostic

意図的に未完成の、設計図のようなスタイルです。構造をあえて見せます。

:root {
  --bg: #fbfbfa;
  --line: #d4d4d8;
  --line-active: #18181b;
  --ink: #18181b;
  --ink-muted: #71717a;
  --accent: #dc2626;
  --font-ui: ui-monospace, "SF Mono", Menlo, monospace;
}

特徴的なモチーフ： 寸法ラベル、交差したプレースホルダーボックス、破線の境界線、注釈の吹き出しで、測定値を可視化します。すべて等幅フォントを使います。構造（仕様、ドキュメント、アーキテクチャ）を伝える際に使い、仕上げられたマーケティング用のサーフェスには使わないでください。

---

共通ルール

これらのルールはカラーパレットより優先されます。適用しなければ、プリセットを使っても見慣れた印象になります。

サーフェスの階層。 背景／カード／ポップオーバー／浮き上がった要素を、同じ色にまとめてはいけません。ダークモードでは階層が上がるごとに明るくし、ライトモードではそれぞれの差を広げます。フラットな表現は安っぽく見えます。ダークモードでは、ニュートラルカラーを純粋なグレーにせず、アクセントの色相にわずかに寄せます（青のアクセントなら、217°の青みがかったチャコールなど）。

コントラストの下限。 控えめなテキストの明るさは、各プリセットで指定された値を下回らないようにします。デザインツール上では、暗いほうが「より高級」に見えるかもしれませんが、日光の下では読みづらく、WCAGの基準も満たせません。本文テキストは4.5:1以上、大きなテキストは3:1以上にします。

アクセントの節度。 アクセントカラーは1色にします。用途は最大3つ（アクティブ状態、焦点となる図、プライマリCTA）に限定します。2色目のアクセントには、明示的な意味上の理由（成功／危険）が必要です。

方向性のある奥行き。 光は上から当てます。上端を明るく、下端を暗くし、下にシャドウを置きます。すべてのコンポーネントで一貫させないと、サーフェス全体に違和感が生まれます。純粋な黒のシャドウは避け、サーフェスの色相に寄せます。

落ち着いたモーション。 コントロールは160～240ms、マスク表示やセクションの表示は400～760msにします。パララックスは5%未満に抑えます。高級感のあるデザインシステムでは、弾むような動きを使わないでください。 常にモーションの軽減設定に従います：

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

質感は感じさせても、見せすぎない。 粒子、斜線パターン、ノイズは非常に低い不透明度にします。テクスチャとして目につくなら、強さを半分にしてください。小さなコントロールでは弱めるか、取り除きます。

素材システムは1つに。 ガラス調、スキューモーフィック、ニューモーフィック、フレーム付きの表現を、同じコンポーネントや画面で混在させないでください。

関連スキル

• beautiful-shadows — レイヤー化した正確なエレベーションシャドウ（場当たり的な box-shadow の代わりに使用）
• container-lines — CSSで実装するレール／コーナースクエアのモチーフ
• framed-grid-layout — レイヤー化したグラデーションによるL字ブラケットフレーム
• glass-dark-ui — dark-glass-workspace プリセットの詳しい実装
• mesh-gradient-dark-blue-clean — ダーク系プリセット向けのアニメーション付きメッシュ背景
• skeuomorphic-ui — 触感のある／押し込まれたサーフェス（異なる素材システム）
• css-border-gradient — 1pxのグラデーション枠を作るラッパー手法

クイックチェック

• スクリーンショットを見て、どのプリセットか言い当てられますか？ できない場合は、モチーフが足りません。
• サーフェスの階層が見て取れますか？ 少なくとも3段階を見分けられますか？
• アクセントは3か所ですか、それとも20か所ですか？
• 控えめなテキストは4.5:1のコントラスト比を満たしていますか？
• 画面上の素材システムはちょうど1つですか？