Webデザインのトレンドの歴史についてまとめた(+ 最近のトレンドも)
記事の目的
Webデザインを自分でしていると、どこか統一感のないUIになってしまったり、何度も同じようなデザインをしてしまい表現の幅が狭くなってしまいがちなので、知識の幅を増やすため一度デザインの歴史を学んでみます。
デザインのトレンドの歴史について
さっそくトレンドの流行りを時系列順にまとめていきます。
1. スキューモーフィズム
代表的なスキューモーフィズムの例。画像左のデザインがスキューモーフィズムです。
iOSデザインの変化
概要
流行した時期は2000年代後半～2010年代初頭です。スキューモーフィズムは、web2.0が提唱されwebデザインが重要視されてきた風潮の中で台頭したデザイン手法で、スキューモーフィズムについての説明はこちらの記事で下記のように述べられています。
Skeuomorphism, in the sense of interface design, refers to when a design imitates the form of an object in real life. The intention behind skeuomorphic design is that by making something familiar, users don’t have to learn how to use it from scratch.
(インターフェースデザインにおけるスキューモーフィズムとは、現実のモノの形を模倣してデザインすることを指します。スキューモーフィックデザインの意図は、慣れ親しんだものにすることで、ユーザーが一から使い方を覚える必要がないことです。)
スキューモーフィズムの説明を読んでから上記の画像を見てみると、カメラなどのアイコンのデザインがかなり現実に近いことがわかります。
メリット
- 現実にあるものに似せたデザインにすることで直感的なわかりやすさ、親しみがある
デメリット
- デザインを細部まで作り込む必要がある
- インターフェースの拡張性が低い
- ナビゲーションのしやすさを犠牲にしている
上記のデメリットが大きく、後のデザイン手法にトレンドは変化し、この時のスキューモーフィズムは衰退していきます。
参考記事
2.フラットデザイン
画像右がフラットデザインを適用したUIの例。(使いまわしなのはお許しください)
概要
先程述べたスキューモーフィズムのデメリットを克服するため、とってかわり台頭したのがフラットデザインです。上記の画像のようにAppleがiOSのUIデザインをスキューモーフィズムからフラットデザインにしたことで業界のトレンドはフラットデザインに変化し始めます。
フラットデザインは立体感や光沢感などの視覚効果を無くし、フラットなデザインになったミニマムなデザイン手法です。スキューモーフィズムと比較して、レスポンシブなデザインに対応しやすく、モバイル・タブレット・デスクトップ間の対応がしやすいデザインであるといえます。
しかし、下記の画像を見てみると、影がなくフラットな分、サイト上で一見どれが、ボタンなどの操作可能な箇所なのかわからないというユーザビリティの悪さを抱えています。
(画像はこちらからお借りしました。)
ニューモフィズムと比較して...
メリット
- レスポンシブに対応しやすい
- シンプルなデザインのためweb上での表示速度が早い
デメリット
- ユーザビリティの悪さ
- シンプルゆえのデザインの難しさ
参考記事
3.マテリアルデザイン
マテリアルデザインのボタンの例。3.0のものなので当時のものとは違いがあるかもしれません。(公式サイトより)
概要
マテリアルデザインはトレンドというより、Googleがガイドラインを規定したブランド的なデザイン手法であるのですが、歴史の流れとして記載します。
マテリアルデザインは2014年にGoogleが発表したデザインのガイドラインで、くわしくはこちらのサイトをご参考にしてください。
マテリアルデザインの説明として公式ガイドラインでは次のように述べられています。
Material is a design system created by Google to help teams build high-quality digital experiences for Android, iOS, Flutter, and the web.
(MaterialはGoogleが開発したデザインシステムで、Android、iOS、Flutter、Web向けの高品質なデジタル体験の構築を支援するものです。)
Material Design is inspired by the physical world and its textures, including how they reflect light and cast shadows.
(マテリアルデザインは、物理的な世界とそのテクスチャー（光を反射したり、影を落としたりする様子など）にインスパイアされています。)
このように現実世界の法則を取り入れたデザインと言えるでしょう。
またマテリアルデザインはフラットデザインとよくにたデザインなので、両者を比較してみましょう。
(画像はこちらからお借りしました。)
上記を比較するとz軸の存在しないフラットデザインに対してマテリアルデザインはz軸が存在していたり、ボタンにシャドウがかかっていたりなどの違いがわかると思います。またマテリアルデザインはコンポーネントごとにガイドラインがきまっていたりなど、深いところではフラットデザインと大きな違いがあります。
(実はz軸が存在するフラットデザイン2.0というものもあるのですが今回は割愛します。)
参考記事
最近のトレンド
ニューモーフィズム
ニューモーフィズムが注目されたきっかけとなったDribbbleへの投稿です。
概要
2019年から2020年にかけて話題になったデザイン手法です。ニューモーフィズムの由来は,
New + Skeuomorphism = Neumorphismで、その名の通りスキューモーフィズムがベースとなったデザイン手法です。デザインの特徴として、フラットデザインの特徴をもったUIにスキューモーフィズムの凹凸が加わっています。
詳しい解説は
でまとめられています。
一見すると要素が浮いてるようにみえるのですが実際は下記のようになっています。
(画像はこちらからお借りしました。)
ただし、デザインの一貫性を守るために背景色と要素の色を等しくする必要があり、UIのみやすさに寄与しないことや、視力の弱いユーザーや色覚異常のあるユーザーには使い勝手が悪いなど様々なデメリットが存在し、話題になったものの実際に使われることは多くなかったようです。
参考記事
グラスモーフィズム
グラスモーフィズムを用いたWebデザインの例。
(画像はこちらからお借りしました。)
概要
2021年のトレンドでAppleがMacOS Bigsurに取り入れたことで話題になりました。
グラスモーフィズムの特徴としてこちらでこう述べられています。
Glassmorphism is a new UI design trend, which started growing in popularity in the end of 2020. Its main characteristic is the background separation it achieves by using transparencies and blurs. This way the effect resembles a frosted glass. It creates “through the glass” look and feel on the elements. The main reason why glassmorphism is being used is to establish a visual hierarchy and depth of the interface.
(その主な特徴は、透明度やぼかしを利用して実現する背景の分離です。この方法によって、すりガラスのような効果が得られます。ガラス越しのような質感を表現することができるのです。グラスモーフィズムが採用される主な理由は、インターフェイスの視覚的な階層と奥行きを確立するためです。)
クレイモーフィズム
クレイモーフィズムを用いたデザインの例
概要
昨今NFTの流行などで3DアートがWebデザインに取り入れられるようになり、その流れで登場したのがクレイモーフィズムです。膨らんだUIによる3Dアートとの親和性が特徴です。
上の例の画像を見るとニューモフィズムと近い要素の浮き方をしていることにお気づきでしょうか。
しかし、比較するとこのような違いがあります。
ニューモフィズムは背景とつながっていましたが、クレイモーフィズムはつながっていません。
これによって背景と要素の背景色との分離を実現しています。他にもニューモフィズムでのデザインの制限を取り払ったデザイン手法と言えるでしょう。
参考記事
終わりに
この記事を書く上でいろいろな記事を読み、書かれていることを咀嚼して端的に書いたつもりですが間違ったことを書いていたらぜひご指摘などをお願い致します。
間違ったことを書いている可能性があるので、記事を読んでいただいた方には参考記事の方もぜひぜひ読んでいただけるとうれしい限りです。
おまけ
Webデザインが重要視されるまでのWebの歴史の流れをみることができる記事です。 こちらでもクレイモーフィズムまでのデザインの歴史がまとめられています。
Discussion