skeuomorphic-ui

スキューモーフィック UI

使用する場面

• カード、ボタン、スイッチ、ダイヤル、入力欄、ツールバー、またはコントロールに、触れられるような質感を持たせたい場合。
• 光沢が強すぎたり、漫画のようになったりしない範囲で、平らな面に物理的な奥行きを加えたい場合。
• 押し込み、彫り込み、浮き上がり、ソフトプラスチック、ソフトメタル、または高級感のあるハードウェア風の UI が求められる場合。

表面のレシピ

1. 角丸の形状から始め、垂直方向のソフトなグラデーションを加えます。上部を明るく、下部を暗くします。
2. 反射するエッジを表現するため、1px のグラデーションボーダーで囲みます。
3. 外側のシャドウを重ねて浮き上がりを表現し、内側のシャドウで彫り込まれた奥行きを表現します。
4. 上端に細いハイライトを、下端に濃いエッジを加えます。
5. エンボス効果を出すため、テキストシャドウとアイコンシャドウは控えめに使います。
6. スケールに適している場合に限り、ドット、粒子、継ぎ目、小さな光沢マークなどの微細なディテールを加えます。
7. トランジションは滑らかで短くします。160ms〜240ms が目安です。

基本トークン

ブランドやテーマに合わせて調整してください。

:root {
  --sk-bg-top: #f8fafc;
  --sk-bg-mid: #e9eef5;
  --sk-bg-bottom: #cfd7e4;
  --sk-edge-top: rgba(255, 255, 255, 0.82);
  --sk-edge-bottom: rgba(79, 93, 122, 0.34);
  --sk-shadow: rgba(31, 41, 55, 0.18);
  --sk-shadow-deep: rgba(31, 41, 55, 0.28);
  --sk-highlight: rgba(255, 255, 255, 0.72);
}

浮き上がった表面

カード、パネル、プライマリボタン、タブ、コントロールの筐体に使用します。

.sk-surface {
  position: relative;
  border: 1px solid transparent;
  border-radius: 22px;
  background:
    linear-gradient(180deg, var(--sk-bg-top), var(--sk-bg-mid) 48%, var(--sk-bg-bottom)) padding-box,
    linear-gradient(180deg, var(--sk-edge-top), rgba(255, 255, 255, 0.22) 45%, var(--sk-edge-bottom)) border-box;
  box-shadow:
    0 18px 34px var(--sk-shadow),
    0 5px 12px rgba(31, 41, 55, 0.12),
    inset 0 1px 0 var(--sk-highlight),
    inset 0 -1px 0 rgba(79, 93, 122, 0.24);
  transition:
    box-shadow 200ms ease,
    transform 200ms ease,
    background 200ms ease;
}

.sk-surface::after {
  content: "";
  position: absolute;
  inset: 1px 1px auto;
  height: 35%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent);
  pointer-events: none;
}

押し込まれた表面

アクティブなボタン、切り替えられたコントロール、選択中のタブ、内側にくぼんだ領域に使用します。

.sk-surface.is-pressed {
  transform: translateY(1px);
  background:
    linear-gradient(180deg, #d5dce8, #eef2f7 52%, #f8fafc) padding-box,
    linear-gradient(180deg, rgba(72, 84, 112, 0.38), rgba(255, 255, 255, 0.62)) border-box;
  box-shadow:
    inset 0 4px 10px rgba(31, 41, 55, 0.22),
    inset 0 -1px 0 rgba(255, 255, 255, 0.72),
    0 4px 10px rgba(31, 41, 55, 0.10);
}

エンボス加工されたテキストとアイコン

触覚的なコントロール内のラベルに使用します。控えめにしてください。

.sk-label {
  color: #334155;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.78),
    0 -1px 0 rgba(31, 41, 55, 0.12);
}

.sk-icon {
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.78))
    drop-shadow(0 -1px 0 rgba(31, 41, 55, 0.14));
}

微細なテクスチャ

微細なテクスチャは低い不透明度で使います。目立たせるのではなく、感じられる程度にしてください。

.sk-texture {
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.34) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 65%, rgba(31, 41, 55, 0.08) 0 1px, transparent 1.5px);
  background-size: 18px 18px, 22px 22px;
}

デザイン上のルール

• コンポーネントごとに物理的な素材を1つ使います。ソフトプラスチック、エナメル、セラミック、金属、またはゴムから選びます。
• 奥行きの方向を統一します。光は上から当て、影は下に落とします。
• 純粋な黒のシャドウは避け、色味を帯びたグレーやブランドカラーを含む暗色を使います。
• 同じコンポーネントで、グラスモーフィズム、ニューモーフィズム、スキューモーフィズムを混在させないでください。
• 強い押し込み効果は、すべての表面ではなく、インタラクティブな状態に限定します。
• UI の鮮明さを保つため、小さなコントロールではテクスチャを弱めます。

簡単なチェック項目

• 浮き上がった状態では、上端が明るく、下端が暗くなっています。
• 押し込まれた状態では、内側のシャドウによって奥行きが反転しています。
• 実際の表示サイズでも、角丸が滑らかに保たれています。
• グラデーションボーダーが 1px で、コンテンツを邪魔していません。
• シャドウ効果を加えた後も、テキストとアイコンが読みやすく保たれています。