ニューモーフィズム ボタン
ニューモーフィズム（Soft UI）ボタンは、背景と同じ色のボタンに、明るい側と暗い側の2方向の box-shadow を当てることで、素材から押し出されたような柔らかい凹凸を表現します。このサンプルでは右下に暗い影、左上に白い影を置いて盛り上がりを作り、 :active 時に inset （内側影）へ切り替えるこ…
解説
ニューモーフィズム（Soft UI）ボタンは、背景と同じ色のボタンに、明るい側と暗い側の2方向の box-shadow を当てることで、素材から押し出されたような柔らかい凹凸を表現します。このサンプルでは右下に暗い影、左上に白い影を置いて盛り上がりを作り、:active 時に inset（内側影）へ切り替えることで、指で押し込んだような沈み込みを再現しています。JavaScript は不要で、すべて CSS だけで完結します。
向いている場面
- 設定画面やダッシュボードなど、落ち着いたトーンの UI
- 背景色が単色で淡いライトテーマのアプリ
- 触覚的な押し心地を出したいスイッチやキー
成立の鍵は背景とボタンの色を揃えることです。背景色を変えたら、ボタンの background と2つの影色（明・暗）も同系統で作り直してください。難点は影と背景のコントラストが低くなりがちで、可読性とアクセシビリティが落ちやすい点。文字色は十分に濃くし、フォーカス時のリングを別途付けると安心です。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
ダークテーマでも使えますか
使えますが、明暗2色の影を背景色に合わせて作り直す必要があります。暗い背景なら、明るい影は背景よりやや明るいグレー、暗い影はさらに濃い色にすると凹凸が出ます。コントラストが低くなりやすいので文字色は明るめに保ってください。
JavaScript は必要ですか
不要です。盛り上がりと押し込みの表現はすべて box-shadow と :active 擬似クラスだけで実現しています。HTML に button を置き、CSS を当てるだけで動作します。