Neumorphism Generator

ニューモーフィズムとは？

ニューモーフィズム（new + skeuomorphism）は、巧妙に設計されたシャドウを使用してソフトで立体的なシェイプを作成するデザインスタイルです。要素は背景サーフェスから押し出されたり、押し込まれたりして見えます。フラットデザインと現実的なシャドウ効果を組み合わせ、マッチした背景色に対してライトシャドウとダークシャドウの2つのシャドウを使用します。

ニューモーフィックシャドウの仕組み

この効果には2つのbox-shadowsが必要です。ライトシャドウ（左上オフセット）とダークシャドウ（右下オフセット）です。両方のシャドウは背景色から派生します。要素とその親要素は同じ背景色を共有する必要があります。距離とブラーを調整して奥行き感を制御します。

ニューモーフィズムのシェイプタイプ

フラットは外部シャドウを使ったボタンの凸状を作成します。凹面は微妙なグラデーションを使用して曲面が内側に見えるようにします。凸面は丸みを帯びた立体的な外観を作成します。押下はインセットシャドウを使用して押し込まれたボタンをシミュレートします。各シェイプタイプは目的のビジュアル効果を生成する異なるCSSを作成します。

ニューモーフィズムデザインのヒント

• 常にニュートラルな背景色を使用してください。純白または彩度の高い色は効果を損なわせます
• シャドウ距離をブラーに比例させてください。通常は1:2の比率です
• 微妙な強度を使用してハードなシャドウを避けてください
• テキストと対話要素に十分なコントラストを確保してください
• ニューモーフィズムはカード、ボタン、トグルに最適です
• アクセシビリティを考慮してください。ソフトなエッジは一部のユーザーにとって識別が難しい場合があります