MENU
ホームページやウェブサイトの作成方法やカスタマイズを掲載しています！
  1. ホーム
  2. CSS
  3. ぷっくり可愛い「クレイモーフィズム」とは？特徴からコピペで使えるCSSコードまで徹底解説！

ぷっくり可愛い「クレイモーフィズム」とは？特徴からコピペで使えるCSSコードまで徹底解説！

CSS
当ページのリンクには広告が含まれています。

Webデザインのトレンドは「フラットデザイン」から「ニューモーフィズム」、「グラスモーフィズム」へと目まぐるしく変化してきました。

そんな中、Web3やメタバースの普及、そしてアプリの親しみやすさを追求する中で改めて注目を集めているのが
「クレイモーフィズム（Claymorphism）」です。

「名前は聞いたことがあるけれど、他のデザインと何が違うの？」
「どうやって実装するの？」
と思っている方も多いのではないでしょうか。

この記事では、
クレイモーフィズムの「基礎知識」「視覚的な4つの特徴」「他のトレンドとの違い」
そして今すぐ自分のサイトで使えるコピペ用のCSSコードまで分かりやすく解説します！

＼　コピペでこのボタンを作るよ！　／

Click Me!
もくじ

クレイモーフィズム（Claymorphism）とは？

クレイモーフィズムとは「粘土（Clay）で作ったような、ぷっくりとした丸みとマット（艶消し）な立体感」を特徴とするデジタルデザインの手法です。

2021年末頃から海外のデザイナーを中心にSNSで話題となり、
現在ではスタートアップのコーポレートサイト、
子ども向けの学習アプリ、
3D要素を取り入れたWeb3・メタバース関連のUIなどで広く採用されています。

これまでの無機質でフラットな画面に、
「触りたくなるような温かみと愛嬌」をプラスできるのが最大の魅力です。

視覚的に理解する！クレイモーフィズムの4つの特徴

クレイモーフィズムが「粘土っぽく」見えるのには、視覚的な4つのロジックがあります。

① 誇張された丸み（大きな角丸）

直線や鋭い角を徹底的に排除します。ボタンやカードの角丸（border-radius）を極限まで大きく設定することで、
人間が本能的に安心感を覚える「もふっ」とした柔らかいシルエットを作ります。

② 2つのインナーシャドウ（内側の影）

クレイモーフィズムの心臓部とも言えるのが、要素の内側に重ねられた2つの影です。

  • 左上からの光（ハイライト）: 内側に白い影を落とし、光が当たって膨らんでいる質感を表現。
  • 右下からの影（シャドウ）: 内側に暗い影を落とし、粘土らしい厚み（3D感）を強調。

③ 外側の深いドロップシャドウ（浮遊感）

要素の後ろ（外側）に、広くて淡い影を落とします。これにより
要素が背景から完全に「ぽこっ」と手前に浮き上がっているような強い立体感が生まれます。

④ マット（艶消し）な質感とポップな配色

ガラスや金属のような「ギラギラした反射」や、強いグラデーションは使いません。表面のツヤを消した単色（ソリッドカラー）をベースに、パステルカラーや鮮やかな色を組み合わせることで、おもちゃのような親しみやすさを演出します。

ニューモーフィズムやグラスモーフィズムとの違い

「過去のトレンドと何が違うの？」という疑問のために、一目でわかる比較表を用意しました。

スクロールできます
デザイン手法視覚的な特徴メリット・デメリット
ニューモーフィズム背景と一体化した、カチッとした凹凸表現。✕ 背景と同化しやすく、ボタンの識別が難しい（アクセシビリティの課題）。
グラスモーフィズムすりガラスのような半透明とグラデーション。◯ 上品で未来的だが、多用すると画面がゴチャつきやすい。
クレイモーフィズム背景から独立してぷっくり浮き出ている。◯ 視認性が高く、どこがクリックできる要素か一目で判別しやすい。

