STYLE PROFILE

クレイモーフィズム

Claymorphism

丸く膨らんだ形へ内側と外側の影を付け、粘土玩具のように見せる表現。

見本はこの図鑑のためにAIで生成した画像です。

クレイモーフィズムの代表配色例

色コードと役割をまとめてコピーできます。

背景（`#EDF0FA`）とのコントラスト比
色	役割	比	文字に使う目安
`#29334F`	文字と構造	10.97:1	本文の文字にも使える
`#93AFE1`	主色	1.94:1	文字には向かない
`#D9A5C7`	強調色	1.81:1	文字には向かない

比はWCAG 2.2の計算式で求めた値です。4.5:1以上は本文の文字、3:1以上は大きな文字や図形に使える目安です（達成基準1.4.3・1.4.11）。

クレイモーフィズムのプロンプト例

クレイモーフィズムでデザインしてください。膨らんだような丸い立体、内側のやわらかな陰影、下へ落ちる大きくぼけた影を取り入れてください。

クレイモーフィズムの主な視覚的特徴

膨らんだような丸い立体
角を大きく丸め、粘土で作ったような膨らんだ形に見せます。ただし、膨らみそのものはCSSでは簡単に作れないため、角丸と影の組み合わせで近づけます。
内側のやわらかな陰影
要素の内側に暗い影と明るい影を1つずつ入れ、表面が丸く盛り上がって見えるようにします。外側の明暗の影で押し出すニューモーフィズムとは異なる方法です。
下へ落ちる大きくぼけた影
要素の外側に、ふつう暗めのぼけた影を1つ落とし、背景から浮いて見せます。影で立体感を出すため、背景と同じ色にしなくても形が分かります。

クレイモーフィズムが向いている成果物

丸く膨らむ形と柔らかな内外の影を図や面に揃え、商品やサービスを玩具のように親しみやすく見せられる。

クレイモーフィズムとは

クレイモーフィズムは、ユーザーインターフェース（UI）を中心とするデザインの傾向の呼び名です。名付けたのは、クレイモーフィズムより数年前にニューモーフィズムを唱えたデザイナーのミハウ・マレーヴィチで、2021年12月の記事で、UIの世界を越えてアートの分野にも広がる新しい傾向として紹介しました。

前のニューモーフィズムは、要素と背景を同じ色にし、明るい影と暗い影で要素を背景から押し出したように見せる表現でした。背景色の制約が大きく視覚的な階層を作りにくいうえ、コントラストが低く、視力の弱い人や色覚に障害のある人には使いにくいと、デザイン誌『スマッシング・マガジン』の記事は指摘しています。

一方、ウェブでは柔らかく膨らんだ3Dのイラストが広まり、メタ社の「ホライゾン・ワールズ」も色鮮やかな柔らかい3Dを取り入れました。同じ記事は、この流れがUIにも及んでクレイモーフィズムが生まれたと説明しています。

クレイモーフィズムも角を丸めますが、要素の内側に暗い影と明るい影を1つずつ入れ、外側にはふつう暗めの影を落として、柔らかな立体感と浮いた感じを出します。このため、背景とは関係なく色を選べます。一方で、使いすぎると子どもっぽい印象になるという批判もあり、マレーヴィチは控えめな文字と強いアクセント色、十分なコントラストを勧めています。

見分けるときは、次の点を確かめてみてください。