素材から直接生えてきたような、あの独特の浮き出し感。ニューモーフィズム（Neumorphism）は、ボタンや要素がページの背景と同じ素材でできているかのように見える、柔らかい立体感が特徴のデザイン手法です。box-shadowの明暗2色を組み合わせることで「光が斜め上から当たっている」状態を再現し、フラットでもなく、強い3Dでもない、絶妙な浮き出し感を生み出します。
この記事では、CSSのみで実装したニューモーフィズムボタンを5本紹介します。JavaScriptは使わず、コピペですぐに使えます。WordPress / SWELLのカスタムCSSにも対応。ポイントはベースカラー・明るい影・暗い影の3色設計。この記事の調整方法を参考に、ご自身のサイトカラーに合わせてカスタマイズしてみてください。
Soft Float（ソフト・フロート）
素材から浮き上がる、ニューモーフィズムの基本形です。box-shadowに明色（#ffffff）と暗色（#b8bec9）を左上・右下の2方向に指定することで、光が斜め上から当たっているような立体感が生まれます。ホバーで影が少し広がり、わずかに上方向に浮き上がる動きが、「押せそう」という感覚をさりげなく強調します。
シンプルなフォームの送信ボタンや、ダッシュボード系UIのアクションボタンなど、クリーンで落ち着いた印象を持たせたい場面に最適です。
See the Pen Soft Float by BaseKENT (@basekent) on CodePen.
調整方法
- 背景・ボタン色の統一:
background: #e0e5ecを変更する際は、bodyのbackgroundと.btn-soft-floatのbackgroundを必ず同じ色に揃えてください - 影の強さ:
box-shadowの暗色#b8bec9を濃くするほどコントラストが強くなります。背景が暗いほど影の暗色も暗めに調整を - 角丸:
border-radius: 12pxを変更してください。50pxでピル型、50%で円形ボタンになります
Soft Inset（ソフト・インセット）
Soft Floatとは逆に、ボタンが素材の中に押し込まれているように見えるデザインです。inset キーワードを使って影を内側に入れることで、凹んだような視覚効果を作り出しています。「押した状態」「選択中の状態」の表現に使われることが多く、トグルボタンやアクティブ状態の表示に特に有効です。
Soft Floatとセットで使うと「未押下・押下済み」のUIを自然に表現できます。ダッシュボードのフィルターボタンや、設定画面の選択肢に組み込むと実用性が高まります。
See the Pen Soft Inset by BaseKENT (@basekent) on CodePen.
調整方法
- 凹み量:
inset 4px 4px 8pxの4px（オフセット）と8px（ぼかし）を大きくするほど深く凹んで見えます - 背景色: Soft Floatと同様、
bodyと.btn-soft-insetのbackgroundを必ず同色に - テキスト色:
color: #6b7a99を背景色より少し暗めの同系色にすると、馴染んだ上品な印象になります
Toggle Press（トグル・プレス）
ホバーすると浮き出し状態（Soft Float）から押し込み状態（Soft Inset）へとシームレスに切り替わるデザインです。このデモはホバーのみで状態変化するため、実際のON/OFF保持にはJavaScriptが必要ですが、見た目の構造を把握・流用するのに最適です。box-shadow を外側から inset に切り替えるだけでこの動きが実現できるのが、ニューモーフィズムの面白さです。
「ON/OFF」「選択/非選択」などのフィードバックが必要なボタンに。ユーザーが「今どちらの状態か」を押した感触から判断できるため、UXの質が自然と上がります。
See the Pen Toggle Press by BaseKENT (@basekent) on CodePen.
調整方法
- 切り替えの速度:
transition: box-shadow 0.2sの秒数を上げると、ゆっくりとした切り替えになります - 文字色の変化:
:hoverのcolor: #4a5a7aをより濃くすると、押し込まれた感のある視覚フィードバックが強まります - 影の深さ:
:hoverのinset値を初期状態の外側影より少し小さめにすると、自然なアニメーションになります
Pill Neumorphic（ピル・ニューモーフィック）
border-radius: 50px で角丸を最大にしたピル型のニューモーフィズムボタンです。角が丸いほどニューモーフィズムの「柔らかさ」が増し、より有機的でやさしい印象になります。ホバーで letter-spacing が少し広がり、文字がゆっくり呼吸するような動きがアクセントになっています。
カジュアルなブログや、ウェルネス・ライフスタイル系サイト、柔らかい印象を大切にしたいポートフォリオのCTAボタンに向いています。
See the Pen Pill Neumorphic by BaseKENT (@basekent) on CodePen.
調整方法
- 文字間隔の変化量:
:hoverのletter-spacing: 0.05emを大きくするほど、ホバー時の広がりが目立ちます。0.02em程度にするとさりげない変化に - 角丸:
border-radius: 50pxを維持しつつ、paddingを変えてボタンの縦横比を調整できます - 影の方向: デフォルトは左上から光が当たる設定です。
box-shadowの符号を入れ替えると光源の方向が変わります
Dark Neumorphic（ダーク・ニューモーフィック）
ダーク系のベースカラー（#2c2c3a）でニューモーフィズムを表現したバリエーションです。明色と暗色の影はベースカラーより明るい色・暗い色でそれぞれ設定する原則はライト版と同じですが、暗い背景では影のコントラストが取りにくいため、差を少し大きめに取ることがポイントです。目安として明色はベースカラーより15〜20%明るく、暗色は15〜20%暗くなるよう調整すると自然な立体感が出ます。ホバーでinset切り替えと同時にテキスト色も明るくなり、視認性を保ちます。
ポートフォリオのダークモード、ゲーム系・音楽系サイトなど、ダーク背景がデフォルトのデザインに自然に馴染みます。
See the Pen Dark Neumorphic by BaseKENT (@basekent) on CodePen.
調整方法
- ベースカラーの変更:
bodyと.btn-darkのbackground: #2c2c3aを同じ暗い色に変更してください。#1e1e2e（深い紺）や#2d2d2d（ダークグレー）などが相性よく使えます - 影の明色:
-6px -6px 12px #3e3e4fの#3e3e4fはベースカラーより15〜20%明るく設定します。差が小さすぎると立体感が出ません - 影の暗色:
6px 6px 12px #1a1a25の#1a1a25はベースカラーより15〜20%暗めに。差が大きすぎると不自然に見えるので調整してください
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
