kokeblog

XDでニューモフィズムを作ってみた

  • 2020年07月11日
  • 今回は、ニューモフィズムをXDで作ってみましたので紹介していこうと思います。完璧にはできていないと思いますが、 ニューモフィズムっぽく、できるだけ近づけて作っていこうと思います。ついでに、ニューモフィズムについても簡単にまとめていきます。

    ニューモフィズムとは?

    ニューモフィズムとは、UIのトレンドの1つで、一昔に流行ったスキューモフィズムのリアルで立体的な質感と、フラットデザインなどのシンプルさを組み合わせた、新しいデザイン手法になります。ニューモフィズムという言葉も、「new(新しい)」と「 skeumorphism(スキューモフィズム) 」を合わせてできたみたいですね。

    XDで作っていく

    それではさっそく作り方をまとめていきます!

    以下のサイトを参考に作成していきました。

    ニューモーフィズムとは、デザインする時に知っておきたいポイント、CSSでの実装方法

    ニューモフィズムは、背景と要素を同じカラーにします。そのカラーを中間にして、暗いシャドウと明るいシャドウのカラーを決めます。ここでは、背景と要素のカラーを少し明るい黒にして、明るいシャドウは白、暗めのシャドウは真っ黒にします。ここのカラーは自分で好きなカラーを選んで調節してください。

    まずは、背景と同じカラーの図形を2つ作成します。好きな形で構いません。線がはいっているのは見やすくしているだけなので必要ありません。

    次にこの図形にシャドウをつけていきます。凸を表現するには左上に明るいシャドウ、右下に暗めのシャドウをつける必要があります。それぞれにいれていきましょう。

    設定する値は、暗めのシャドウをつけたい図形には、x軸とy軸は5~10くらいの値を入力すればいい感じになるかと思います。ぼかしの値は、15くらいがいいかですかね。この辺りは自分で、いい感じと思えるように調節してください。明るいシャドウに関しては、先ほどの暗めのシャドウで設定した、x軸とy軸の値を反転させてください。数値にマイナスつけるだけで大丈夫です。そんな感じでシャドウが下の感じで入っていればOKです。

    シャドウの向きはいい感じですが、明るいシャドウは明るすぎますし、暗いほうは暗すぎるので、カラーや不透明度など調節します。僕は、暗いほうの不透明度を50%、明るいほうを10%にして、調節しました。そうすると下のようになります。

    あとは、この2つの図形をぴったり重ねて完成です!

    いい感じにニューモフィズムっぽくできました。

    ちなみにコードで書きたいというときには「 Neumorphism.io」というサイトで簡単に実装できるのでよかったらどうぞ。カラーを選ぶ時の参考にもなるかと思います。

    まとめ

    ニューモフィズムというもの自体は知っていましたが、今回初めて自分で作ってみました。もっと複雑なのかなと思っていましたが、割と簡単にできましたね。今回作ったものは、凸のものだけなので、Neumorphism.ioにある残り3パターンくらいは作って、また紹介できればなと思います。ニューモフィズムは、ユーザビリティ的にボタンの凹凸がわかりにくいなどのデメリットも目立ちますし、一般的にはあまり見慣れないようなデザインなので、使いどころは限られそうですね。 とはいえ、個人的には見ていて面白いですし、結構好きなので、ニューモフィズムを使ってUIデザインの作品を作ってみようかと思います!

    Pocket

    関連記事

    いいなと思ったWebサイト紹介-Vol1

    黄金比と白銀比(大和比)について

    デザインの4つの基本原則をちゃんとまとめてみた

    カテゴリー