フラットデザインって?

こんにちは。百田です。

ひさびさのブログで何を書いて良いか分かりませんが
今回は「フラットデザイン」について書きたいと思います。

まず「フラットデザイン」とは?
Windows8に見られるような平坦なデザインです。

20150427_01

iPhoneを使っている人はアップデートでフラットなデザインに変わりましたよね?
「天気」アイコンを例にするとこのように変化しました。

20150427_02

これまでのデザインはグラデーションや影を多用し
リアルに見せるデザインが主流でした。

Windows8の発売とiOS7が後押しとなって
2013年頃からWebデザインでもフラットなものが主流となっています。

具体的にフラットデザインの定義をまとめてみると

・グラデーションが少ない
・シャドウ(影)が少ない
・タイル状に要素が並べられている
・写真を大きく見せ文字情報が少ない
・コントラストの強い配色
・リアルなテクスチャが少ない

こういった要素で構成されたのがフラットデザインなのです。

ではなぜ、このようなフラットデザインが主流になってきたか。

理由は「リアルなデザインへの飽き」と
「スマートフォンの普及」が考えられています。

スマートフォンやタブレットの普及により、
Webサイトもパソコン以外の様々なデバイスに対応する必要が出てきました。

パソコン用のサイトをそのままスマートフォンで表示すると
文字やボタンも小さく操作しづらいので
スマートフォンで表示するときだけ
ボタンや文字サイズを大きく最適化する必要があります。

最適化の作業の時に
シャドウがグラデーションを多用した作り込んだデザインは
サイズやカラーの変更がとても大変です。
この変化に対応しやすいのがシンプルなフラットデザインです。

簡単にまとめると、、、

「リアルなデザインも飽きてきたし、
おしゃれでスマホ対応も楽なフラットデザイン万歳!」

という製作的な意図がおおきいのですね。

確かに製作が楽で今風な「フラットデザイン」。
良いことばかりではなく、弊害もあります。

グラデーションやシャドウがなくなることで
境目がわかりにくくなったり、
ボタンがボタンに見えなかったりなど
初心者にはわかりにくい側面があります。

流行だからと安易に取り入れずに
設計やユーザビリティーに十分に配慮して
デザインする必要があります。

また、フラットデザインの問題を解決した新しい手法があります。
Googleが新しく提唱する「マテリアルデザイン」です。

この「マテリアルデザイン」についてはまた次回にでも。 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

fifteen − 12 =