ニューモーフィズム | 未来のインターフェースに触れるUIのビジュアルデザイン

この記事では
今までのUIデザインを踏まえたうえで密かに話題を集めている「Neumophism(ニューモーフィズム)」に着目し、このデザインが誕生した理由を自分なりに考察した内容をメモしたものになっています。

# 「ニューモーフィズム」とは

画像1

オブジェクトの影に明暗2色のドロップシャドウを使うことでそのオブジェクトの背景の面から突き出ているような、あるいはくぼんでいるように見せるのが特徴。
従来のフラットデザインと違うところは、
・光源からの光がより感じられるような複雑な影になっている
・背景の面とつながっている
見た目の部分で感じられる違いでいうとこの2点があげられる。


# 今までのデザインを踏まえたうえでなぜ「ニューモーフィズム」が誕生したのか

まず今までのソフトウェアデザインの変遷を確認。

PC内のアプリや機能を初めての人でも直感的に使えるように人々の現実に存在するモノに対して無意識に持っている「認知」を頼ったデザイン「スキューモーフィズム」
ツイッターやフェイスブックなどのこの世にはないものを表現するためのソフトウェア的な表現として生まれた「フラットデザイン」

今ひそかに注目されている「ニューモーフィズム」は「スキューモーフィズム」のように現実にあるような表現を大切にしながら、「フラットデザイン」のようなソフトウェア的な在り方に近づけていると見ることができる。
ここで言っている「現実にある」という言葉をもっと砕いた言い方をすると3次元の世界では当たり前な横幅、縦幅、高さを意識させるような光や影を付けることで画面の中ではあるがまるでそこに存在しているようなイメージ。

じゃあなぜ「ニューモーフィズム」のような表現が必要だったのか。「フラットデザイン」では何が最適ではなかったのか。
要因としては、

「フラットデザイン」ではどうしてもソフトウェアと現実の乖離を感じてしまうから。

なぜ乖離を感じてしまうのか。
「フラットデザイン」ではオブジェクトが「浮いている」ように見える影の付け方をしている。
だが現実の世界にその場で浮遊し上下するようなものはあまりない。あったとしても一般的ではない。
それと、表面の質感が感じられない。紙であれば感じられるザラザラ感。何かの金属やプラスチックのプレートであれば光の反射。反射しないのであればマットな質感。だがそれも感じられない。
あまり見慣れないものや現実に存在しているという想像がしにくいということもあり乖離をより感じてしまう。

なぜ乖離を感じるとよくないのか。
よくないのではなく、最適ではないのだ。
Appleが2018年に「Fluid Interface」というセッションを発表している。
「Fluid Interface」とは「流れるようなインターフェース」と訳す。
(ここで一応認識を正しておくと、スマホの画面上を指す「インターフェース」ではなく、メタメディア(代替可能なメディア、つまりコンピュータのこと)を指す「インターフェース」である。)
ユーザとインターフェースの流れるような接点を作ることでよりよい顧客体験が設計できるということを言っている。
だがここで注目すべきは「Fluid Interface」を発表したということよりも、コンピュータが社会、環境に融け込んでいく状態にあるということを前提にこのセッションは発表された、ということ。
IoTなどで接続不可能、する必要もないと思われていたものがどんどんネット世界とリンクしていく。
これからどんどんメタメディアが社会に溶け込んでいく。
このようなユビキタスコンピューティングが進んだ環境で、いざ使うとなった時に現実と乖離し使い方がわからないような表現にするのは最適ではないのだ。

しかし「スキューモーフィズム」ほど現実に近づける必要もない。
なぜなら現実ではできないことをデジタルの世界ではできるからだ。
そのため「ニューモーフィズム」という新しい表現ができたのだ。



# これがデザインとして流行るのかどうかはおいておく。


そもそもツールとして扱われるものは人の認知や環境、背景の部分も利用しなければならないので、その時の流行などを意識しても意味はない。
とらえるべき場所は上記で説明してきた、社会的背景があってのデザインの変遷である。

社会的な部分を強調してもう一度まとめると、アプリケーションという社会になかったものを、社会にあるように魅せたものが「スキューモーフィズム」。
もう一般化されたし、デジタル上でしか存在しないものができたからもう独自のものも入れていかないとね~、ということで「フラットデザイン」が誕生。
フラットデザインだと実際に操作している実感が薄いし、これからの変化を見据えて影とか質感とかも、そこに存在する感じで、、、
こんな感じかな?これを「ニューモーフィズム」と呼ぼう。


これまで話してきた内容は僕の考察です。
上記でも話しましたが社会背景があってのデザインの変わり目だと思っています。
仮説でも自分の中で納得のいく形で「なぜいまデザインを変えるひようがあるのか」、「ニューモーフィズムの本質、かなえたいものとは何なのか」というのを出しておかないと使いどころを判断できないと思ったのでまとめました。
もちろん他の表現も出てくるだろうし、
「フラットデザイン」自体がもっと一般常識になってしまえば、他のデザインの方が気持ちが悪く見えてくることもあると思います。
でもそうではない方法が今模索されています。
自己帰属感、道具の透明性などを意識し、スマホだけどスマホではなく、まるでサービスそのもののインターフェース、表面に触れ、操作しているような感覚を模索しながら、理解を広げようとしている。
そしてその過程が「ニューモーフィズム」なだけだと思っています。


そもそもなニューモーフィズムの詳しい説明は下記のページがおすすめです。
Neumorphism in user interfaces

英語だと読む気が失せる方は
日本語でわかりやすくまとめてくださっている方もいるので
載せておきます。
"Neumorphism" なるUIデザインのトレンド

こちらの記事ではニューモーフィズムを体験することができます。

http://photoshopvip.net/120672


自己帰属感、UIと社会的背景の関係性、
ユビキタスコンピューティングなど、
「ユーザインターフェース(メタメディアと人との接点)」
について知りたい方は
渡邉恵太」さんの「融けるデザイン ハード×ソフト×ネット時代の新たな設計論」を読むといいですよ。

この記事が気に入ったらサポートをしてみませんか?