マテリアルデザインやフラットデザインといったものが主流となっている中で、『ニューモーフィズム』といったデザインが注目を集め始めているのはご存知でしょうか?
ニューモーフィズムとは?
ニューモーフィズムとは、過去に流行ったスキューモーフィズムが新しくなった(ニュー)という意味でニューモーフィズムとなっているようです。
マテリアルデザインはフラットな要素の『重なり』を表現する手法で、ニューモフィズムは『窪み』を表現した手法となっています。
デザインの世界も表現方法の流行りがあり、わかりやすいところで言えばスマートフォン上のアプリアイコンのデザインに採用されることが多いです。
インスタグラムでも過去に使われていた馴染みあるデザインのスキューモーフィズムが、急に派手なフラットデザインに変わったことは記憶に新しいです。
他のアプリアイコンでもスキューモーフィズム→フラットデザインの流れが採用されていることが多かったですが、現在はフラットデザインがメインになっているような気がします。
当記事のアイキャッチ画像で使っているニューモーフィズはフォトショップで作ったものですが、『CSSでウェブに実装したい場合どうするのか』を紹介する記事を書いていきます。
なおニューモーフィズムについてわかりやすい説明が、以下の記事に記載されていたので表現の参考にさせていただいております。
ニューモーフィズムをCSSでウェブに実装する方法
CSSが得意な方はおそらく自分で解決できるとは思いますが、苦手な方や未経験の方は実装することすら困難なのではないでしょうか。
CSSでデザインするためにはそれなりの知識が必要になります。ただ便利な世の中になっていて、誰でもニューモーフィズムを実装できるようにしてくれている親切な方が存在しています。
苦手な人もそうでない人も、以下で紹介するニューモーフィズムジェネレーターでCSSをコーディングしていただければ簡単にウェブで実装できるようになるのでぜひ。
ジェネレーター
neumorphic.design
「neumorphic.design」は直感的に扱いやすいUIになっていて、Presetsの中からおおよそ希望の〈色〉〈形〉〈凸凹〉を選択するだけでニューモーフィズムのCSSが作成できます。
色や形を決めたら[Next]を押してOptionsを表示させます。
Optionsに切り替わったら先程のニューモーフィズムの細かい調整ができるのでお好みのデザインにしましょう。
下部の枠内の[copy all]を押すと出力されたCSSが自動的にデバイスにコピーされるのであとはスタイルシートに適切に書き込めばOKです。
出力されるCSS
CSS
background: #EEF0F4;
border-radius: 15%;
box-shadow: inset 7.21px 7.21px 15px #E2E4E8, inset -7.21px -7.21px 15px #FAFCFF;
なお、コピー出来たか出来ていないかは表示されないのでテキストエディターに貼り付けて確認する必要があります。
調整できる項目
- Size・・・大きさ
- Corner Radius・・・角の丸み、最大値で円になる
- Elevation・・・浮き出し方、高さ調整
- Blur・・・shadowのぼかし具合調整
- Intensity・・・shadowの不透明度の調整
- Concavity・・・Concaveと連動、奥にくぼませるか手前に膨らませるかの強さ調整
- Inset・・・onで凹、offで凸のニューモーフィズムにする
- Concave・・・onで面を曲面にする、offでフラットにする
- カラーコード(#で始まる6桁)
neumorphism.io
「neumorphism.io」も直感的な操作で好きなようにニューモーフィズムを作ることが出来ます。
neumorphic.designのようなプリセットデザインはないですが、全てを確認しながら作ることができるので操作の問題はないと思います。
調整できる項目
- 光の向き・・・黄色のところが光源になるので好きな位置を選択
- カラー・・・RGBかカラーコードで指定できます
- Size・・・大きさ
- Corner Radius・・・角の丸み、最大値で円になる
- Distance・・・shadowの距離の調整
- Intensity・・・shadowの不透明度の調整
- Blur・・・shadowのぼかし具合調整
- Shape・・・窪みや曲面を4つから選択
neumorphic.designと調整できる項目もほぼ同じなので、お好きな方で始めてるといいと思います。
違いは凹凸や窪み方をビジュアルで確認できるところで、この部分のわかりやすさはありがたいですね。
あとは表示されたCSSを[COPY]を押すと〈Copied to Cripboard!〉と表示されるのでテキストエディター等に貼り付けて保管してください。
以上が簡単に作れるニューモーフィズムのCSSジェネレーターの紹介でした。
どちらのジェネレーターも直感的で非常に使いやすいものなので、自分でCSSを作れない人はぜひブックマークしておくようにしましょう。
ジェネレーター