クレイモーフィズムCSSとは｜立体感を出す実装手順とコード例

この記事の対象: 実際に手を動かしているWeb制作者（デザイナー／フロントエンド）
読了時間: 約12分

ニューモーフィズムを案件で試して、「文字が読めない」「ボタンが押せるように見えない」で諦めた経験があるなら、クレイモーフィズムはその2つを解決する様式です。粘土のような丸みと柔らかい影で立体に見せながら、背景色と要素色を別にできるため、文字と背景のコントラストを確保したまま立体感を出せます。

この記事では、外側の影と内側の影（inset）を重ねて立体を作るCSSをそのまま貼れる形で示し、ニューモーフィズムとの構造上の違い、向いている案件と避ける案件、そしてコントラスト・キーボード操作・描画負荷への影響をまとめます。

クレイモーフィズムとは何を解決する様式か

定義は「影2本と大きな角丸」の組み合わせ

クレイモーフィズム（Claymorphism）は、UI要素を粘土の塊のように見せる表現です。構造だけ取り出すと、やっていることは3つしかありません。

難しい技術は使いません。box-shadow のカンマ区切りで複数の影を重ねるだけです。filter: blur() も backdrop-filter も必須ではないため、グラスモーフィズムより描画負荷が軽いという実務上の利点があります。

ニューモーフィズムとの決定的な違い

ニューモーフィズムは「背景と同じ色の板を、影だけで浮き沈みさせる」様式です。要素の色＝背景色という前提があるため、ボタンの面と地の面が同じ明度になり、境界が影だけに依存します。これが「押せるように見えない」「暗所や低コントラスト環境で消える」原因でした。

クレイモーフィズムは要素に独立した色を持たせます。背景が薄いラベンダー、ボタンが鮮やかなコーラル、といった組み合わせが成立するため、色の差で要素の存在を示せます。影は立体感の補強であって、識別の唯一の手段ではありません。

この違いがあるため、アクセシビリティの指摘を受けやすい案件でも、クレイモーフィズムなら「色でコントラストを取り、影で立体にする」という分業が組めます。

立体に見えるのは影の向きが一致しているから

影を複数重ねるとき、光源の位置を決めずに書くと、どれだけ影を足しても立体に見えません。光源を左上に置くと決めたら、以下の3本すべてをその前提で揃えます。

• 外側の影は右下へ落ちる（Xとそれより大きいYを正の値に）
• 内側の明るい影は左上に入る（XとYを負の値に）
• 内側の暗い影は右下に入る（XとYを正の値に）

この一致を崩すと、粘土ではなく「影の付け方を間違えた板」になります。既存のサイトを見て「立体感が中途半端だ」と感じたときは、まずこの向きを確認すると原因が絞れます。

クレイモーフィズム CSSの実装｜そのまま動くコード

まずは最小のクレイカード

カスタムプロパティで値を外に出しておくと、案件ごとの調整が1か所で済みます。以下はHTMLとCSSをそのまま貼れば表示される形です。

<div class="clay-stage">
  <div class="clay-card">
    <h3 class="clay-card__title">はじめての粘土</h3>
    <p class="clay-card__text">角丸と3本の影だけで立体に見せています。背景色と要素色を別に持てるので、文字のコントラストを確保できます。</p>
  </div>
</div>

:root {
  --clay-radius: 36px;
  --clay-bg: #e8e4f3;
  --clay-surface: #ffffff;
  --clay-text: #2d2a3a;
  /* 光源は左上。3本の影はすべてこの前提で向きを揃える */
  --clay-drop: 12px 16px 24px rgba(74, 62, 120, 0.22);
  --clay-light: inset -8px -8px 16px rgba(255, 255, 255, 0.85);
  --clay-dark: inset 8px 10px 18px rgba(74, 62, 120, 0.16);
}

.clay-stage {
  background: var(--clay-bg);
  padding: 48px 24px;
}

.clay-card {
  box-sizing: border-box;
  max-width: 420px;
  margin-inline: auto;
  padding: 32px 28px;
  border-radius: var(--clay-radius);
  background: var(--clay-surface);
  color: var(--clay-text);
  box-shadow:
    var(--clay-drop),
    var(--clay-light),
    var(--clay-dark);
}

.clay-card__title {
  margin: 0 0 12px;
  font-size: 1.25rem;
  line-height: 1.5;
  font-weight: 700;
}

.clay-card__text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.9;
}

影の並び順には意味があります。box-shadow は先に書いたものが手前に描かれるため、inset の明るい影を暗い影より先に置くと、重なった部分で白が勝ちます。逆にすると上面の光が沈んで、丸みが鈍くなります。

