今話題のフラットデザインとは何？

次のSwapSkillsでは、「フラットデザイン」がテーマです。フラットデザインは、マイクロソフトやLayer VaultとIMDBなどが2012年の中旬より実装したことで人気がでてきたデザインです。フラットの通り平面にベタッとしたパーツ配置が特徴のデザインです。そこで、今回は幾つかのフラットデザインのサンプルと実装のコツを少し紹介します。

フラットデザイン

マイクロソフトもフラットデザイン

フラットデザインは新しくない

フラットデザインの人気がでてきたのは、ここ最近ですがフラットデザイン自体は 新しいものではありません。 マイクロソフトが2007年に発売したZUNEは、タイポグラフィーをベースとしたフラットデザインでした。残念ながらプロダクトはiPodの後塵を排して失敗に終わりましが、そのフラットデザインとフラットデザインUIはWindows PhoneやWindows8のUIへ移植されています。

2007年のZune

フラットデザインのメリット

フラットデザインには大きくわけて２つの大きなメリットがあります。

拡張性と簡明性の高さ
デザイン作業の高速化

1, 拡張性と簡明性の高さ

フラットデザインは、デザインパーツにグラデーションなどを利用しないことで最近のレスポンシブWebデザインなどでも拡大縮小に耐えることができます。また簡明なデザインですので、より分かり易いUIになります。

2, デザイン作業の高速化

フラットデザインは、積極的にグラデーションが排除されます。つまり、グラデーションを利用しないことは、何行にも渡るクロスブラウザ向けのCSS3のグラデーションのような複雑な記述に悩まされることはありません。同様に影などもいりません。作成者はブラウザの中でフラットデザイン実装ができます。

フラットデザインのデメリット

フラットデザインのデメリットは 作成者の学習コスト です。UIを実装する際に、私達はスキューモーフィック（影や立体感があるデザイン）なものに慣れすぎている為に、今まで3Dの立体を利用して表現できていることがありました。しかし、フラットデザインですと立体感というものが頻繁に利用できないので、UIを設計する際に悩む事が多くあります。

vs スキューモーフィック

フラットデザインには議論があります。それは、フラットデザインよりもスキューモーフィックの方が人間にとってリアルであり判り易いのではないかというものです。このスキューモーフィックとは、影やグラデーションをもちいたよりリッチなデザインです。

スキューモーフィックのサンプル
ボタンのつまみまでディーテールが表現されている。

このようなデザインを実装しているプロダクトとしてApple製品がよくサンプルとして持ち上げられています。

AppleのiBooks スキューモーフィックを利用している本棚です。影が絶妙に装飾され立体感がある。本棚を小さくしてあてはめたようです。

しかしアップルの次期iOS7ではジョブズの後継者として名高い、Jonathan Ive氏（ジョナサン・アイブ）がフラットデザインのUIを実装した（執筆時では不明）と噂されています。これはアップルのUIデザインにとっては大きな変化でしょう。

フラットデザインの実装

フラットデザインの実装ですが常に下記のことを頭にいれながら作業をしましょう。「極力シンプルにミニマルにすること」 につきます。これを実践することから始まります。

極力シンプルにミニマルにすることとは

極力シンプルにミニマルにするとはどういうことか、少しまとめてみました。

影を利用しない
グラデーションを利用しない
余計なデコレーションは排除
大きな角丸を利用しない
情報をスクエアにボックスに配置する
タイポグラフィを注意深く選択して、ハッキリみえるようにする

さいごに

今回のSwapSkillsで取り上げるフラットデザインは、レスポンシブWebデザインの実装にも関連してくると思います。当日は、おそらく演習問題もご用意しておりますので、一緒にフラットデザインについて学習してみましょう。皆さんとお会いできることを楽しみにしています。

SwapSkillの情報

フラットデザインの概要とRWDのWin8 UI
2013年5月22日（水）19:00 ～ 21:00
大槻社労士事務所
お申込み

2013/05/03