フラットデザインとは?効果的に活用するための基礎知識

毎日見ているスマホやパソコンのアイコンやアプリの画面のデザインがどんなデザインかじっくり見たことはありますか?気にしたことが無かった人もいると思いますが、よく見てみるとシンプルで見やすいデザインになっていることに気づきますね。そのデザインがここ数年でデジタル機器のスタンダードになっている「フラットデザイン」です。
以前は、アイコンやWebサイトなどの画面デザインは写実性を特徴としていて、立体感や奥行き、質感、光沢感などがあるデザインが主流でした。一方、フラットデザインはそういった装飾を可能な限り排除してスタイリッシュでシンプルにまとめられており、画面に集中できるように設計された表現です。フラットデザインはどのようなものなのか、特徴や基礎知識を学んでいきましょう。

フラットデザインとは

フラットデザインとは、それまでの立体的で陰影や光の反射表現などを伴ったリッチデザインと対極のシンプルなデザインを指します。デジタル機器が一般に普及を始めた1990年代はリッチデザインの時代でした。そして2010年代以降スマホの急速な普及によって個人がデジタル機器を所有し持ち歩くことが一般的なものになるのと同時に、機器に表示されるWebページの入力や表示方法の仕組みを考えるデジタルユーザーインターフェイス(UI)の考え方が当たり前のものとして浸透するようになりました。その後、リッチデザインに代わり急速に普及したのがコンテンツにより集中できるフラットデザインです。

フラットデザインの起源

シンプルなデザインは複数ありますが、有名なものはスイススタイルです。スイススタイルは1940年代から1950年代にかけて注目を集めたスイス発祥のデザインで、グリッド、サンセリフ体を特徴としており、ポスターや本の表紙などの様々な媒体で利用されました。

そして1990年代からインターネットが普及し始め、デジタル機器の性能を視覚的に表現するようにリッチデザインが普及しました。その後フラットデザインがwebデザインの一種として2012年ごろから広まりはじめ、MicrosoftがWindows 8で使用したModern UI(モダン・ユー・アイ)という画面デザインに採用され、アイフォンを作っているAppleもiOS7からフラットデザインを採用し、一般にも広く普及しました。

スマホが登場して普及するまでは、小さな画面を指で触れて操作するということはあまり多くありませんでした。スマホ登場以前を思い出してみると、パソコンはキーボードとマウスやトラックパッドのようなポインティングデバイスで操作し、携帯電話はテンキーで画面内を操作していました。これらのデジタルデバイスの画面デザインはディスプレイに表示されているものを触れるものとユーザーに認識してもらうために、現実にあるスイッチなどに似せたり、ユーザーの注意を引くために陰影をつけたり立体的にリッチにデザインされていました。
しかし、リッチデザインはその性質上、画面に雑多な情報が表示されます。スマホの普及により画面が小さくなり、UIの考え方が一般に広く普及したことで、よりシンプルで画面が煩雑にならないことが特徴のフラットデザインが採用されるようになりました。

フラットデザインの特徴

近年はデジタル機器のUIのみならず、ポスターなどでもフラットデザインを見かける機会が多くなりました。フラットデザインの特徴はどういったものなのか、シンプルであること以外の詳細な特徴を見て行きましょう。

平面的

フラットデザインは立体感のあるリッチデザインと違い、その名の通り平面的なデザインです。なぜフラットデザインが採用され普及したのかというと、ミニマリスティック(最小限的な)でスタイリッシュであるため、最新の機器であるデジタルデバイスと相性が良い点があります。そして陰影など装飾を付けずに余分な情報を取り除いたために、一つの要素に使用する面積が減ったことにより、画面が小さく表示領域が限定されているスマートフォンなどへの表示と相性が良いのです。

装飾や飾り罫を使わない

シンプルであることは、デジタルデバイスにとっては有利に働きます。単純なデザインは表示に余分なバッテリーを消費することを抑える働きがあります。装飾や飾り罫を使わないことによって処理を単純化することでデバイスの反応がよくなります。
そして、シンプルにすることにより、画面のサイズの違いを気にせずにデザインがしやすくなります。もしリッチデザインで豪華な装飾を施したデザインの128×128ドットのアイコンを32×32にリサイズしなければいけない場合、細部が潰れてしまってアイコンの役割を果たせなくなってしまうかもしれません。シンプルな分、小さくしても視認性が失われにくいのです。

シンプルな書体

フラットデザインの要素としてシンプルなフォント(書体)があります。
フラットデザインを利用する場合は、単色の背景に文字を書いているのをよく目にします。そのデザインに使われているフォントは陰影を付けたり、光彩をつけたりなどの装飾はしません。
そして、アルファベットでは書体の端に付いているウロコと文字の太さの変化が付けられているローマン体ではなく、均一な線の太さでデザインされたサンセリフ体が用いられます。日本語のフォントに置き換えるならば、ローマン体は明朝体フォント、サンセリフ体はゴシック体と考えるとわかりやすいかと思います。

フラットデザインのメリット

