2020年注目のトレンド Neumorphism とは

はじめまして、KAI-YOU開発部デザイナーのPENTAGRAM(@PENTVGRVW)です。 昨年、新卒入社した地元北海道のWeb制作会社を退職し、2020年1月から開発部としてKAI-YOUにおけるサービスのデザインなどをお手伝いさせていただいております。

前職では受託メインでグラフィックデザインやWebデザイン、撮影業務を主に担当していました。個人ではeスポーツ系のイベントや大会を主催したり、その時好きなコンテンツと技術を題材にファンアートを制作してSNSに投下する毎日を送っています(早くLJL始まってほしい)
よければTwitterフォローお願いします

今回は2020年のUIトレンドの中でも賛否両論ありますが、個人的に好きな「Neumorphism(ニューモーフィズム)」というUIをご紹介いたします。


Neumorphismとは

f:id:KAI-YOU:20200127185315p:plain
Neumorphismは近年DribbbleやInstagramにおいて注目されている新たなUI手法です。

UIデザインにスキューモーフィズムが採用され始めてからも、フラットデザインフラットデザイン2.0、マテリアルデザインなど様々なUI手法がそれぞれの弱点を補う形で生み出されてきましたが、Neumorphismに関してはその限りではありません。なぜならNeumorphismはスキューモーフィズムが持つ「視認性の良さ」というメリットを放棄していると言われているからです。

UIデザインにとって「直感的でない」ことは致命的であり、多くのデザイナーはそれらを理解していると思います。また、実際にプロダクトに反映した事例が少なく、テストの結果が数字として記録されていないことから足踏みしているチームも多いはず。「UIなのに見づらい、分かりづらいってどうなのよ」と思われる方もいらっしゃると思いますが、そんなNeumorphismにもちゃんと良いところはあるのでご安心ください!


見栄えが良い

誤解されがちですがこれは「視認性が悪い」こととはノットイコールであり、そもそも「良い見た目」でないと界隈では流行りません。実用性がまだ見極められていないのにも関わらず、これだけ多くのデザイナーが制作し、投稿しているところを見ると、改めて興味を引くデザインだということがよく分かります。

f:id:KAI-YOU:20200127182744p:plain
Dribbble - Neumorphism検索結果


今までにない立体表現

フラットデザインマテリアルデザインはシャドウエフェクトを巧みに利用することで、オブジェクトの「浮遊感」を演出し、質感や立体感を表現してきました。その点、Neumorphismはシャドウエフェクトを明暗2つ使い分け、凹凸を表現しています。

制作の都合上、オブジェクトを背景色と同じ色にする必要があるので、コントラスト差がなくボタンやスイッチとしての使い勝手は褒められたものではありませんが、この表現にはそれと天秤に掛けるほどの「真新しさ」があります。

f:id:KAI-YOU:20200128102537p:plain

実装コストがそれほど高くない(はず)

シャドウを2つ使うので他の手法より手間がかかりそうな印象ではありますが、Photoshop等で基礎となる明と暗のシャドウを設定した後、スタイルをコピーすることで他のオブジェクトに対しても流用が可能です。

もちろん、若干の微調整は必要になりますがフラットデザインマテリアルデザインに触れたことのあるデザイナーならそれほど障害にはならないでしょう。

また、実装の際にいくらか検討は必要になりそうですが、有志が作成した(※1)ジェネレーターを利用することである程度の手間は軽減できるかと思います。

非デザイナの方でも気軽に触れるジェネレーター Neumorphism/Soft UI CSS shadow generator

f:id:KAI-YOU:20200127183500p:plain
誰でもNeumorphismを作成できるNeumorphism.io


次世代のスタンダードになり得るか

業界的には今のところネガティブな印象が強いNeumorphismですが、将来性は大いにあると考えています。 ある時を境にガラケーからスマートフォンに主流が切り替わったり、iPhone等の液晶画面も年々大きくなっていくことから、デザイントレンドだけでなくそれを取り巻くデバイス(媒体)環境にも変化があるといえます。

2D上ではいまのところ「BAD UI」とされるNeumorphismも、VR技術やGoogleグラスなどが発展することで視覚情報が自然と2Dから3Dに移り変わり、適応していくかもしれません。

Neumorphismは登場したばかり、まだまだ検証されていない要素がたくさんあります。 何事も試してみることが1番だと思うので、ジェネレーターやソフト上で是非1度Neumorphismに触れてみてください!

参考

uxdesign.cc

uxdesign.cc