ニューモーフィズムとは

背景と同系色の要素に明暗 2 方向の影を重ね、押し出し・へこみのある柔らかい質感に見せる CSS 装飾のスタイル。

概要

背景と要素をほぼ同じ色にそろえたうえで、明るい影と暗い影を斜め反対方向から重ねることで、要素が背景から浮き出て見えたり、逆にへこんで見えたりする装飾のスタイルです。新しい（neo）＋形態（morphism）を組み合わせた造語で、粘土や紙から削り出したような柔らかい立体感が特徴です。

別名

表記ゆれ：ニューモーフィズム、neumorphism、ソフト UI

英語表記のまま「neumorphism」と呼ばれることも多い装飾です。

AI への伝え方

「ニューモーフィズムにして」「ソフト UI 風の浮き出た影にして」で伝わります。背景と要素の色差が小さいほどコントラストが弱くなり、文字やボタンの境界が読み取りにくくなるため、「読みやすさを保ったまま」と添えて伝えると安全です。

似たパーツとの違い

「グラスモーフィズム」は透明感とぼかしで質感を作りますが、ニューモーフィズムは同系色の影だけで立体感を作る点が異なります。「クレイモーフィズム」はニューモーフィズムに近い技法ですが、影をより厚く濃くしてパステル系の背景と組み合わせ、粘土のような丸みを強調する点が違います。

デモ

くぼんだカード

コード

HTML

<div class="neu-demo">
  <button class="neu-demo__button" type="button">浮き出しボタン</button>
  <div class="neu-demo__card neu-demo__card--inset">
    <p>くぼんだカード</p>
  </div>
</div>

CSS

.neu-demo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 32px;
  background: #e0e5ec;
  border-radius: 12px;
  font-family: sans-serif;
}

.neu-demo__button {
  padding: 16px 28px;
  border: 0;
  border-radius: 16px;
  background: #e0e5ec;
  color: #333333;
  font-size: 15px;
  cursor: pointer;
  /* 明るい影(左上)と暗い影(右下)を重ねて浮き出て見せる */
  box-shadow: -8px -8px 16px rgba(255, 255, 255, 0.8), 8px 8px 16px rgba(163, 177, 198, 0.6);
}

.neu-demo__button:active {
  /* 押したときは影を内側に反転してへこんで見せる */
  box-shadow: inset -4px -4px 8px rgba(255, 255, 255, 0.8), inset 4px 4px 8px rgba(163, 177, 198, 0.6);
}

.neu-demo__card {
  width: 160px;
  padding: 20px;
  border-radius: 16px;
  background: #e0e5ec;
  text-align: center;
  color: #333333;
  font-size: 14px;
}

.neu-demo__card--inset {
  /* 影を内側(inset)にすると、要素がへこんで見える */
  box-shadow: inset -6px -6px 12px rgba(255, 255, 255, 0.8), inset 6px 6px 12px rgba(163, 177, 198, 0.6);
}