20210322 デザイン日報

○今日の気になる記事

グラスモーフィズム？CSSコピペできる新Webトレンドの参考HTMLスニペット、ツールまとめ - PhotoshopVIP
https://photoshopvip.net/126760

グラスモーフィズム？CSSコピペできる新Webトレンドの参考HTMLスニペット、ツールまとめ - PhotoshopVIP

最近Webデザインで見かけるようになったすりガラスのような表現をグラスモーフィズムというそうです。
この記事をきっかけに少しデザイントレンドの変遷について調べてみました。
Webデザインのトレンドはしばしばスキューモーフィズムを起点にされます。
スキューモーフィズムとはつまりリッチデザインのことで、iPhone発売当初のアプリのデザインのような、光沢や質感をリアルに表現するスタイルのことです。
スキューモーフィズムのあとは、iPhoneがiOS7にアップデートされたことでデザインが大幅に簡略化されたフラットデザインのトレンドが始まりました。
Microsoft社はWindows8の読みやすさに重点をおいた単色に大きなフォントのインターフェースを、メトロデザイン（Modern UI）として発表しました。
これらのフラットデザインのあとにマテリアルデザインといって、拡散型シャドウ（Diffuse Shadow）と呼ばれるドロップシャドウの技法を用いて、三次元的な表現が見られるようになります。
そしてここ最近トレンドに見られるのがニューモーフィズムで、スキューモーフィズムとフラットデザインを組み合わせた新しいスタイルです。
ニューモーフィズムについては以下の記事で詳しく知ることができます。

ニューモーフィズム？CSSコピペ実装できる新Webトレンドの参考HTMLスニペット、ツールまとめ - PhotoshopVIP
https://photoshopvip.net/120672

フラットやマテリアルデザインでは、カードは背景の上に浮かび、ドロップシャドウが付いています。それがニューモーフィズムでは、背景の一部が手前に突き出ているようなスタイルで、基本的にカード要素の色は背景色と同じです。側面に厚みがあり、浮いていません。
（記事引用）

ニューモーフィズム？CSSコピペ実装できる新Webトレンドの参考HTMLスニペット、ツールまとめ - PhotoshopVIP

そして今グラスモーフィズムが新しくトレンドとして見られるようになってきました。
このようにデザイン史は日々新しく更新されています。
特にスキューモーフィズムからフラットデザインへiOSがアップデートされたときは、人によって受け入れ難く思った方もかなり多かった印象があります。
そうやってまったく新しい価値観のデザインと時代に最適化したUIを提案して、デザインのトレンドを作っていくAppleはやはり偉大ですね。