デザイン業界では毎年、トレンド予測がされていますが、その中で「クレイモーフィズム」というデザイン手法を知っていますか？
今回は日本でも徐々に浸透しつつある「クレイモーフィズム」の簡単な作り方を、ご紹介したいと思います。
クレイモーフィズムとは？
まず、クレイモーフィズムについてご説明したいと思います。クレイモーフィズムは、粘土のようなマットな質感で丸みを帯びた、つい触りたくなるような3D要素のデザインです。ここ最近メタバースなどの人気の高まりによって、クレイモーフィズムも徐々に注目されてきています。
https://saiyo.sme.co.jp/graduate/23/
ソニーミュージックグループ新卒採用2023
ニューモーフィズムとの違いは？
みなさんご存知のニューモーフィズムと似ているけどどう違うの？と疑問に思った方も多いかもしれません。次にニューモーフィズムとの違いについてご説明します。
どちらも内側と外側にドロップシャドウ or インナーシャドウをかけて立体感を表現していますが、ニューモーフィズムは、背景と一体化して凹凸あるデザインです。それに対してクレイモーフィズムは、背景とは独立して浮かんでいるようなデザインです。
- ニューモーフィズム：背景と一体化して立体感を表現している
- クレイモーフィズム：背景から独立して浮かんでいる
クレイモーフィズムの作り方
しっかりと作り込むにはBlenderなどの3Dソフトでの作成が必要ですが、ちょっとしたものならfigmaなどでも製作が可能です。今回Figmaでクレイモーフィズムのボタンを製作してみました！
※XDよりもFigmaの方が一つのオブジェクトに複数エフェクトを与えることができるので製作が簡単です。
さらに完成度をあげるには？
全体をより丸くすることで「もこっ」「ぷくっ」感がより強調され、さらに触りたくなるような印象になります。
実装はできる？
https://codeadrian.github.io/clay.css/
こちらの「CLAY.CSS」を利用すれば、簡単にクレイモーフィズムのスタイルを与えることができるようです。
まとめ
いかがでしたでしょうか？クレイモーフィズムを取り入れることでサイトに奥行きを出し、ユーザーに親しみやすい印象を与えるサイトを作りあげることができます。
実際に製作してみて、初めは難しそうな印象がありましたが、想像してたよりも工数も少なく簡単に作ることができました。クレイモーフィズムを多用しすぎてしまうとデザインが限定的になってしまうのでフラットデザインと組み合わせ適度に取り入れることが重要です。
ぜひ皆さんもクレイモーフィズムを作ってみてください！
