ニューモーフィズムUIについて

巷で最近見聞きするようになった"ニューモーフィズム"デザイン。今年のデザイントレンドとも言われているようです。一見とてもかわいくて未来感のあるデザインですが、少し考えてみました。

※この記事はGUIにおけるニューモーフィズムついての内容です。グラッフィクデザインや映像、3Dなどにおけるニューモーフィズムはちょっと話が変わると思うので参考程度にお願いします。

ユーザビリティが悪い

ニューモーフィズムは薄い2つのドロップシャドウで立体感を表現し空間を区切る手法です。これまでのマテリアルデザインやフラットデザインに比べてコントラストが低いです。

そのため、強い日差しや暗い部屋などコントラストの低い環境での視認性が悪いです。視力が低い人にとっても分かりづらいでしょう。

HIGにもこう記述があります。

Use strongly contrasting colors to improve readability.
Human Interface Guidelines - Apple

「視認性を向上させるためにコントラスト強い色を使いましょう」的な意味です。普遍的なデザインの原則でAppleがわざわざガイドラインに書いていることに逆らう必要は無いのではないでしょうか。

じゃあ色付けてコントラスト上げればいいじゃん！と思いますが、それだと従来のデザイン手法で良いのでは？ニューモーフィズムの本来の洗練された雰囲気が失われるのでは？と私は感じます（詳しくは後述）。

欲しい情報や行うべき操作が分かりづらい

また、ニューモーフィズムはユーザーが欲しい情報や行いたい操作を見つけづらいという問題も引き起こします。

その原因は主に、

・コントラストが低く全体が均一的なため主要操作に辿り着きづらい
・ドロップシャドウが大量にあるので視線が分散する

ことにあると思います。

こちらもまたHIGにも同様の記載があります。

Avoid using the same color for interactive and noninteractive elements.
If interactive and noninteractive elements have the same color, it’s hard for people to know where to tap.
Human Interface Guidelines - Apple

「インタラクティブな要素とそうでない要素に同じ色を使うのは避けましょう　同じ色だとどこをタップしたらいいか分かりづらくなります」的な意味です。

世界観が強すぎて扱いづらい

ニューモーフィズムはVI（ビジュアル・アイデンティティ）を強く内包するデザイン手法です。これまでのスキューモーフィズムやフラットデザイン、マテリアルデザインはニューモーフィズムほど独特の主張がありません。

これはニューモーフィズムをグラフィックデザイナーや映像製作者が積極的に作品に取り入れている様からも見てとれます。

GUIにおいてVIに大きく影響を及ぼすことが良い方向に働くこともありますが、多くの場合は悪い方向に働くでしょう。

まず、ブランド本来のVIとニューモーフィズムの雰囲気が合致しない危険性があります。

例えばnoteがニューモーフィズムUIになったらどうでしょう？現在のnoteにはシンプル・明るいイメージがあります。ですがニューモーフィズムUIを採用すると柔らかい・現実的なイメージが加わり元々のシンプル・明るいイメージは失われてしまうでしょう。

もっと極端な例を出すとWSJや日経アプリがニューモーフィズムUIになったらどうでしょう？現在の洗練されたきっちりとした印象が失われてしまわないでしょうか？

次に、予想外の要素によって世界観が崩壊する危険性が考えられます。

先程のニューモーフィズムによってVIが侵食される危険性はブランドのイメージとの合致、ニューモーフィズムのカスタマイズなどによって回避可能かもしれません。しかし異分子混入による印象の悪化は特に外部からの情報を表示したり（広告・OGPなど）ユーザーからの入力を受け付けたり（SNSなど）する場合においては極めて避けるのが難しいです。

ニューモーフィズムUIはとても洗練された近未来的な印象を持つデザインです。例えばニューモーフィズムでInstagramのようなアプリを作るとき、このような投稿画像をイメージしてデザインするでしょう。

ですがもしもいらすとやのようなポップな画像が投稿されたらどうでしょう？怪しいサプリの広告みたいな画像が投稿されたら？

一気にニューモーフィズムの世界観が崩れてしまいます。

このようにニューモーフィズムはそれ自体の世界観が強すぎるあまりに想定外の要素に耐えられません。

多層構造を表現できない

これまでのGUIでは要素の上に要素が浮いてレイヤー的に重なっていく、多層構造が多く用いられています。

それに対しニューモーフィズムUIは要素を凹凸で表すので多層構造を表現するのが難しく（頑張っても3層くらい）、浮遊する要素を表現することができません。

これはこれまでのGUIで用いられてきた多くの要素が使用不可であることを意味します。

アプリのUIだと例えばタブバー、フローティングボタン、Appバー等はすべて浮遊して重なり合うことを前提とした要素なので、ニューモーフィズムで実装することは難しいです。

ここまでユーザーに浸透していて合理性のある要素をニューモーフィズムの些細な要素のために捨てる意味は無いのではないでしょうか...

浮遊する要素のみフラットorマテリアルデザインを使えば？と思いますがそもそもニューモーフィズムの設計思想は現実にない浮遊の概念を捨てることなので、それならそもそもフラットorマテリアルデザインで良くない？となってしまいます。また、ニューモーフィズムとマテリアルデザインを混在させることはドロップシャドウを2種類の意味で（しかも大量に）使うことになり混乱を招くでしょう。

実装コスト上がるうえに難しい

シャドウの位置が少し干渉したり、シャドウの強さが少し違っていたりするだけで破綻しやすいので、かなり注意しながら実装していく必要がありそうです。

そもそもニューモーフィズムでは表現が難しいUIパーツがあります。分かりやすいのがトグルスイッチです。トグルスイッチ自体が現実のスイッチから抽象化されたものである上に、可動部が面に接着しているわけでは無いのでニューモーフィズムでは実現が難しいです。dribbble等で検索をかけてもらえれば分かると思います。

トグルスイッチに限らず、接着を前提と出来ないUIの表現は難しいでしょう。

まとめ

・ユーザビリティが悪い
・欲しい情報や行うべき操作が分かりづらい
・世界観が強すぎて扱いづらい
・多層構造を表現できない
・実装コスト上がるうえに難しい

以上のことから現実的にニューモーフィズムを採用できるケースってかなり少ないんじゃないかな〜と。

ちなみに以下のようなケースであればニューモーフィズムを採用するのはアリかなと思います。

・ニューモーフィズムの欠点による体験品質の低下 < ニューモーフィズム採用による体験品質の向上
・とにかく見た目が重要
・ニューモーフィズムの世界観が内容に合致している
・ユーザー操作の少ないLPのようなケース