ニューモーフィズムを使ったUI/UXデザインの魅力と実装例

ニューモーフィズム（Neumorphism）は、背景と同じ色の面に、明暗2つの影だけで凹凸を表現するデザイン手法です。CSSではbox-shadowを2本書くだけで作れます。

ただし最初に結論を書いておくと、ボタンやフォームなどの操作部品に、ニューモーフィズムだけで境界を表現するのはやめた方がいいです。 WCAG 2.2 の達成基準 1.4.11「非テキストのコントラスト」は、UI部品の境界に3:1以上のコントラストを求めますが、背景と同色・淡い影という構造上、この基準をまず満たせません。

とはいえ、この手法が無価値というわけではありません。「装飾として使い、操作の手がかりは別に用意する」という前提を守れば十分使えます。この記事では、作り方と、アクセシビリティを壊さないための具体的な補い方を解説します。

ニューモーフィズムとは何か

ニューモーフィズムは、2019年末に Dribbble 上の作例をきっかけに広まった呼び名で、スキューモーフィズムの立体感とフラットデザインの簡潔さを掛け合わせたスタイルです。

誤解されやすい点として、Appleが自社OSにニューモーフィズムを採用した事実はありません。Apple が2025年のWWDCで発表した iOS 26 以降のデザイン言語「Liquid Glass」は、半透明のガラス質感で背景を屈折させる方向で、背景と同色の面を影で押し出すニューモーフィズムとは考え方が逆です。

基本の作り方：影を2本置く

作りは単純で、同じbox-shadowを明暗2本、逆方向に置くだけです。光源は左上に想定します。

.neu {
  background: #e0e0e0;      /* 親の背景と同じ色にする */
  border-radius: 16px;
  box-shadow:
     8px  8px 16px #b8b8b8,  /* 右下の影 */
    -8px -8px 16px #ffffff;  /* 左上のハイライト */
}

凹ませたい場合はinsetを付けます。

.neu--pressed {
  box-shadow:
    inset  6px  6px 12px #b8b8b8,
    inset -6px -6px 12px #ffffff;
}

影の色を手で決めるのは面倒なので、CSS変数とcolor-mix()で背景色から自動生成するのがおすすめです。テーマ色を変えても影が破綻しません。

.neu-theme {
  --neu-bg: #e0e0e0;
  --neu-dark:  color-mix(in oklab, var(--neu-bg), black 18%);
  --neu-light: color-mix(in oklab, var(--neu-bg), white 70%);

  background: var(--neu-bg);
}

.neu {
  background: var(--neu-bg);
  border-radius: 16px;
  box-shadow:
     8px  8px 16px var(--neu-dark),
    -8px -8px 16px var(--neu-light);
}

この手法が成立する条件は「要素の背景色と親の背景色が完全に一致していること」です。少しでもずれると、影ではなく単なる縁取りに見えてしまいます。写真や柄の上には原理的に置けません。

なぜ操作部品に使うと問題になるのか

理由は3つあり、いずれも見た目の好みではなく機能上の問題です。

1. WCAG 1.4.11（非テキストのコントラスト）を満たせない

ボタンの「そこがボタンである」という情報は、境界のコントラストで伝わります。WCAG 2.2 はこれに3:1以上を求めます。ニューモーフィズムの影は背景と極めて近い明度なので、コントラスト比は1.2〜1.5程度にしかなりません。

ロービジョンのユーザーには、押せる場所が見えないということです。

2. 押せる場所が分からない

ニューモーフィズムでは、カードもボタンも入力欄も、すべて同じ「浮いた面」として表現されます。視覚的に区別できないので、どれが操作可能なのか判断できません。

3. ダークモードで破綻しやすい

暗い背景では「白いハイライト」が強すぎて浮き、逆に暗い影は背景に沈んで見えなくなります。明暗の差を作れる幅がライトモードより狭いためです。

アクセシビリティを保ったまま使う3つの方法

結論としては、ニューモーフィズムを「装飾」に降格させ、操作の手がかりは別に持たせるのが唯一の解です。

方法1：3:1を満たす境界線を必ず1本足す

.neu-button {
  background: var(--neu-bg);
  border-radius: 16px;

  /* 影は装飾。境界の情報はこの border が持つ */
  border: 1px solid #6b6b6b;   /* #e0e0e0 に対して 3:1 以上 */

  box-shadow:
     8px  8px 16px var(--neu-dark),
    -8px -8px 16px var(--neu-light);
}

