私たちの生活の中には様々なデザインが溢れています。
特に、日々目にするPCやスマートフォンの中にはユーザーへの思いが込められたデザインを目にすることができます。
何種類もあるデザインの中でWebデザインの主流になりつつあるのが「フラットデザイン」です。
今回は「フラットデザイン」について詳しくご紹介いたします。もくじ
◆フラットデザインとは
フラットデザインとは、全体的に立体感や質感などの演出が少ない、平面でシンプルなデザインのことを指します。
最も身近で代表的なものでいうと、iPhoneのホーム画面のデザインになります。
従来のWebデザインでは、立体的に見せるドロップシャドウや、質感を出すグラデーションやテクスチャなどを用いたデザインが人気でしたが、Windows8とiOS7からフラットデザインが採用され、世界中でフラットデザインが主流となりました。
◆フラットデザインになった背景
フラットデザインが採用されるようになった背景としては、デバイスの多様性が挙げられます。
今でこそ大きな画面のものも多くなったスマートフォンですが、スマートフォンが登場したころは画面サイズが小さい端末も多くありました。
立体的なデザインは画面が小さいと見えづらく、認識しにくいという欠点がありました。
小さなアイコンなどは、一目で識別出来る必要があり、余計な要素をそぎ落としたシンプルでデータ量の少ないフラットデザインが最適となりました。
フラットデザインはマルチデバイスへの対応に適しているので、デバイスの多様性とともにフラットデザインが浸透してきました。
現在では、完全なフラットではなく、少しだけフラットを抑えたデザインが主流となっており、「フラットデザイン2.0」と呼ばれています。
◆フラットデザインの定義
・極端な立体感や飾り罫で装飾しない
フラットデザインでは、極端な装飾は抑えます。
文字に複数の色を使ったり、不用意にシャドウをつけたり飾り罫も避けます。
エンボスを加えて立体感を持たせることもしません。
・リッチな書体よりもモダンな書体を選ぶ
シンプルな演出においては書体も重要となります。
読みやすくてモダンな書体を選びます。
丸文字のようなポップな書体や、明朝体のクラシックな書体は読みづらく変に目立ちすぎたりするので、フラットデザインには向いていません。
そのため、ゴシック系の書体がよく使われます。
・色選びを大胆に
フラットデザインではシンプルな構成をベースにレイアウトします。
シンプルなグリッドで構成されることが多く、色を使う際にも多くの色を使うのではなく、基準となる色と反対色と差し色といったようにわかりやすい配色で画面全体、一ブロックなど、ダイナミックに大きく使うと効果的です。
◆まとめ
Webデザインの主流となっているフラットデザインですが、はっきりとしたガイドラインはなく、場面によっては多少フラットさを抑えたデザインのほうが良い場合もあります。
デザインによっては多少の立体感を持たせることもあります。
大切なことはユーザーがクリックしやすいか、認識しやすいかです。
ユーザビリティを一番に考えて適切なデザインをしましょう。
また、海外のWebサイトなどはフラットデザインの物も多いので、デザインの参考にしてみてもいいかもしれません。 フォーザウィンはIT業界で働く仲間を募集しています！ 経験、未経験は問いません。是非当社の採用情報をご覧ください。 採用情報を見る ＞