GODRICH
#cssアニメーション#ボタン#ローディング#トランジション#スクロール#ダッシュボード#実用ui#デザイントレンド

スキューモーフィズムデザインの質感パーツ9選

· Godrich · 9種 · 8分で読める

デザイントレンドページテンプレートCSSのみLP料金表CTAボタン

スキューモーフィズムデザインは、革・金属・木目・ガラスといった実物の質感を画面に持ち込むスタイルです。革・金属・木目をCSSの値だけで作り、テクスチャ写真を1枚も使わずに、2024年以降の製品サイトに少しずつ戻ってきた「選択的な質感」を貼って使える部品9つにまとめました。

2010年代前半、このスタイルは画面全体を革とリネンで包み込み、その重さへの疲れがフラットデザインを生みました。今戻ってきた質感は違います。明るくフラットな画面に、本物の材料をわずか3か所だけ置いて、手が覚えている手触りをアクセントに使うやり方です。まず下のワンページをスクロールして、質感がどこに座っているか探してみてください。

ページを新しいタブで開く

あのページを構成する部品9つを1つずつ取り出して、下のグリッドに並べました。順番は人気順ではなく、材料が重みを持つ順です。革を縫い、金属を回し、紙を重ね、ノブを触り、ガラスを嵌め、木を開け、ステッカーを貼り、キーを押す。最後の9つ目は、これらの材料を1ページに過不足なく配置する方法です。スキューモーフィズム ニューモーフィズム と並べて語られることが多いのは、どちらも影の付け方で手触りを作るからですが、ここで扱うのは実物の材料を三か所だけ置く側です。同じ9枠を色と切り貼りの重なりで埋めたのがコラージュのLPパーツで、点と波の図形で埋めたのがメンフィス デザインのLPパーツです。3つのキットを並べると、質感・重なり・図形がそれぞれ1ページをどこまで支えられるかが見えてきます。

レザーのステッチ料金カード01 leather-stitch-card-skeu メタルダイヤルCTA02 metal-dial-cta-skeu 紙目の機能カード03 paper-grain-card-skeu ボリュームノブ04 volume-knob-skeu ガラスインレイバッジ05 glass-inlay-badge-skeu 木目の引き違いパネル06 wood-panel-doors-skeu ステッカーエンボスロゴ07 sticker-emboss-logo-skeu 物理的に沈むボタン08 pressable-key-skeu 質感3か所だけのLP09 skeuo-landing-assembly

自動再生 · タイルを押すとその項目へ · すべて1つのzip

01レザーのステッチ料金カード

何が見えるか

レザーカードが20px上から着地した瞬間、明るいステッチ目盛が二重枠の中に1フレームのカットで刻まれます。

レザーのステッチ料金カード
新しいタブで開く

01 · レザーのステッチ料金カード — 計測 累積面積 23.101% · 動いたフレーム 15/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

이중 테두리repeating-linear-gradientsteps(1, end)

コードのどこを見るか

ステッチは画像ではなく、4辺それぞれにrepeating-linear-gradientの目盛を巻いたものなので、背景色を変えても作り直す必要がありません。

.leather__stitch {
  position: absolute;
  top: 8px; left: 8px; right: 8px; bottom: 8px;
  border-radius: $r-control;
  opacity: 0;
  background:
    repeating-linear-gradient(90deg, $stitch 0 8px, transparent 8px 16px) top    / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, $stitch 0 8px, transparent 8px 16px) bottom / 100% 2px no-repeat,
    repeating-linear-gradient(0deg,  $stitch 0 8px, transparent 8px 16px) left   / 2px 100% no-repeat,
    repeating-linear-gradient(0deg,  $stitch 0 8px, transparent 8px 16px) right  / 2px 100% no-repeat;
  animation: stitchCut $duration steps(1, end) infinite;
}
@keyframes stitchCut {
  0%, 36%  { opacity: 0; }
  38%, 86% { opacity: 1; }
  88%, 100% { opacity: 0; }
}

02メタルダイヤルCTA

スキューモーフィズム ui のメタルダイヤルは画面でどう見えるか

ダイヤルが左右32度ずつ回ると、conic-gradientの陰影が面を流れて、削り出した金属のように見えます。

メタルダイヤルCTA
新しいタブで開く

02 · メタルダイヤルCTA — 計測 累積面積 17.386% · 動いたフレーム 18/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

conic-gradient노치 테두리왕복 회전

コードの読み方

要素は本物のボタン要素で、円盤そのものがコンバージョンを取る操作になっています。

