【衝撃】2020年のUIデザインのトレンド!?『Neumorphism』とは?時代が進むにつれ、シンプルになっていく。satorikublogsatorikublogサトリクのこだわりのモノ紹介ホームデザイン【衝撃】2020年のUIデザインのトレンド!?『Neumorphism』とは?時代が進むにつれ、シンプルになっていく。6分SHAREツイートシェアはてブLINEPocketサトリクどうも、『Neumorphism』を知って感動したサトリクです。みなさん、Neumorphism(ニューモーフィズム)という言葉を知っていますか?2020年に流行ると言われているデザインです。この記事では、今年のUIデザインのトレンドになるかもしれないと言われている、『Neumorphism』について徹底解説していきたいと思います。300px;}サトリクこれが流行ると知った時は、超感動しましたね。感動した理由は後々、熱々と語らせていただきます。まとめ目次に戻るNeumorphismとは?上記の画像のようなデザインがNeumorphismです。シリコン製のような見た目で、影で凸凹を表現し、形を作っています。大前提として、Neumorphismは浮いてません。Neumorphismの条件(ルール)Neumorphismを作るときには、以下のような条件(ルール)があります。UIデザインのトレンド)簡単に言うと、要素の、左上には明るい影、右下には暗い影をつけること。背景と要素の色は、同じにすること。凸凹を表現する際には、影を中にして左上と右下を逆にする。いうところでしょうか。逆に、この条件に当てはまらなければ、Neumorphismとは言えません。Neumorphismのメリットメリット1:新鮮このデザインを取り入れているコンテンツはまだ少ないので、このデザインを使えば、新鮮で現代的なコンテンツだと感じます。メリット2:ダークモードに対応可能ダークモードとは、アプリなどに取り入れられている画面のテーマカラーを暗めにする機能のことです。ダークモードに対応するには、基本的にボタンの色、文字の色、枠の色など、全ての色を変えなければなりません。Neumorphismは、背景色と素材の色は同じというルールがあります。そのため、色の変更がかなり楽になります。メリット3:極限のシンプルメリット1と同じで見た目のことですが、Neumorphismはとてもシンプルです。時代とともにシンプルになっていますが、おしゃれさを保ちつつ、これだけシンプルにできるデザインは、他にないと思います。サトリクつまり、おしゃれの極みがNeumorphismのメリットってことですね。UIデザインのトレンド)サトリク左がボタンを押す前で、右がボタンを押した後です。影だけで、違いを表現しています。ボタンでは使わないでください。言うと、ボタンの押す前(OFF)と押した後(ON)のデザインの差がそれほどないため、違いがわかりにくいからです。一般的な方には、このデザインでも許容はできるのですが、視覚障害がある方だったり、低品質の画面や、低コントラスト画面などでは、とても表現ができません。サトリクボタンで使用するのは、やめたほうがいいってことですね〜。2020年のトレンド?このNeumorphismが2020年にトレンドになると言われています。その一方、Neumorphismは大きなトレンドにはならない。断言している人もいました。それがこちらの記事です。interfaces』汎用性がないからトレンドにはならない。現在、デザイン関連のSNS『dribbble』とInstagramでの投稿がどんどん増えてきています。Resources)おそらく、Googleの画面をCSSでいじってNeumorphismにした画像ですね。シンプルで美しいです。Googleもいつか、これを取り入れる日が来るのでしょうか。Ui)これが問題のボタンのON/OFFですね。確かに、目を薄めてみるとどこが押されているかわかりません。Banking)とても美しい。これがNeumorphismをふんだんに利用したアプリです。今までのNeumorphismの中で一番、影が濃いですね。interfaces)右側はダークモードにした時です。ダークモードになっているのですが、少しボタンがわかりにくくなっていますね。サトリクまだまだ、わかりづらいところが多いです。このデザインは今後に期待ですね。目次に戻る時代が進むにつれ、分かりやすくかつシンプルになっているこのデザインが2020年のトレンドになるのではないか。いう情報を知った時とても感動しました。感動したかと言うと、時代が進むにつれ、どんどんわかりやすく、シンプルになってきているからです。今回は、『わかりやすい』が微妙なので、まだ一概に流行るとは言い切れませんが、Neumorphismはもっともシンプルなデザインだと思います。Webの世界だと、古い記事になればなるほど、ごちゃごちゃしてますよね。最近の記事はとてもシンプルな形になっています。サトリク時代が進むにつれ、分かりやすくかつシンプルになっている例はGoogleの社名ロゴを見ればわかります。Googleの歴代のロゴ引用元:エスモワールド-(Googleの名前の由来とは?新ロゴの理由やロゴの歴史についても)保護されていないため、リンク削除どんどんシンプルになってます。昔は加工してればしてるほど、凝ってるなというイメージを与え、おしゃれに繋がっていましたが、現在は無駄な影や色が派手だと、ダサいと感じてしまうようになりました。現在だとシンプルになればなるほど洗練されているというイメージを受けます。Neumorphismはこんな時代にぴったりのUIデザインだと僕は思います。サトリクちなみに、Appleのロゴも年々シンプルになっています。引用元:Logaster-(美しい会社のロゴ:世界で最も有名なブランドの25のロゴとその歴史)目次に戻るCSSで表現するには?仕組みは意外と簡単で、明るい影を左上につけ、暗い影を右下につけるだけで、Neumorphismは再現できます。明るい影と暗い影を入れ替え、外側ではなく、内側に影をつけるだけです。イラストレーターなどでは、作るのが少し難しいかもしれませんが、CSSなど、プログラミング上で表現する場合は、割と簡単かもしれません。Neumorphismを簡単に表現できるツールサトリクNeumorphismを簡単に自由自在に作成するツールがありました。Neumorphismを作成してみる→Neumorphism.io目次に戻るNeumorphismに対する世間の評価は?確かにdribbbleとかの投稿ではよく見るけど、実際にローンチされてるアプリでは見かけたことないかも。2020今度のデザインのトレンドはNeumorphismになるかも..らしいです。自分は今の方が好きだけどなぁ。なんか新鮮さ半分、古くささ半分って感じする。2020サトリク結構可愛いとか、おしゃれと言う意見が多いです。実装が難しいと言うのが難点ですね。僕も早くこのNeumorphismを使ってアプリを作ってみたいなぁ。目次に戻るまとめここまで、Neumorphismについてまとめてきました。Neumorphismに関する情報が少ないため、記事もあやふやなことばかりでした。今後、Neumorphismに関して情報がでてき次第、この記事を更新していきたいと思います。【意外と簡単】プログラミングできない俺が、iOSアプリ開発してみた。サトリク21歳のエンジニアです。仕事終わってから1人で淡々とブログを書いています。目標は、このブログを自慢できるほどのコンテンツに仕上げることです。自分が買ったモノの紹介はこちらのブログで紹介しています。