みなさんこんにちは！インターン10月生のニシグチです！
突然ですが、タイトルのフラットデザインとは何か？みなさんもどこかで聞いた事あると思います！
訓練校では｢フラットデザイン？｣な人も多く、実際私も雰囲気はなんとなくわかるけど、何がどう違うのかは詳しくは知らない！みたいな状態でした。
というワケで改めてフラットデザイン、というより最近のWEBデザインについて調べたことを今日は書いていきたいと思います！
さて、表題のフラットデザインまたはモダンUIですが、具体的にどんな感じなのか表しますと、
超簡単に作りましたけど、こんな雰囲気のデザインです。（おそらく
今こういうの多いですよね。カラフルであまり段差的なものがないやつです。
Windows8などで採用され、それぐらいの時期から普及していきました。
MacでもYosemiteなどから採用されています。
以前はリッチデザインとかスキューモーフィズム（skeuomorphism）といわれる、リアルなデザインとかが主流でした。
少し違う気がしますけど、概ねこんな雰囲気です。(おそらく…
これは以前のiOS6のデザインを参考にしましたけど、こういうデザイン多かったですよね？
なぜフラットデザインが主流になったのか？
もともとリッチデザインに対するアンチテーゼだったようです。
以前の主流であったリッチデザインのメリット・デメリットを整理すると。
メリット
・デザイン性が高い(凝ってる)
・高級感を演出できる。
・リアルだと、それが何なのかユーザーが認識しやすい。
デメリット
・やりすぎる、無意味に装飾を増やすと、ゴテゴテしてわかりづらくなる。
・不自然さが目立ったりする。
・作るのに労力がかかる。
・汎用性が低く、小さい変更などをした時に崩れてしまう場合がある。
などです。
つまり、分かりやすく直感的に操作できるが、労力がかかり汎用性が少なく応用しづらいということです。
そしてフラットデザインですが、これのメリットとして
・明瞭でわかりやすく、無駄のないデザインになる。
・作りやすい。(調整しやすい)
・ポップでキャッチーなデザインになる。
逆にデメリットですが、
・シンプルなので、ボタンなどが判断しづらい場合がある。
・ほぼテキストのみになるので、本文や他の文章との見分けがつかない場合がある。
などです。
つまりこちらは、簡単に作れて、レスポンシブデザインなどでの応用が効きやすいものが作れるという事です。しかし、構成やデザインによっては、どこがクリックボタンなのかわかりづらいなどのデメリットがあります。
フラットデザインって主流だからなんでもかんでもフラット！というワケにもいかないようですね。
私もフラットデザインは好きです。(作りやすいし)しかし、それによって見づらくなったり、印象が薄くなってしまうというのはあるかもしれません。
なので、デザインの主流がどうかということより、最終的なアウトプットの形を考えて作る。ということが大事だと思います。
そしてもう一つ、フラットデザインの次のデザインとして、マテリアルデザインというものがあります。
こんなカンジです。
たぶん合ってると思います。(見た目は)
これはフラットデザインに影をつけただけみたいになってますが、大事なのは階層があるという事です。
フラットデザインでのデメリットを補うために、ボタンやパーツなどに影をつけ3D(縦軸)的な動きをもたせたものです。
これによってユーザーが、どの部分が重要なパーツなのかが瞬時に判断できるようになります。
ちなみにマテリアルデザインとは2014年にGoogleが発表したガイドラインのことだそうで、もっといろいろ特徴があります。(アニメーションをよく使うとか
こういうのも、調べていけばさらに詳しいサイトなどたくさんありますので、皆さんもぜひ調べてみてください。
それでは今日はこのへんで失礼します。
ニシグチ