CreaTools LogoCreaTools
Tech Notes
Shadow Generator

Neumorphismを採用しない理由｜見た目の良さとアクセシビリティの現実

2025-11-12

結論：実務では採用しない

Neumorphismは「見た目の良さ」と「UIとしての機能性」が両立しない。

デモやコンセプトでは美しいが、実際のプロダクトには向かない。

Neumorphismとは

2つの box-shadow で凹凸を表現するデザイン手法。2020年頃に流行した。

.neumorphism {
  background: #e0e5ec;
  box-shadow: 
    8px 8px 16px #a3b1c6,   /* 右下: 暗い影 */
    -8px -8px 16px #ffffff; /* 左上: 明るい影 */
}

「ソフトUI」「スキューモーフィズムの進化形」として注目されたが、実務での採用は少ない。

なぜ採用されなくなったか

理由1: コントラスト不足

ボタンと背景の境界が分かりにくい。

Neumorphismは低コントラストなデザイン。視覚的に「どこが押せるか」が分からない。

通常のボタン: 背景とボタンの色が明確に異なる
Neumorphism: 影だけで区別 → 見落としやすい

理由2: WCAGのコントラスト比を満たしにくい

WCAG 2.1 では、UIコンポーネントの境界に 3:1 以上のコントラスト比 が求められる。

Neumorphismの影は淡いため、この基準を満たしにくい。

理由3: 状態表現が難しい

状態通常のボタンNeumorphism
hover色が変わる影が変わる？
active色が変わるinsetに切り替え？
disabledグレーアウトどう表現する？
focusアウトライン影と競合

状態変化が分かりにくい。 特に disabled の表現が困難。

理由4: パフォーマンス

複数の box-shadow はレンダリングコストが高い。大量の要素に適用すると描画が重くなる。

それでも使いたい場合

対策1: ボーダーでヒントを追加

.neumorphism-accessible {
  background: #e0e5ec;
  border: 1px solid rgba(0, 0, 0, 0.1); /* 境界を明示 */
  box-shadow: 
    8px 8px 16px #a3b1c6,
    -8px -8px 16px #ffffff;
}

対策2: 使用箇所を限定

  • 使っていい: 装飾的なカード、非インタラクティブな要素
  • 使うべきでない: ボタン、フォーム、ナビゲーション

対策3: フォールバックを用意

/* Neumorphismが分かりにくいユーザー向け */
@media (prefers-contrast: more) {
  .neumorphism {
    box-shadow: none;
    border: 2px solid #333;
  }
}

実装方法（参考）

浮き出し

.neumorphism {
  background: #e0e5ec;
  box-shadow: 
    8px 8px 16px #a3b1c6,
    -8px -8px 16px #ffffff;
}

凹み（Inset）

.neumorphism-inset {
  background: #e0e5ec;
  box-shadow: 
    inset 4px 4px 8px #a3b1c6,
    inset -4px -4px 8px #ffffff;
}

パラメータの目安

項目値
X/Y offset8〜12px
Bluroffset × 2
暗い影背景より15〜20%暗い
明るい影背景より15〜20%明るい

代わりに何を使うか

通常のbox-shadow

.card {
  background: #fff;
  box-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.05),
    0 4px 8px rgba(0, 0, 0, 0.08);
}

コントラストが明確で、アクセシビリティ問題が起きない。

Material Design風

.card-material {
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 
              0 3px 4px rgba(0, 0, 0, 0.12);
}

まとめ

観点Neumorphism通常のbox-shadow
見た目○ 新鮮△ 普通
コントラスト✗ 低い○ 明確
アクセシビリティ✗ 問題あり○ 問題なし
状態表現✗ 困難○ 容易
パフォーマンス△ やや重い○ 軽い

「見た目が良い」と「使いやすい」は別。

実務では Neumorphism を採用しない。

影の生成は Shadow Generator で。Neumorphism プリセットもあるが、デモ・実験用途に限定すべき。

関連記事