box-sizing: border-box を入れているのは、padding を持つカードに max-width を指定したとき、指定幅を超えないようにするためです。リセットCSSで全体に当てている環境なら省いて構いません。

ボタン：押した感じを inset の反転で作る

クレイモーフィズムのボタンは、押下時に「外の影を減らし、内側の暗い影を強める」と凹みます。影の値を入れ替えるだけで、transform を使わなくても押した感触が出ます。

<button class="clay-btn" type="button">資料をダウンロード</button>

.clay-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 16px 32px;
  border-radius: 24px;
  background: #ff7a59;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  box-shadow:
    8px 10px 20px rgba(140, 50, 30, 0.28),
    inset -4px -4px 10px rgba(255, 255, 255, 0.35),
    inset 4px 6px 12px rgba(140, 50, 30, 0.22);
  transition: box-shadow 160ms ease, translate 160ms ease;
}

.clay-btn:hover {
  box-shadow:
    10px 14px 26px rgba(140, 50, 30, 0.3),
    inset -4px -4px 10px rgba(255, 255, 255, 0.4),
    inset 4px 6px 12px rgba(140, 50, 30, 0.2);
  translate: 0 -2px;
}

.clay-btn:active {
  box-shadow:
    2px 3px 6px rgba(140, 50, 30, 0.2),
    inset -2px -2px 6px rgba(255, 255, 255, 0.2),
    inset 6px 8px 16px rgba(140, 50, 30, 0.34);
  translate: 0 1px;
}

/* キーボード操作の輪郭は影に混ぜず、独立したリングで出す */
.clay-btn:focus-visible {
  outline: 3px solid #2d2a3a;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .clay-btn {
    transition-duration: 1ms;
  }
  .clay-btn:hover {
    translate: none;
  }
}

#ff7a59 に白文字は、コントラスト比が4.5:1に届きません。この色味で白文字を使うなら、18.66px以上かつ太字（WCAGの大きい文字の条件）に収めるか、文字色を濃い茶系に変えます。コーラルやパステルは「クレイらしい色」ですが、白文字との相性が悪い帯域に入りやすいので、色を決めた直後に必ず比率を測ってください。

フォーカスリングを box-shadow で作るのは避けます。クレイモーフィズムは box-shadow を立体表現に使い切っているため、フォーカス表示を同じプロパティに混ぜると、立体の影を書き換えた瞬間にリングが消えます。outline と outline-offset に分けておけば衝突しません。

入力フォーム：凹んだ面に文字を置く

入力欄は「凹み」で表現します。外側の影を落とさず、inset だけで構成するのが要点です。

<label class="clay-field">
  <span class="clay-field__label">お名前</span>
  <input class="clay-field__input" type="text" name="name" autocomplete="name">
</label>

.clay-field {
  display: block;
  max-width: 420px;
}

.clay-field__label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.875rem;
  font-weight: 700;
  color: #2d2a3a;
}

.clay-field__input {
  box-sizing: border-box;
  width: 100%;
  padding: 14px 18px;
  border: 0;
  border-radius: 18px;
  background: #ded9ee;
  color: #2d2a3a;
  font-size: 1rem;
  line-height: 1.6;
  box-shadow:
    inset 6px 8px 14px rgba(74, 62, 120, 0.2),
    inset -4px -4px 10px rgba(255, 255, 255, 0.7);
}

.clay-field__input::placeholder {
  color: #6b6484;
}

.clay-field__input:focus-visible {
  outline: 3px solid #4a3e78;
  outline-offset: 2px;
}

プレースホルダーの色を明示しているのは、ブラウザ既定のプレースホルダーが薄すぎてコントラスト不足になるためです。凹んだ面は背景が沈んで見えるので、既定のままだと実機で読めません。

影の値を決める3つの目安

案件ごとに数値を作り直すとき、以下の関係だけ守ると崩れません。

• ぼかしは offset の1.5〜2倍。offsetが8pxならblurは12〜16px。これより小さいと輪郭が硬く、大きいとぼやけて浮かない
• 角丸は padding と同じか少し大きく。padding 32px に対して radius 36px。radiusがpaddingより大幅に小さいと「粘土」ではなく「ただの箱」になる
• inset の明るい影は不透明度0.7〜0.9、暗い影は0.15〜0.25。暗い影を強くしすぎると汚れた質感になる

色を最後に調整すると、影を全部やり直すことになります。コントラストの確保を先に済ませるのが、手戻りを減らす順番です。

アクセシビリティで壊れやすい4か所

文字と背景のコントラスト