過去に流行した「ニューモーフィズム」は、見た目は美しいものの「どこがボタンか分かりにくい」という致命的なユーザビリティの欠陥がありました。クレイモーフィズムは、背景から完全に浮き上がらせることでその弱点を克服し、「見た目の可愛さ」と「使いやすさ（アクセシビリティ）」を両立させています。

【コピペOK】クレイモーフィズムを再現するCSSコード

それでは、実際にWebサイトで使えるクレイモーフィズムのボタンコードをご紹介します。

背景が真っ白だと「左上の白いハイライト」が見えにくくなるため、少し色のついた背景（例：#eef2f7）の上で試してみてください。それでは、実際にWebサイトで使えるクレイモーフィズムのボタンコードをご紹介します。

<div class="clay-button">Click Me!</div>
.clay-button {
  /* ① ベースのデザイン（サイズ・色・大きな角丸） */
  width: 220px;
  height: 74px;
  background-color: #4facfe; /* 鮮やかなベースカラー */
  border-radius: 35px;        /* 誇張された丸み */
  
  /* ② クレイモーフィズムを形作るシャドウの重ね掛け */
  box-shadow: 
    /* 左上の白いハイライト（内側） */
    inset 8px 8px 16px 0px rgba(255, 255, 255, 0.6),
    /* 右下の暗い影（内側） */
    inset -8px -8px 16px 0px rgba(0, 0, 0, 0.25),
    /* 外側の浮遊感を作る深い影（外側） */
    12px 12px 24px 0px rgba(0, 0, 0, 0.15);

  /* 文字の配置と整え（任意） */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: bold;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease; /* アニメーションのスムーズさ */
}

/* ホバー時に少し沈むインタラクション */
.clay-button:hover {
  transform: translateY(2px); /* 少し下に沈む */
  box-shadow: 
    inset 6px 6px 12px 0px rgba(255, 255, 255, 0.6),
    inset -6px -6px 12px 0px rgba(0, 0, 0, 0.25),
    6px 6px 12px 0px rgba(0, 0, 0, 0.15); /* 影を浅くして接地感を出す */
}
Click Me!

さらにクオリティを高める調整のコツ

ベースの色（background-color）をピンクやミントグリーンに変えるだけで、様々なバリエーションを作ることができます。

さらにプロっぽく仕上げるなら、2行目の右下のインナーシャドウ rgba(0, 0, 0, 0.25)（黒）の代わりに、
「ベースの色を少し濃くした同系色の透かし色」（例：濃いブルーなら rgba(0, 50, 150, 0.3) など）を指定してみてください。
色の一体感が増し、くすみのない非常に綺麗なクレイ質感が表現できます。

また、下記サイトでは直感的にボタンを作成、コピペで自サイトに活用できます！

Webspe Tools
クレイモーフィズムCSSジェネレーター【コピペ可】
クレイモーフィズムCSSジェネレーター【コピペ可】 粘土のような立体感と柔らかみが特徴的なクレイモーフィズムを実装するためのCSSを生成します。立体度や影の方向・強さ等をカスタマイズ可能です。

まとめ：クレイモーフィズムでUIに温かみを

クレイモーフィズムは、単なる一時的な流行にとどまらず、ユーザーに
「楽しさ」や
「親しみやすさ」を直感的に伝える強力なデザインの引き出し（引き出し）です。

すべてのWebサイトに合うわけではありませんが、ポップな世界観を作りたいときや、
ユーザーの目を引きたいコンバージョンボタン（CTA）のアクセントとして非常に効果的です。

ぜひ今回のコードを参考に、あなたのサイトにも
「ぷっくり可愛い」エッセンスを取り入れてみてください！

※このページのみ「シェアボタン」「ページトップに戻るボタン」をクレイモーフィズム風にしています！

CSS
よかったらシェアしてね！
  • URLをコピーしました！
もくじ