【衝撃】2020年のUIデザインのトレンド!?『Neumorphism』とは?時代が進むにつれ、シンプルになっていく。。

サトリク

どうも、『Neumorphism』を知って感動したサトリクです。

みなさん、Neumorphismというデザインを知っていますか?2020年に流行ると言われているデザインです。

この記事では、今年のUIデザインのトレンドになるかもしれないと言われている、『Neumorphism』について徹底解説していきたいと思います。

ちなみに読み方はニューモーフィズムです。

 

Neumorphism

Neumorphismとは、こんなデザインのこと!

 

. Neumorphism{
    right: 10px; width: 300px;
    height: 300px;
    color: #fff;
    border-radius: 50%;
    background: #4887bf;
    box-shadow: 29px 29px 82px #3c709f,-29px -29px 82px #549edf;
    text-align: center;
    line-height: 300px;
}

サトリク

これが流行ると知った時は、超感動しましたね。。。

感動した理由は後々、熱々と語らせていただきます。笑

 

Neumorphismとは?

上記の画像のようなデザインがNeumorphismです。

シリコン製のような見た目で、影で凸凹を表現し、形を作っています。

大前提として、Neumorphismは浮いてません。

Neumorphismの条件(ルール)

Neumorphismを作るときには、以下のような条件(ルール)があります。

・要素に明暗2色のドロップシャドウを付ける
・明るいシャドウ(光)は左上に、暗いシャドウは右下に落とす
・要素の色は要素を配置している背景色と同じにする
・凸型(convex)と凹型(concave)がある
・凹型はインナーシャドウを使い、明暗を逆にする

引用元:note-(Neumorphism” なるUIデザインのトレンド)

簡単に言うと、要素の、左上には明るい影、右下には暗い影をつけること。背景と要素の色は、同じにすること。凸凹を表現する際には、影を中にして左上と右下を逆にする。

というところでしょうか。。

逆に、この条件に当てはまらなければ、Neumorphismとは言えません。

Neumorphismのメリット

メリット1:新鮮

このデザインを取り入れているコンテンツはまだ少ないので、このデザインを使えば、新鮮で現代的なコンテンツだと感じます。

メリット2:ダークモードに対応可能

ダークモードとは、アプリなどに取り入れられている画面のテーマカラーを暗めにする機能のことです。

ダークモードに対応するには、基本的にボタンの色、文字の色、枠の色など、全ての色を変えなければなりません。

しかし、Neumorphismは、背景色と素材の色は同じというルールがあります。そのため、色の変更がかなり楽になります。

メリット3:極限のシンプル

メリット1と同じで見た目のことですが、Neumorphismはとてもシンプルです。

時代とともにシンプルになっていますが、おしゃれさを保ちつつ、これだけシンプルにできるデザインは、他にないと思います。

サトリク

つまり、おしゃれの極みがNeumorphismのメリットってことですね。

Neumorphismのデメリット

デメリット1:ボタンのON/OFFが伝わりづらい

見出し画像

引用元:note-(“Neumorphism” なるUIデザインのトレンド)

サトリク

左がボタンを押す前で、右がボタンを押した後です。

影だけで、違いを表現しています。

Don’t do buttons!
I know it looks nice as a pressed state but for many people it’s not visible enough as the change is too subtle.

引用元:Collective-(Neumorphism will NOT be a huge trend in 2020)

この記事では、『Don’t do buttons!』。ボタンでは使わないでください。と言っています。

なぜかと言うと、ボタンの押す前(OFF)と押した後(ON)のデザインの差がそれほどないため、違いがわかりにくいからです。

一般的な方には、このデザインでも許容はできるのですが、視覚障害がある方だったり、低品質の画面や、低コントラスト画面などでは、とても表現ができません。

サトリク

ボタンで使用するのは、やめたほうがいいってことですね〜。

なぜ、2020年のトレンド?

このNeumorphismが2020年にトレンドになると言われています。しかし、その一方、Neumorphismは大きなトレンドにはならない。と断言している人もいました。
それがこちらの記事です。『⁠Neumorphism in user interfaces汎用性がないからトレンドにはならない。と言っています。

現在、デザイン関連のSNS『dribbble』とInstagramでの投稿がどんどん増えてきています。今後が楽しみですね。

色々なNeumorphism

おそらく、Googleの画面をCSSでいじってNeumorphismにした画像ですね。

やはり、とてもシンプルで美しいです。

Googleもいつか、これを取り入れる日が来るのでしょうか。。

これが問題のボタンのON/OFFですね。確かに、目を薄めてみるとどこが押されているかわかりません。。

うん。やっぱどれもNeumorphismだと美しいですね!

とても美しい。。

これがNeumorphismをふんだんに利用したアプリです。

今までのNeumorphismの中で一番、影が濃いですね。

右側はダークモードにした時です。

ダークモードになっているのですが、少しボタンがわかりにくくなっていますね。

サトリク

まだまだ、わかりづらいところが多いです。このデザインは今後に期待ですね。

時代が進むにつれ、分かりやすくかつシンプルになっている

このデザインが2020年のトレンドになるのではないか。という情報を知った時とても感動しました。

なぜ感動したかと言うと、時代が進むにつれ、どんどんわかりやすく、シンプルになってきているからです。

今回は、『わかりやすい』が微妙なので、まだ一概に流行るとは言い切れませんが、Neumorphismはもっともシンプルなデザインだと思います。

Webの世界だと、古い記事になればなるほど、ごちゃごちゃしてますよね。最近の記事はとてもシンプルな形になっています。

サトリク

時代が進むにつれ、分かりやすくかつシンプルになっている例はGoogleの社名ロゴを見ればわかります。

Googleの歴代のロゴ

「Googleのロゴ 昔」の画像検索結果

引用元:エスモワールド-(Googleの名前の由来とは?新ロゴの理由やロゴの歴史についても)
保護されていないため、リンク削除

どんどんシンプルになってます。昔は加工してればしてるほど、凝ってるなというイメージを与え、おしゃれに繋がっていましたが、現在は無駄な影や色が派手だと、ダサいと感じてしまうようになりました。

現在だとシンプルになればなるほど洗練されているというイメージを受けます。

Neumorphismはこんな時代にぴったりのUIデザインだと僕は思います。

サトリク

ちなみに、Appleのロゴも年々シンプルになっています。

Appleの歴代のロゴ

引用元:Logaster-(美しい会社のロゴ:世界で最も有名なブランドの25のロゴとその歴史)

 

CSSで表現するには?

仕組みは意外と簡単で、明るい影を左上につけ、暗い影を右下につけるだけで、Neumorphismは再現できます。

ボタンでのNeumorphismの押した後を表現するには、

明るい影と暗い影を入れ替え、外側ではなく、内側に影をつけるだけです。

イラストレーターなどでは、作るのが少し難しいかもしれませんが、CSSなど、プログラミング上で表現する場合は、割と簡単かもしれません。

Neumorphismを簡単に表現できるツール

サトリク

Neumorphismを簡単に自由自在に作成するツールがありました。

Neumorphismを簡単に表現できるWebサイト

 

Neumorphismを作成してみる→Neumorphism.io

Neumorphismに対する世間の評価は?

サトリク

結構可愛いとか、おしゃれと言う意見が多いです。しかし、実装が難しいと言うのが難点ですね。。

僕も早くこのNeumorphismを使ってアプリを作ってみたいなぁ。

まとめ

ここまで、Neumorphismについてまとめてきました。

まだまだ、Neumorphismに関する情報が少ないため、記事もあやふやなことばかりでした。

今後、Neumorphismに関して情報がでてき次第、この記事を更新していきたいと思います。