クレイモーフィズムとは？Figmaの立体シャドウ設定と実務での使いどころ

こんにちは！UIデザイナーのYunyです。

画面上のボタンやカードを眺めていて、どこか平坦すぎて押した時の手応えが物足りなく感じる場面は少なくありません。
近年、洗練されたフラットデザインが標準となった一方で、ユーザーが直感的に「触ってみたい」と感じる触感的なアフォーダンス（操作の手がかり）を取り戻す試みが広がっています。

その代表例として注目を集めたのが、まるで粘土（Clay）をこねて作ったかのような、柔らかくぷっくりとした立体感を持つ「クレイモーフィズム（Claymorphism）」です。
一過性の流行として語られることもありますが、適切に活用すれば、アクセシビリティを維持したまま画面に親しみやすさと視覚的な魅力を与える有力なアプローチになります。

1. クレイモーフィズム（Claymorphism）とは？ニューモフィズムの弱点を克服した進化形

クレイモーフィズムは、デザインエージェンシーHYPE4の創業者であるMichał Malewicz（ミハウ・マレヴィッチ）氏によって、2021年末から2022年にかけて提唱・命名されました。
粘土（Clay）やおもちゃのプラスチックのように、空気を含んで膨らんだような「Inflated 3D」の質感を、3Dモデリングツールを使わずにCSSやFigmaのシャドウ効果だけで再現できる点が大きな反響を呼びました。

このスタイルが登場した背景には、UIデザインにおける質感の歴史的な変遷があります。
物理世界のリアルなテクスチャを忠実に模倣したスキューモーフィズムから、余分な装飾を省いたフラットデザインへと移行した結果、画面の均質化が進みました。

その後、2020年頃に「ニューモフィズム（Neumorphism）」が大きな話題を集めました。
背景から要素が滑らかに押し出されたような美しいエンボス表現でしたが、実務現場ではほとんど定着しませんでした。

ニューモフィズムが定着しなかった決定的な理由は、「要素の色と背景色が完全に同一でなければ成立しない」という構造的制約にありました。
要素の輪郭を淡い光と影だけで表現するため、コントラスト比が極めて低く、視覚特性に関わらずボタンの境界すら判別しづらいというアクセシビリティ上の重大な欠陥を抱えていたのです。

一方のクレイモーフィズムは、この弱点を解消しました。
要素自体が背景から完全に独立した塗りの色を持ち、背景の上にふわりと浮遊している構造をとるため、背景がどんな色であっても要素の境界をはっきりと識別できます。

質感表現の進化の系譜

2. クレイモーフィズムを構成する「3つの視覚要素」

クレイモーフィズム特有の柔らかく愛らしい立体感は、特別な3Dグラフィックによるものではありません。
平面のベクターシェイプに対し、3つの視覚的なパラメータを精密に重ね合わせることで生み出されています。

要素1：親しみやすさを生む「大きめの角丸（Border Radius）」

1つ目の要素は、コンポーネントの外形を定義する大きめの角丸です。
一般的なUIコンポーネントでは角丸が8px〜12px程度に設定されることが多いですが、クレイモーフィズムでは24px〜40px、あるいは完全なカプセル型（ピル型）を採用します。

尖った角をなくし、有機的なカーブを持たせることで、粘土を手で丸めたような柔らかい手触りを想起させます。
この丸みが、後述する内側シャドウのグラデーションと滑らかに馴染む土台となります。

要素2：内側から膨らませる「2つのインナーシャドウ」

クレイモーフィズムの立体感の核心を担うのが、2つの異なる内側シャドウ（インナーシャドウ）の重ねがけです。
1つのシェイプに対し、「光源側の光（ハイライト）」と「影側の深み（シェード）」を同時に描画します。

左上から光が当たっている想定の場合、左上側のインナーシャドウには半透明のホワイトを配置し、風船の表面が光を受けて白く光っているようなハイライトを作ります。
同時に、右下側のインナーシャドウにはベースカラーの明度を落とした濃い色を配置し、内側へ落ち込む柔らかな陰影を落とします。

この「光と影の内側への挟み込み」によって、平面の板だった長方形が、空気を含んで外側へぷっくりと膨らんだような錯覚を人間の視覚に与えることができます。

要素3：背景から浮かせる「柔らかな外側ドロップシャドウ」

