ニューモーフィズムとは、デザインする時に知っておきたいポイント、CSSでの実装方法

ニューモーフィズムとは、要素が背景と同じ素材で作られており、シャドウを与えて押し出されたような窪んだようなスタイルです。最近注目されているUIデザインのトレンド「ニューモーフィズム」を簡単な手順でデザイン・実装する方法を紹介します。使用するソフトウェアは、FigmaでもIllustratorでもAdobe XDでもSkecthなど、なんでもOKです。

ニューモーフィズムのデザイン方法、使用するカラーの選び方、UIデザインに適用するCSSの実装コードなど、すぐに実践できます。

ニューモーフィズムをデザインする時に知っておきたいポイント、CSSでの実装方法

Neumorphism (Soft UI) in User interface design - Tutorial
by Kanhaiya Sharma

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

新しいトレンド「ニューモーフィズム」

ニューモーフィズムとは、Neumorphism = New + Skeuomorphismで、以前トレンドだったスキューモーフィズム(Skeuomorphism)から派生した新しいトレンドが注目されています。

ニューモーフィズムの例

Neumorphism Music Player: Instagramより

ニューモーフィズムについては、最近当ブログでも取り上げました。

ここでは、簡単な手順でニューモーフィズムを作成する方法を解説します。使用するソフトウェアは、FigmaでもIllustratorでもAdobe XDなど、なんでもOKです。

ニューモーフィズムをUIデザインに使用した例

ニューモーフィズムをUIデザインに使用した例を見ておきましょう。

ニューモーフィズムをUIデザインに使用した例

FREE Neumorphism UI kit for Figma

ソーシャルボタンや入力フォームなどに、ニューモーフィズムを適用したFigma用のUIキット。

ニューモーフィズムをUIデザインに使用した例

Spotify Neumorphism UI Redesign

SpotifyのUIデザインにニューモーフィズムを適用したデザインスタディ。ダーク系のニューモーフィズムもいいですね。

ニューモーフィズムをUIデザインに使用した例

Neomorphic Darkness - Free UI Kit

同じくダーク系のニューモーフィズム。こちらはAdobe XDの素材としてダウンロードできます。

ニューモーフィズムをUIデザインに使用した例

Neumorphic Ui Kit

スマホアプリで使用されるUIコンポーネントをニューモーフィズムでデザインしたUIキット。Adobe XD用の素材がダウンロードできます。

ニューモーフィズムをUIデザインに使用した例

☀️ Light Mode ☀️ Simple Music Player

スマホ用のミュージックプレイヤーをニューモーフィズムでデザイン。こちらはライトモード。

ニューモーフィズムをUIデザインに使用した例

Simple Music Player

上記のダークモード、ニューモーフィズムはライトでもダークでもかっこいいですね。

ニューモーフィズムをUIデザインに使用した例

Freebie Neumorphic UX UI Elements

ニューモーフィズムでデザインされたUI要素のSketch用素材。

Neumorphical animation

ニューモーフィズムのインタラクションをアニメーションでまとめたもの。タップ・スワイプだけでなく、さまざまな要素にニューモーフィズムが適用されています。

ニューモーフィズムをUIデザインに使用した例

Neumorphism

最後は、ニューモーフィズムのシャドウの与え方をまとめたもの。

ニューモーフィズムのデザイン基礎知識

ニューモーフィズムをデザインするポイントは、正しいカラーパレットを使用することです。ニューモーフィズムには、同じカラーの3つの色合いが必要になります。

  • 明るいシャドウのための明るいカラー
  • 背景要素のための中間色
  • 暗いシャドウのための暗いカラー
ニューモーフィズムに必要な3つのカラー

ニューモーフィズムに必要な3つのカラー

カラーを選択する方法は、これから紹介する方法だけではありません。しかし、このテクニックを使用すると、簡単にカラーの一貫性を実現できます。

Step 1: ニューモーフィズムで使用するカラーを作成する