.metaldial__dial {
  animation: dialSwing $duration $ease-spring infinite;
}
.metaldial__face {
  background:
    conic-gradient(from 210deg,
      $metal-hi 0deg, $metal-lo 70deg, $metal-mid 120deg,
      $metal-hi 180deg, $metal-edge 250deg, $metal-mid 300deg, $metal-hi 360deg);
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, .65), inset 0 -3px 5px rgba(0, 0, 0, .4);
}
@keyframes dialSwing {
  0%, 6%    { transform: rotate(-32deg); }
  48%, 56%  { transform: rotate(32deg); }
  94%, 100% { transform: rotate(-32deg); }
}

03紙目の機能カード

どんな動きか

目の入った紙3枚が重なり、一番上の紙が48pxだけ上へ滑って、下の紙の目を現します。

紙目の機能カード
新しいタブで開く

03 · 紙目の機能カード — 計測 累積面積 34.744% · 動いたフレーム 17/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

1px 결 겹침translateY 시트radius 16

どこを変えるか

目は方向の異なる1pxのrepeating-linear-gradient3層なので、ノイズ画像もbase64も不要です。

.paperstack__sheet {
  background:
    repeating-linear-gradient(0deg,  $grain-a 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, $grain-b 0 1px, transparent 1px 4px),
    repeating-linear-gradient(48deg, $grain-c 0 1px, transparent 1px 7px),
    $paper-face;
}
@keyframes sheetSlide {
  0%, 10%   { transform: translateY(0); }
  46%, 58%  { transform: translateY(-48px); }
  88%, 100% { transform: translateY(0); }
}

04ボリュームノブ

何が見えるか

ノブが目盛りの最小から最大まで左右120度ずつ回り、明るい指針線が目盛りの上を通っていきます。

ボリュームノブ
新しいタブで開く

04 · ボリュームノブ — 計測 累積面積 8.684% · 動いたフレーム 18/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

rotate 왕복지침 선radius 50%

コードのどこを見るか

回転を円の内側だけで完結させているので、角度が進んでもノブが大きく見えることはありません。

.volknob__knob {
  background:
    radial-gradient(120% 120% at 34% 26%, rgba(255, 255, 255, .32), transparent 42%),
    conic-gradient(from 250deg, $knob-face, $knob-body 90deg, $knob-face 170deg,
      $knob-body 260deg, $knob-face 340deg);
  box-shadow: 0 6px 10px rgba(23, 20, 26, .35), inset 0 1px 2px rgba(255, 255, 255, .22);
  animation: knobSweep $duration $ease-out infinite;
}
@keyframes knobSweep {
  0%, 8%    { transform: rotate(-120deg); }
  46%, 56%  { transform: rotate(120deg); }
  92%, 100% { transform: rotate(-120deg); }
}

05ガラスインレイバッジ

画面で起きること

ブラシメタルの板に彫った窪みにガラスバッジが嵌っており、斜めのハイライト帯が左から右へ撫でていきます。

ガラスインレイバッジ
新しいタブで開く

05 · ガラスインレイバッジ — 計測 累積面積 10.794% · 動いたフレーム 11/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

하이라이트 훑기translateX 광선inset 깊이

コードの読み方

帯が中心を通る瞬間にガラスの中のコアが一度だけ明るくなるところまで含めて、光がガラスを透過する感覚を作ります。

.glassbadge__sheen {
  position: absolute;
  top: -20%; left: 0;
  width: 44%;
  height: 140%;
  transform: translateX(-140%) rotate(24deg);
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .4) 45%,
    rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, .4) 55%, transparent);
  animation: sheenSweep $duration $ease-out infinite;
}
@keyframes flareUp {
  0%, 36%   { opacity: 0; }
  44%, 50%  { opacity: 1; }
  58%, 100% { opacity: 0; }
}

06木目の引き違いパネル

どんな動きか

木目のパネル2枚が左右に開いて内側の明るいスロットを現し、しばらく開いたままになってからまた閉じます。目はパネル自身に塗ってあるので、パネルが動けば目も一緒に流れます。

木目の引き違いパネル
新しいタブで開く

06 · 木目の引き違いパネル — 計測 累積面積 38.896% · 動いたフレーム 15/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

두 짝 분할나무 결 gradient대칭 이동

どこを変えるか

木の写真と同じ効果を、重さなしで得られます。

.wooddoors__leaf {
  background:
    radial-gradient(ellipse 14px 22px at 62% 30%, rgba(74, 44, 12, .55) 0 38%,
      rgba($wood-c, .5) 42% 52%, transparent 60%),
    repeating-linear-gradient(90deg,
      $wood-a 0 12px, $wood-b 12px 15px, $wood-c 15px 27px, $wood-d 27px 30px,
      $wood-a 30px 38px, $wood-lo 38px 41px);
}
@keyframes doorsOpenL {
  0%, 10%   { transform: translateX(0); }
  42%, 60%  { transform: translateX(-92%); }
  88%, 100% { transform: translateX(0); }
}