クレイモーフィズムで使われる色はパステル寄りに偏ります。薄いラベンダー、ミント、ピーチ。これらに白文字や薄いグレー文字を載せると、本文の4.5:1、大きい文字の3:1を下回ります。

実務では、要素の背景色を決めた段階でブラウザの開発者ツールで測るのが早いです。ChromeとEdgeのスタイルパネルで色見本をクリックすると、コントラスト比とWCAGのAA／AAA判定がその場に出ます。Firefoxはアクセシビリティパネルの「コントラストの問題をチェック」でページ全体を一度に見られます。

注意したいのは、inset の明るい影が面の上に薄い白を重ねることです。測定値は背景色に対して出ますが、実際の表示は影の分だけ明るくなっています。カードの中央と縁で明度が違うため、縁の近くに文字を置くと測定値より条件が悪くなります。文字は padding を十分に取って、影の影響が薄い中央寄りに置いてください。

フォーカス表示が影に溺れる

前述のとおり、フォーカスリングを box-shadow で作ると立体表現と衝突します。それだけでなく、クレイモーフィズムは要素の周囲に柔らかい影が広がっているため、細いリングが影に埋もれて見えなくなります。

• outline-width は3px以上を取る
• outline-offset を2〜4px入れて、要素の影から離す
• リングの色は、要素の色ではなくページ背景に対して3:1以上を確保する

outline: none は書かないでください。クレイのボタンは角丸が大きく、既定のフォーカスリングが角丸に沿って描かれるため、見た目が崩れることはほとんどありません。

押せるものと押せないものの区別

クレイモーフィズムは、カードもボタンも同じ影の構成になります。見た目が揃うほど「どれが押せるのか」が消えます。

「ホバーで変化するかどうか」で区別する設計は、タッチデバイスでは機能しません。スマホで使う画面では、押せる要素には必ずラベル文字か矢印などの手がかりを入れてください。

prefers-reduced-motion と影のアニメーション

box-shadow のトランジションは、見た目としては控えめですが、影のぼかし半径が変わる動きは画面の広い範囲を再描画します。前庭障害を持つ利用者にとっては、面全体の明るさがふわりと変わる動きが不快になることがあります。

@media (prefers-reduced-motion: reduce) で、transition-duration を1msに縮め、translate を打ち消すのが確実です。transition: none としないのは、一部の実装で遷移完了イベントに依存したスクリプトがあるとき、イベントが発火しなくなるのを避けるためです。

表示速度への影響と、重くなる条件

box-shadow だけなら軽い。ただし枚数で効いてくる

box-shadow は合成レイヤーに乗せられないプロパティです。影の値が変わるたびに、その要素はペイントのやり直しになります。1枚のカードなら誰も気づきませんが、以下の条件が重なると実機で引っかかります。

• カードが一覧ページに20枚以上並んでいる
• そのすべてにホバーで影のトランジションが付いている
• 影の blur が40px以上ある

対策は3つで、どれも実装コストが低いものです。

1. ホバーで影を変えるのは、実際に押せる要素だけに絞る。装飾のカードは静止させる
2. blur を上げるのではなく offset を上げる。ぼかし半径の増加が描画コストに直結する
3. will-change は使わない。影のためにレイヤーを作らせると、メモリを食って逆効果になるケースが多い

filter: drop-shadow に逃げない

「影を要素の形に沿わせたい」という理由で filter: drop-shadow() を使う案を見かけますが、クレイモーフィズムでは不要です。border-radius のある矩形なら box-shadow が同じ形に影を落としますし、filter は子孫要素を含めて再描画するため、box-shadow より高くつきます。

透過PNGのイラストに影を付けたいときだけ drop-shadow を使い、UI要素には使わない。この線引きで十分です。

画像を使って影を作らない

パーツを画像で用意すると、角丸と影が焼き込まれた画像が増えます。カードのサイズがレスポンシブで変わる前提では、画像の影は引き伸ばされて質感が壊れます。LCPの対象になるヒーロー領域に大きなPNGを置くと、転送量でも損をします。クレイモーフィズムの影は全部CSSで足りるので、画像にする理由がありません。

ページ全体の表示速度を整える話は、別の軸として組み立てる必要があります。レイアウト側の判断はこちらにまとめています。

テクニック
1カラムWebデザインレイアウトの実例8選｜向いているケースと作り方
サイトを開いた瞬間、上から下へ一直線に情報が流れていく構成。それが1カラムレイアウトです。特設ページや採用サイト、企業のブランディングサイトで採用例が増えて…

