🥶

ニューモーフィズムしんどい

1 min read

ニューモーフィズムとは

ボタンがにゅっと引き出したみたいに飛び出してたり、窪みを作って立体感出す感じのデザイン。
ゴムっぽい質感あるやつ。詳しくは調べればなんとなく雰囲気わかる。

どうやるの?

ある要素に対して、特殊な影のつけ方をする。
一応調べれば説明はあるけど、自分の英語力が弱いせいか、いまいちピンときてない。。。

https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6

何が辛いか

個人的な感想から3つ。

  1. デザインの自由度が下がる
  2. デザインロジックが複雑
  3. 見づれえ

デザインの自由度が下がる

ニューモーフィズムは影の付け方が特殊。ベースの色に依存して、影にも色味を足さないといけない。
そうなるとセクションごとに色を変更するのが難しくなる。

例えば、白背景のmainセクションの上に、赤いcardをのせるとき、cardの影は薄い赤になる。
白地に赤い影。。。事故っぽいですね

基本的には、このデザイン手法だと自ずとモノトーンになりがちなんだと思う。てかそれベースの手法ぽいし。

デザインロジックが複雑

端的にいうと影つけるのがめっちゃめんどい。
要素ごとの重なりを考えないといけないし、高低差も考慮しないといけない。
また、光源の位置も意識しないと、不自然な影になりがち。(これはマテリアルデザインとかも同じだけど)

何よりしんどいのは、明確なロジックを見つけられなかったこと。
関数を組んで、それでモデリングできたらよかったけど、公式にはそれっぽいのが見当たらない&CSSでどう表現したらいいかわからなかった(もし情報があれば教えて欲しい)

一応、提示されてる方法として、「以下のサイトを使ってみてね!」とあるが、エンジニアとしてはなんらかの関数を教えてくれと思う。提供してくれてるだけありがたいんだけどね。。。

https://neumorphism.io/#e0e0e0

余談だが、上のサイトでいくつかの具体例から抽象化してsassで関数化しようとしたけど、失敗した失敗した失敗した失敗した失敗した…
HSLで色分解したら導き出せると思ったんだけどな…

見づれえ

だって、モノトーンになっちゃうんだもの…
強調するとこ、強調しづらくて頭抱えてる。

まとめ

デザイン自体は斬新で面白いと思うんだけど、スキューモーフィズムと同じ問題点を抱えてると思う。
単純にデザインの難しさとか、メンテとか、管理とか、要件定義とか。
これを適用することで得られる、明確なメリットがないと、デメリットの部分だけ際立って、みんなはおろか、自分自身にバチギレそう。
仕事で「やりたい!」って言われたら、一回止めようと思いました。

Discussion

ログインするとコメントできます