作成日: 2025年3月15日
ニューモーフィズム（Neumorphism）は「New Skeuomorphism（新擬態）」の略で、フラットデザインとスケウモーフィズム（物理的な特徴を模倣するデザイン）を融合させたUIデザインスタイルです。
2019年後半から登場し、2020年に人気が高まったデザイントレンド。フラットデザインの単調さへの反動として、奥行きのある表現を取り戻しつつもミニマルな美学を維持しています。
AppleのiOS、GoogleのMaterial Designなどに影響を受けながらも、独自の発展を遂げています。
要素に立体感を与えるための2つの主要な光源効果：
浮き出し効果
くぼみ効果
通常状態
凸型エフェクト（浮き出し）：
box-shadow: 8px 8px 16px rgba(136,152,170,0.15),
-8px -8px 16px rgba(255,255,255,0.8);
凹型エフェクト（くぼみ）：
box-shadow: inset 5px 5px 10px rgba(136,152,170,0.15),
inset -5px -5px 10px rgba(255,255,255,0.8);
背景色と要素の色を同一に保ち、影の角度と強度を調整することで立体感を表現します。
ニューモーフィズムでは、背景と要素の色が同一であることが重要です。高コントラストの色相は避け、微妙な色の変化を活用します。
薄いグレー、オフホワイト、ソフトな淡色が最適です。濃い色では影効果が見えにくくなります。
状態変化を表現するためのテクニック：
非アクティブ状態（凸型）
アクティブ状態（アクセントカラー）
押下時には凹型効果を適用し、物理的なボタンのような触感を視覚的に表現します。
ダッシュボード、設定画面、音楽プレーヤー、カレンダーなどのシンプルで洗練されたインターフェースに最適です。アクセシビリティを考慮し、他のデザイン要素と組み合わせることで、より使いやすいUIを実現できます。