テクニック グラスモーフィズムをCSSで実装する方法【コピペOK・2026年版】 グラスモーフィズム（Glassmorphism）は、半透明の背景＋ぼかし＋薄いボーダーを組み合わせたすりガラス風のUIスタイルです。iOSやmacOSでおな…

ブラウザ対応の確認方法

断定を避けて、確認の手順として書きます。

対応状況は時期で変わります。案件の対応ブラウザが決まっているなら、MDNの各プロパティページ下部の対応表か、caniuse.comでプロパティ名を引いて、その案件の下限バージョンと突き合わせてください。記事に書かれた「◯◯以降」をそのまま信じるのではなく、着手時点で1回引く方が確実です。

:focus-visible を切れない場合のフォールバックは次の形です。

/* 古い環境向け：キーボード以外でもリングが出る */
.clay-btn:focus {
  outline: 3px solid #2d2a3a;
  outline-offset: 3px;
}

/* :focus-visible を解釈する環境では、こちらが勝つ */
.clay-btn:focus:not(:focus-visible) {
  outline: none;
}

.clay-btn:focus-visible {
  outline: 3px solid #2d2a3a;
  outline-offset: 3px;
}

:focus:not(:focus-visible) を解釈できない古い環境では、このルールごと無視されるため、:focus のリングが残ります。フォーカス表示が消えるより、マウスクリックでもリングが出る方が安全です。

案件の種類ごとに、使うか使わないか

「どれも良い」では判断できないので、使うかどうかを言い切ります。

使う

子ども向け・教育系
丸みと柔らかい色が内容と一致します。角のない形は安全な印象を与えるため、保護者が見る画面でも相性が良いです。文字サイズを大きく取る設計と合わせやすい点も有利です。

アプリ紹介・SaaSのLP
スクリーンショットをクレイのフレームに収めると、画面そのものが製品の一部として見えます。機能カードを並べる構成とも噛み合います。ただし本登録後の管理画面には持ち込まない方がよく、訴求ページだけに留めるのが現実的です。

イベント・キャンペーンの単発ページ
賞味期限が短いページなら、様式が流行として扱われるリスクを負えます。写真素材が揃っていない状況でも、色と形で画面を作れるのが実務上の利点です。

食品・菓子・雑貨の一部
やわらかい商品、手仕事の雑貨には馴染みます。ただし商品写真が主役の構成では、クレイのフレームが写真を食う場面があるので、影は弱めに調整します。業界ごとの傾向は以下にまとめています。

業界・事例
文房具・生活用品のWebサイトデザイン事例6選｜傾向と自社サイトへの活かし方
Soreiine!!には数多くのWebサイトを掲載していますが、そのうち「文房具・生活用品」カテゴリに分類されるものは6件です。数としては決して多くありませ…

使わない

金融・証券・保険
信頼性の表現が第一で、丸みと柔らかい色は軽さとして受け取られます。金融・証券・保険Webサイトデザイン事例で見られるような、情報密度と硬さの表現とは方向が逆です。クレイモーフィズムは採用しません。

医療・病院
清潔感と正確さが優先されます。影の多い面は印刷物に展開しにくく、院内掲示との統一が取れません。病院・医療・薬品Webサイトデザイン事例7選の傾向のとおり、面を平らに保つ方向が合っています。

情報量の多いコーポレートサイト
ページ数が多く、更新が続く前提のサイトには向きません。影の値を全パーツで管理する負担が、運用の年数分だけ積み上がります。クレイのパーツが1つ増えるたびに、光源の向きと影の値を揃える判断が必要になります。

アート・美術館
作品が主役の画面で、UIに質感を持たせると邪魔になります。アート・美術館・展覧会Webサイトデザイン事例の傾向どおり、UIは消える方向が正解です。

ECサイトの商品一覧・カート周り
商品画像の正確な色が重要な画面で、周囲に色付きの影を置くと商品の色が歪んで見えます。カート・決済の画面は迷いを減らすことが仕事なので、立体表現は入れません。

部分的に使う

全面に適用せず、以下のどちらかに限定する使い方なら、硬めの案件でも成立します。

• 1セクションだけ。サービス紹介やFAQのような、ページの一部に置く
• 1要素だけ。主要なCTAボタンにのみクレイの質感を与え、他は平面に保つ

後者は特に有効です。周囲が平面なので、クレイのボタンが物理的に押せるものとして際立ちます。

実装前に決めておく3つのこと

1. ダークモードをどうするか

クレイモーフィズムの inset の明るい影は、白を重ねて「光が当たった上面」を作ります。ダークモードで同じ値を使うと、濃い面の上に白が乗って汚れたように見えます。

ダークモードを提供するなら、影の値を別に用意します。

