トマシープが学ぶ

Unity/VR/AR/デザイン好きのミーハー 記事内容は自分用のメモです

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

ニューモフィズム

この記事に余談として「ニューモフィズム」と言う名前が出てきた

www.mdn.co.jp

画像検索したら、白い!フワフワ!好き!!!

f:id:bibinbaleo:20200328114419p:plain

実際に使われてるの見たことないけど・・・

 

上の記事には、コントラストが低いので使うときはユーザー層を考えよう!みたいな文脈で載ってた。

 

ちなみに白じゃなくても、背景とボタンが同じで、ハイライトとシャドウだけで立体感を与えていればニューモフィズムなのかな?知らんけど

作る

このサイトを参考にしつつ、XDでのやり方が載ってなかったので若干適当

coliss.com

最終的にできたのがこれ。

f:id:bibinbaleo:20200328115014p:plain

Pushしてくれるかな〜?

f:id:bibinbaleo:20200328115017p:plain

明るい色と暗い色

まず明るい色(白)とシャドウとなる色(#9EB2C5)を作る

f:id:bibinbaleo:20200328115159p:plain

混ぜてメインの色を作るらしい

上の二つの色の中間の色で、メインの色(ボタンと背景色になる)を作るらしい

シャドウの色をHSBで表示して、まず明るさ(B)を10~20あげる

f:id:bibinbaleo:20200328115627p:plain

上げただけだとこんな感じ。

f:id:bibinbaleo:20200328115631p:plain

サイトに載ってたお手本の色(ここでは背景色)と違う

その上でSとかを手動でいい感じに設定するっぽい

f:id:bibinbaleo:20200328115634p:plain

好きな色にしたらいいのでは・・・

私はお手本の#E0E6ECにした

シャドウ

作ったメインの色の四角を2つ作ってそれぞれシャドウを入れていく。

f:id:bibinbaleo:20200328114429p:plain

シャドウの濃さはどちらも50%でぼかし(B)は12にした。

明るい方は白で左上

f:id:bibinbaleo:20200328120209p:plain

暗い方は最初に作った色(#9EB2C5)で右下につける

f:id:bibinbaleo:20200328120206p:plain

合体

2つの四角を合体させる

f:id:bibinbaleo:20200328114431p:plain

そういえば、四角は丸角をつけた方がそれっぽいのかな?

6にした

f:id:bibinbaleo:20200328120648p:plain

背景

背景もメインの色にして完成!

f:id:bibinbaleo:20200328114423p:plain

最後に

できた!楽しい!