こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
今日は一時期流行し、今も一部で根強い人気を誇るUIデザイン手法「Neumorphism（ニューモーフィズム）」のボタン実装についてご紹介します。
Neumorphismは、背景とほぼ同色のUIパーツに柔らかいシャドウを使って浮き出し（もしくは凹み）を表現する立体的なデザイン手法です。
とてもミニマルで美しいのですが、視認性や操作性の課題も指摘されています。
今回は、そんなNeumorphicボタンをCSSで実装しつつ、美しさとアクセシビリティを両立させるシャドウ設計のコツをお伝えします。
Neumorphismの基本構造
NeumorphismのUIは、以下の4つの要素で成り立ちます。
- 背景と近い色で塗りつぶしたパーツ
- 明るい光と暗い影の両方を使ったシャドウ
- 控えめなボーダーまたは境界線なし
- アニメーションで浮き沈みを演出することも
Neumorphismの魅力は「押せる感と自然さの絶妙なバランス」です。
ただし、背景と同化しすぎると「どこがボタンなのか分からない」状態に陥ることもあります。
CSSで作るNeumorphismボタン
まずは基本的なボタンのHTMLとCSSを紹介します。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
このように、外向きのシャドウで浮き出し感を、内向きのシャドウで押し込み感を再現します。
シャドウ設計のコツ
Neumorphismでは、光源と影のバランスがUIの質を左右します。
1. シャドウの色と濃さを整える
- 明るい影（light shadow）：白または明るいグレー
- 暗い影（dark shadow）：ベージュ系の中間色やダークグレー
影が濃すぎるとリアルすぎて重く、薄すぎると判別できません。
2. 陰影の距離とぼかし
- X, Y方向の距離は 8px前後 が自然
- ぼかし（blur）は 16px程度 が標準
シャドウの方向が揃っていないとチープに見えてしまうので注意。
アクセシビリティ面での注意点
Neumorphismはその特性上、コントラストが低くなりがちです。
W3Cのアクセシビリティ基準（WCAG 2.1）では、テキストと背景のコントラスト比が4.5:1以上であることが推奨されています。
改善ポイント
- 文字色は黒系でしっかり見せる（#222〜#333）
- ボタン全体のサイズを大きくし、押しやすさを確保
- キーボードフォーカススタイルを必ず追加
- hoverやactive時の変化を明確にする
フォーカススタイルの例
.neu-btn:focus {
outline: 2px solid #1e90ff;
outline-offset: 4px;
}これにより、キーボードユーザーや視力が弱い方にも配慮したデザインが可能になります。
まとめ
Neumorphismは視覚的に非常に魅力的なデザインですが、実用性と視認性のバランスが重要です。
- シャドウは濃さ・距離・方向を慎重に設計
- テキストコントラストを強めて可読性を確保
- フォーカス・hover・active状態をしっかり表現
- キーボード操作・タッチ操作でも使いやすく
Neumorphismボタンは、控えめで上品な印象を与えたいプロダクトに最適です。
ただし、装飾に頼りすぎず、UIとしての機能性・アクセシビリティを忘れないように設計しましょう！