@media (prefers-color-scheme: dark) {
  :root {
    --clay-bg: #1f1b2e;
    --clay-surface: #2b2640;
    --clay-text: #f0edf8;
    --clay-drop: 12px 16px 24px rgba(0, 0, 0, 0.5);
    /* 明るい影は不透明度を大きく落とす */
    --clay-light: inset -8px -8px 16px rgba(255, 255, 255, 0.07);
    --clay-dark: inset 8px 10px 18px rgba(0, 0, 0, 0.35);
  }
}

カスタムプロパティに出しておく価値がここで出ます。影を各セレクタに直書きしていると、ダークモード対応で全部探して回ることになります。

2. CMSで増える要素をどう扱うか

WordPressやShopifyで運用する前提なら、クライアントが後から追加するブロックにクレイの質感が付くのかを決めておきます。付かないなら、新しく追加された箇所だけ平面になって浮きます。

実務的には、クレイを適用する箇所を「テーマ側で用意したセクション」に限定し、本文エリアは平面にする割り方が安定します。本文に埋め込まれた画像や表に影を付ける必要はありません。

3. 印刷とスクリーンショットの扱い

背景色と影は、ブラウザの印刷設定で背景のグラフィックをオフにすると全部消えます。消えた状態で成立するかを確認してください。色でコントラストを取っていれば、影が消えても読めるはずです。これはクレイモーフィズムがニューモーフィズムより有利な点でもあります。影が識別の手段ではないからです。

リニューアル案件で確認する項目を一度に点検したいときは、こちらを使ってください。

リニューアルガイド
Webリニューアルのチェックリスト｜発注前に埋める47項目【2026年】
リニューアルの担当になって最初に困るのは、「やることが多いのは分かるが、どの順番で何を決めればいいのか分からない」という点です。制作会社に相談すれば進行表は…

よくある質問

クレイモーフィズムとニューモーフィズムは何が違うのですか

要素が独立した色を持てるかどうかが違います。ニューモーフィズムは要素色と背景色が同じで、境界を影だけで示すため、コントラストを確保しにくい構造でした。クレイモーフィズムは要素に色を持たせられるので、色でコントラストを取り、影は立体感の補強にまわせます。

影は何本重ねればいいのですか

3本が基本です。外側に落ちる影1本、内側の明るい影1本、内側の暗い影1本。これ以上増やしても立体感は上がらず、描画コストだけが増えます。足りないと感じたときは本数ではなく、offsetとblurの比率と光源の向きの一致を見直してください。

表示速度に影響しますか

1枚や数枚なら影響はほぼありません。問題になるのは、影のトランジションが付いたカードが20枚以上並ぶ一覧ページです。ホバーで影を変えるのは実際に押せる要素だけに絞り、blurを40px以上に上げないようにすれば回避できます。will-change の追加は逆効果になりやすいので使いません。

フォーカスリングはどう作るのが正しいですか

outline と outline-offset で作ります。box-shadow で作ると、立体表現の影と同じプロパティを取り合うため、ホバーや押下で影を書き換えた瞬間にリングが消えます。クレイの柔らかい影に埋もれないよう、太さは3px以上、offsetは2〜4px取ってください。

コーポレートサイトに使ってもいいですか

情報量が多く更新が続くコーポレートサイトには向きません。影の値を全パーツで揃える負担が、運用年数の分だけ積み上がります。採用したいなら、サービス紹介の1セクションか、主要なCTAボタン1要素に限定してください。周囲が平面だと、かえってボタンが押せるものとして際立ちます。

まとめ

クレイモーフィズムの実装は難しくありません。border-radius を大きく取り、光源の向きを1つ決めて、外側の影・内側の明るい影・内側の暗い影を3本重ねるだけです。backdrop-filter も画像も必要ないので、質感のある表現としては軽い部類に入ります。

実務で判断を分けるのは、技術ではなく適用範囲です。

• 子ども向け・アプリ紹介・単発キャンペーンでは全面に使える
• 金融・医療・アート・EC の決済周りでは使わない
• 硬めの案件では、1セクションか主要CTAの1要素に限定する

アクセシビリティでは、色で先にコントラストを確保し、影は立体感だけに使うという分業を守ってください。この順番を逆にすると、影を全部やり直すことになります。フォーカスリングは outline に分け、prefers-reduced-motion で影のトランジションを縮める。この2つを入れておけば、後から指摘を受けて作り直す事態は避けられます。

対応ブラウザは、着手時点でMDNかcaniuse.comを1回引いて、案件の下限バージョンと突き合わせる。記事に書かれたバージョンをそのまま信じないのが、一番確実な確認方法です。