ニューモーフィズムは、背景と要素をほぼ同一の色で統一し、ソフトなシャドウで「浮き上がり」や「凹み」を表現する、フラットデザインとスキューアモーフィズムの中間に位置するUIデザインスタイルです。2019年頃、Dribbbleを中心に広まり、Michal Malewiczらの発信によって注目されたこのスタイルは、プラスチックを成形したような触覚的な質感とミニマルな美しさで多くのデザイナーを魅了しました。現在も一部のUIやコンセプトデザインで使用されています。
ニューモーフィズムとは？
ニューモーフィズム（Neumorphism）は、2019年頃にDribbbleを中心に広まり、Michal Malewicz氏らの発信によって注目を集めたUIデザインスタイルです。名称は「スキューアモーフィズム（Skeuomorphism）」の”morphism”と「新しい（New）」を掛け合わせた造語で、フラットデザインの流行後に登場した新しい表現スタイルとして世界中のデザイナーに認知されました。
最大の特徴は、背景色と要素の色を完全に同一または極めて近い同系色に統一し、左上に明るいハイライト（白系のシャドウ）、右下に暗いシャドウを配置することで、要素が画面から「ふんわりと浮き上がる」または「背景に埋め込まれたように凹む」立体感を生み出す点にあります。しかし2020年後半以降、アクセシビリティ上のコントラスト不足や実装の複雑さが問題視され、商用メインUIとしては急速に下火となりました。現在は音楽プレイヤーやスマートホームの操作パネルなど、特定の文脈での部分的な活用・再評価が続いています。
ニューモーフィズム（別名：ネオ・スキューアモーフィズム）は、スキューアモーフィックデザインを現代的に進化させたスタイルです。光と影の表現に極めて微妙な色の差異を用いるのが特徴で、背景色に白と暗いシャドウを組み合わせることで、要素が背景から押し出されたように見えるソフトな立体感を生み出します。
主な視覚的特徴
- 色背景と要素を完全に同一または極めて近い同系色（淡いグレー、ベージュ、パステル、ダークモード用の深いネイビー等）に統一する
- 光一方向（左上）からの光源を擬似的に再現。左上に白系の明るいシャドウ、右下に暗いシャドウをCSSで多重指定する
- 形角丸長方形や円形など、シャドウのグラデーションが滑らかに表現できる形状を使用する
- 構図要素が背景から「浮き上がって見えるExtruded」または「背景に埋め込まれたように凹むSunken/Inverted」2種類の表現を使い分ける
- 書体デザインのミニマルさを損なわないクリーンな現代的サンセリフ体（Inter、Roboto、San Franciscoなど）
- テクスチャプラスチックやゴムを成形したような、継ぎ目のない一体感のあるソフトな質感
配色パレット
このスタイルを象徴するカラーパレットです。実際のWebデザインやグラフィック制作の参考にお役立てください。
CSSスニペット
Neumorphic Elements
See the Pen Neumorphic Elements by Maria Marin (@myacode) on CodePen.
- Author : Maria Marin
- Link : CodePen – Demo
A bit of neumorphism
See the Pen A bit of neumorphism by Damir (@drovosek2703) on CodePen.
- Author : Damir
- Link : CodePen – Demo
提唱者・デザイナー
Michal Malewicz（ミハル・マレヴィッチ）
ニューモーフィズムの普及において中心的な役割を果たしたポーランド出身のUIデザイナー。2019年末のDribbble投稿と考察記事がデザイナーコミュニティで広く共有され、このスタイルを世界的なトレンドへと押し上げるきっかけとなった。
このスタイルを採用したブランド・作品
- プロダクトスマートホーム・IoT機器の操作パネル ― 壁面埋め込み型コントローラーや専用アプリのUIにおいて、インテリアに馴染む触覚的デザインとして採用
- Web/UI音楽・オーディオ系アプリのUIモックアップ ― 音楽プレイヤーやイコライザーのコントロール画面において、ノブやスライダーの立体表現に活用
- デザインDribbble・Behance上のコンセプト作品 ― スタイルの拡散拠点となったプラットフォームで、現在も多数のUIコンセプト作品が公開されている
AI生成プロンプト
このスタイルのビジュアルをAIで生成するためのプロンプトです。英語版はMidjourney・Stable Diffusion向け、日本語版はGemini・Adobe Fireflyで使いやすい形式になっています。そのままコピーしてお使いください。
英語プロンプト
日本語プロンプト
Webデザインへの応用ヒント
ニューモーフィズムはガジェットやIoT機器の管理画面、音楽配信プレイヤーのUI、ポートフォリオの装飾要素との相性が良いスタイルです。ただし画面全体に適用するとコントラストが著しく低下し、アクセシビリティ基準（WCAG）を満たせなくなる点に注意が必要です。クリック可能な要素の識別も困難になるため、アクセントカラーと組み合わせながら部分的に使うのが鉄則。組み合わせるならグラスモーフィズムやミニマリズムとの親和性が高いです。
