ニューモフィズムUIの実例が全然なかったので実際に簡単なサービス作りながら、可能性を発掘してみた

最終的に作ったサービスはこちらになります
https://wevote-97602.web.app/
サービスの概要は、『簡単すぎるアンケートを作成できるサービス』 になります

開発時間は16時間程度、大多数をシャドウの調整やどのように見せると視認性が上がりそうか・ユーザーのモチベが上がるUIになるのかの調整に使うことになりました。
実際にニューモフィズムどうなの？という点を実際に開発して試してみた感想をお話ししていきたいと思います。

結論

• 実戦登板させて検証する価値は十分にある

  • しっかり作れば、戦えそうな見た目になる
  • 今回、ニューモフィズムUIとマテリアルUIでのクリック率バトルなどはしていないので、具体的な数字ベースでのデザインの良し悪しは語れないのが残念

• 適当に作ると一気にダサくなるのでデザインコストはいつもよりかかりそう

  • マテリアルUIと似てる感じ
  • 適当なデザインのflutterアプリ(マテリアルUI)が一気にダサくなる現象と同じことが起きそう

（前置き)ニューモフィズムとは

画像引用:Neumorphism, neumorphism everywhere
2020年くらいから度々話題に上がっていた、立体的で質感のあるリアルなデザインである『スキューモフィズム』と、flutterなどでもおなじみ『マテリアルデザイン』を組み合わせた新しいデザインスタイルのことです。
話題の割には採用されているケースが少なく、可能性が未知数なデザインスタイルとも言えるでしょう。

思ったこと

色の使い方が大変

• 今回、私が作ったWeVoteでは、背景色 #E7E8EF テキスト色は #2C3172をベースにした色を使いました。
• UIパーツの視認性を立体感や質感でまず作っていくイメージでした。なのでベースは背景色に合わせたものでどんどん作っていくイメージです。
• 立体感・質感をどんどん出していく都合上、テキストの色やボタンの色などは、より一層周りとのバランスを見て調整する必要がありました
• WeVoteでは、重要なアクション（投稿ボタンなど）を行うボタンを立体的なカラーボタンにして、それ以外は背景色ベースの立体的な演出にしておきました

カラーアイコンが活かせそうだった

基本的にはUIパーツを似ている色で立体感・質感を表現しがちなので、尺色が映えます

画像引用:Neumorphism icons
カラーアイコンを使うのはちょっと苦手意識がありましたが、このデザインスタイルであれば積極的に採用したいなと思いました。ちなみに、WeVoteでは Icons8 flat color icons を使いました。

時代を感じる

しっかりと作ることができれば『質感の良い名刺』を触っているような、感覚になれます。作り手側の感想にはなりますが、このワクワク感・スゲー感がとても良いなと気に入っています。
個人的には、最近の時代感にあっているような近未来的な印象も受けます。なので、もしかすると結構刺さるかもしれないと思いました。皆さんはどう思いますか？

ニューモフィズムUIを作成する上で参考にしたサイトなど

Neumorphism.io

• https://neumorphism.io/#e0e0e0
  このようなGeneratorを使うことで、どのようなスタイリングで質感を表現するか理解することができます。もちろんそのまま使うのもいいでしょう。

UI-Neumorphism

• https://akaspanion.github.io/ui-neumorphism/
  Componentの雰囲気など参考になります。ReactNativeで作成する時には、このようなUIライブラリが提供されているようなので手っ取り早く入ることができるかもしれません。

Neumorphism UI

• https://demo.themesberg.com/neumorphism-ui/
  上記と同じくComponentの雰囲気が参考になります。そのまま使うこともできるみたいです

さいごに

Twitterでも度々サービス開発に役立ちそうなことなどをつぶやきますので、よろしければフォローお待ちしてます