フォーカスしたいもの
フラットデザインはWebデザインにおいて主流ともいえる存在。フラットデザインに対する感想はさまざまですが、このデザインがメジャーなものとなった理由があるのです。
このページでは、フラットデザインの見た目以外の目的や、メリット・デメリット、フラットデザインを用いた事例、相性の良いCSSフレームワークをご紹介します。
フラットデザインとは？
フラットデザインとは言葉の意味のまま、立体感や奥行き、質感などの表現があまりなく、平面的なデザインを指します。質感を演出するテクスチャや、視覚的に立体的を出すシャドーなどをほとんど使わず、色や形などをシンプルに用いて構成されています。
フラットデザインは、見た目の立体感や奥行き、質感があるかないかだけでなく、シンプルさやスッキリとした印象を与えられるデザインという認識が一般的です。
Webデザインにおけるフラットデザインが流行したきっかけは、Windows8やAppleのOS「iOS7」のリリースです。そこから火がつき、世界中で流行しました。
あらゆるデザイン手法が生まれ、目新しいものが流行する現在でも、未だ数多くのWebサイトがフラットデザインを採用し続けています。
フラットデザインの見た目がシンプル以外の目的とは？
フラットデザインは、見た目がシンプルという理由だけで一気に広まったのでしょうか？
広まった背景には、フラットデザインならではの利点がサイト制作の目的に合致したということがあります。
PCブラウザ上で質感を演出したボタンを配置した際、PCブラウザ上ではとても綺麗で質感も感じられていたとしても、iPhoneやandroidではどうでしょうか？画面の小ささからボタン自体が見えにくく、質感を演出したことが裏目に出て、汚く見えてしまうことがあります。
また、見出しに大きくテキストを配置した画像を使った場合も、PCブラウザで確認した時は問題なくても、iPhoneやandroidなどで見た時には画像が自動でトリミングされてしまう場合もあるのです。
このように見るデバイスによるデザインの差を最小限にするために、各端末に適応したWebデザインを用意しておくことが重要になってきました。自由な配置で作られたWebデザインより、事前にグリッドで区切られたようなシンプルな四角いレイアウトで作られたWebデザインの方が、端末ごとのデザインを用意することが容易となります。このことが、フラットデザインの需要をのばしたのです。
フラットデザインが主流となった理由として、さまざまなデバイスに対応するコンテンツを制作するという目的に、向いているのがフラットデザインだったのです。
フラットデザインとマテリアルデザインの違いとは？
フラットデザインとマテリアルデザインは、一見するととても似ていて、同じように感じてしまうのですが、実は似て非なるものです。それぞれの違いを見てみましょう。
フラットデザインは徹底したシンプルさから自由度が高いことが特徴で、UIデザインとしては優れています。
対してマテリアルデザインは、陰影をコンテンツに付与することで奥行きを表現し、ユーザーがより直感的に使いやすいデザインとなっています。
補足としてマテリアルデザインはGoogleが明確に定義付けをしているのですが、フラットデザインには明確な定義・ルールは存在しません。
フラットデザインを導入することで得られるメリット
今ではフラットデザインを用いたWebサイトは多くあり、馴染んでしまっている感じがしますが、今日まで進化を続けているデザイン手法でもあります。
今一度、ここでフラットデザインを用いるメリットを整理しましょう。
シンプルだからこその柔軟なフレームワーク
フラットデザインは、グリッドやカード、ブロックなどの要素との相性が良く、見た目が均一な幾何学的な模様になりやすい傾向があります。
グリッドは、どんなものにも適用可能な、柔軟性に富んだフレームワークです。シンプルなグリッドタイプのフレームワークを用いることで、Webデザインの表現方法も広がり、最適な配置を実現できるようになります。
レスポンシブデザインとの互換性
フラットデザインがレスポンシブ対応に優れたデザイン手法であることから、UXを意識したフラットデザインも徐々に誕生してきました。
フラットデザインは、グリッドを用いたデザインをベースとしたシンプルなデザインであることから、異なるデバイスに対する互換性が高いです。UXを意識したデザインの誕生で、簡単にサイズ変更を調整し、表示することが可能となりました。
タイポグラフィが目立つデザイン
フラットデザインでは、タイポグラフィが目立つので、他のデザイン手法以上にフォントの重要性が高くなります。
ユーザーがより分かりやすく、それでいて合理的なタイポグラフィに変化していくこととなります。
フラットデザインを用いることで、テキストに対しての影やその他のエフェクトが不要になり、テキスト自体の視認性は自然と高まるのです。
フラットデザインを用いることで発生するデメリット
近年、Webサイトを閲覧するデバイスが増加していき、フラットデザインが重宝される機会は減るどころか増加傾向にあります。
しかし、フラットデザインを用いることにはデメリットも存在するのです。
同じようなレイアウトのデザインになりがち
フラットデザインは、グリッドを用いたフレームワークであり、そのシンプルな特徴から表現の幅が狭くなりがちです。その結果、同じようなレイアウトのデザインが多く存在しているという現状です。
特に顕著なのが、アプリのアイコンなどではないでしょうか。
シンプルで色も多く使わないのが特徴のフラットデザインは、別サービス・別製品のデザインと意図せず似通ってしまう傾向があるのです。
認識性が低く、直感的操作がしにくい
フラットデザインはデザイン自体が平坦なため、認識性が低く、直感的な操作がしにくいというデメリットがあります。
シンプルを追求しすぎた結果、視覚的な特徴がとても少ないWebサイトになってしまい、ユーザビリティが著しく低下してしまう恐れもあるのです。
フラットデザインを用いた事例紹介
ここでは、フラットデザインも採用したWebサイトを3つご紹介します。
carolina herrera公式サイト
https://www.carolinaherrera.com/ww/en/
「carolina herrera」公式サイトです。
ファーストビューで動画を流しブランドの世界観を表現しつつ、サイト全体はフラットデザインで洗練された印象を感じさせます。
uniform wares
モノクロ調や比較的シックな印象を感じさせる時計を扱っているECサイトです。
商品のシックなイメージとフラットデザインがマッチしています。
mackintosh philosophy
https://www.mackintosh-philosophy.com/
アパレルブランド「mackintosh philosophy」のECサイトです。
TOPページや商品一覧ページの文字情報は最小限にし、洋服などの画像が印象的に見えるようフラットデザインを使用しているようです。
相性の良いCSSフレームワーク
フラットデザインと相性の良いCSSフレームワークを2つご紹介します。
ご自身の求めるデザインに適したCSSフレームワークを用いることをおすすめします。
Almost Flat UI
「Almost Flat UI」は、フラットUIを簡単に構築するためのCSSフレームワークです。
ベースはFounfationというCSSフレームワークがベースとなっています。
https://websymphony.net/almost-flat-ui/
Bootflat
「Bootflat」はBootstrapのフラットデザイン版というイメージです。
Bootstrap3.1.0をベースとしたCSSのフレームワークです。
フラットデザインまとめ
フラットデザインは、シンプルであることからレスポンシブ対応に適したデザインです。
ただ、シンプルさを追求しすぎると他のWebサイトと似通ったデザインになったり、視認性が低くなり、ユーザビリティを損なってしまう恐れもあります。
メリット・デメリットをしっかりと理解し、自社のWebサイトに適したデザイン手法を取り入れるようにしましょう。
デパート採用情報
株式会社デパートでは一緒に働く仲間を募集しています
