ざるごのブログ

ブログのサイトデザインを「ニューモーフィズム」にリニューアルしました

投稿日時: 2023/03/08 17:11

最終更新日時: 2023/03/08 17:11

こんにちは,ざるご(@zalgo3 )です.

みなさんは,ニューモーフィズムというデザイン手法をご存知でしょうか?

ニューモーフィズムは,明暗2色のドロップシャドウを用いて凹凸を表現するデザイン手法で,フラットデザイン・マテリアルデザインに続く,Webデザインの最新トレンドとして注目されています.

モダンなものが大好きな私は,このデザインを当ブログにも取り入れてみることにしました.

どうなったか

どんな感じになったかは,実際に触って見てもらうのが一番早いと思いますが,念の為画像を貼っておきます.

ボタンがうにゅっと浮き出ていたり,検索フィールドがボコッと凹んでいたりするのがわかると思います.

PCの場合

スマホの場合

どうやって作ったか

ニューモーフィズムのデザインを作るのは以外に簡単で,CSSだけで実現可能です.

CSSは,Neumorphism.ioというサイトで生成できるものをカスタマイズして作りました.

今後カスタマイズに取り組む方のために,カスタマイズ時の注意点を以下に記しておきます.

おわりに

改めて自分のブログを見返しても,ニューモーフィズムは未来的でとてもかっこいいデザインだと思いました.

まだカスタマイズが不十分な部分が多くありますが,ちょこちょこカスタマイズを続けてよりスタイリッシュなサイトを作っていきたいと考えています.