最後の要素が、要素全体を背景から持ち上げる外側のドロップシャドウです。
ここで硬く濃い影を落としてしまうと、レトロなネオブルータリズムのような無骨な印象になってしまいます。

クレイモーフィズムでは、Y軸のオフセットを適度に離し（12px〜16px程度）、ブラー（ぼかし）を広め（24px〜32px程度）に取った淡い影を使用します。
要素が机の上や画面の奥からふわりと数ミリ浮き上がっているような距離感を演出し、背景との境界をクリーンに分離します。

3. Figmaで作るクレイモーフィズムの手順｜立体シャドウの設定例

ここからは、実際にFigma上でクレイモーフィズムのボタンやカードを作成する具体的な手順を解説します。
Blenderなどの3Dソフトウェアを開く必要はなく、Figmaの「Effects」パネルだけで完結します。

STEP 1：ベースシェイプとベースカラーの選定

まずは長方形（Rectangle）またはフレームを配置し、角丸（Corner radius）を広めに設定します。
たとえば、幅240px・高さ80pxのボタンであれば、角丸を28px〜32px程度に設定するとバランスが取れます。

ベースカラー（Fill）には、完全な無彩色（白や黒）よりも、適度に彩度を含んだパステルカラーや明るいトーン（ペールブルー、ソフトミント、やさしいパープル等）を選ぶのがおすすめです。
無彩色よりも色味のあるサーフェスの方が、インナーシャドウの色の重なりが美しく反映されやすくなります。

STEP 2：内側シャドウ1（左上の光ハイライト）

Figmaの「Effects」パネルから「+」を押し、「Inner Shadow」を選択します。
左上からの光源を表現するため、X軸とY軸にマイナスの数値を設定し、色を純白にします。

• Effect Type: Inner Shadow
• X: -6px
• Y: -6px
• Blur: 16px
• Color: #FFFFFF（不透明度 50%〜60%）

これにより、左上のエッジに沿ってふわりとした白い光のリムが形成されます。

STEP 3：内側シャドウ2（右下の暗い陰影）

続いて、もう1つ「Inner Shadow」を追加します。
今度は右下に影を落とし、要素のボリューム感を強調します。

ここで黒（#000000）を使ってしまうと、影の部分が濁って汚く見えてしまいます。
ベースカラーの色相（Hue）を維持したまま、明度（Lightness）を下げて彩度を少し高めた同系色の濃色を指定するのが、美しい立体感を保つ重要なコツです。

• Effect Type: Inner Shadow
• X: 6px
• Y: 6px
• Blur: 16px
• Color: ベースカラーの同系濃色（不透明度 20%〜30%）

この2つのインナーシャドウが合わさった瞬間、平面だった矩形が急激に立体的なふくらみを持ち始めます。

STEP 4：外側ドロップシャドウ（ふんわりとした浮遊感）

仕上げに「Drop Shadow」を追加し、要素を背景から浮かび上がらせます。

• Effect Type: Drop Shadow
• X: 0px
• Y: 16px
• Blur: 28px
• Color: #0F172A等のダークトーン（不透明度 10%〜12%）

必要に応じて、近くに落ちる小さなシャドウ（Y: 4px, Blur: 8px, 不透明度 5%）を重ねて2重ドロップシャドウにすると、より自然な設置感が得られます。
完成した一連のエフェクトは、Figmaの「Effect Styles」として登録しておくと、チーム内や他コンポーネントへスムーズに適用できます。

CSSでの実装コード（box-shadow多重指定）

Web実装においても、CSSの box-shadow プロパティにカンマ区切りで複数のシャドウを記述するだけで、全く同じ質感を軽量に再現できます。