07ステッカーエンボスロゴ

何が見えるか

エンボスロゴのステッカーが24px上から傾いたまま降りて、マイナス3度の位置に収まります。彫刻はtext-shadow4層です。

ステッカーエンボスロゴ
新しいタブで開く

07 · ステッカーエンボスロゴ — 計測 累積面積 20.042% · 動いたフレーム 16/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

text-shadow 4겹스탬프 착지radius 16

コードのどこを見るか

下に明るい光1px、上に暗い影1px、左右の補正2px — この4つが揃って初めて、印刷ではなく彫った文字に見えます。

.emboss__brand {
  color: $emboss-ink;
  text-shadow:
    0 1px 0 $emboss-light,
    0 -1px 0 $emboss-dark,
    1px 0 0 rgba(255, 255, 255, .55),
    -1px 0 0 rgba(96, 74, 48, .35);
}
@keyframes stickerApply {
  0%        { transform: translateY(-24px) rotate(-8deg) scale(1.12); }
  40%       { transform: translateY(0) rotate(-3deg) scale(1); }
  50%       { transform: translateY(-2px) rotate(-3.6deg) scale(1.01); }
  60%, 88%  { transform: translateY(0) rotate(-3deg) scale(1); }
  100%      { transform: translateY(-24px) rotate(-8deg) scale(1.12); }
}

08物理的に沈むボタン

画面で起きること

キーキャップが8px沈む間、下の側壁要素がscaleYで4分の1に縮みます。

物理的に沈むボタン
新しいタブで開く

08 · 物理的に沈むボタン — 計測 累積面積 7.858% · 動いたフレーム 12/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

옆벽 scaleY8px 스트로크radius 12

コードの読み方

側壁をbox-shadowで描かず独立した要素にしたのは、押し込みの動きを影ではなく変換で処理するためです。

.physkey__wall {
  height: 8px;
  transform-origin: 50% 0;
  animation: wallPress $duration $ease-spring infinite;
}
@keyframes capPress {
  0%, 12%   { transform: translateY(0); }
  32%, 46%  { transform: translateY(8px); }
  62%       { transform: translateY(-3px); }
  76%, 100% { transform: translateY(0); }
}
@keyframes wallPress {
  0%, 12%   { transform: scaleY(1); }
  32%, 46%  { transform: scaleY(.25); }
  62%       { transform: scaleY(1.1); }
  76%, 100% { transform: scaleY(1); }
}

09質感3か所だけのLP

どんな動きか

ミニLP全体が上下に行ったり来たりしながら各セクションを通ります。質感は木目ナビ・メタルダイヤル・レザー料金カードの3か所だけで、残りは明るいフラットです。

質感3か所だけのLP
新しいタブで開く

09 · 質感3か所だけのLP — 計測 累積面積 32.228% · 動いたフレーム 19/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

질감 3곳핑퐁 스크롤translateY 프리뷰

どこを変えるか

トラックをビューポート高さのちょうど2倍にしてtranslateY(-50%)が1画面分だけ動くようにするのが、このプレビューの骨組みです。

.minipage__track {
  display: flex;
  flex-direction: column;
  height: 200%;
  animation: pageScroll $duration $ease-out infinite;
}
@keyframes pageScroll {
  0%, 10%   { transform: translateY(0); }
  44%, 54%  { transform: translateY(-50%); }
  88%, 100% { transform: translateY(0); }
}

tailwind.config カスタム

このスタイルで値を1か所にまとめるべき理由は色ではなく押し込みの厚みです。物理キーは静止時に側壁8px、底付きで2px — この2つの値がずれると、ボタンが浮いて見えたり奥に嵌まりすぎたりします。

theme: {
  extend: {
    colors: {
      paper: "#fbf6ec", sheet: "#ffffff", ink: "#2a2320", stone: "#5c5048",
      brand: "#2f6df6", branddeep: "#1c48b8", mint: "#2f9e74",
      leather: "#7a4a2b", leatherdeep: "#5e3517", wood: "#a96f38",
    },
    borderRadius: { card: "16px", control: "12px", chip: "4px", pill: "999px" },
    boxShadow: {
      keyrest: "inset 0 2px 0 rgba(255,255,255,.4), inset 0 -2px 0 rgba(0,0,0,.25), 0 8px 0 #1a3fa0",
      keydown: "inset 0 2px 0 rgba(255,255,255,.4), inset 0 -2px 0 rgba(0,0,0,.25), 0 2px 0 #1a3fa0",
    },
  },
},
役割 トークン いつ
キー側壁 shadow-keyrest ボタンが静止しているとき(8px)
押された壁 shadow-keydown active: のときだけ(2px)
質感面 tex-leather など 1ページ最大3か所

バイブコーディング プロンプト

