【最新のWEBデザイントレンド】ニューモフィズムデザインとは？（前編）

「ニューモフィズム」

2020年から話題であったようですが、デザイン系の話題に疎い私は、今年に入ってから情報キャッチしました。UIデザイン方向性は、数年単位で変わってフラット、マテリアルと続けて、ニューモフィズムと進んでいますね。今後のUIデザインを考えるためにも、「ニューモフィズム」と今までのデザインを改めて確認してみました。

１）　「スキューモーフィズム」とは

ニューモーフィズム（Neumorphism）＝ New ＋ Skeumorphism

ニューモーフィズムは、文字の構成を見れば、“新しいスキューモーフィズム”であることが分かります。
では、「スキューモーフィズム」はなんだろう？と。昔、UI構築をしている時は、そのデザインがどんなコンセプト（名）なのかを気にしたことがなく、今回の件で初めて知ったので、こちら調べました。

そして、なるほど～と。

立体的で質感のあるリアルなデザインと説明されている方も多かったのですが、
突っ込んで調べて、自分の頭で整理してみると

スキューモーフィズムは、またの名称はリッチデザイン
他の物質に似せるために行うデザインや装飾をすること
ユーザーに馴染みのない新しいものを既存のものに似せること理解しやすい、使いやすい状態に使用という考え

とのこと。

デザインの例で「紙製のカレンダーのような外見に似せたカレンダーアプリのデザイン」という表現がありましたが、
これって、

電子書籍を売るために、リアル本棚・リアルページめくりを目指したデザイン＆コーディング！

な時の私ではございませんか！！

そうそう、ページめくりのJavascriptを組んで涙を流しまくっておりましたが（CSSとJavascriptのマリアージュを目指したともいうべき作業でした。）、「本の構成が捲り読むのに適した余白をもっているから、違和感なく読んでもらうには、その状態を再現したほうがいいのでは？」という思いから、開発仲間と四苦八苦したのです。
結果として、質感、立体感、触った感じが”似ている”とか、そういう方向での作りこみになりました。

特にコンセプト（名）知らなくても、当時のアプリ開発の流れに知らずにのっていたのだなと、数十年を経て実感。

このコンセプトの弱点は

リアルを追及しても画面上で実装できる動作には限界がある
リアリズムを追求し過ぎるとデザインの工程が非常に複雑で、実装時にも時間がかかる
デザインデータ量が増える上に、再現処理に端末のリソースをたくさん使う

という、開発者泣かせな点ではないでしょうか。

２）　続くコンセプト「フラット」とは

「スキューモーフィズム」の後に来た「フラット」。
こちらが流行になってから、私もその波に力いっぱい乗りました。
だって、シンプル！実装時に余計なデザイン装飾を考えなくていい！

「フラット」とはシンプルな形や要素、単純な色付けで分かりやすく、必要な情報を伝えることに注目した考え方と言えるでしょう。最小限の労力で、必要なことにたどり着けるようにすることで、ユーザーが”やりたいこと”に集中できる状況を作るともいえる気がします。シンプルで労力すくなく目的達成する。これはシステム開発で目指すところに似ていますね。

このコンセプトの弱点は、個人的な感想になりますが