こんにちは，ざるご(@zalgo3 )です．
みなさんは，ニューモーフィズムというデザイン手法をご存知でしょうか？
ニューモーフィズムは，明暗2色のドロップシャドウを用いて凹凸を表現するデザイン手法で，フラットデザイン・マテリアルデザインに続く，Webデザインの最新トレンドとして注目されています．
モダンなものが大好きな私は，このデザインを当ブログにも取り入れてみることにしました．
どうなったか
どんな感じになったかは，実際に触って見てもらうのが一番早いと思いますが，念の為画像を貼っておきます．
ボタンがうにゅっと浮き出ていたり，検索フィールドがボコッと凹んでいたりするのがわかると思います．
PCの場合
スマホの場合
どうやって作ったか
ニューモーフィズムのデザインを作るのは以外に簡単で，CSSだけで実現可能です．
CSSは，Neumorphism.ioというサイトで生成できるものをカスタマイズして作りました．
今後カスタマイズに取り組む方のために，カスタマイズ時の注意点を以下に記しておきます．
- 背景色とボタンの色を同じ色にしておくこと
- 隣の要素とぶつからないように適宜marginを指定すること
- box-shadowは思ったよりも小さめにすること
おわりに
改めて自分のブログを見返しても，ニューモーフィズムは未来的でとてもかっこいいデザインだと思いました．
まだカスタマイズが不十分な部分が多くありますが，ちょこちょこカスタマイズを続けてよりスタイリッシュなサイトを作っていきたいと考えています．
コメント