今までの色々な要素を詰め込んだリッチデザインからフラットデザインに移行したのは、多くのメリットがあるからです。特徴の項目にあげたメリットを含めて、ここまでフラットデザインが普及したのはどういったメリットがあったからなのかを確認しましょう。

レスポンシブデザインとの相性

Webサイトをパソコンやタブレットなどの大きな画面で見たときと、スマホの小さな画面で見たときにそれぞれの画面サイズにあった文字や画像の大きさで表示できるようにプログラミングするデザインをレスポンシブデザインと言います。

レスポンシブデザインはスマホでのWeb利用が激増した今、必須の手法です。
フラットデザインはそのシンプルさから、画面を構成する要素が画面サイズの変化に応じて動的に変化するレスポンシブデザインと相性が良いメリットがあります。レスポンシブデザインでWebサイトを作成する際、画面内に配置された装飾の崩れを都度修正したり、アイコンなどのリサイズの手間を省いたりすることができます。

読み取りやすいタイポグラフィ

文字についても線の強弱を付けたり、ウロコと呼ばれる文字装飾を排したフォントが使われているため、文字の太さが均一でスマホなどの小さな画面でも読みやすくなります。また背景が単色のボックスであることが多いため、余計な情報が入ってこなくなり、コンテンツに目が行きやすくなってなっているため、シンプルなフォントと相まって視認性と一覧性が高くなります。

応用の効くデザイン

フラットデザインはそのシンプルさから限られたサイズでコンテンツを伝える能力が高いと言われています。フラットデザインを名刺やカード、冊子、ポスターなどに応用することで人目を引き、内容に興味を持ってもらえるものを作ることができます。フラットデザインはWebやスマホ、パソコンだけに止まらず、様々なことに応用や転用が効く優秀なデザインなのです。

フラットデザインのデメリット

メリットの多いフラットデザインですが、そのシンプルさからくるデメリットもあります。

– シンプルさは普遍的なデザイン要素ですが、単純化を突き詰めてしまうと、特徴のない平凡なデザインになってしまいます。
– デザインする際に、利用できる形や色、図など使えるものに制限が出てきます。
– リッチデザインと違って、何を意味しているのかわかりにくくなり、直感的ではなくなってしまいます。例えば、ボタンやスイッチを意味するアイコンを陰影や立体感のないフラットデザインで表現すると、それがボタンやスイッチのように利用するものなのかわかならいユーザーが出てきます。

このような問題点もあり、万能なデザインではないことがわかります。
そして、このようなフラットデザインの欠点に対して改善・進化させようという動きもあります。

フラットデザインの進化

デザインは時代や利用される場面に応じて常に変化・進化し続けています。シンプルさを追求して一目でわかりやすく表現されたフラットデザインは多くの人に受け入れられ、現在もいろいろな場面で利用されています。特にデジタルとの相性が良いために広く普及しました。しかし、シンプルさから生まれる課題もあり、その課題を解決するさらなるデザインの追求が行われています。

フラットデザイン2.0

シンプルでミニマリズムなフラットデザインが広く利用される中で表出してきた、単純だからこそ起きる問題点を解決させるために試行錯誤されているのが、そこから進化した表現手法であるフラットデザイン2.0です。シンプルで美しいフラットデザインですが、インタラクティブなWebサイトやUIデザインとしてはどこを操作すると何が起こるのか分かりづらいというユーザビリティの低下を引き起こしてしまいます。
フラットデザイン2.0はシンプルさから一歩進んだ使う人のことも考慮されたデザインなのです。

フラットデザイン2.0の特徴

フラットデザインにリッチデザインの要素を部分的に取り込み、フラットデザインの優れた点は活かしつつ、操作する人によりわかりやすくユーザーフレンドリーに仕上げたものがフラットデザイン2.0です。
例えば、画面上のボタンに薄くドロップシャドウをつけることにより立体感が生まれ、それが操作でいるものであると分かりイメージしやすくなります。
他にもグラデーションや柔軟な色使い、アニメーションのような装飾を必要に応じて取り込み、よりユーザビリティを高めています。
フラットデザインから一歩進み、シンプルな中に必要な要素を限定的に加えて直感性を加えたデザインで、現在は多くのWebサイトやサービスに利用されています。

フラットデザインはより使いやすいデザインへ(まとめ)

フラットデザインはそのシンプルさと美しさで一般的に利用されるデザインの一つになり、身近なものになりました。
デザインは生み出されたときはその目新しさで注目を浴びますが、多くの人に利用されることで、問題点も浮かび上がってきます。装飾を排したフラットデザインはその美しさと引き換えに直感的ではないというインタラクティブなデバイスにとっては致命的な問題も見られましたが、その解決策としてフラットデザイン2.0というアイディアを加えることで進化しました。
デザインはユーザーエクスペリエンスを向上させるために日々進歩し、使いやすくカスタムされています。人に優しいデザインにするためにはどのようなアイディアを盛り込んだら良いのかこれからも考えてみましょう。

■参考 Web design Trends「フラットデザイン2.0は2018年のトレンドとなるか」

line@

PAGE TOP