WEBデザインには時代時代によってトレンドがあります。例えば2010年代前半に流行ったフラットデザイン。立体感や質感などを廃したシンプルなデザインで、マルチデバイス対応のしやすさから一気に広まり、定着しています。
そして今、新たなトレンドとして注目されているのがニューモーフィズムです。一体どのようなものなのでしょう。定義やデザイン方法などをまとめました。
目次
ニューモーフィズムとは
ニューモーフィズム（Neumorphism）は背景から要素が押し出されていたり、窪んだりしているように見えるデザインの手法です。
フラットデザインの前に、スキューモーフィズム（Skeumorphism）というスタイルが流行ったことがあります。現実世界にあるものをデジタルの世界でリアルに表現するというコンセプトで、立体感や質感に特徴があるデザインです。
スキューモーフィズムは次第に廃れていきますが、2020年の初めころに再び注目されるようになりました。
2019年の終わりに、アメリカ発のデザイナー向けSNS「Dribbble」に以下の画像が投稿されたのがきっかけだとされています。
引用：https://dribbble.com/shots/7994421-Skeuomorph-Mobile-Banking
この画像にはスキューモーフィズムという言葉が使われていますが、これまでのものとは異なるテイストで話題を呼びました。他のデザイナーがこぞってこのスタイルに触発されたデザインを投稿していくうちに、ニューモーフィズムという言葉が生まれます。
新しい（New）スキューモーフィズム(Skeumorphism)でニューモーフィズム（Neumorphism）というわけです。
スキューモーフィズムのリアルなデザインと、フラットデザインのシンプルさが組み合わさっているのが特徴です。日本でニューモーフィズムを取り入れたデザインはまだあまり見られませんが、Dribbbleでは非常にたくさんの画像が投稿されていて、これから広まっていくだろうと見られています。
ニューモーフィズムの定義
基本的にオブジェクトと背景の色は同じです。オブジェクトの影によって押し出されたり、窪んだりしているようなイメージを与えます。
他に影を活用する手法としてはマテリアルデザインがあります。2014年にGoogleが提唱したスタイルで、現実世界の物理的法則が取り入れられていることが特徴。影もその1つで物理的法則に則ってつけられています。
マテリアルデザインはベースとなるレイヤーの上にオブジェクトが浮かんでいるというイメージで、影が重なっています。
それに対してニューモーフィズムはベース自体が押し出されたり窪んだりしていて、その高低差によって影が作られているというイメージです。ニューモーフィズムは、見る人に一枚の紙からすべてが生み出されているような印象を与えます。
オブジェクトと背景の色を統一することで、そうした視覚効果が得られますが、それと同等に影のつけ方も重要です。
明暗2色の影を使い分けます。一方に暗い影、もう一方に明るい影といった具合です。
窪んでいるようにみせる場合は、内側の影を使用します。
またオブジェクトに丸みを持たせることによって、質感が滑らかになります。 ニューモーフィズムの特徴をまとめると以下の通りです。
- 原則としてオブジェクトと背景が同じ色
- 2色の影によって高低差を表現
- オブジェクトに丸みを持たせる
- 上記の表現によって1枚の紙からすべてが作られているように見える
ニューモーフィズムを作る
実際にニューモーフィズムのデザインを作成してみましょう。
押し出されているように見えるスタイル
まずはボタンなどに使われる基本的なスタイルです。
単一色の背景を用意します。
同一色のオブジェクトを配置しました。分かりやすいように境界線をつけていますが、本来は不要です。
下側に暗い影をつけます。
続いて上側に明るい影をつけます。これで光が当たっているように見えます。
最後にオブジェクトが影になじみやすいように、左上が明るく右下が暗いグラデーションをかけます。これで完成です。
窪んでいるように見えるスタイル
続いては押し出されているものとは反対の、窪んでいるスタイルです。
背景を用意し、同一色のオブジェクトを配置するのは同じです。
内側に影をつけます。押し出されているように見えるスタイルとは逆で上側が暗い影です。
下の内側には明るい影をつけます。
最後に左上が暗く右下が明るいグラデーションをつけます。これで窪んで見えるスタイルの完成です。
境界線が押し上げられているように見えるスタイル
外周がせり上がっていて、内側は窪んで見えるというスタイルです。
押し出されているように見えるスタイルと同様、上側に明るい影、下側に暗い影をつけます。
さらに窪んで見えるスタイルの同様、内側の上側に暗い影、下側に明るい影をつけます。この時点でも細い縁取りがあるように見えてニューモーフィズムだと言えるでしょう。
さらに太い境界線をつけます。
最後に左上が暗く右下が明るいグラデーションをつけて完成です。
ニューモーフィズムのメリット
ニューモーフィズムは、もはや完全に定着したミニマルデザインの流れを汲むスタイルだと言えます。ミニマルデザインは要素をできる限り少なくしたスタイルです。「必要最小限」といった意味があります。
無駄がなくスタイリッシュで、メッセージを強く打ち出すことが可能です。ニューモーフィズムも洗練されていて、かつ伝えたいことをストレートに伝えられるでしょう。オブジェクトと背景が同じ色のため、かなりシンプルになります。
基本となる色が1つなので、ダークモードとの切り替えが容易という点にも注目です。
色数の多いサイトであれば、背景と共にさまざまな要素の色を調整する必要がありますが、ニューモーフィズムなら最低限の変更で済みます。
ニューモーフィズム自体が注目されているという点も、メリットです。デザインの流行を取り入れることで、ユーザーにインパクトを与えられます。まだ、取り入れているサイトはそれほど多くないので、新鮮な印象も与えられるでしょう。
ニューモーフィズムのデメリット
背景とオブジェクトの色が同じなので、コントラストが弱いという点は考慮しなければなりません。UIの構造が分かりにくくなってしまう恐れがあります。
コンバージョンボタンなど、特にユーザーの目を引きたい箇所のデザインには気を配らなければならないでしょう。
注目度は高いけれど、実際に導入されている例が少ないのはこうした点に懸念を示す企業が多いからかもしれません。
またCSSでの再現が難しいという点も厄介です。境界線のみやぼかしのない影だけを使ったフラットデザインと比べると、かかる労力には雲泥の差があります。
CSSでニューモーフィズムを表現するのであれば、無料で使えるジェネレーターがインターネット上に公開されているので、上手に活用してください。
リンク【Neumorphism.io Generate Soft-UI CSS code】
ニューモーフィズムのおすすめサイト
ニューモーフィズムを取り入れたおすすめのサイトを紹介します。
株式会社アーキタイプ – ARCHETYP｜Webビジネスに関するUI/UXデザイン
まとめ
ニューモーフィズムは現在、最も注目されているデザインの一つであるということは間違いありません。最小限の色使いでユーザーに洗練された印象を与えます。ボタンなどはついつい押したくなってしまうような雰囲気もあり、ワクワク感ももたらすかもしれません。
シンプルな構成は、昨今のデザインの潮流を汲んだものであるとも言えます。上手にデザインすれば、強力なインパクトをもたらすでしょう。
しかし、デメリットがあることも忘れないでください。特にユーザーにとって分かりにくくなってしまわないよう、細心の注意を払わなければなりません。公開されているニューモーフィズムを用いたサイトの多くはよいところを取り入れながらも、分かりにくさなどデメリットへのケアもしっかりしているように見受けられます。
注目度が高いことは間違いないので、上手に取り入れてみてください。
コメント