Advertisement

skeuomorph-mobile-banking

 

Neumorphism(ニューモーフィズム)は、昨年末ごろより新しいデザイントレンドになるのではと話題となっている新しいデザイン手法です。

 

この記事では、ニューモーフィズムの基本や作成上の注意点、コピペで実装できるHTML/CSSスタイリング、参考スニペットまでまとめてご紹介します。

 

 

ニューモーフィズムって何?

ニューモーフィズムは、一昔前に流行った「スキューモーフィズム」のリアルな質感と、フラットやマテリアルデザインのようなシンプルさを組み合わせた新しいスタイル。言葉の由来も、New(新しい)+Skeumorphism(スキューモーフィズム)からきた造語。

skeuomorph-mobile-banking

dribbbleで4500以上のいいねが付いている、ニューモーフィズムの火付け役となった作品 Skeuomorph Mobile Banking by Alexander Plyuto

 

少し前までは、マテリアルデザインの登場によって「拡散型シャドウ」も人気となったデザインスタイルでしたね。

diffuse-shadow
最近ウェブサイトやUIデザインなどを見ていると、ふわりと浮いているような奥行き感を表現しているものがあります。これは拡散型シャドウ(英: Diffuse Shado

 

ニューモーフィズムの違いは?

では、ニューモーフィズムが他のデザインスタイルと何が違うのでしょう?実際にカード型レイアウトを参考に詳しく見てみましょう。

newmorphism-difference

 

フラットやマテリアルデザインでは、カードは背景の上に浮かび、ドロップシャドウが付いています。それがニューモーフィズムでは、背景の一部が手前に突き出ているようなスタイルで、基本的にカード要素の色は背景色と同じです。側面に厚みがあり、浮いていません。

 

 

ニューモーフィズムはどうやって表現するの?

ニューモーフィズムは、SketchやFigma,Illustratorなどのアプリをつかって、手軽に作成することができます。基本となる2つのポイントをきちんと押さえておきましょう。

 

基本ルール1: 2つのドロップシャドウを利用する

first-step-to-neumorphism-1

 

ひとつめのポイントは、2種類の影を組み合わせることです。明るい影にはベース色より明るい色を、暗い影にはベースより暗い色を利用します。

 

基本ルール2: ベース色はブレンドで作成する

second-step-to-neumorphism-1

 

2つ目のポイントは、影に設定した2つの色をブレンドさせ、ベースとなる色を作成しましょう。Illustratorの場合、2つの色を選択し、メインメニューより「オブジェクト」>「ブレンド」>「作成」として、ステップ数を「2」とすれば完了です。

 

 

メリットとデメリットは?

このスタイルのメインとなる利点は、「フレッシュで新しい見た目を表現できる」点でしょう。他のスタイルと組合わせることもでき、やりすぎたプラスチックのような質感もありません。

 

デメリットとしては、利便性と効率的なコーディング方法がない点が挙げられます。メインとなる要素と背景の色が同じため、UIデザイン的には分かりにくいでしょう。特にトグルボタンを作成する場合、シャドウの凹凸だけでOn/Offをユーザーに認識できるようにするのは、とても困難と言えます。

neumorphism-2-2

Skeuomorph Mobile Banking | Continuation by Alexander Plyuto

 

 

ニューモーフィズムをHTML/CSSで表現しよう。

ニューモーフィズムをウェブサイトに導入するときは、影や凹凸感をスライダーで調整でき、そのままコピペ可能なコードをダウンロードできる無料オンラインサービスNeumorphism.ioを利用してみると良いでしょう。

 

 

 

コピペで実装できる参考HTML/CSSスニペットまとめ

以下は、コピペで簡単にニューモーフィズム・エフェクトを再現できるHTML/CSSスニペットとなります。紹介したカード型レイアウトはもちろん、ボタンやフォームなど実用的なコンポーネントがCSSで実装されています。

 

Editable Neumorphic Text

文字を編集したり、色を変えたりとカスタマイズ自由自在なニューモーフィズムをつかったテキストエフェクト。日本語にもきちんと対応しています。

See the Pen
Editable Neumorphic Text
by Adam Kuhn (@cobra_winfrey)
on CodePen.

 

 

Neuomorphic Checkboxes

まずはチェックボックスを使ったコードスニペット。クリックすると凹んだように切り替わります。

See the Pen
Neuomorphic Checkboxes
by Braydon Coyer (@braydoncoyer)
on CodePen.

 

 

Neomorphic Form

次はサインアップ用フォームのサンプル例。CSSのみでスタイリングでき、box-shadowとborder-radiusの使い方がポイント。

See the Pen
Neomorphic Form
by Swapnil (@swapnet)
on CodePen.

 

 

Neumorph card- soft ui

サンプル例でも利用したカード型レイアウトの参考スニペット。border-radiusの設定によって、より柔らかいソフトな印象に仕上がります。

See the Pen
Neumorph card- soft ui
by Cornelius Labuschagne (@corneliuslabuschagne)
on CodePen.

 

 

css Neumorphism design practice 02

ダークモードとの切り替えができるトグル付きのニューモーフィズムボタン。特にぼんやりと光るダークバージョンが個人的にツボ。

See the Pen
css Neumorphism design practice 02
by CMYK350dpi (@AYV)
on CodePen.

 

 

neumorph test

さまざまなレベルの凹凸具合をつかってスタイリングしたカード型レイアウト。はっきりとしたコントラストに仕上げることで、可読性や読みやすさがぐんと上がります。

See the Pen
neumorph test
by victor (@VictorUx)
on CodePen.

 

 

Neumorphism menu

ナビゲーションメニューにスタイルを適用したサンプル例。ボタンクリックでアイコンの色が切り替わることで、ユーザーにもやさしい安心設計。

See the Pen
Neumorphism menu
by Wouter (@wouterXD)
on CodePen.

 

 

Neumorphism Button

ハンバーガーメニューボタンにもニューモーフィズムが。奥行き感のあるリアルな質感が素敵です。

See the Pen
Neumorphism Button
by Sebastian Piskaty (@sebastian-piskaty)
on CodePen.

 

 

Neumorphism Button

まるで本当にボタンを押しているようなリアルさたっぷりなスニペット。

See the Pen
Neumorphism Button
by Naoya (@nxworld)
on CodePen.

 

 

Neumorphism sass mixin

Sassのmixinを使ってスタイリングされたボタンエフェクトライブラリ。

See the Pen
Neumorphism sass mixin
by PhotoshopVIP (@vipcrew)
on CodePen.

 

 

Neumorphism and toggles

ボタンを押したときの立体的な質感を見事に表現したトグルボタン。

See the Pen
Neumorphism and toggles
by Ryan (@ryanparag)
on CodePen.

 

 

A bit of neumorphism

ボタンや進捗プログレスバー、チェックボックスにログインフォーム、カード型レイアウトなどニューモーフィズムスタイルを一覧でまとめたライブラリ。

See the Pen
A bit of neumorphism
by Damir (@drovosek2703)
on CodePen.

 

 

Neumorphism Accessibility Example

ドロップシャドウのぼかしを強く設定することで、より立体感のあるデザインに仕上がります。

See the Pen
Neumorphism Accessibility Example
by Michael J. Fordham (@michael-j-fordham)
on CodePen.

 

 

Neumorphic Calculator

スキューモーフィズムと計算機をミックスしたコードスニペットで、実際に計算もできます。

See the Pen
Neumorphic Calculator
by Joseph R Miles (@joebobmiles)
on CodePen.

 

 

Nuemorphic Table

テーブルレイアウトにニューモーフィズムを使ったサンプル例も。ドロップシャドウの設定がUIデザインの大きな鍵となりそう。

See the Pen
Nuemorphic Table
by Abhishek Anil Deshmukh (@abhishek-deshmukh)
on CodePen.

 

 

Payment App (Neumorphism)

ニューモーフィズムを実際にアプリデザインとして導入したサンプル例。シンプルでミニマルな見た目が清潔感もあって◎。

See the Pen
Payment App (Neumorphism)
by Steven Brannum (@sdbrannum)
on CodePen.

 

 

Neumorphism Soft UI Music Player

ボタンに色を追加することで、スッキリしすぎていたデザインのアクセントにも。こちらは音楽プレイヤーのUIデザインサンプル。

See the Pen
Neumorphism Soft UI Music Player
by mixj93 (@mixj93)
on CodePen.

 

 

Neumorphism Weather App

温度管理するアプリにスキューモーフィズムを採用したコードスニペット。

See the Pen
Neumorphism Weather App
by Travis Williamson (@travisw)
on CodePen.

 

 

 

 

他のデザイナーの作品もチェックしよう

dribbbleには、世界中のデザイナーが作成したニューモーフィズムをつかった作品がずらりとアップされています。今後、ニューモーフィズムを検討するときのデザインアイデアにしてみてはいかがでしょう。

dribbble-neumorphism

 

参照元リンク : Neumorphism in user interfaces by Michal Malewicz – UX COllective

参照元リンク : Neumorphism (Soft UI) in User interface design – Tutorial by Kanhaiya Sharma – UX Planet