クレイモーフィズムとは？丸くてぷっくりしたLPパーツ9選
クレイモーフィズムとは、太い角丸と明るいハイライト・暗い影を同じ面に重ねることで、粘土を指で押したような柔らかい質感を作るUIデザインの手法です。ボタンやカードによく使われます。
ピンタレストやDribbbleで今も繰り返し流れてくるデザインなので、実際に作ったワンページのLPをそのまま下に載せています。ナビゲーションからフッターまで一度スクロールして、全体の印象を先に確認してください。
このワンページを作っている部品9個を切り離し、下の格子にも並べ直しました。人気順ではなく、画面を初めて開いた人が実際に出会う順番——目を引く、見て回る、価格を確かめる、信頼する、行動を促される、登録する——の通りに並んでいます。9個のうち3つ(ヒーロー・料金・ボタンと入力欄)は普通のカード羅列ではなく、押し込みや浮遊といった動きが付いたアイデア型です。
自動再生 · タイルを押すとその項目へ · すべて1つのzip
- 01 粘土形ヒーロー
- 02 カプセルナビ
- 03 膨らんだカード
- 04 丸いアイコンチップ
- 05 ぷっくりプランカード
- 06 丸いアバター+吹き出し
- 07 パステルCTA帯
- 08 丸い上部フッター
- 09 粘土ボタン・入力欄
01粘土形ヒーロー
背景に浮かぶ有機的なブロブ2つがゆっくり揺れ、見出しカードは左上が明るく右下が暗い、粘土に押し付けられたような見た目になります。ブロブの形自体は静止したborder-radiusで作り、動きはtransformだけが担当します。
<div class="relative mx-auto max-w-xl flex flex-col items-start gap-4
rounded-clay bg-white p-10 shadow-clay-raised">
<p class="text-xs font-bold uppercase text-accent">Claymolt</p>
<h1 class="text-4xl font-extrabold leading-tight">やわらかく始まる画面</h1>
<button class="rounded-pill bg-ink px-6 py-3 text-sm font-bold text-cream">
無料で始める
</button>
</div>
02カプセルナビ
メニュー全体がひとつのピル型に収まり、内側にへこんだトラックの上を明るいチップが隣の枠へ滑って移動します。チップの幅をトラックの25%にしておけば、translateX(100%)一回でちょうど隣の枠ひとつ分だけ動きます。
<nav class="flex items-center gap-4 rounded-pill bg-white/90 px-3 py-2
shadow-clay-raised">
<span class="pl-3 font-display font-extrabold text-sm">Claymolt</span>
<div class="relative flex flex-1 rounded-pill bg-ink/5 p-1 shadow-clay-press">
<span class="absolute inset-y-1 left-1 w-1/4 rounded-pill bg-cream
shadow-clay-raised"></span>
<span class="relative z-10 flex-1 text-center text-xs font-semibold py-2">ホーム</span>
</div>
</nav>
03膨らんだカード
グリッドの各カードが背景から膨らんで浮き出たように見え、上に明るいハイライト・下に濃い影を同時に持ちます。カードごとにアニメーションの開始時刻を少しずつずらすと、4枚が波のように順番に膨らんで見えます。
<div class="grid grid-cols-2 gap-4 sm:grid-cols-4">
<div class="flex flex-col gap-3 rounded-clay bg-white p-5 shadow-clay-raised">
<span class="h-7 w-7 rounded-control bg-accent"></span>
<p class="text-sm font-semibold">高速検索</p>
</div>
</div>
04丸いアイコンチップ
アイコンごとに丸いカプセルチップに乗り、押されたスタンプのように見え、隣に説明テキストが並びます。チップには内側の影だけをのせるので、他の膨らんだカードの中で唯一、へこんだ面として対比が生まれます。
<ul class="flex flex-col gap-3">
<li class="flex items-center gap-3 rounded-pill bg-white p-2 pr-5
shadow-clay-raised">
<span class="h-9 w-9 flex-none rounded-pill bg-accent
shadow-clay-press"></span>
<span class="text-sm font-semibold">クイックスタート</span>
</li>
</ul>
05ぷっくりプランカード
おすすめプランのカードだけ一段大きく膨らみ、クリックすると軽く押されて跳ね返ります。表がなくてもどのプランを推しているかひと目で分かります。バッジはカードの内側余白の中に置くとプラン名の文字と重なってしまうため、必ずカードの外枠に半分かかるように浮かせます。
<div class="relative flex-[1.1] rounded-clay bg-white p-6 pt-8
shadow-clay-raised">
<span class="absolute -top-3 left-6 rounded-pill bg-accent px-3 py-1
text-xs font-bold text-cream">おすすめ</span>
<p class="font-bold">プロ</p>
<p class="mt-1 text-sm text-ink/70">月1,200円</p>
</div>
06丸いアバター+吹き出し
アバターが丸いカプセルフレームに埋め込まれるように収まり、吹き出しカードが粘土のようにぷっくり付きます。アバターと吹き出しのアニメーション開始時刻を少しずらすと、別々の物体として自然に見えます。
<div class="flex items-center gap-4">
<span class="h-14 w-14 flex-none rounded-pill bg-accent
shadow-clay-raised"></span>
<div class="flex-1 rounded-clay bg-white p-5 shadow-clay-raised">
<p class="text-sm font-semibold">「指先に吸い付くような感触です」</p>
</div>
</div>
07パステルCTA帯
横長の帯が背景より一段浮いた厚いカードとして乗り、裏に隠れた円形の光がゆっくり広がっては消えます。カードにoverflow: hiddenをかけて、光がカードの外にはみ出さないよう閉じ込めます。
<div class="relative overflow-hidden rounded-clay bg-ink px-10 py-12
shadow-clay-raised">
<span class="absolute -right-16 -top-24 h-64 w-64 rounded-pill
bg-accent opacity-30 blur-sm"></span>
<h3 class="relative max-w-md text-3xl font-extrabold text-cream">
今すぐチームを招待しましょう
</h3>
</div>
08丸い上部フッター
フッター上端の角が大きく丸まり、上のコンテンツを柔らかく包み込むように乗ります。リンク群ごとに薄い背景だけをつけて区切り線は置かないため、グリッドの様式がページの一番下まで続いて見えます。
<footer class="grid grid-cols-3 gap-4 rounded-t-clay bg-white/70 px-4
pt-8 pb-6 shadow-clay-raised">
<div class="rounded-control bg-ink/[.04] p-5">
<p class="text-xs font-bold uppercase text-ink/50">プロダクト</p>
<p class="text-sm font-semibold">機能</p>
</div>
</footer>
09粘土ボタン・入力欄
ボタンは押すと影が内側に反転し、実際に押されている感触を与えます。入力欄はフォーカスすると縁が柔らかい内側のグローに変わります。どちらもカードより一段小さい半径にそろえているので、画面全体にサイズの階層が感じられます。
<form class="flex gap-3 rounded-clay bg-white p-6 shadow-clay-raised">
<label class="relative flex-1 rounded-control bg-cream
shadow-clay-press">
<input class="w-full rounded-control bg-transparent px-4 py-3
text-sm outline-none" type="email"
placeholder="メールアドレス">
</label>
<button class="rounded-control bg-accent px-5 py-3 text-sm font-bold
text-cream shadow-clay-raised">登録する</button>
</form>
tailwind.config カスタム
色・角丸・影をこの一箇所にまとめておくと、ワンページと部品9個がすべて同じ値に沿います。クレイ特有の二重影も毎回書き直さず、shadow-clay-raisedひとつで呼べます。
theme: {
extend: {
colors: {
cream: "#fff7e6",
ink: "#17141a",
accent: "#2f6df6",
},
borderRadius: {
clay: "16px",
control: "12px",
pill: "999px",
},
boxShadow: {
"clay-raised": "8px 8px 16px rgba(23,20,26,.28), -8px -8px 16px rgba(255,255,255,.5)",
"clay-press": "inset 4px 4px 8px rgba(23,20,26,.28), inset -4px -4px 8px rgba(255,255,255,.5)",
},
spacing: {
gutter: "16px",
},
},
},
バイブコーディング プロンプト
上の設定をプロジェクトに貼り付けたら、Claude CodeやCursorには下のような短い指示を渡すだけです。プロンプトの全文はzip内のprompt.mdに入っています。
カード・ボタン・入力欄の角は rounded-clay(16px) か rounded-control(12px) の
どちらかに統一する。
影は shadow-clay-raised(明るいハイライトと暗い影を一体にしたもの)ひとつだけを使い、
カードごとに濃さを変えない。
押せる要素(カード・ボタン)には shadow-clay-press を押し込み状態として用意しておく。
背景は cream ひとつに統一し、強調したい箇所だけ accent を使う。
この指示を実際にpage/index.htmlに適用して出た結果を、1280px幅のビューポートでページ全体キャプチャしました。
どこで壊れるか — 落とし穴
最初につまずいたのは320px幅でした。ヒーロー・カードグリッド・アイコン一覧の3つはブロブのサイズとカードの内側余白を固定値にしていたため、狭い画面でコンテンツが決められた高さを最大3pxはみ出してスクロールが発生し、ブロブの位置をパーセントで指定していたこともコンテナの高さがコンテンツに合わせて自動で決まる状況とぶつかって計算がずれていました。ブロブのサイズとカードの内側余白をclamp()に変え、ブロブの位置をパーセントから固定pxオフセットに変更してようやく320pxでもはみ出さなくなりました。二つ目は色のコントラストです。カプセルナビのインジケーターを墨色で塗ったところ、同じ墨色のメニュー文字と重なる部分で文字がまるごと見えなくなりました。パスワードy3sdrgr2のzipには、インジケーターを明るいクリーム色に変えてどの文字の上にあっても読めるよう直したバージョンがそのまま入っています。
三つ目の落とし穴はおすすめプランカードのバッジ位置です。バッジをカードの内側余白の中に置くとプラン名の文字と重なって一部が隠れてしまうため、必ずカードの外枠の外側に半分かかるように浮かせる必要があります。
9個のデモはすべてMDNのprefers-reduced-motionドキュメントが定義するメディアクエリを検知すると、アニメーションを止めて最終状態(カードは浮いたまま、ボタンは押される前のraised状態)で固定します。動きを減らす設定をオンにした訪問者には背景のブロブや押し込みの動きがまったく見えなくなりますが、カード・ボタン・入力欄そのものはそのまま残るので情報は失われません。
アクセシビリティ
accent(#2f6df6)の背景に小さな文字を乗せるとコントラストが低くなりがちなので、バッジのように小さな文字は必ずcreamのテキストにし、大きな見出しだけに暗い背景と明るい文字の組み合わせを使います。カードのbox-shadowはMDNのbox-shadowドキュメントが案内する通り、insetの有無で凸面と凹面を一つのプロパティの中で重ねて表現しています。
ベントグリッドなど他の流行スタイルはデザイントレンドカテゴリーにまとめてあり、このサイト全体が何を扱っているかは紹介ページに書いています。
FAQ
クレイモーフィズムとニューモーフィズムは何が違いますか?
ニューモーフィズムは背景とカードをほぼ同じ色にして影だけで立体感を出しますが、クレイモーフィズムはカードの色を背景とはっきり変えたうえで太い角丸まで足すので、コントラストと立体感を同時に強められます。そのぶんクレイモーフィズムのほうがアクセシビリティ上のコントラストを確保しやすくなります。
影を二重にすると重くなりませんか?
この記事の9個のデモはすべてbox-shadowの値自体は固定したままtransform・opacity(09番だけbox-shadowのクロスフェードを例外的に加えています)だけを動かしているので、毎フレーム影を計算し直すことはありません。カードの枚数が非常に多い画面では二重影がペイントのコストを少し増やすため、スクロールでどんどん流れるカードにはアニメーションを付けないほうが安全です。
ダークモードでもクレイモーフィズムは合いますか?
合います。ただし明るいハイライトと暗い影の濃さをライトモードとは逆に調整する必要があります。暗い背景の上では明るいハイライトの不透明度を下げ、暗い影の不透明度を上げないと、カードが背景に埋もれて見えなくなってしまいます。