OTHER

Neumorphism

Jul 23, 2020 中島脩

こんにちは！
エンジニアの中島です。

コロナの感染拡大防止のため、弊社では約3ヶ月ほどリモートでの勤務となっていました。通勤が唯一の運動だったのでかなり太ってしまい、糖質制限を始めたのですが、ご飯を好きに食べれないのは辛いものです…。

さて、今回はUI設計の最新傾向であるNeumorphism（ニューモーフィズム）について話していこうと思います。

Neumorphismとは

by Filip Legierski 

立体的で質感のあるデザイン「スキューモーフィズム」と「フラットデザイン」や「マテリアルデザイン」を組み合わせた新しいスタイルのデザイン手法です。

New（新しい）+ Skeumophism（スキューモーフィズム）として作られた造語のようです。

Neumorphismの注意点

アクセシビリティやユーザビリティの観点から問題があります。

実装するにあたってelementと背景色を同じ色調で扱うので、コントラストが低くなってしまう点。
様々な記事で「視認性」について議論されているのが現状です。

しかし、Neumorphismは視覚的なスタイルとしてユーザーからすると新鮮で魅力的です。いかにユーザーの目を引き付けるデザインとして成立させるか、が大事だと思います。

また、優れたUI/UXはユーザーに考えさせない、ユーザーの目をコンテンツに導くものです。微妙なコントラストが特徴的なNeumorphismでは、UIとして分かりやすく、直感的である必要があります。

簡単な例で「ボタン」であるならば、「押せる」ことをユーザーに認識させなければいけません。

実装例

こちらのボタンにカーソルを合わせてください。
このままではボタンとして認識するのは難しいですよね。

hoverアクションを追加します。
「押せそう」になり、

クリックアクションを追加すると、
「押した」に変わります。

UI設計におけてNeumorphismを用いる場合は、インタラクションが必須です。
一見、複雑そうな印象ですが実装自体はとてもシンプルで、ハイライト・シャドーの２つを利用して立体感を表現しています。

次の4ステップで基本的な実装を行えます。

1, elementと背景の色調をなるべく合わせる
2, elementを角丸にする（boder-radius）
3, elementの左上に背景色より明るい色をつける（box-shadow）
4, elementの右下に背景色より暗い色を付ける （box-shadow）

インタラクションについても、ホバー・クリックのそれぞれアクションに合わせて、ハイライト・シャドーを操作をしています。

index.html<div class="neumorphism"></div>
style.css body {
   background-color: #e8e8e8;
   position: relative;
 }
 .neumorphism {
   width:200px;
   height: 100px;
   transition: .2s all;
   border-radius: 20px;
   background: #e8e8e8;
   box-shadow:  15px 15px 30px #bebebe, 
                -15px -15px 30px #ffffff;
   cursor: pointer;
 }
 .neumorphism:hover {
   box-shadow:  5px 5px 15px #bebebe, 
                -5px -5px 15px #ffffff;
 }
 .neumorphism:active {
   background: #e8e8e8;
   box-shadow: inset 3px 3px 8px #bebebe, 
               inset -3px -3px 8px #ffffff;
 }

テキストについても要領は同じです。
text-shadowで立体的な質感を表現できます。

style.cssbody {
   background-color: #e8e8e8;
 }
p {
   color: #e8e8e8;
   text-shadow: 4px 4px 3px #bebebe, 
                -3px -3px 5px #ffffff;
 }

まとめ

Neumorphismは、UI設計における新しいトレンドです。
個人的にもシックで好きなデザインなので、見た目の美しさと、使いやすさを損わない絶妙なバランスを追求していきたいと思います。

参考になったサイトです。
https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6

それでは！

INDEX

Tag: