UIトレンド比較！モーフィズム系デザインの特徴｜クレイモーフィズム編

透明感のある「グラスモーフィズム」、そして柔らかな陰影が印象的な「ニューモーフィズム」。
これまで、モーフィズム系デザインの進化を追いかけてきました。
シリーズ最後となる今回は、ふんわりとした質感と立体感で、まるで粘土細工のような温かみを演出する「クレイモーフィズム」にフォーカスします！

グラスモーフィズムの記事はこちら

クレイモーフィズムとは？

粘土のような立体感とポップな色使いが特徴のデザインスタイルです。
ニューモーフィズムと何が違うの？と思った方がいるかもしれないのでご説明すると、
ニューモーフィズムは背景と一体化した凹凸表現、クレイモーフィズムは背景から浮かぶような立体感が特徴です。
要素に厚みのあるシャドウと丸みを加えることで、やわらかく親しみやすい3D要素を表現します。
近年、エンタメや子ども向けアプリを中心に注目を集めています。

出典：Pinterest

実例紹介

株式会社amber

出典：株式会社amber

ブラザーグループSDGsスペシャルサイト | ブラザーSDGsストーリー

出典：ブラザーグループSDGsスペシャルサイト

デザインに取り入れる際のメリット・デメリット

クレイモーフィズムをデザインに取り入れる際のメリットとデメリットをご紹介します！

基本の作成手順

今回はIllustratorを使ってイラストを3Dにしていきます！
しっかり作り込みたい方はBlenderなどの3Dソフトで制作してみてください。
ボタンなどの簡単なUIでしたらFigmaでも作ることができます。

作り方はこちらの記事を参考にしました。詳細を見たい方はご覧ください。

イラストを用意する

Illustratorでイラストを作成します。3D効果をかけていくのでここではなるべくフラットでシンプルなイラストが好ましいです。作成したら1つのグループにまとめておきましょう。

3D効果をかける

上部メニュー「ウィンドウ」>「3Dとマテリアル」を選択し、「3Dとマテリアル」の設定パネルを開きます。
開くと「オブジェクト」「マテリアル」「ライト」のタブが別れていますので、お好みで調整してください。

今回は以下ように設定しました。

オブジェクトタブ
奥行き・・・6％
ボリューム・・・100%

マテリアルタブ
粗さ・・・0.4
メタリック・・・0

ライトタブ
プリセット・・・標準
カラー・・・#ffffff
強度・・・100%
回転・・・145%
高さ・・・45%
柔らかさ・・・90%
環境光強度・・・70%
ライト タブの右上にある「レイトレーシングでレンダリング」アイコンをクリック

完成！

文字を3Dにする

同じようなやり方で文字も３Dにすることができます。文字の場合はアウトライン化をするのを忘れずに。
「STARKID」の文字をぷっくりとしつつ、少しメタリックな質感にしてみたいと思うので以下の数値に設定しました。

オブジェクトタブ
奥行き・・・0％
ボリューム・・・100%

マテリアルタブ
粗さ・・・0.4
メタリック・・・1

ライトタブ
プリセット・・・標準
カラー・・・#ffffff
強度・・・70%
回転・・・145%
高さ・・・35°
柔らかさ・・・40%
環境光強度・・・59%

最後に文字が斜めになるように角度をつけ、背景に星の３Dイラストを加えました。

まとめ

モーフィズム系デザインは、フラットデザインでは表現しにくかった「質感」や「奥行き」「親しみやすさ」をUIに取り入れる、新しいアプローチです。

グラスモーフィズムの透明感、ニューモーフィズムのやわらかな凹凸、クレイモーフィズムの温かみのある立体感。それぞれの特徴を理解して使い分けることで、より魅力的なUIがつくれます。

UIのトレンドはどんどん変わりますが、「どんな質感が気持ちいいのか」「どうすれば伝わるか」を考えるうえで、モーフィズム系のデザインスタイルはとても良いヒントになってくれると感じました！
最後まで読んでいただきありがとうございました！

thumb_up いいね 56

いいねありがとうございます！