今さら人には聞けない、スキューモーフィズムとフラットデザインの違い
昨今ではMicrosoftのMetro UIやAppleのiOS 7の発表により、フラットデザインがすっかりトレンドとなり、フラットデザインが様々なウェブサイトやアプリで採用されるようになりました。今でこそ両者とも名前を良く聞くようになりましたが、みなさんはその明確な違いについてご存知でしょうか。
なんとなくiOS 6のような立体的なデザインやリアルな質感のあるデザインをスキューモーフィズム、対照的にグラデーションのないものや立体感のないものをフラットデザインと認識している方が多いかと思います。そこで今回はこの両者について改めて、どのようなデザイン手法なのか、そのメリットとデメリットについて調べ直してみました。
目次
フラットデザイン（Flat Design）
最近の例ではiOS 7が有名ですが、もともとはSwiss Style(What is Swiss Style Typography?)のリバイバルとも言われており、Windows 8のMetro UIを皮切りに様々なアプリ、サービスで見かけるようになりました。
フラットデザインとは
フラットデザインとはシンプルな要素や図形と主に明るい色をともに用いてそのシンプルさやわかりやすさを強調したデザインである。（訳）
“flat design uses simple elements and shapes combined with predominantly bright colors to emphasize simplicity and clarity.”
ー Flat Design and Skeuomorphismより引用
とされているようにフラットデザインはそのシンプルさ・使いやすさが特徴的で、余分な要素を削いだデザインを指しています。特に立体感を表現するためのシャドウやグラデーションを使わないものが多く、テクスチャがフラットなデザインのものを表しています。
具体例
その他の具体例に、
などがあげられます。
メリット
・必要な情報のみで構成されているため、わかりやすい。
構成要素を必要最低限にしてコンテンツ中心に、シンプルに、わかりやすく設計することが必要とされているため、ユーザーが視線に迷うことなく目的のコンテンツに集中できます。
・画像が少ないため使用時のロードが速い。
フラットデザインでは多くの場合、画像を用いる必要がなくプログラミングで描画可能なため、ロード時間が短く、UXの向上につながります。
・高解像度Retinaディスプレイや他サイズのディスプレイなどを含め、様々なデバイスに対応しやすい。
上記と同様の理由で、画像サイズに縛られることが少なくなり、様々なデバイスで同様のデザインを行うことができます。
デメリット
・ボタンやリンクなどの情報の差別化が難しい。
シャドウなど立体的な要素を排除することの多いフラットデザインでは、タッチできるもの、スワイプできるものなどの行動を誘発するための表現が限られてきます。
・タイポグラフィーと色選びが難しい。
コンテンツ中心のため、タイポグラフィーと色選びがとても重要になります。特に日本語の場合は内蔵フォントの少なさなどからも適切な表現のタイポグラフィーをデザインすることが難しくなっています。
スキューモーフィズム（Skeuomorphism）
Organize your life and business – Wunderlist
こちらはiOS 6の純正アプリ（電卓、ボイスメモ、コンパス）やWunderlistなどが有名ですね。もともとこのようなデザインはWeb 2.0の時代から少しずついろいろなところで見受けられるようになっていましたが、iPhone（iOS）の登場をきっかけに各アプリ、サービスがその手法を採用していきました。しかし、現在ではフラットデザインのトレンドに押され、数が少なくなっています。
スキューモーフィズムとは
スキューモーフィズム（skeuomorphism）とは、他の物質に似せるために行うデザインや装飾のことで、（中略）
ユーザに馴染みのないものの外見を、馴染みのあるものにすることにより理解を促進するために使われる。
ー スキューモーフィズム – Wikipediaより引用
とあるようにスキューモーフィズムは立体感のことを指している訳ではありません。ユーザーに馴染みのない新しいものを既存のものに似せることで理解しやすくしようという手法です。フラットデザインとは違い、テクスチャにおける立体感の有無などを表すものではなく、デザインのモチーフや機能の理解に即する関係からデザインされたもののことを指しています。
iOS 6ではそこから更にモチーフへのリアリズムを追求し、ボイスメモなどのような質感にこだわった立体感のあるデザインへと昇華しています。
具体例
スキューモーフィズムの具体例には、
などがあげられます。
メリット
・見た目から直観的に機能をイメージしやすい。
適切なモチーフを選んだ上でデザインを行うと、ユーザーが初見で何をするためのアプリであるか、どのような動きをするのかということがイメージしやすくなります。
・ゲームアプリなどの場合、世界観を伝えやすい。
モチーフから連想されるイメージ（革の質感が与える高級感など）で、アプリの世界観をより深く伝えることができます。特にスマートフォンアプリでは、アプリを起動すると１アプリが画面いっぱいを占領できる（１種類のデザイン表現しか見えない）ため、更に世界観が伝わりやすくなります。
デメリット
・モチーフとした参照元のデメリットをそのまま引き継ぐ。
例えば、現実にある電卓をモチーフに電卓アプリをデザインした場合、電卓にデザインを近づけるあまりに、数字表示が１列のみで桁数も少なくなってしまうということが起こりえます。アプリだからこそ柔軟に対応できる部分をアナログなモチーフが邪魔してしまうということがあり得ます。
フラットでスキューモーフィズムなデザイン？
もともとこの２つの手法は相反するものではありません。現実世界のアイテムをモチーフにした上で質感をフラットにしたものは数多く存在します。
iOS 7のカメラアプリのアイコンはカメラの形をそのままシンプルにデザインしたためフラットなスキューモーフィズムと言えると思います。
（Flat Design and Skeuomorphism – Development – Tuts+より）
フラットデザインは情報を整理して、コンテンツ中心の設計を行うことでわかりやすさ、使いやすさを求めるデザインである一方、スキューモーフィズムはユーザーがアプリの使い方に迷わないように、実在するものの素材感や形を似せることで理解しやすくするデザインと言えます。
両者にはそれぞれの表現における強み、弱みがあるということが改めてわかりました。デザインのトレンドを追うのではなく、メリット・デメリットを考慮した上で、その場にあった問題解決ができるデザイン手法を選んでいきたいと思いました！
参考:
この記事は以下を参考にさせていただきました。どのページもフラットデザイン、スキューモーフィズムについてとても細かく分析されているので一読してみると面白いと思います。
スキューモーフィズム – Wikipedia
Flat Design and Skeuomorphism – Development – Tuts+
Flat Pixels: The Battle Between Flat Design And Skeuomorphism
Design: Skeuomorphic vs. Flat vs. Skeuominimalism – Samihah – Quora