最初に明るいカラーと暗いカラーを決め、そのカラーを使った2つのオブジェクトを作成します。

明るいカラーと暗いカラーを使った2つのオブジェクト

最初に明るいカラーと暗いカラーを決める

Step 2: カラーをブレンドする

Figma, Sketchの場合

Figma, Sketchの場合は、暗い要素をコピーして中間トーンを作成します。

カラーをHLSに変更します。HLSは、色相(Hue)、彩度(Saturation)、輝度(Lightness)の略です。L値を約10%から25%くらい増やし、明るいカラーと暗いカラーの間で中間トーンを手動で作成してください。
例: Convert Hex #A1AFC3 to HSL(215, 22%, 70%);

Figmaでカラー選択

Illustratorの場合

Illustratorでニューモーフィズム用のカラーを作成する手順は、下記の通りです。

  • 両方のオブジェクトを選択する。
  • メニューから、オブジェクト > ブレンド > 作成 を選択。
  • メニューから、オブジェクト > ブレンド > ブレンドオプション を選択し、「間隔」を「ステップ数」にし、「2」を入力して、「OK」ボタンをクリック。

これで、下記のように中間トーンのオブジェクトが作成されます。

Illustratorでオブジェクトを作成

Illustratorでオブジェクトを作成

Step 3: ニューモーフィズムで使用するカラー選択の仕上げ

各ソフトウェアごとに、ニューモーフィズムで使用するカラー選択の仕上げを解説します。
中間トーンは、背景と要素のカラーとして使用します。

Adobe Illustrator

  • シャドウを作成するには、メイン要素を2回コピーします。最初の要素に明るいカラーを加え、暗い要素に暗いカラーを加えます。
  • 両方の要素に12〜16pxのぼかしを追加し、下記の画像のようにカラーを選択します。
  • それらをX軸とY軸で-9pxから-12pxのライトシャドウ要素、X軸とY軸で9pxから12pxのダークシャドウオブジェクトに移動します。
    明るいシャドウと暗いシャドウに50%の不透明度を加えます。

Figma

  • メイン要素に複数のドロップシャドウを加えます。1つは明るいシャドウ用、もう1つは暗いシャドウ用です。
  • 12pxから16pxのぼかし
    それらをX軸とY軸で-9pxから-12pxのライトシャドウ要素、X軸とY軸で9pxから12pxのダークシャドウオブジェクトに移動します。
    明るいシャドウと暗いシャドウに50%の不透明度を加えます。

Sketch

  • シャドウを作成するには、メイン要素を2回コピーします。最初の要素に明るいシャドウを加え、2番目の要素に暗いシャドウを加えます。
ニューモーフィズムで使用するカラー

ニューモーフィズムで使用するカラー

ニューモーフィズムをCSSで実装する方法

最後に、ニューモーフィズムをUIデザインに適用した実装例を見てましょう。

ニューモーフィズムをUIデザインに適用した実装例

ニューモーフィズムをUIデザインに適用した実装例

実際のデモは、下記をご覧ください。

実装するHTMLとCSSを解説します。

HTMLはシンプルで、div要素にclassを加えるだけです。

CSSで指定したカラーは、上記で紹介したカラー値を使用しています。

UIデザインで、ニューモーフィズムを美しく実装するポイントは、複数のbox-shadowプロパティを使用することです。

【訳者注】
box-shadowを定義するのは大変だという人には、ジェネレーターが便利です。

Neumorphism(ニューモーフィズム)のスタイルシートを生成できるジェネレーター

CSSもこれで簡単!Neumorphism(ニューモーフィズム)のスタイルシートを生成できるジェネレーター

ニューモーフィズムのデザインをする時に注意すべきこと

常にカラーパレットを用意してください。
背景色は常に要素の色と同じにしてください。

ニューモーフィズムをCSSで実装したデモ

ニューモーフィズムをCSSで実装したデモをいくつか紹介します。

sponsors

top of page

©2020 coliss