2022年、Webデザインの新しいトレンド「クレイモーフィズム」のスタイルをさまざまな要素に適用できるCSS

クレイモーフィズムはWebデザインの新しいトレンドの一つで、クレイ粘土みたいなもこもこの質感にシャドウを加えてフラットなデザインに奥行きを与えます。メタバースなどの影響でデザインやイラストにも3Dの人気が高まり、最近ローンチしたスタートアップでも使用しているのを見かけます。

クレイモーフィズムのスタイルをさまざまな要素に適用できるCSSを紹介します。

clay.css
clay.css -GitHub

• 「クレイモーフィズム」とは
• clay.cssの特徴
• clay.cssのデモ
• clay.cssの使い方

「クレイモーフィズム」とは

「クレイモーフィズム（Claymorphism）」は、UIデザインのフレッシュで新しいコンセプトです。呼び名はMichał Malewicz氏によって作られたもので、デザイナーはUIデザインへのこのアプローチの可能性を探求することに興奮しています。

メタバースやNFTの人気の高まりにより、3Dシーンは爆発的に増加しています。フラットな面が少し膨らみ、もこもこになり、やわらかな質感は親しみやすさを向上させます。

Claymorphism in User Interfaces

クレイモーフィズムは魅力的に見える膨らんだもこもこの3D要素を特徴とし、通常のフラットなデザインと比較してはるかに活気のある外観をもたらします。

ニューモーフィズムは背景に繋がっていましたが、クレイモーフィズムは背景の上に浮かぶことで、アクセシビリティの問題とデザイン上の制限を取り除きます。

クレイモーフィズムとニューモーフィズムの違い

参考: ニューモーフィズムとは、デザインする時に知っておきたいポイント、CSSでの実装方法

clay.cssの特徴

clay.cssはわずか400byteのユーティリティclassで構成されており、さまざまなHTML要素にクレイモーフィズムのスタイルを簡単に与えることができます。

clay.css

CSS変数を使用してカスタマイズや拡張もできます。 Sassのミックスインも含まれており、さらに多くのスタイルを利用できます。

clay.cssのデモ

デモではclay.cssで実装された「クレイモーフィズム」のスタイルを楽しめます。カード・パネル・ボタンなどに適用するのがよさそうです。

clay.css

clay.cssの使い方

Step 1: 外部ファイル

当スタイルシートを外部ファイルとして記述します。

CDNにも用意されています。

npm, yarn経由からもインストールできます。

Step 2: HTML

クレイモーフィズムを適用したい要素に.clayを与えるだけです。

この.clayを与えると、クレイモーフィズムのスタイルを簡単に適用できます。clay.cssではクレイモーフィズムにするために以下のスタイルを適用します。

• 背景
• 角丸
• アウトセットシャドウx1
• インセットシャドウx2

また、スタイルはカスタマイズすることもできます。.cardを追加して、カスタマイズしてみます。

clay.cssの実装例

オプションではCSS変数で簡単にカスタマイズできます。
備考: CSS変数の優れた使い方、コンポーネントのバリエーションを実装するのに役立つ

clay.cssのオプション