念願のニューモーフィズムのトレースしてみた

こんばんは！
今さっき大きな地震がありましたね。長かった...

今自分が何を優先的に勉強すべきかとっても迷走しております。
デザインのロジックを学びたい反面、デザインの引き出しも増やしたい。
迷っている時間が勿体無いので、息抜きにやりたかったこと先にやってしまいました！笑

今年もまだトレンドに上がっていて、去年からずっと気になっていた
『ニューモーフィズム』！
これを知った当時は私がニューモーフィズムを勉強するのはまだ早い、おこがましいと思っていたので今やっとできて嬉しい。笑

では、最近教わったトレース方法で行って行きます。

▼トレース手順
１、本物のデザインを観察
２、ノートに要素・レイアウトをメモ
３、本物のデザインを見ずに作ってみる
４、本物のデザインと比べて違いをメモ
５、再び見ずに修正
６、繰り返し

今回はこちらをトレースしました。
ちなみにツールはAdobeXDです！

▼本物のデザイン

▼トレース１回目がこちら

ひどすぎてほんと恥ずかしいｗ

色が全然違うし、要素のメリハリがなくてぼやけてるし、
写真・文字・グラフがかなり大きい。影もはっきりしすぎて初心者丸出し。
（観察力のなさに萎えた。私の目は節穴か？）

ここで本物デザインとの違いをメモメモ。
再び見ないでトレース修正！

▼２回目トレース

だいぶ近づいてきました。

でも色が暗くて沈んでる。陰影つけるのかなり難しいなと感じたニューモーフィズム...
影の広さ・濃さで奥行きがすごく変わるな〜
影は必ずしも黒やグレーじゃなくて、濃い青にしても良いのでは？と気づいて最後のトレースはこちら。

▼３回目トレース

かなり近づいてきました！

明るい方の影と暗い方の影の広がりを大きくしたらかなり垢抜けました。
凹凸を表現するためには同じ青の色味を上手く調節してメリハリを付けて行くんだなと学びました。
あと棒グラフも細く調整したら綺麗に纏まりました。

ただぱっと見で、「これはボタンなのか？ただ浮いてるだけなのか？」
と構造が分かりづらい点がニューモーフィズムのデメリットみたいです。

○今回学んだこと
・凹凸を深く見せるには光と影を広く調整するといい。
・逆に影のぼかしを少なくすると浅く見えるが、場合によってはダサく見える。
・必ずしも光＝白、影＝黒を使う必要はない。背景色と同じ色を使って彩度で調整すると綺麗に見える。
・凹にするか凸にするかの判断が大事。ボタン以外の部分の凸はユーザーが迷わないように注意。

念願のニューモーフィズム、まだまだだけど、やり方知れて嬉しい〜

ではおやすみなさーい！