ニューモーフィズム凸ボタン
背景とほぼ同じ #e0e5ec という淡いグレーでボタンを塗り、明るい影と暗い影を 2 方向に重ねて 立体感を出すのがニューモーフィズム（soft UI）です。このボタンは右下に暗い影、左上に明るいハイライトを置くことで、面から「浮き出ている」ように見せています。
解説
背景とほぼ同じ #e0e5ec という淡いグレーでボタンを塗り、明るい影と暗い影を 2 方向に重ねて立体感を出すのがニューモーフィズム（soft UI）です。このボタンは右下に暗い影、左上に明るいハイライトを置くことで、面から「浮き出ている」ように見せています。:active では inset 付きの影に切り替わり、押した瞬間に内側へ沈み込むフィードバックが返ります。
向いている場面
- 余白を活かした落ち着いたトーンの設定画面やダッシュボード
- 白基調でやわらかい印象を出したいアプリの操作ボタン
- 音楽プレイヤーやスマートホーム系の上品なコントロール UI
色を変えるときは、ボタンと背景を必ず同じ色にしたうえで、影の色を背景より少し暗い色と明るい色の 2 つだけ用意します。注意点として、背景と輪郭の差が小さいぶんコントラストが弱く、視認性が下がりがちです。境界が見えにくい人のためにラベルの文字色は十分に濃くし、フォーカス枠を残すとアクセシビリティが保てます。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
ニューモーフィズムの色を変えるコツはありますか
ボタンと背景を同じ1色に揃えるのが基本です。その色を少し暗くした影と、少し明るくしたハイライトの2色だけを box-shadow に指定すると、立体感が崩れずに別の色へ展開できます。
立体感が薄いと感じたときはどうしますか
box-shadow の数値（8px 8px 16px の部分）を大きくすると影が広がって立体感が増します。逆に小さくすると控えめになります。押し込み表現は :active の inset 影で調整できます。