デザインのトレンドを調べていると「ニューモーフィズム」「グラスモーフィズム」という言葉をよく耳にします。2023年は「クレイモーフィズム」が流行するのでは?という予想も。
今回は○○フィズムの流行で注目されるようになった、質感の表現をご紹介していきます!
デザイン表現の歴史
これまでのデザイン表現を振り返っていきます。
2008年頃までの主流はリアルな質感が特徴のスキューモーフィズムでしたが、Windows8にフラットデザインが採用されたことで、シンプルでわかりやすいデザインが主流になりました。
初期のフラットデザインは平面的でしたが、よりクリッカブルにするためにシャドウをつけたり、グラデーションで色の表現を豊かにしたり…と進化していきます。
フラットデザインの良さを活かしつつ、より感性に訴えかけるためのアクセントとしてニューモーフフィズムが誕生しました。
3つのフィズムの特徴
それではニューモーフィズム、グラスモーフィズム、クレイモーフィズムの特徴とXDでの作り方をご紹介します。
ニューモーフィズム(Neumorphism)
エンボス加工のように背面から押し出されたり窪んだりしている表現です。ポコっとした柔らかいタッチで押し心地がよさそうですね。
押してみたくなるような感覚で、アプリケーションUIに最適です。
ニューモーフィズムの作り方
グラスモーフィズム(Glassmorphism)
ぼかしと半透明を使用した磨りガラスのような質感です。iPhoneのUIデザインで初めて取り入れられた表現なので、見たことがある人も多いかもしれません。
グラスモーフィズムは写真やグラデーションなどの背景と組み合わせることによって、透明感や幻想的なアクセントを出してくれる表現です。ライフスタイル系の写真を大きく使うデザインはもちろん、ITやテクノロジー系のデザインに組み込むときれいなアクセントになります。
グラスモーフィズムの作り方
クレイモーフィズム(Claymorphism)
Clay(粘土)のようにマットな質感です。ぷくっとした丸みと背景から浮かんでいるような影の付け方が特徴の可愛らしい表現です。
近年流行している3Dイラストやポップな色合いと相性がよく、ポイントで取り入れることでシンプルながらも新しく近未来的な印象のデザインになりそうです。
クレイモーフィズムの作り方
まとめ
いかがでしたでしょうか。デザインの主流になっているフラットデザインはシンプルでわかりやすいのがメリットですが、それ故に平坦になりやすいデメリットがありました。
フィズムの表現はフラットデザインの良さを活かしつつ質感を加えることで印象的なデザインに仕上げることができますね。
流行がシャドウ→立体→フラットと移り変わっていることから、次に来るのはさらに新しいフラットデザインなのかも…?今後も見逃せませんね!
今回ご紹介した3つのフィズム表現は、XDでも作ることができるので是非デザインに取り入れてみてください!