おすすめ情報

おすすめ情報

2017年1月31日

見た目以上のフラットデザイン〜メリットとデメリット〜

flat-design-merit-and-disadvantage-beyond-appearance

皆さんフラットデザインという言葉は知っていますか?
少し前から、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サイト制作をしていくことが大切です。
時代と共に変化してきた
インターフェイスであるフラットデザインを、
うまく使えるように、経験を積んでいきたいと思います。

このエントリーをはてなブックマークに追加
メルマガ登録