ニューモーフィズムジェネレーター
ソフト UI の押し出し表現を作成：明暗デュアルシャドウ、4つの形状モード、光・奥行き・柔らかさを完全コントロール。
ヒント：ニューモーフィズムには要素の背景とページ背景の一致が必要です。ジェネレーターが両方を設定します。
ニューモーフィズムジェネレーターの使い方
- ベースカラーを選択。ソフト UI には明るく、わずかに落ち着いた色が最適です。
- 光源の方向を選択。シャドウは反対側に落ちます。
- 距離とぼかしで奥行きを、強度で明暗シャドウのコントラストを調整。
- フラット・凹面・凸面・押下の形状を切り替え、ボタン・カード・入力欄に対応。
- CSS（background + box-shadow のペア）または Tailwind クラスをプロジェクトにコピー。
このニューモーフィズムジェネレーターについて
ニューモーフィズム（ソフト UI）は、2つのシャドウを組み合わせて要素が背景から押し出されたように見せます：片側に暗いシャドウ、反対側に明るいハイライト。要素自体はページ背景と同じ色で塗られます。結果は、カード・ボタン・トグル向けの柔らかく触覚的で、ほぼ物理的なインターフェーススタイルです。
このジェネレーターはベースカラーから明暗のシャドウカラーを自動計算し、4つの形状モードと組み合わせます：フラット（クラシックな押し出し）、凹面と凸面（曲面のグラデーション塗り）、押下（押し込まれた状態のインセットシャドウ）。重要：錯覚が成立するには要素の背景がページ背景と一致する必要があります。プレビューは両方を一緒に表示します。
ニューモーフィズムのよくある質問
自分のページでニューモーフィズムが機能しないのはなぜ？
このスタイルは要素が背景に溶け込むことに依存します：要素は背後の面と同じ（または非常に近い）背景色を使う必要があります。ページの背景が選択したベースカラーと異なる場合は、どちらかを更新してください。ジェネレーターがプレビューステージを同じ色で塗るのはこのためです。
ソフト UI に最適な色は？
明るく、わずかに彩度を落とした色（明度85〜95%程度）が最適です。より明るいハイライトとより暗いシャドウの両方が見える状態が保たれるからです。真っ白はハイライトを消し、真っ黒はシャドウを消します。強度スライダーは2つのトーンがベースカラーからどれだけ離れるかを制御します。
凹面と凸面の違いは？
どちらもデュアルシャドウの上に繊細な線形グラデーションの塗りを追加します。凸面は（光源に向かって明るく）見る人に向かって膨らみ、盛り上がったボタンのよう。凹面は浅い皿のように内側に湾曲し、くぼみや入力フィールドに便利です。押下はインセットシャドウを使い、アクティブ/押し込み状態を表現します。
ニューモーフィズムはアクセシブルですか？
ソフト UI は本質的に低コントラストなので、重要なコントロールではなく装飾的なコンテナに使いましょう。テキストとアイコンが WCAG のコントラスト比を満たすことを確認し、インタラクティブ要素にはフォーカスアウトラインの追加を検討してください。
明暗のシャドウカラーはどう計算されますか？
ジェネレーターはベースカラーを白に向かって明るくしてハイライトを、黒に向かって暗くしてシャドウを作り、強度スライダーでスケールします。これにより2つのトーンが同じ色相ファミリーに保たれ、効果が柔らかく自然に感じられます。