2025.05.30
UIトレンド比較！モーフィズム系デザインの特徴と作り方｜ニューモーフィズム編
前回は、透明感とぼかし効果を活かした「グラスモーフィズム」について紹介しました。
今回は陰影と立体感で要素を“そっと浮かび上がらせる”ような表現が特徴の「ニューモーフィズム」について詳しく紹介していきます。
グラスモーフィズムの記事はこちら
ニューモーフィズムとは？
ニューモーフィズムは、「新しいスキューモーフィズム（リアルな質感を模倣するデザイン）」を意味し、フラットデザインと立体感のバランスを取ったデザイン手法です。
背景と同系色の要素に、内側と外側の影を加えることで、浮き上がったり沈み込んだりして見える独特な質感を生み出します。
①柔らかなシャドウとハイライト
要素の上下左右にやわらかい影と光を加え、自然な立体感を演出します。
②ミニマルかつ洗練されたUI
余計な装飾を排したシンプルなデザインで、操作感をわかりやすく伝えます。
③一貫したカラーパレット
全体的に統一感のあるトーンで、上品で落ち着いた印象に仕上がります。
実例紹介
最近よく見かける「ふわっと浮き出たボタン」や「沈み込んだ入力欄」、それがまさにニューモーフィズムの表現です。
URBAN RESEARCH / サスティナビリティページ
出典：URBAN RESEARCH Sustainability
GO株式会社
出典：GO株式会社
デザインに取り入れる際のメリット・デメリット
ニューモーフィズムをデザインに取り入れる際のメリットとデメリットをご紹介します！
①視覚的に美しく、ミニマルで近未来的な印象を与えられる
陰影によって立体感が生まれ、自然で洗練された印象を与えます。
カードUIやボタンが“浮いて見える”または“凹んで見える”ことで独特の柔らかさも演出できます。
②一体感のあるUIが作れる
陰影が効きやすいため背景とUI要素の色が似ていても立体感を演出でき、統一感のあるデザインにできる
①アクセシビリティが低くなる傾向
色のコントラストが弱くなるため、視覚的に識別しづらいUIになりやすい。
色弱のユーザーや高齢者には不親切になる可能性がある。
②ボタンやインタラクティブ要素が分かりにくくなる
ボタンらしさが薄く、押せる場所なのかどうかが直感的に伝わりにくい。
その結果ユーザーが迷いやすく、クリック率が下がる場合もある。
基本の作成手順
Figmaでのニューモーフィズムの作り方をご紹介します！
Illustratorや Photoshop、Adobe XDなど他のデザインツールでも制作可能です。
気になる方は「ニューモーフィズム 作り方」で検索してみてください。
1.オブジェクトを作成
好きな形のオブジェクトを置きます。
角がある形には角アールをつけておきましょう。
2.プラグインを実行
Figmaにはニューモーフィズムを簡単に作れるプラグインがあります。
「neumofhism」と検索してお好みのスタイルを選択してみてください。
3.完成！
実に簡単にニューモーフィズムが作れました！！
個人的な感想
練習でニューモーフィズムのUIパーツを制作してみました。
ふんわりとした陰影が心地よく、見た目のやさしさや立体感にとても魅力を感じる一方で、すべての要素に適用すると視認性や操作性にやや課題があり、使いやすさの面では工夫が必要だと感じました。
そのためボタンやカードといったポイントに絞って取り入れることでデザイン性とユーザビリティのバランスをとっていきたいです。
まとめ
ニューモーフィズムは、やわらかな光と影によって立体感を表現する、視覚的に心地よいUIトレンドです！
背景とパーツが一体化したような見た目は、ミニマルながらも独特の存在感を放ち、洗練された印象を与えてくれます。
次回は、粘土のような質感で温かみを演出する「クレイモーフィズム」をご紹介します。お楽しみに！
いいねありがとうございます！
この記事を書いた人
兼子 美桜
デザイナー
《 仕事で大切にしていること 》
表面的なデザインになっていないかということを常に意識して制作しています。
見た目の良さを考えるのと同じくらい制作の目的を考え、クライアントのニーズに応える本質的なデザインをしていきたいです。
