Neumorphism: その概要と CSS の例

近年、UI デザインにはさまざまなトレンドが出現していますが、その 1 つが ニューモーフィズムです。このデザイントレンドは、ソフトなはめ込みスタイルとモダンな美学を組み合わせ、奥行きと重ね着の錯覚を生み出します。この投稿では、ニューモーフィズムの原理とその利点と欠点を探り、このトレンディなデザインを独自のプロジェクトに実装するのに役立つ CSS コード スニペットを含む実用的な例を提供します。

ニューモーフィズムとは何ですか?

ニューモーフィズム (「新しいスキューモーフィズム」 の略) は、ソフト シャドウとハイライトを使用して 3 次元の外観を作成するデザイン アプローチです。現実世界のオブジェクトを模倣する従来のスキューモーフィック デザインとは異なり、ニューモーフィズムは、より繊細でモダンな雰囲気を目指しています。奥行き感を生み出すために光と影に大きく依存しており、多くの場合単色のカラー パレットが使用されます。

ニューモーフィズムの主な特徴

1. ソフト シャドウ: ニューモーフィック要素には通常、内側と外側の両方のシャドウがあり、柔らかく持ち上げられた外観を作成します。
2. 単色の配色: 背景と要素に同様の色合いを使用すると、シームレスな外観が作成されます。
3. ミニマリストの美学: ニューモーフィズムは、シンプルさと使いやすさに焦点を当てたミニマリズムを採用することがよくあります。
4. インタラクティブなフィードバック: ホバー状態やアクティブ状態では、ユーザーにフィードバックを提供するために影や色の変更が必要になることがよくあります。

ニューモーフィズムの利点

• 美的魅力: ニューモーフィズムは、ユーザーを魅了する視覚的に興味深いインターフェイスを作成できます。
• 奥行き知覚: 影を使用するとレイヤーの感覚が得られ、全体的なユーザー エクスペリエンスが向上します。
• インタラクションを促進: 視覚的な合図により、ユーザーは UI 要素を操作する傾向が高まります。

ニューモーフィズムの課題

• アクセシビリティの問題: コントラストが低く微妙なデザインは、すべてのユーザー、特に視覚障害のあるユーザーにとっては容易に認識できない可能性があります。
• 過剰使用: Neumorphism を過剰に使用すると、視覚的に乱雑になり、インターフェイスの操作が困難になる可能性があります。
• パフォーマンス: 影の影響が大きいと、特にモバイル デバイスのパフォーマンスに影響を与える可能性があります。

Neumorphism の CSS の例

Neumorphic UI コンポーネントの作成に役立つ実用的な CSS の例をいくつか見てみましょう。

ニューモーフィックボタン

<button class="neumorphic-button">Click Me</button>

body {
    background-color: #e0e0e0; /* Light background */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.neumorphic-button {
    padding: 15px 30px;
    border-radius: 12px;
    border: none;
    background: #e0e0e0; /* Same as body color */
    box-shadow: 8px 8px 15px #a3b1c6,
                -8px -8px 15px #ffffff; /* Soft shadows */
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.neumorphic-button:hover {
    box-shadow: 4px 4px 10px #a3b1c6,
                -4px -4px 10px #ffffff; /* Change shadows on hover */
}

ニューモーフィックカード

<div class="neumorphic-card">
    <h2>Neumorphic Card</h2>
    <p>This is an example of a neumorphic card.</p>
</div>

body {
    background-color: #e0e0e0; /* Light background */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.neumorphic-card {
    padding: 20px;
    border-radius: 15px;
    background: #e0e0e0;
    box-shadow: 10px 10px 20px #a3b1c6,
                -10px -10px 20px #ffffff; /* Neumorphic shadows */
    width: 300px;
    text-align: center;
    transition: all 0.3s ease;
}

.neumorphic-card:hover {
    box-shadow: 5px 5px 15px #a3b1c6,
                -5px -5px 15px #ffffff; /* Lighter shadows on hover */
}

ニューモーフィック入力フィールド

<input type="text" class="neumorphic-input" placeholder="Type something...">

body {
    background-color: #e0e0e0; /* Light background */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.neumorphic-input {
    padding: 10px;
    border-radius: 10px;
    border: none;
    background: #e0e0e0;
    box-shadow: inset 6px 6px 10px #a3b1c6,
                inset -6px -6px 10px #ffffff; /* Inner shadows for depth */
    width: 300px;
    transition: all 0.3s ease;
}

.neumorphic-input:focus {
    box-shadow: inset 4px 4px 8px #a3b1c6,
                inset -4px -4px 8px #ffffff; /* Adjust shadows on focus */
}

ニューモーフィック トグル スイッチ

<div class="neumorphic-toggle">
    <input type="checkbox" id="toggle" />
    <label for="toggle">Toggle</label>
</div>

body {
    background-color: #e0e0e0; /* Light background */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.neumorphic-toggle {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.neumorphic-toggle input {
    display: none; /* Hide the checkbox */
}

.neumorphic-toggle label {
    padding: 10px;
    border-radius: 20px;
    background: #e0e0e0;
    box-shadow: 6px 6px 12px #a3b1c6,
                -6px -6px 12px #ffffff;
    position: relative;
    transition: all 0.3s ease;
}

.neumorphic-toggle input:checked + label {
    box-shadow: inset 6px 6px 12px #a3b1c6,
                inset -6px -6px 12px #ffffff;
    background: #d1d1d1;
}

デザインにニューモーフィズムを取り入れたウェブサイトを作成するアプリ

ニューモーフィックなデザインを作成し、CSS としてエクスポートできるデザイン ツール:

Neumorphism.io にアクセスしてください

結論

ニューモーフィズムは、深さとインタラクティブ性を強調し、UI デザインに新たな視点を提供する魅力的なデザイン トレンドです。美的魅力やユーザーエンゲージメントなどの利点もありますが、デザイナーはアクセシビリティやユーザビリティの課題にも注意する必要があります。提供されている CSS サンプルを実装することで、モダンで視覚的に魅力的なだけでなく、機能的でユーザーフレンドリーな Neumorphic インターフェイスの作成を開始できます。

他のデザイン トレンドと同様に、対象ユーザーを常に考慮し、インターフェイスがすべてのユーザーにアクセスできるようにしてください。デザインを楽しんでください!

以上がNeumorphism: その概要と CSS の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。