案件評判
スキューモーフィズムとは見た目から直感的に機能をイメージしやすいという特徴を持ち、他の実在する物質に似せるために行うデザインスタイルです。その起源は1890年にあると言われ、Webデザインにおいては2007年〜2012年頃にかけて流行しました。この記事ではスキューモーフィズムを理解するために初心者でも分かる概要、歴史、特徴などの基礎知識について解説していきます。
スキューモーフィズムとは見た目から直感的に機能をイメージしやすいという特徴を持ち、他の実在する物質に似せるために行うデザインスタイルです。通称「リッチデザイン」とも呼ばれております。代表的な例として旧iOSのアイコンでも用いたカレンダーアプリのアイコンに紙製のカレンダーのような外観を用いたデザインが挙げられます。
このようにユーザに馴染みのないものの外見を、馴染みのあるものにすることにより理解を促進するために使われます。スキューモーフィズムの起源は1890年頃にあると言われておりますが、近年では主に2007年〜2012年頃にかけて多く採用されました。この頃、Apple社のiOS6までのデザインはスキューモーフィズムが全面にだされておりました。
スキューモーフィズムの語源はギリシャ語であり「skeuos（器/道具）」と「morphê（形状）」というように訳されます。またの名を「リッチデザイン」とも呼びます。
スキューモーフィズムの歴史は1890年頃にマテリアルオブジェクトに適用されたことで始まりました現在ではWebデザインにおいて広く使用されておりますが全盛期は2007年から2012年にかけてと言われております。スキューモーフィズムは見た目から直感的に機能をイメージしやすいという特徴を持つことから当時モバイル時代の主流なデザインスタイルとして地位を確立しました。2013年になるとiOS7にてフラットデザインが採用されWebデザインに浸透していくと同時にスキューモーフィズムが衰退していきます。2020年になると
『ニューモーフィズム』というスキューモーフィズムの進化系が話題を集めました。ミニマリストな特徴があり、スキューモーフィズムをさらにシンプルにしたものです。そして2021年には『グラスモーフィズム』という磨りガラスのような半透明のレイヤーをベースにしたUIデザインが登場しました。
| 年代 | 内容 |
| 1890年代 | 『スキューモーフィズム』誕生 |
| 2007年〜2012年頃 | 『スキューモーフィズム』が主流に |
| 2013年 | 『スキューモーフィズム』衰退 |
| 2020年 | 『ニューモーフィズム』 |
| 2014年〜 | 『グラスモーフィズム』 |
スキューモーフィズムの特徴を見ていきましょう。
スキューモーフィズムは見た目から直感的に機能をイメージしやすいという特徴があります。ユーザーに馴染みのない新しいものを既存のものに似せることで理解しやすくしようとする手法を採用しております。
スキューモーフィズムはリッチで装飾的なデザインという特徴があります。現実世界に存在するものに似せてイメージを持たせるために影・光沢・立体感や動きなどリッチで装飾的なデザインを多数採用する傾向にあります。これにはデメリットもあり複雑化してしまうなど懸念の声もあるようです。
スキューモーフィズムはアプリの世界観をより深く伝えるという特徴があります。デザインのモチーフや機能の理解を促進するためにリアリズムをとことん追求したデザインスタイルであることから、スマートフォンアプリなど画面いっぱいに表示できるサービスにおいて深く世界観をユーザーへ伝えることができます。
フラットデザインはシンプルで平面的な概念のWebデザインパターンです。立体感や光沢感などの視覚効果を最小限に抑え簡略化したミニマリズムを取り入れたデザインです。このようにすべてのオブジェクトが一つの平面上に存在しているように感じさせるものとなります。シンプルでスタイリッシュであることから「アイデアを訴求しやすい」「読み込みが早い」などのメリットが挙げられます。一方で「シンプルで平凡なデザインになりがち」「直感的な操作性を実現しづらい」などのデメリットも挙げられます。
| スキューモーフィズム | フラットデザイン | |
| 起源 | 1890年代 | 1950~60年代 （スイスにルーツ有り） |
| 概念 | 実在する物質に似せる | 平面的（2次元） |
| 操作性 | 直感的 | 非直感的 |
| フォント | 制限無し | 基本1種類 |
| グリッドレイアウト | 任意 | 多用 |
| アイコン | 多い | 少ない |
マテリアルデザインとは2014年にGoogleによって提唱されたデザインシステムの一種及び開発手法やデザインパターンの総称です。簡単にいうと「デザインのガイドライン（ルール）」のようなものであり「物質的な法則に則ったデザイン」となります。マテリアルデザインの基本的な概念は「紙」と「インク」で構成されており、Web画面を3次元に存在するものとしています。
デザインの構成要素を物質と捉え、現実世界のルールに基づくことで直感的な操作にユーザーを誘導することができます。マテリアルデザインの特徴として「現実世界の物理的法則を取り入れる」「紙」と「インク」が構成要素」「マテリアルモーション」などが挙げられます。
| スキューモーフィズム | マテリアルデザイン | |
| 起源 | 1890年代 | 2014年 （Googleが提唱） |
| 概念 | 実在する物質に似せる | 立体的（3次元） |
| 軸 | X軸（横）Y軸（縦） | X軸（横）Y軸（縦）Z軸（高） |
| 操作性 | 直感的 | 直感的 |
スキューモーフィズムの進化系であるデザインスタイルを見ていきましょう。
ニューモーフィズムとは「スキューモーフィズム」のリアルな質感に「フラットデザイン」や「マテリアルデザイン」のミニマリストでシンプルな要素を加え2020年から話題となったスキューモーフィズムの進化系である新しいデザインスタイルです。ニューモーフィズムという名は「New（新しい）」＋「Skeumorphism（スキューモーフィズム）」から構成される造語です。ニューモーフィズムでは要素の形状が陰影で表現されていて、凹凸感が演出されます。
グラスモーフィズムとは磨りガラスのような半透明のレイヤーをベースにし2021年から話題となった新しいデザインスタイルです。レイヤーを重ねるごとに透明度を調整し、オブジェクトの階層を分かりやすく表現するという特徴があります。背景にぼかし効果を加えることで視認性を保ち、高いユーザビリティを実現します。
スキューモーフィズムを理解するために初心者でも分かる概要、歴史、特徴などの基礎知識について簡単に解説させていただきました。スキューモーフィズムを一言で表すと『見た目から直感的に機能をイメージしやすいという特徴を持ち、他の実在する物質に似せるために行うデザインスタイル』です。特徴として「見た目から直感的に機能をイメージしやすい」「リッチで装飾的なデザイン」「アプリの世界観をより深く伝える」などが挙げられます。スキューモーフィズムについてこの記事に書かれている最低限の内容は理解をしておくようにしましょう。
Scalatraを理解する！初心者でも分かる歴史、…
ブラウザを理解する！役割や種類などを簡単に解説！
Pure.cssを理解する！初心者でも分かる概要、…
Windows10/11アカウント作…
Javaを理解する！初心者でも分かる…
フリーランスのHTMLコーダー（HT…
フリーランスのUnityエンジニア（…
フリーランスのSwiftエンジニアの…
DBMS（データベース管理システム）…
PaaSを理解する！意味や種類、メリ…
PMPを理解する！意味、受験資格、試…