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

サイト構築 -デザイン

Post on:2020年6月3日

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

ニューモーフィズムとは、スキューモーフィズム（Skeuomorphism）から派生したデザインの新しいトレンドです。

Neumorphism = New（新しい） + Skeuomorphism（スキューモーフィズム）

Neumorphism Music Player: Instagramより

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

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

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

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

FREE Neumorphism UI kit for Figma

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

Spotify Neumorphism UI Redesign

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

Neomorphic Darkness - Free UI Kit

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

Neumorphic Ui Kit

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

☀️ Light Mode ☀️ Simple Music Player

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

Simple Music Player

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

Freebie Neumorphic UX UI Elements

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

Neumorphical animation

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

Neumorphism

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

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

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

明るいシャドウのための明るいカラー
背景と要素のための中間色
暗いシャドウのための暗いカラー

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

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

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

最初に明るいカラーと暗いカラーを決め、そのカラーを使った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でオブジェクトを作成

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デザインに適用した実装例

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

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

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

<div class="box"></div>

1	<div class="box"></div>

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

body{
    background-color:#E0E5EC;
}

.box{
  /* 基本的なスタイルと配置 */
  margin-left: auto;
  margin-right: auto;
  margin-top:100px;
  border-radius:4px;
  width:150px;
  height:150px;
    /* 基本的なスタイルと配置 */
  /* ニューモーフィズムのスタイル */
  background-color:#E0E5EC;
  box-shadow: 9px 9px 16px rgb(163,177,198,0.6), -9px -9px 16px    rgba(255,255,255, 0.5);
    /* ニューモーフィズムのスタイル */
}

body{

background-color:#E0E5EC;

}

.box{

/* 基本的なスタイルと配置 */

margin-left: auto;

margin-right: auto;

margin-top:100px;

border-radius:4px;

width:150px;

height:150px;

/* 基本的なスタイルと配置 */

/* ニューモーフィズムのスタイル */

background-color:#E0E5EC;

box-shadow: 9px 9px 16px rgb(163,177,198,0.6), -9px -9px 16px rgba(255,255,255, 0.5);

/* ニューモーフィズムのスタイル */

}

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

/* ニューモーフィズムのスタイル */
  background-color:#E0E5EC;
  box-shadow: 9px 9px 16px rgb(163,177,198,0.6), -9px -9px 16px    rgba(255,255,255, 0.5);
/* ニューモーフィズムのスタイル */

/* ニューモーフィズムのスタイル */

background-color:#E0E5EC;