.clay-button {
  background-color: #7C98FD;
  border-radius: 28px;
  border: none;
  /* 左上ハイライト, 右下シャドウ, 外側浮遊シャドウ */
  box-shadow: 
    inset -6px -6px 16px rgba(255, 255, 255, 0.55),
    inset 6px 6px 16px rgba(43, 62, 145, 0.25),
    0 16px 28px rgba(15, 23, 42, 0.12);
  color: #FFFFFF;
  font-weight: 700;
  padding: 16px 36px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.clay-button:active {
  transform: translateY(2px);
  box-shadow: 
    inset -3px -3px 8px rgba(255, 255, 255, 0.55),
    inset 3px 3px 8px rgba(43, 62, 145, 0.25),
    0 8px 14px rgba(15, 23, 42, 0.10);
}

押し込み時（:active）にシャドウのオフセット量を半分に減らし、要素をわずかに下へ移動させることで、リアルな「ぷにっ」とした沈み込み感を演出できます。

4. クレイモーフィズムはもう古い？実務で失敗しない使いどころと3つの注意点

検索サジェストにも現れる通り、「クレイモーフィズムは一過性の流行で、もう古いのではないか？」という疑問を持つデザイナーは少なくありません。
この疑問に対する結論は、「画面全体をおもちゃのように埋め尽くす使い方は下火になったが、触覚アクセントとしての質感技法は定番として定着した」という点にあります。

2022年の流行初期には、画面のヘッダー、入力フィールド、すべてのカードやアイコンをクレイ風にしてしまう過剰なデザイン事例が散見されました。
自分自身も現場で試作した際、画面中のあらゆるコンポーネントにインナーシャドウを適用してしまい、全体が重苦しく、ユーザーがどのボタンを押すべきか視線が散らばってしまった経験があります。

実務でクレイモーフィズムを洗練されたUIとして機能させるためには、以下の3つの運用ルールが不可欠です。

ルール1：1画面に1〜2箇所に絞る「アクセント適用原則」

UIの基本骨格は、クリーンで視覚負荷の少ないフラットデザインやモダンなカードUIで構成します。
その上で、「ユーザーに最も押してほしいメインCTAボタン」や「達成を祝うバッジカード」など、視線を集中させたい最優先要素にだけ限定してクレイモーフィズムを適用します。

画面全体がフラットだからこそ、部分的な立体感が際立ち、洗練された印象と強いクリック誘引力を両立できます。

ルール2：実務で高い成果を生む「4つのユースケース」

クレイモーフィズムの柔らかい質感は、特定の文脈においてユーザー体験を大きく高めます。

1. オンボーディングとウェルカム画面：新規登録直後の緊張感をほぐし、親しみやすく温かい第一印象を与えます。
2. ゲーミフィケーションと達成フィードバック：学習アプリやフィットネスアプリのように、レッスン完了時の連続記録バッジやコイン獲得表示に立体感を与えることで、達成感と所有感を刺激します。
3. 子ども向け・教育・ヘルスケアサービス：無機質なデジタル画面に不安を感じやすい層に対し、安心感と親近感を提供できます。
4. トグルスイッチやフローティングアクションボタン（FAB）：触った時の反応が期待されるスイッチ類に弾力を持たせることで、直感的な操作アフォーダンスを補強できます。

ルール3：WCAGコントラスト比と文字可読性の厳守

立体的なカードの上に文字を載せる場合、インナーシャドウのグラデーションが文字の背景にかかることで、コントラスト比が局所的に低下するリスクがあります。
WCAG（Web Content Accessibility Guidelines）のコントラスト基準（通常テキストで4.5:1以上）を常に下回らないよう、テキストの配置エリアを十分に確保してください。

また、カードが立体感を持っている分、その上に乗せるタイポグラフィは装飾を抑えたシンプルなジオメトリック・サンセリフを選び、文字色には引き締まったダークネイビーやチャコールグレーを用いることで、子供っぽさを抑えた大人のモダンUIへ仕上げることができます。

5. 混同しやすい「3D押し出し」との違いと、本物のクレイモーフィズムが動く実在Webサイト事例

クレイモーフィズムを実務で検討する際、多くのデザイナーやネット記事で混同されがちなのが、Duolingoなどに代表される「立体的なボタン表現」との違いです。

「3D押し出し（ソリッドボタン）」と「クレイモーフィズム」の決定的な違い

語学学習アプリのDuolingoなどで使われている有名な「押したくなるボタン」は、一見すると親しみやすい立体感を持っていますが、技術的・構造的にはクレイモーフィズムではありません。

• Duolingo等の3D押し出し（ソリッド立体）：
  平面の矩形の底面に濃い色（border-bottom または box-shadow: 0 4px 0 ...）を敷き、物理的な厚み（押し出し段差）を表現する手法です。表面自体はフラットなベタ塗りであり、内側シャドウは一切使われていません。
• クレイモーフィズム（Inflated 3D）：
  要素の内側（inset）に光（ハイライト）と影（シェード）を落とし、まるで風船や粘土のように「空気を含んでふっくらと膨らんだ曲面」を表現する手法です。

Duolingoのような大規模サービスがクレイモーフィズムではなく3D押し出しを採用している理由は、情報密度の高さと描画負荷の低さ、そしてどのような画面サイズでもボタンの境界がシャープに保たれる実用性を重視しているためです。

本物のクレイモーフィズムが動く実在Webサイト事例

純粋なクレイモーフィズム（2重インナーシャドウ＋ドロップシャドウ）が、Webサイト上でどのように実装・レンダリングされているかを体感できる実在のサイトを2つ紹介します。

1. Claylo（クレイロ ライブデモ）

海外のデザインスタジオSetproductが開発した、サイト全体がクレイモーフィズムで構築されたランディングページのライブデモです。

• 見どころ:
  ヘッダーのピル型ナビゲーション、中央のCTAボタン、右側のダッシュボードカード、グラフバーに至るまで、すべての構成要素が純粋なHTML/CSSの多重シャドウ（box-shadow: inset ...）で組まれています。
• 実務での学び:
  ブラウザのデベロッパーツール（検証ツール）を開くことで、各パーツに指定されたインナーシャドウのぼかし量（Blur）や透明度、ホバー時の挙動をリアルタイムに確認できます。

2. clay.css 公式デモサイト

『Smashing Magazine』でクレイモーフィズムのCSS実装手法を体系化したAdrian Bece氏による、専用CSSライブラリの公式デモページです。

• 見どころ:
  赤いベースカードの上に白いテキストカードとぷっくり膨らんだボタンが重なり合う、ミニマルなクレイ表現の原点を体験できます。
• 実務での学び:
  CSS変数（Custom Properties）を用いてインナーシャドウの深さや色相を柔軟にコントロールする設計になっており、自社プロダクトのCSS設計にクレイ質感を取り入れる際の直接的な参考になります。

6. 次のステップ：あわせて深掘りしたい質感・立体感トレンド

UIデザインにおける質感表現は、クレイモーフィズムの登場以降も多様な広がりを見せています。
目指すプロダクトの世界観やターゲット層に合わせて、近接するトレンド表現もあわせてチェックしておくと、デザインの引き出しがさらに広がります。

物理的な弾力とアニメーション連動をさらに追求した手法として、近年注目を集めているのが「Squishy UI（ぷにぷにUI）」です。
ボタンの押し心地やハプティクス（振動）の連動に関心がある方は、ぜひこちらの詳細解説も参考にしてみてください。

Squishy UIとは？触って気持ちいいぷにぷにUIの特徴と作り方

画面上の要素にあえて物理的な質量と弾力を持たせるデザイン手法「Squishy UI」。心地よさを生む仕組みと実務への取り入れ方を解説します。

また、未来的なサイバー感や透明感、光のグラデーションを取り入れた「Y3Kデザイン」や、逆方向にソリッドな太枠と硬い影で個性を主張する「ネオブルータリズム」など、質感の振り幅を持っておくことで、クライアント提案の幅が広がります。

Y3Kデザインとは？Y2Kとの違い・質感の特徴とUIへの取り入れ方

未来的なサイバー感や透明感、有機的な質感を特徴とするY3Kデザイン。Y2Kとの違いやUIへの落とし込み方を解説します。

ネオブルータリズムとは？UIでダサく見せない配色・影の設計ルール5選

黒い太枠と硬いオフセットシャドウが特徴のネオブルータリズム。昭和の枠線のように野暮ったく見せないための配色・余白設計ルールを解説します。

終わりに

クレイモーフィズムは、単なる一時的な見た目の流行にとどまらず、「フラットすぎる画面にいかにして心地よい触感を宿らせるか」というUIデザイナーの探求から生まれた必然的なアプローチです。
3Dソフトを立ち上げなくても、Figmaのインナーシャドウとドロップシャドウを丁寧に重ねるだけで、直感的に触りたくなるコンポーネントを形にできます。

普段のフラットな画面設計に、ほんの少しの温かみと触覚フィードバックを添える手段として、日々のUI制作の中で活用してみてください。

参考リンク

• HYPE4 Academy：Michał Malewicz氏によるクレイモーフィズムの提唱・解説ポータル
• Smashing Magazine：Webデザインにおける質感・モーフィズム動向レポート
• Claylo Demo：純粋なCSSクレイモーフィズムで構築されたWebサイトのライブデモ
• clay.css (GitHub)：Adrian Bece氏によるクレイモーフィズムCSSマイクロユーティリティ