デザインのトレンド
『はじめてのUIデザイン』という本を読んでみました。
UIデザインの歴史から、コンポーネントなどUIを実際に構成するもの、
情報設計など目に見えない部分まで総合的に書かれているため、
これからUIの勉強を始める方にお勧めの本だなと思いました。
しかも無料で読めます！
今回はデザインのトレンドについて本から学んだことや調べたことを
noteにまとめました。
今はフラットデザインが主流で、昔は立体的なデザインだったことくらいしか知らなかったので、良い学びの機会となりました。
トレンドの変遷
スキューモーフィックデザイン
2007年~
実物のようなリアルな材質感と動きを表現したデザイン。
現実世界のオマージュのような感じ。
（ボタンが立体的で押せる感があったり、検索フォームが窪んでいて文字を入れられる感がある。）
表現やレイアウトに制約がある点や、
物理的な世界の物をそのまま画面で表示し、現実と同じ操作方法であるこが使いやすくて効率的とは限らない点から採用されなくなった。
Metroデザイン
2012年〜
ニューヨークの地下鉄のサインデザイン(情報を具体的なかたちで表したもの)などを参考にしたシンプルでモダンなデザイン。
過剰な装飾をなくし、コア機能とコンテンツを主役にしたスタイルが特徴。
意味のあるアニメーションでユーザーとの対話を試みた。
このスタイルはユーザーにはあまり受け入れられず、浸透はしなかった。
→なぜ？
既存のOSから基本設計を大きく変えたことによって、使い勝手も刷新されたためユーザーに馴染まなかった？
対して、フラットデザインはグラフィック表現の指針だけを刷新したため、
移行しやすかった。
家のPCがWindows 8になった時、ビジュアルに衝撃を受けた記憶があります。。。
確かに地下鉄みたいな色!!
フラットデザイン
2013年~
グリットシステムを積極的に取り入れたシンプルなデザイン。
物理的な世界観ではなくデジタルな世界らしいスタイル。
スキューモーフィックデザインのような質感ではなく、物理的な特性（オブジェクトのレイヤー関係によって発生する影や、現実的なアニメーション）を表現している。
流行を追いかけただけのフラットデザインはユーザービリティが低下する問題もあった。（どこがクリック可能なのか、ユーザーが直感的に操作できる手がかりがなくなったため。）
その後Material Designが公開されたり、デバイスの画面がフルスクリーンになったりして現在のスタイルになった経緯がある。
Metroデザインとフラットデザインの類似点と相違点
Metroデザインとフラットデザインはどちらもシンプルだけど何かが違う。
その違いは何か？
類似点：
シンプルかつモダン： どちらもシンプルでモダンなデザイン。余分な装飾や質感を排除し、要素のクリーンで明確な外観になっている。
フラット： どちらも影や立体的な効果を極力排除し、要素をフラットに表現している。
相違点：
タイポグラフィ： Metroデザインでは、大胆で読みやすいタイポグラフィが重視されるのに対し、フラットデザインではタイポグラフィによる情報の階層化がより重要視される傾向がある。
アイコン： Metroデザインでは、シンプルで明確なアイコンが重要視されるのに対し、フラットデザインではアイコンがより抽象的な場合がある。
アニメーション： Metroデザインでは、アニメーションが情報の移動や操作を助けるために重要な役割を果たす。フラットデザインではアニメーションの使用は適度に抑えられる傾向がある。
ニューモーフィズムデザイン
2020年〜
滑らかで浮き上がったり、くぼんでいるように見える近未来的なデザイン。
マテリアルデザインのように要素が浮いているのではなく、凹凸によって奥行きを表現している。
少しスキューモーフィックデザインっぽさを感じる。
「New」 ＋ 「スキューモーフィズム」 ＝ ニューモーフィズム
UIとしては分かりやすくない点が気になる。
だから、そんなにトレンドというわけではなさそうである。
Figmaの「Neumorphism」というプラグインを使って作ろうとしたけど、
スキューモーフィックデザインとの違いが分からなくなってきた…
改めて主な違いを確認すると、ニューモーフィズムがデザイン要素のリアルな質感や立体感に焦点を当て、スキューモーフィズムが物理的なオブジェクトや素材を模倣することに焦点を当てているそう。
この記事が気に入ったらサポートをしてみませんか？