新デザイン手法、ニューモーフィズムとは

みなさん、こんにちは。ウェブラボデザイナーチームです。みなさんは、「ニューモーフィズム」という言葉を聞いたことがありますか？フラットデザインやマテリアルデザインに次いで、最近注目されているデザイン手法です。今回はそのニューモーフィズムについてご紹介します。

ニューモーフィズムとは？

ニューモーフィズムとは、フラットデザインやマテリアルデザインのようなミニマムでシンプルな要素と、スキューモーフィズムの現実的な陰影や立体感が組み合わさったデザイン手法です。

※スキューモーフィズム…よりユーザーの理解を促すために、ユーザーに馴染みのある装飾や体裁を取り入れたデザイン手法。

ニューモーフィズムの特徴は？

一見ニューモーフィズムは、マテリアルデザインと混同されやすい手法です。どのような違いがあるのか見て確認しておきましょう。

ベースに対して要素が浮いているマテリアルデザインに対し、ニューモーフィズムはベースと一続きになっているような構造になります。よってニューモーフィズムの要素には影と同時に光が入り、基本的に要素自体の色はベースとなる背景と同じ色になるのが特徴です。マテリアルデザインでは基本的に「重なっている」「浮いてる」見え方でしたが、ニューモーフィズムではまるで背景の一部が押されて「手前に突き出ている」または「窪んで凹んでいる」見え方になります。

メリットとデメリット

メリット

• 目新しく近代的なデザイン
• ダークモードに対応しやすい

特に日本のWebサイトにおいては、まだそれほど取り入れられていないためとても新鮮で洗練された雰囲気を醸し出してくれます。スタイル自体もすごくシンプルかつ3DCGのような立体的な見え方のため、近未来を感じさせる要素にもなります。また、基本的に要素と背景が同じ色なため色数が少なく、ダークモードなどの際にボタンやフォントの色の変更が比較的安易になります。

デメリット

• UIデザイン的にわかりにくい
• 効率的なコーディングがしにくい

一方で、ニューモーフィズムは要素を光と影のみで背景と差別化するため、特にボタンなどの場合ON/OFFが認識しにくくなってしまいます。

一般的なボタンは要素の色が変わることで、ボタンのON/OFFを認識しています。しかしニューモーフィズムは基本的に要素も背景と同じ色を使うことになるので、影と光の装飾のみでボタンのON/OFFを表現しなければいけません。ON/OFFの差が分かりにくく、誤解も招きかねないので取り入れる際には注意が必要です。
また、ニューモーフィズムは影だけでなく光も実装しなければなりません。しかし、現時点でのCSS3では光として実装するスタイルはありません。ニューモフィズムをそのまま実装する際には、Neumorphism.ioなどの無料オンラインサービスを使うと簡単に実装できるのでおすすめです。

いい例と悪い例

実際にニューモーフィズムを取り入れたいい例と悪い例を見てみましょう。
 

２つの例は、ニューモーフィズムをカードのような要素として取り入れた例です。左の悪い例から見ていきましょう。購入ボタンにもニューモーフィズムを取り入れていますが、とても認識しにくく全体的にもメリハリがありません。購入ボタンなどのCVに直接繋がる要素には、右の例のようにフラットデザインを組み合わせて別の色を塗ると視認性が上がります。カード右上のいいねボタンも、ONの要素に色を塗ることで、すでに押されていることがより明確になりました。彩度の高い色も加わって全体的にもメリハリが出ましたね。このようにニューモーフィズムにはデメリットもありますが、上の例のようにユーザーを意識した工夫を加えることでカバーすることできます。

まとめ

注目のデザイン手法「ニューモーフィズム」いかがだったでしょうか？次々と新しい手法が出てくる中でも、ユーザーファーストで誰にでも優しいデザインを心がけることが何より重要です！ニューモーフィズムのメリット・デメリットを理解した上でぜひ取り入れてみてはいかがですか？興味がある方は「フラットデザイン」「マテリアルデザイン」について書かれたこの記事もおすすめです。

フラットデザインとマテリアルデザインを比較して、基本を理解しよう