案件評判
グラスモーフィズムとは磨りガラスのような半透明のレイヤーをベースにし2021年に話題となった新しいデザインスタイルです。透明度の高い背景とぼかし効果を組み合わせることですりガラスのような見た目が特徴です。この記事ではグラスモーフィズムを理解するために初心者でも分かる概要、特徴などの基礎知識について簡単に解説していきます。
グラスモーフィズムとは磨りガラスのような半透明のレイヤーをベースにし2021年から話題となった新しいデザインスタイルです。レイヤーを重ねるごとに透明度を調整し、オブジェクトの階層を分かりやすく表現するという特徴があります。背景にぼかし効果を加えることで視認性を保ち、高いユーザビリティを実現します。このデザインスタイルは2013年頃から存在しておりましたが、2020年11月にApple社によって「Mac OS BigSur」に採用されたことから「ニューモーフィズム」に次いで再び注目を集めることになりました。
グラスモーフィズムという名は「Glass（グラス）」＋「Skeumorphism（スキューモーフィズム）」から構成される造語です。
グラスモーフィズムの特徴を見ていきましょう。
グラスモーフィズムの一番の特徴は半透明のレイヤーをベースに重ねるという点です。透明度の高い背景とぼかし効果を組み合わせることですりガラスのような見た目（すりガラスによってぼやけて見えるようなイメージ）を実現します。
グラスモーフィズムは視認性を保ち、使いやすいという特徴があります。要素の背景にぼかし効果を加えることで視認性を保ち、高いユーザビリティを実現します。
グラスモーフィズムは透明感を際立たせるために鮮やかな配色が用いられるという特徴があります。鮮やかな配色との親和性が高く、グラデーションを組み合わせることでその効果はより一層高まります。
スキューモーフィズムとは見た目から直感的に機能をイメージしやすいという特徴を持ち、他の実在する物質に似せるために行うデザインスタイルです。通称「リッチデザイン」とも呼ばれております。代表的な例として旧iOSのアイコンでも用いたカレンダーアプリのアイコンに紙製のカレンダーのような外観を用いたデザインが挙げられます。
このようにユーザに馴染みのないものの外見を、馴染みのあるものにすることにより理解を促進するために使われます。ニューモーフィズムは「スキューモーフィズム」のリアルな質感に「フラットデザイン」や「マテリアルデザイン」のミニマリストでシンプルな要素を加えたものです。
| グラスモーフィズム | スキューモーフィズム | |
| 起源 | 2013年 | 1890年代 |
| 流行年 | 2021年 | 2007年〜2012年 |
| 概念 | 磨りガラスのような半透明のレイヤーベース | 実在する物質に似せる |
| 特徴 | ・視認性を保つ ・高いユーザビリティ |
・直感的に機能をイメージ ・リッチで装飾的なデザイン |
ニューモーフィズムとは「スキューモーフィズム」のリアルな質感に「フラットデザイン」や「マテリアルデザイン」のミニマリストでシンプルな要素を加え2020年から話題となったスキューモーフィズムの進化系である新しいデザインスタイルです。ニューモーフィズムでは要素の形状が陰影で表現されていてベースとなるレイヤーが浮き上がったり、くぼんでいるような凹凸感が演出されます。基本的なルールとしてレイヤーは背景色と同じ色で作成されます。
一方に暗い色のシャドウ、そしてもう一方に明るい色のシャドウを用います。このようにニューモーフィズムでは最低でも同じカラーの3つの色合いを必要とします。
| グラスモーフィズム | ニューモーフィズム | |
| 起源 | 2013年 | 2019年 |
| 流行年 | 2021年 | 2020年 |
| 概念 | 磨りガラスのような半透明のレイヤーベース | リアルな質感でミニマリスト |
| 特徴 | ・視認性を保つ ・高いユーザビリティ |
・凹凸感の演出(リアルな質感) ・シンプルな配色 |
グラスモーフィズムデザインに役立つプラグインを見ていきましょう。
Mesh gradientsとはUIデザインツール「Sketch」上で使用するグラスモーフィズムデザインの背景を簡単に作成できるプラグインです。デフォルトで豊富なグラデーションパターンが用意されており、自由にカスタマイズも可能です。センスあるメッシュグラデーションの作成が簡単にできるため人気を集めております。
グラスモーフィズム以外のデザインスタイルを見ていきましょう。
フラットデザインとはシンプルで平面的な概念のWebデザインスタイルの一種です。立体感や光沢感などの視覚効果を最小限に抑え簡略化したミニマリズムを取り入れたデザインであり、スイス発祥で1940~50年代、当時「スイススタイル」に強いインスピレーションを受けたと言われております。レスポンシブWEBデザインと相性が良いこともあり、2013年にAppleにてリリースされたiOS7でフラットデザインを採用しWeb業界にて主流のデザインスタイルとなりました。
マテリアルデザインとは2014年にGoogleによって提唱されたデザインシステムの一種及び開発手法やデザインパターンの総称です。簡単にいうと「デザインのガイドライン（ルール）」のようなものであり「物質的な法則に則ったデザイン」となります。マテリアルデザインの基本的な概念は「紙」と「インク」で構成されており、Web画面を3次元に存在するものとしています。デザインの構成要素を物質と捉え、現実世界のルールに基づくことで直感的な操作にユーザーを誘導することができます。
グラスモーフィズムを理解するために初心者でも分かる概要、特徴などの基礎知識について簡単に解説させていただきました。グラスモーフィズムを一言で表すと『磨りガラスのような半透明のレイヤーをベースにし2021年から話題となった新しいデザインスタイル』です。特徴として「半透明のレイヤーをベースに重ねる」「視認性を保ち、使いやすい」「透明感を際立たせる鮮やかな配色」などが挙げられます。グラスモーフィズムについてこの記事に書かれている最低限の内容は理解をしておくようにしましょう。
F#を理解する！初心者でも分かる歴史、特徴、基礎知…
Underscore.jsを理解する！初心者でも分…
Prismic.ioを理解する！初心者でも分かる概…
Windows10/11アカウント作…
Javaを理解する！初心者でも分かる…
フリーランスのHTMLコーダー（HT…
フリーランスのSwiftエンジニアの…
フリーランスのUnityエンジニア（…
IaaSを理解する！意味、メリット・…
PaaSを理解する！意味や種類、メリ…
PMPを理解する！意味、受験資格、試…