ニューモフィズム
この記事に余談として「ニューモフィズム」と言う名前が出てきた
画像検索したら、白い!フワフワ!好き!!!
実際に使われてるの見たことないけど・・・
上の記事には、コントラストが低いので使うときはユーザー層を考えよう!みたいな文脈で載ってた。
ちなみに白じゃなくても、背景とボタンが同じで、ハイライトとシャドウだけで立体感を与えていればニューモフィズムなのかな?知らんけど
作る
このサイトを参考にしつつ、XDでのやり方が載ってなかったので若干適当
最終的にできたのがこれ。
Pushしてくれるかな〜?
明るい色と暗い色
まず明るい色(白)とシャドウとなる色(#9EB2C5)を作る
混ぜてメインの色を作るらしい
上の二つの色の中間の色で、メインの色(ボタンと背景色になる)を作るらしい
シャドウの色をHSBで表示して、まず明るさ(B)を10~20あげる
上げただけだとこんな感じ。
サイトに載ってたお手本の色(ここでは背景色)と違う
その上でSとかを手動でいい感じに設定するっぽい
好きな色にしたらいいのでは・・・
私はお手本の#E0E6ECにした
シャドウ
作ったメインの色の四角を2つ作ってそれぞれシャドウを入れていく。
シャドウの濃さはどちらも50%でぼかし(B)は12にした。
明るい方は白で左上
暗い方は最初に作った色(#9EB2C5)で右下につける
合体
2つの四角を合体させる
そういえば、四角は丸角をつけた方がそれっぽいのかな?
6にした
背景
背景もメインの色にして完成!
最後に
できた!楽しい!