ajike switch

フラットデザイン入門① 『フラットデザインは混合している』

flatdesign-samune01
はじめまして、デザイナーのハキリです。
webの世界へ転向して2ヶ月の身の上、勉強がてら今年台頭した「フラットデザイン」について自分なりの考えをまとめたものを公開します。毎月社内で行われている勉強会で発表したものですが、とてもなが〜い内容になったので3つの記事に分けて連日公開でお送りします。それではどうぞ!

そもそもフラットデザインとは?

フラットデザインとはなんなのか、一般的にフラットデザインと呼ばれているものを定義して掲載している記事を探してみました。(まずは他者から見たフラットデザインがどんなものなのかを探ります)

テクスチャ(表面の質感)や、マテリアル(物質の質感)、
そしてディティール(細部)、奥行き(実寸感や重なり)に
こだわったデザインの反対に当たるモノ、
それがフラットデザインと呼ばれているモノの本質

出典:だいたい40秒くらいでわかる「フラットデザイン」について

さらに端的にしてみると…

  • グラデーションを使わない
  • 質感は無視して、とにかく塗りつぶし
  • 形に迷ったら正方形
  • カラフル大事!ビタミンカラーよりもちょっとくすませて
  • 整列して並べて、気持ちよく配置

このように定義していました。確かにフラットデザインから連想されるイメージを的確についていると思います。

↓いくつか参考として当てはまりそうなサイトをピックアップしてみました
http://futureinsightslive.com/las-vegas-2013/
http://www.francescobertelli.com/
http://minimalmonkey.com/
http://sammearns.co.uk/
http://lorenzoverzini.com/
こんな感じでしょうか。

また先日柴宮がこちらの記事で公開していたiOS7のUIデザインガイドラインの一部が有志により日本語化されている件、『フラットデザイン』をバズワードとして定着させたiOS7のデザインもここで定義の1つとして改めて紹介したいと思います。

服従(Deference)
UIはユーザによるコンテンツの理解や、
すべき操作方法を分かりやすくするが、
コンテンツとUI が並列関係になることはない。
明快(Clarity)
テキストはあらゆるサイズで読みやすく、
アイコンは精密で明快、装飾は目立たせすぎずに適切、
そして機能性を重視したデザインである。
層化(Depth)
ヴィジュアルレイヤ(層化UI)と
そのリアルな動きがユーザの満足と理解を高める。

コンテンツが最重要
・画面全体を利用する
・システムフォントを使用する
・境界線のないボタンを使用する
・リアルなビジュアル表現を考え直す
・半透明のUIを後ろの内容で暗示させる
より明瞭に
・多くの余白を使用して下さい
・UIの色をシンプルにする
奥行きをつくる

出典:今話題のフラットデザイン「iOS7UIデザインガイドライン」を日本語訳してDLできるようにしてみた!

画像付きでの説明の方がわかりやすいので、
元記事である上記リンクから是非確認してみてください。

なんとなく混合しているフラットデザイン

さて一般的にフラットデザインと呼ばれているwebサイトとiOSのデザインを見てもらいましたが、奥行き・グラデーションの有無、色味の使い方など同じ「フラットデザイン」と呼ばれているものでも、OS設計・アプリ・webサイトなどの対象内容によって考え方に異なる部分があるようです。なぜ異なるか、問題はそれぞれ異なるので一概には言えませんが、先ほどの2つのフラットデザインの定義から見ると主にGUIとNUIといったインターフェース観の違いが大きいのではないかと個人的に感じました。

GUI

コンピューターの表示や操作の方式(ユーザーインターフェース)のうち、表示にアイコンや画像を多用し、操作の多くをマウスのようなポインティングデバイスによって指示できる方式
→PC的?

NUI

人間の五感や人間が自然に行う動作によって機械を操作する方法」と定義している。
また、その例としてタッチパネルとジェスチャーによる
操作、音声対話システムなどを挙げている。
→スマホ的?

「フラットデザイン」と呼ばれているものでも微妙に内容が違っているのが現状なので、今回は便宜的に、
1106_whatsflat-1-a
webサイトのデザインについて言及しているフラットデザインを「PC的フラットデザイン
1106_whatsflat-1-b
フラットデザインと呼ばれているiOS7のUIデザインを「スマホ的フラットデザイン

とおおまかではありますが上記のように2つに分類してまとめてみました。

今日のまとめ

おそらくiOS7以前から「PC的フラットデザイン」は流行的な側面として存在していたと思いつつ(当時webのことは全然調べてなかったので曖昧ですが…)、iOS7の登場で「フラットデザイン」という言葉が流行った時に違和感があった事が今回の勉強会で発表するきっかけになりました。今回は一般的な「フラットデザイン」という言葉遣いにブレがあるので一応分類したものの、次回以降は大局的に「フラットデザイン」の誕生背景から改善できる点を考えたいと思ったのでPC的・スマホ的フラットデザインの両方に追求できる点を探していきたいと思います。明日の更新は「フラットデザインの流行性と必然性」です。お楽しみに!

servi

ajike switchの更新をメールでお伝えします!

8年以上ajikeが蓄積したデザイン思考とUXデザインの知見を発信し続けるブログ<ajike switch>の更新情報を無料でメールにてお知らせ致します。

×