「ニューモーフィズムらしさが減る」と感じるかもしれませんが、境界が見えないUIはそもそも成立していません。ここは譲れない部分です。

方法2：文字とアイコンのコントラストを確保する

UI部品の境界とは別に、ラベル文字は4.5:1以上が必要です（大きな文字は3:1）。淡いグレーの背景に淡いグレーの文字、という配色は避けてください。

.neu-button {
  color: #333;      /* #e0e0e0 に対して十分なコントラスト */
  font-weight: 600;
}

方法3：フォーカスリングを消さない

ニューモーフィズムの作例ではoutline: noneが多用されますが、これはキーボード操作を破壊します。影の中に埋もれない、はっきりしたフォーカス表示を残してください。

.neu-button:focus-visible {
  outline: 3px solid #1a73e8;
  outline-offset: 3px;   /* 影と重ならないよう外側に出す */
}

outline-offsetで外側に離すのがポイントです。影の上に重ねると輪郭が溶けて見えなくなります。

実装例：押せることが分かるニューモーフィズムボタン

ここまでの対策をすべて入れた実装です。そのままコピーして使えます。

:root {
  --neu-bg:    #e0e0e0;
  --neu-dark:  color-mix(in oklab, var(--neu-bg), black 18%);
  --neu-light: color-mix(in oklab, var(--neu-bg), white 70%);
  --neu-border:#6b6b6b;
  --neu-text:  #333;
}

@media (prefers-color-scheme: dark) {
  :root {
    --neu-bg:    #2e3239;
    --neu-dark:  color-mix(in oklab, var(--neu-bg), black 35%);
    --neu-light: color-mix(in oklab, var(--neu-bg), white 12%);
    --neu-border:#9aa0a8;
    --neu-text:  #f2f2f2;
  }
}

body { background: var(--neu-bg); }

.neu-button {
  background: var(--neu-bg);
  color: var(--neu-text);
  border: 1px solid var(--neu-border);
  border-radius: 14px;
  padding: 14px 28px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;

  box-shadow:
     6px  6px 12px var(--neu-dark),
    -6px -6px 12px var(--neu-light);

  transition: box-shadow .15s ease-out, transform .15s ease-out;
}

.neu-button:hover {
  box-shadow:
     4px  4px  8px var(--neu-dark),
    -4px -4px  8px var(--neu-light);
}

.neu-button:active {
  box-shadow:
    inset 5px 5px 10px var(--neu-dark),
    inset -5px -5px 10px var(--neu-light);
  transform: translateY(1px);
}

.neu-button:focus-visible {
  outline: 3px solid #1a73e8;
  outline-offset: 3px;
}

/* 高コントラスト設定のときは影をやめ、輪郭をはっきりさせる */
@media (prefers-contrast: more) {
  .neu-button {
    box-shadow: none;
    border-width: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .neu-button { transition: none; }
}

<button class="neu-button" type="button">送信する</button>

ダークモード側でハイライトの混合比を12%まで下げている点に注目してください。ライトモードと同じ70%にすると、暗い背景で白い線が浮き上がってしまいます。

prefers-contrast: moreへの対応も入れています。OS側で高コントラスト表示を選んでいるユーザーに、あえて曖昧な影を見せる理由はありません。

どこに使い、どこに使わないか

作成に使えるツール

• Neumorphism.io：背景色・影の距離・ぼかし量を指定するとbox-shadowを生成してくれます
• Figma / Adobe XD：Drop ShadowとInner Shadowを2枚重ねて再現できます

ジェネレーターで作った値を貼るだけだと、コントラストとフォーカス表示が確実に抜け落ちます。生成後に必ず、境界線・文字色・:focus-visibleを自分で足してください。

まとめ

• ニューモーフィズムはbox-shadowを明暗2本置くだけで作れる。背景色と要素の色を一致させるのが条件
• 影の色はcolor-mix()で背景から生成すると、テーマ変更に強い
• WCAG 1.4.11 の3:1を影だけで満たすのは不可能。境界線を1本足して補う
• 文字は4.5:1以上。outline: noneは書かない。:focus-visibleをoutline-offset付きで残す
• ダークモードではハイライトの比率を大幅に下げる
• prefers-contrast: moreのときは影をやめて輪郭を強める
• 主要な導線のボタンと入力欄には使わない
• Appleが採用したという話は事実ではない。同社の現行方針は半透明の Liquid Glass

「見た目が気持ちいい」ことと「操作できる」ことは別の話です。装飾として割り切って、要所は普通のUIで固める。この線引きができていれば、ニューモーフィズムは今でも十分に使える表現です。