ニューモーフィズム生成

機能

• 背景色を調整可能。二つの影の色はそこから導かれます（色相は同じ、明度だけ違う）
• 距離・ぼかし半径・強さを調整できます
• 凸と凹をワンクリックで切り替え —— 凹のときは二つの影の方向が入れ替わります
• 角丸の調整
• プレビュー区と要素は同色 —— この効果が成立する前提です
• 下に完全な CSS ルール（`.soft` セレクター付き）を出力
• 値は丸め処理済み、色も検証済みで、無効な CSS を出しません
• 計算はすべてブラウザー内で完結し、何も送信されません

使い方

1. まず背景色を選びます。効果のすべてがこれで決まり、淡い灰青が典型例です
2. 距離とぼかしを調整し、どれだけ浮いて見えるかを確かめます
3. 強さで影の濃さを決めます —— 濃すぎると画面が汚れて見えます
4. 「凹み」にチェックを入れて押し込まれた状態を確認し、コピーで CSS を取り出します

よくある質問

影の色を自分で選べないのはなぜですか？

少し間違えるだけで効果が消えるからです。 二つの色は「同じ背景色から導かれていること」と「色相が一致していること」を満たす必要があります。そうでなければ、一つの素材に光が当たっているのではなく、色の合わない継ぎ当てが二枚貼られたように見えます。よくある手作業の「RGB にそれぞれ 40 を足す」は色相まで動かします（暖色の背景で顕著で、冷たい白っぽい色になります）。そこで本ツールは HSL で明度だけを動かし彩度を微調整し、色相は変えません。入力は背景色一つだけです。

アクセシビリティの問題はどの程度ですか？

小さくありません。しかもこれは実装の巧拙ではなく、スタイル固有の代償です。 美しさは「要素と背景がほぼ同じ色」から生まれ、アクセシビリティが求めるのは「要素と背景に十分なコントラスト」です —— 両者は正面から衝突します。具体的には、視力の弱い方や明るい場所では、どこがボタンか分かりません。有効な緩和策は三つ：重要な操作（送信・削除）を純粋なニューモーフィズムにしない（枠線か明示的なラベルを付ける）、クリック領域を十分に取る（44×44pt 以上）、`:active` に凹み状態を使って押下時のフィードバックを静止時より強くする。

プレビュー区の背景が要素と同じなのはなぜですか？

それがこの効果の前提だからです —— 要素と周囲が同じ素材で、光が左上から来ると仮定しています。周囲の色が違うと、二つの影の縁が露見し、面から押し出されたのではなくシールを貼ったように見えます。本ツールでプレビューが背景色に追随するのはそのためで、実際のプロジェクトでも要素は同じ色の背景の上に置く必要があります。

凹みと凸はどこで使い分けますか？

凸（既定）は押せるものに：ボタン、カード、スイッチのオフ状態です。凹みには二つの用途があります。一つは押された状態（`:active`。凸との対比が最も自然なフィードバックになります）。もう一つはへこんだ容器 —— 入力欄やプログレス トラックなど、意味的にもともと「沈んでいる」要素です。本ツールのスイッチで両者を見比べてから決めてください。

どんなプロジェクトに向きますか？

要素が少なく、余白が広く、情報密度が低い画面に向きます：設定パネル、コントロール サーフェス、プレイヤー、ダッシュボードなど、「大きなボタンがいくつか、広い余白の上に」ある場面です。逆に情報密度の高い画面には向きません。表やリスト、管理画面は罫線と区切りで階層を作りますが、ニューモーフィズムはまさにそれを取り除くため、全体が混ざって見えます。2020 年前後に流行した後、主にコンセプト デザインで見かけるようになった理由でもあります。