噂どおりiOS 7にフラットデザインが採用されましたね。

iOS7のウェブサイト
iOS7_480

でもiOS 7は完璧にフラットかというとそうではありませんでした。背景画像による奥行きやグラデーションによる立体感などはこれまでのデザインが継承されています。操作に関する部分がフラットになった印象。

iOS 7にフラットデザインが採用されたことで、フラットデザインはこれからますます熱を帯びてウェブサイトやアプリを目にすることや案件を受注することが増えてくるかもしれません。

なので、ぼくなりにフラットデザインのウェブサイトについて考えてみました。

シンプルであることで浮かび上がってくるもの

シンプル

フラットデザインって何よ?って話

フラットデザインは装飾が限りなく削られたシンプルなデザイン。
グラデーションも陰影もなくて立体感がなくてあっちに花っぽい飾りがあったり、こっちにイチゴとかショートケーキとかの飾りが置いてあったりしない。

そしてフラットデザインはチープでツマらないものに感じるという声も。

でも“デザイン”ってチープなのとかツマらないのをつくるためのものじゃですよね。となるとそれはフラットデザインなんじゃなくてそれっぽい何かなのかなと。じゃあチープじゃなくてツマらなくない“フラットデザイン”ってなんでしょうか?

空間認識力を活かした表現

上のSimplicityの画像を見てください。白い背景と灰色の文字だけですが、大きな文字の方が手前にある気がしませんか?

このように人は常に目に見えるものを立体的に捉えようとします。
現実世界は立体的な空間なわけで、その中で生活してきた人間には“空間認識力”という「モノを立体的に捉えようとする力」を持ってしまったのです(先天的に盲目だった人が視力を取り戻したらこれが欠如していて、物体との距離もつかめないし錯視も起こらなかったとかいう話があったような?)。

スキューモーフィックデザインのグラデーションや陰影で得られる立体感もこの空間認識力なのですが、フラットデザインでもそれを意識して要素を配置したり色を選ぶことでよりフラットに見せたり、逆に立体的に強調することができます。たとえばホワイトスペースを大きく取り背景を強調することでよりフラットになりますし、色を変えることで上に重なっているように見えます。
要素をズラして重ねたり一回り大きくしてみたりも効果的。

上は灰色の背景に白い紙が重なっているように見える
色と重なり
横からメニューがすいーっと重なったり。
配色

単純な色の変化と空間認識

窓に見えたり、立方体の箱の中に見えたり
空間認識 その1
ズレると奥行きが生まれる。四角形があるような錯覚も。
空間認識 その2
余白があるとよりわかりやすく
空間認識 その3

フラットデザインはガチガチの基礎が必要

スキューモーフィックデザインでは、立体的な空間の表現は簡単にできましたし、たくさんの要素があることで文字の間隔や要素の配置で生まれる空間というものは薄れていました。が、フラットデザインでは薄めていた要素がすべてなくなるため、色や配置による空間認識が浮き出てしまうわけです。

この要素がズレていると必要のない空間が生まれてしまい空間の軸がめちゃくちゃに。奥にあったはずなのにいつのまにか手前にあるようなそんな異次元な空間になるわけです。そういった統一感のなさから“チープでツマらないデザイン”が生まれてしまうんじゃないかと思いました。それを防ぐには予め文字のサイズや余白、グリッドレイアウトといった基本的な部分をガッチリと決めないといけません。まぁこれはデザインの基本なのですが途中でそれが破綻してしまうこともしばしば…(

フラットデザインはシンプルで簡単にというものではなく、配色やタイポグラフィといったデザインの基礎がしっかりできていないとつくれないとても難しいもので、「シンプルで簡単」なイメージがつくのはとても恐ろしく感じます。そして安易に手を出してしまうと痛い目を見ることになりそうです。

フラットデザインじゃなかったら基礎がなくてもみたいな書き方になっちゃいましたが、全然そんなことはありませんので。「さしすせそ」は覚えないと。簡単そうに見えるからって下手に手をだすとヤケドしちゃいますよって話です。ちなみにこのブログもフラットデザインっぽいものにしていますが、なんとなくやっちゃったおかげで色んなところがめちゃくちゃになって大変なことになってます。

でも難しくても使ってみたくなる。キレイに仕上がった時はすごい達成感だろうなぁ。と、そんな思いにふけながら今日も夜になるわけです。