MEMOPATCH

今さら人には聞けない、スキューモーフィズムとフラットデザインの違い

  • このエントリーをはてなブックマークに追加

初めまして、新しくMEMOPATCHを書いていくことになりましたしゅんたです。よろしくお願いします!

昨今ではMicrosoftのMetro UIやAppleのiOS 7の発表により、フラットデザインがすっかりトレンドとなり、フラットデザインが様々なウェブサイトやアプリで採用されるようになりました。今でこそ両者とも名前を良く聞くようになりましたが、みなさんはその明確な違いについてご存知でしょうか。

なんとなくiOS 6のような立体的なデザインやリアルな質感のあるデザインをスキューモーフィズム、対照的にグラデーションのないものや立体感のないものをフラットデザインと認識している方が多いかと思います。そこで今回はこの両者について改めて、どのようなデザイン手法なのか、そのメリットとデメリットについて調べ直してみました。

フラットデザイン(Flat Design)

iOS 7

アップル – iOS 7

最近の例では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より引用

とされているようにフラットデザインはそのシンプルさ・使いやすさが特徴的で、余分な要素を削いだデザインを指しています。特に立体感を表現するためのシャドウやグラデーションを使わないものが多く、テクスチャがフラットなデザインのものを表しています。

具体例

その他の具体例に、

Evernote

Evernote

dropbox

Dropbox

plus1

+1

などがあげられます。

メリット

・必要な情報のみで構成されているため、わかりやすい。
構成要素を必要最低限にしてコンテンツ中心に、シンプルに、わかりやすく設計することが必要とされているため、ユーザーが視線に迷うことなく目的のコンテンツに集中できます。

・画像が少ないため使用時のロードが速い。
フラットデザインでは多くの場合、画像を用いる必要がなくプログラミングで描画可能なため、ロード時間が短く、UXの向上につながります。

・高解像度Retinaディスプレイや他サイズのディスプレイなどを含め、様々なデバイスに対応しやすい。

上記と同様の理由で、画像サイズに縛られることが少なくなり、様々なデバイスで同様のデザインを行うことができます。

デメリット

・ボタンやリンクなどの情報の差別化が難しい。

シャドウなど立体的な要素を排除することの多いフラットデザインでは、タッチできるもの、スワイプできるものなどの行動を誘発するための表現が限られてきます。

・タイポグラフィーと色選びが難しい。

コンテンツ中心のため、タイポグラフィーと色選びがとても重要になります。特に日本語の場合は内蔵フォントの少なさなどからも適切な表現のタイポグラフィーをデザインすることが難しくなっています。

スキューモーフィズム(Skeuomorphism)

wunderlist

Organize your life and business – Wunderlist

こちらはiOS 6の純正アプリ(電卓、ボイスメモ、コンパス)やWunderlistなどが有名ですね。もともとこのようなデザインはWeb 2.0の時代から少しずついろいろなところで見受けられるようになっていましたが、iPhone(iOS)の登場をきっかけに各アプリ、サービスがその手法を採用していきました。しかし、現在ではフラットデザインのトレンドに押され、数が少なくなっています。

スキューモーフィズムとは

スキューモーフィズム(skeuomorphism)とは、他の物質に似せるために行うデザインや装飾のことで、(中略)
ユーザに馴染みのないものの外見を、馴染みのあるものにすることにより理解を促進するために使われる。

ー スキューモーフィズム – Wikipediaより引用

とあるようにスキューモーフィズムは立体感のことを指している訳ではありません。ユーザーに馴染みのない新しいものを既存のものに似せることで理解しやすくしようという手法です。フラットデザインとは違い、テクスチャにおける立体感の有無などを表すものではなく、デザインのモチーフや機能の理解に即する関係からデザインされたもののことを指しています。

iOS 6ではそこから更にモチーフへのリアリズムを追求し、ボイスメモなどのような質感にこだわった立体感のあるデザインへと昇華しています。

具体例

スキューモーフィズムの具体例には、


doit

Do it

nohana

nohana

などがあげられます。

メリット

・見た目から直観的に機能をイメージしやすい。

適切なモチーフを選んだ上でデザインを行うと、ユーザーが初見で何をするためのアプリであるか、どのような動きをするのかということがイメージしやすくなります。

・ゲームアプリなどの場合、世界観を伝えやすい。

モチーフから連想されるイメージ(革の質感が与える高級感など)で、アプリの世界観をより深く伝えることができます。特にスマートフォンアプリでは、アプリを起動すると1アプリが画面いっぱいを占領できる(1種類のデザイン表現しか見えない)ため、更に世界観が伝わりやすくなります。

デメリット

・モチーフとした参照元のデメリットをそのまま引き継ぐ。

例えば、現実にある電卓をモチーフに電卓アプリをデザインした場合、電卓にデザインを近づけるあまりに、数字表示が1列のみで桁数も少なくなってしまうということが起こりえます。アプリだからこそ柔軟に対応できる部分をアナログなモチーフが邪魔してしまうということがあり得ます。

calc

フラットでスキューモーフィズムなデザイン?

もともとこの2つの手法は相反するものではありません。現実世界のアイテムをモチーフにした上で質感をフラットにしたものは数多く存在します。
iOS 7のカメラアプリのアイコンはカメラの形をそのままシンプルにデザインしたためフラットなスキューモーフィズムと言えると思います。

cameraicon

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

  • このエントリーをはてなブックマークに追加

RECRUIT

Goodpatchで一緒に働きませんか?

弊社ではエンジニア、ディレクター、デザイナーを随時募集しています。インターネットが大好きで、UIデザインを愛し、新しいことにチャレンジしたい、という方なら大歓迎!皆様からのご応募をお待ちしております!

Goodpatchに今すぐエントリー


RELATED ENTRY

Twitter and RSS

ブログの更新情報はTwitterやRSSで流します。UIに関する記事を投稿します。