皆さんこんにちは！コーダーのSです！
本日はWeb制作最新トレンドデザインの「ニューモフィズム」についてご紹介していきたいと思います！
ニューモフィズム（Neumorphism）とは
ニューモフィズムは、2020年1月頃から（厳密には2019年の終わり頃にDribbbleへ投稿された画像から）
徐々に注目を集めだしているデザイン手法です。
名前の由来
何故このような名前なのかというと、iOS6等でも採用されていた「スキューモーフィズム」が元となっているからなんです。
実際にDribbbleでバズった一枚の画像も、最初は「スキューモーフィズム」として認識されていたようです。
ですが、従来の「スキューモーフィズム」とは一線を画しており、
要素を重ねて表現するのではなく、あくまで接地したままの状態で奥行きを表現する。という物なのです。
そして、コンテンツの色は基本背景色と同じ色で、シャドウのみを使って要素を表現します。
こうすることで、今までになかった何ともリッチなデザインが作成できるのです。
ですがここで1つの疑問が生じます。
なぜ1年も前に流行るといわれたデザインのWebサイトが未だに市場にはないのか、
それは以下の二つの欠点にあります。
ニューモフィズムの欠点
1.効率的なコーディング方法がない。
2.ボタンのON/OFFが表現しづらい。
1.効率的なコーディング方法がない。
「1.効率的なコーディング方法がない。」に関しては、コーダーの方であればご想像が付くと思いますが、
コンテンツの色と背景が全て同じで、1つ1つの要素にシャドウを配置していくことはとても大変で面倒くさいです。
実際にプライベートでもデザインしながら作ってみましたが、使用できる色も限られるのでバランスの良いレイアウト、アクセントカラーの使いどころが難しかったです。
2.ボタンのON/OFFが表現しづらい。
「2.ボタンのON/OFFが表現しづらい。」
これもコーダーの方でしたら分かると思いますが、ラジオボタンやチェックボックスなんかもシャドウのみで表現しなくてはいけません。
先進的ではあるがゆえに機能性と再現性に欠けるのです。
さらにCSSプロパティbox-shadowは、疑似クラス「:hover」で影の変化がつけづらいです。
変化前の影をtransparent(透明)とし、前と後の状態を記述しなくてはいけません。
以上のデメリットを考え、未だ企業でもニューモフィズムを使用したWebサイトを作成するに至ってないのだと思います。
その他表現方法やメリットデメリットついて詳しく記述されたサイト
感想
個人的にはとても好きなデザイン手法なのですが、チャレンジしようとしても参考サイトがないので少し億劫になってしまいますね。
今回上げたニューモフィズムの欠点
1.効率的なコーディング方法がない。
2.ボタンのON/OFFが表現しづらい。
以上の二点を克服できる新たなデザイン手法、またはコーディング方法が誕生すれば、近いうち、フロント界隈で大きな話題を呼ぶことでしょう！
それでは、今回はここまで！
