【Illustrator】クレイモーフィズムとは？デザインの基本とボタンの作り方を解説

クレイモーフィズムは、現代のウェブデザインで注目されているスタイルの一つです。
このスタイルは、ぷくっと膨らんだような丸みのある粘土（クレイ）のような柔らかな質感で、デザインに現代的な深みと親しみやすさをもたらします。
クレイモーフィズムはイラストはもちろん、ユーザーインターフェースのデザインにおいても、マットなテクスチャーと膨らみのある立体感を表現するために用いられます。
この記事では、クレイモーフィズムの特徴や、Adobe Illustratorでどのようにしてこのスタイルを作るのかを優しく解説していきます。

UIにおけるクレイモーフィズムは、ニューモフィズムと同様に内と外のシャドウの組み合わせによって表現されます。ただし明るいシャドウと暗いシャドウの組み合わせであるニューモフィズムとは違い、シャドウはひとつのみが良いでしょう。
これは感覚的な話になりますが、横から見たときに背景から地続きで盛り上がっているニューモフィズムに対し、クレイモーフィズムは浮いているような見た目になります。

UI要素自体のシャドウについて詳しく見てみましょう。クレイモーフィズムを用いたUIではぷくっとした粘土のような3Dっぽさを与えるため2つのシャドウを内側にかけます。左上のシャドウは少し明るく、右下のシャドウは少し暗くなります。
また、丸みを持たせるために大事なのは角丸です。可能であれば長方形の各辺の中央をわずかに膨張させるようにするとより丸みが強調されます。

クレイモーフィズムは、デジタルデザインの2022年ごろから流行りだしたトレンドです。
特に、メタバースやNFTなどの新しいテクノロジーが生み出す仮想空間において、3Dの表現スタイルとして、このクレイモーフィズムの重要性が高まっています。

クレイモーフィズムがメタバースやNFTといった最先端のデジタル空間で注目される理由は、その親しみやすさや今っぽい感覚にあります。これらの空間では、革新的なデザインが常に求められており、クレイモーフィズムはその要求に応える一つの答えとなっています。
最近ではその波がWebデザインにも訪れており、少しづつではありますが取り入れられ始めています。

さっそくIllustratorにおけるクレイモーフィズムUIの作り方を解説していきます。
今回はクレイモーフィズムで作られたボタン要素について、作成します。
完成形はこちらです！

このようにクレイモーフィズムを用いたボタンUIとして活用できるかと思います。

背景色と同じか、近しい色で長方形を作成し、角丸をつけます。

まずはアピアランスから塗りを追加します。これが基本のグラデーションとなります。
以下のようなグラデーションを追加してください。グラデーションの色は適宜作りたい色に置き換えてOKです。

さらにアピアランスから先ほどのグラデーションの上に塗りを追加し、以下のようにグラデーションを設定してください。
これが左上の明るいシャドウとなります。先ほどのグラデーションよりも左上が少し明るくなるように色を調整してください。また、全体の不透明度を50%にしておきます。

長方形をぷっくりさせるための要素のフチのシャドウとして、アピアランスの一番下に光彩（内側）を追加しましょう。要素のフチが丸みがあるイメージで、以下のような設定をします。

要素の影としてドロップシャドウを追加します。先ほど追加した光彩（内側）よりもさらに下に追加してください。

あとは形をわずかに膨張させてより丸みを感じられるようにしていきます。
まずはアピアランスの一番上にワープ（下弦）を追加してください。
以下のようにほんのわずかに丸くします。

さらに一番上にワープ（上弦）を追加します。

設定は先ほどと同じです。これで上下を丸くさせることができました。

アピアランスの一番上にワープ（膨張）を追加します。以下の設定で追加してください。
これで左右にも丸みをつけることができました。

最後にテキスト要素をのせて完成です！

色々と塗りや効果を重ねてクレイモーフィズムのボタンを作ってみました。
最終的にアピアランスの中身はこのようになっています。

いかがでしたか？
今回はクレイモーフィズムの基本から、ボタンUIの作り方を解説しました。
この記事の作成手順を応用することで他のUIもクレイモーフィズムで作ることが可能です。ポジティブでかわいらしい雰囲気を持つクレイモーフィズムは、ユーザーに親しみやすさと今っぽい印象を与えられます。

ぜひ自身のデザインに取り入れてみてくださいね。

こちらの記事ではWompというサービスを使って無料でかわいい3Dモデルを作る方法を解説しています。クレイモーフィズムに興味のある方は合わせてお読みください！