設定を置いたあと、Claude CodeやCursorに渡す指示は次のひとかたまりで足ります。色のリストより質感をどこに置くかが先に来る順番が大事です。切り詰める前の原文全文は、zipの中のprompt.mdに収めてあります。

質感は正確に3か所だけに置く。ナビ(木目)・CTA(メタルダイヤル)・おすすめ料金プラン(革)。
質感のない面積は質感のある面積の2倍以上にする。木目は縦方向のrepeating-linear-gradient、
金属ダイヤルは4区切りのconic-gradient、革は2方向のrepeating重ねに上部ハイライト。
ステッチ目盛は4辺それぞれに8pxの糸/8pxの間隔のrepeating-linear-gradientを巻く。
ボタンは静止時の側壁8px、押下時2px — 壁が減った分だけtranslateYで沈む。

この指示どおりにpage/index.htmlを作り、1280pxのビューポートで全体を撮ったのが下の図です。

結果

どこで壊れるか — 落とし穴

一番長く粘ったのは木の上の文字でした。ナビに白いブランド名を直接置いたところ、木目の帯が4色あるため帯ごとにコントラストが変わりました。相対輝度で直接計算すると、同じ白い文字が暗い帯(#96622e)では5.14:1、明るい帯(#c08a4e)では3.01:1まで落ちます。どの1色でも4帯すべてを4.5:1以上にできないので、文字は濃いインレイチップの上に移し、木目は装飾として残しました。質感の上の本文は、測ってから座らせるのが原則です。

2つ目は紙の移動距離でした。一番上の紙を高さの72パーセントだけ上げると、480pxでは問題ないのに320pxで紙の上端がステージからはみ出して切れました。移動距離を48pxのピクセル値に変え、狭い画面ではさらに20pxまで下げて、両方の幅で紙全体が見えるようにしました。幅が変わるときに比率ではなくピクセルで置き直すこの習慣は、メルマガのHTMLテンプレートでも同じように求められます。9つの完成ファイルは、圧縮パスワード 7dcfwy5m で開くzipにそのまま入っています。

アクセシビリティ

質感はコントラストを壊します。WCAG 2.1の最低コントラスト基準の相対輝度の式で、このキットの文字の組み合わせを全部直接計算して表に残しました。

文字の組み合わせ 比率 判定
革上の本文 #f6e7cf / 革 #7a4a2b 6.07:1 合格
革上の料金 #ffffff / 革 #7a4a2b 7.39:1 合格
紙の本文 #574a38 / 紙 #fff7e6 8.07:1 合格
紙の補助 #7a6c56 / 紙 #fff7e6 4.80:1 合格(際どい)
ヒーローボタン #ffffff / ブランド色 #2f6df6 4.53:1 合格(際どい)
明るい革の目の上の本文 #f6e7cf / #96613c 4.24:1 不合格 — 明るい目の上に本文は置かない

最後の行が、革カードの文字を暗い目の側にだけ座らせた理由です。ミントコアの上の白いアイコン案(1.86:1)も、濃い青緑のアイコン色に差し替えました。9つすべての動きにMDNのprefers-reduced-motionのメディアクエリを入れ、動作を減らす設定の訪問者には質感が座った静止状態だけを見せます。質感そのものはMDNのconic-gradientとMDNのtext-shadowの値なので、未対応のブラウザでも最悪でも単色の面に落ちるだけで、レイアウトは崩れません。

ほかのスタイルの流行はデザイントレンドのカテゴリーで、このサイトが何を配っているのかは紹介ページにまとめてあります。

FAQ

質感は何か所まで置いていいですか？

1ページに3か所までです。このキットでも木目ナビ・メタルダイヤル・レザー料金カードの3か所だけに質感を置き、残りは明るいフラットにしました。4か所を超えると目が休まる場所が消えて、2010年代の重い画面に戻ってしまいます。

スキューモーフィズムとは 2010年代のように画面全体を革で包むことですか？

カード1枚なら可能ですが、LP全体にはおすすめしません。背景が暗くなる分だけどこでもコントラストを測り直す必要があり、一番明るい木目帯の上では、4.5:1の本文はそもそも置けません。質感はポイントであるときに価値になり、背景になるとコストになります。

Reactプロジェクトにそのまま貼れますか?

zipには9つの部品のReact版(.tsx + .module.scss)が同梱されています。時間・イージング・代表色はpropsで受け取るので、貼ったあとは値を変えるだけで使えます。バニラ版とReact版は同じ測定値で一緒に検証してあります。質感パーツをファーストビューのどこに置くか迷っている段階なら、先にファーストビュー デザインのパターンを見ておくと配置が早く決まります。

解凍パスワードを入力してください

パスワードはこの記事の本文の中にあります。読み進めると出てきます。