皆さんフラットデザインという言葉は知っていますか？少し前から、Webサイトなどでトレンドになっています。いつの間にか色んなサイトがフラットデザインになっていたり、OSやインターフェイスで使用されていたりと見かけることも多いと思います。手元にあるスマートフォンに表示されるアプリのアイコンもフラットな物が多いはずです。
今、人気のデザインと思われることも多いフラットデザインですが、実は見た目以上に意味があります。今回はフラットデザインについて記事を書いていきたいと思います。
フラットデザインとは
フラットデザインとは2012年頃から広まった、webデザインのスタイルのことです。では、フラットデザインとはどのようなものを指すのでしょうか？
代表的な物はWindows8から採用されたインターフェイスの「メトロUI」や、iPhoneのOSで採用された「ios7」がフラットデザインとしてあげられます。日常的に目にするこの2つから、フラットデザインやフラットUIを知った人が多いのではないでしょうか。
次にフラットデザインで作られた参考サイトを見ていきます。
フラットデザインの例
京都宇治伊藤久右衛門
http://www.itohkyuemon.co.jp/
ひめの麦畑
http://www.himeno-mugibatake.com/
Lorenzo Verzini
http://lorenzoverzini.com/
フラットデザインの特徴
上記のサイトからフラットデザインの特徴がなんとなく伝わったはずです。簡単に特徴を説明していきます。
- 平面である
- 装飾がない
- シンプル
- 一目で分かる
- 情報が整理されている
- 色鮮やかで見た目が華やか
- フォントがモダン調
フラットというだけあり、質感や立体感がありません。フラットデザインの一番の特徴です。ボタンやロゴに注目すると、エフェクトやグラデーションが無いことが分かります。また、文字などの各要素がとてもシンプルです。情報も最小限にしかありません。レイアウトも一目で分かるようになっています。そして、シンプルだけでなく色を多用しているため、見た目がとても華やかになります。
最新情報をいち早くお届け!
無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます！
その他、更新情報・イベント情報を
お届けいたします。
見た目以上の意味
特徴的なフラットデザインですが、なぜここまで一気に広がったのでしょうか？実はデザイナーやユーザーにとってメリットがあるからです。
スマートフォンの普及
まず、スマートフォンの普及が大きな要因です。パソコン画面の場合、質感や立体感を出したり、フォントを細かく設定してもしっかり、美しく表現することができます。このような手法はリッチデザインと呼ばれます。木目の素材感を出したりなど、実際のものに寄せています。
これがスマートフォンだとどうでしょうか？ほとんど潰れてしまい、せっかくの綺麗なボタンなどが見えづらくなってしまいます。これがフラットデザインだと、装飾や文字が最小限なので、スマートフォンの画面でもしっかり見え、ユーザーにとってメリットがあることが分かります。
デバイスの多様化
デバイスの多様化によりパソコンやスマートフォン、タブレットとユーザーがどれを使ってサイトを閲覧するか分かりません。どのデバイスからも最適化されたサイトを閲覧できるよう、デザイナーはレスポンシブという方法をとります。
実はそのレスポンシブはフラットデザインととても相性がいいのです。フラットデザインを採用しているサイトの多くが、グリッドレイアウトを意識しているものが多いです。グリッドレイアウトはページ内にグリッドを引き、余白をもたせ、コンテンツを当てはめていく手法です。
グリッドを意識しているため、情報がまとまっており、ユーザーにとって、とても分かりやすくなります。また、どのデバイスからも読み込みが早くなり、スタートアップに最適です。もちろんデザイナーや制作会社側のメリットもあります。配置や色に上点を置くため、フラットデザインの特徴である、シンプルさによってアイコンなどの制作作業が軽減されます。
レスポンシブの際に、グリッドを意識しているため、コンテンツの配置がしやすく、自由に配置するより、表示が変化した時に形作りやすくなります。画像も配置がしやすくパソコン上では綺麗に見えていても
スマートフォンだと右端が切れて、見えづらくなることも無くなります。
また、パソコンとその他デバイス上でのイメージの変化が少ないこともメリットとしてあげられます。このようにフラットデザインは作り手から受け手まで幅広く要素を持っていることが分かります。
デメリット
メリットばかりだと思っているフラットデザインですが、注意点もあります。シンプルさを追求しすぎると、ユーザーはどのボタンが次のアクションに繋がるのか分からなくなってしまいます。
例えば、このボタンはリンクへと繋がるのか？これはそもそもボタンなのか？と混乱を招いてしまう可能性があります。
そして人気故に、似たようなサイトができてしまうということです。デザイナーの個性がまり出せないところもデメリットとしてあがります。A/Bテストなどを行い、デメリットをうまくカバーすることが大切なのではないかと思います。
まとめ
いかがでしたでしょうか？見た目が華やかで、かわいいフラットデザインも、ユーザーだけでなく、作り手側のデザイナーにもメリットがあり、流行のスタイルというだけでなく、理由があることが分かりました。
マルチデバイスに適応したフラットデザインですが、目的によって使いづらい場合があると思います。フラットデザインを使うのか、リッチデザインを使うのか、ユーザーにとっての使い勝手を理解して、Webサイト制作をしていくことが大切です。時代と共に変化してきたインターフェイスであるフラットデザインを、うまく使えるように、経験を積んでいきたいと思います。
マーケティングでお悩みでしたら、
Bigmacにお任せください。
