フラットデザイン2.0って知ってる?

はい!どうも、ねごろんです。

前回、同様にデザイン関係の記事を書きたいと思います。

フラットデザインとは?

フラットデザインとは、立体感や質感などの演出が少ないエレメントを使ったデザインです。
質感を出すため立体的な効果(影やグラデーションなど)を一切使わずに色や形などによりシンプルなサイン、シグナルを用いて構成します。


出典:行き過ぎたフラットデザイン

フラットデザインの特徴は、非常にシンプルなUIだと言えます。
無駄なデザインを省略することで、画面の見えやすさを意識したわけです。
iPhoneをはじめとする様々なデザインが、フラットデザインなのでみなさんもよく目にはしてると思われます。

フラットデザインの課題

フラットデザインは、シンプルがゆえにクリック領域の認識がしづらいなどの課題がありました。
長所のはずでだった「シンプル」が、かえってユーザビリティという面では短所になってしまったと言えます。

フラットデザイン2.0の登場

フラットデザイン2.0は、従来のフラットデザインの良さを活かしつつ、ボタンなど重要な箇所には装飾をする事によって今までの課題を解決しました。
簡単に言うと従来のフラットデザインとスキューモーフィズムデザインの長所を合わせたようなデザインだと言えるでしょう。
そのため、従来のものよりもアニメーションや装飾といった要素がデザインに多く取り入れられています。

また、少しマテリアルデザインに近い部分があるかもしれません。
マテリアルデザインとは切り口が違いますが、洗練されたデザインという点でUIに気を使っている部分では、双方は似た印象を持ちます。


https://dev.zeroqode.com/

上記のデザインのように、全体的にはシンプルなフラットデザインなのですが、部分的に(主にボタン)グラデーションや影をつけることによってクリック可能領域を認識しやすくしているのが分かると思います。

こんなところで採用されています。

App Store


AppStoreはiOS11で大きくデザインが変わりましたが、そのデザインにはフラットデザイン2.0の要素がたくさん詰め込まれています。

まとめ

前回のマテリアルデザインもそうですが、「洗礼されたデザイン」というのがキーワードになっています。
デザイン性だけではなく、UIUXも考慮して、いかにユーザーにストレスを与えないデザインできるのかが課題となってきているようにする必要がありますね!

 

 

 

関連記事一覧

  1. この記事へのコメントはありません。

    wpChatIcon