現在、WEBで台等している表現といえば、フラットデザイン。
いわゆる立体感などがあまり感じられない、平面的なデザイン表現のことですね。
昔はボタンなどのインターフェイスにドロップシャドウやグラデーションのついた立体的な
表現（マテリアルデザインなど）が主流でしたが、現在ではWEBにあふれているボタン表現といえば、
ベタ塗りに白文字や、線で囲ったブロックと文字、などといった平面的なものが多いのではないでしょうか。
フラットデザインはイラスト表現などとよくマッチしますし、余分な装飾がなくシンプルな表現が可能なので、
写真など、他の情報量が多いものを引き立たせる効果があります。
しかし、ボタンなどのインターフェイスは”押せる”ことが確実にわかるようなデザインである必要があります。
そのため、フラットデザインが普及する以前に溢れていた、ドロップシャドウやグラデーションを利用した立体的表現のデザインはユーザーがボタンを押せるものだと認識するためのUI表現として理にかなったものだったと思います。
しかし、現在はフラットデザインが普及したおかげで、立体感の薄いベタ塗りなどのボタンでも、大抵のユーザーはボタンと認識できる時代になりました。
そもそも、どうしてフラットデザインは普及するようになったのか？
そのメリット・デメリットを今回は考えてみました。
メリット
・マルチデバイスに対応しやすい
昨今、様々なサイズの端末がリリースされ、PC、SP、タブレットといったマルチデバイスに対応したWEBサイトの制作が求められています。しかし、端末ごとに表示サイズが違うため、どのサイトでも正しく表示されるデザイン…というものを作成する
にはどうすれば良いか、悩みは尽きません。
特に、従来の立体的な表現を多用したWEBサイトではボタンなども画像データで構成されているものが多く、多様なデバイスに対応するためにはデバイス毎に対応したサイズの画像データを作り直すなどといった手間が必要となっていました。
しかし、フラットデザインの様な時平面的な表現であれば、CSSで対応が可能です。また、PCからSPなど、画面が小さくなる場合、複雑なグラデーションやシャドウの表現を利用した従来の立体的デザインでは、小さな画面では潰れて見えにくくなってしまうなどという問題も発生していましたが、フラットデザインの様なシンプルな表現ではそれが起きにくいです。
デメリット
・ユーザビリティの低下
フラットデザインのメリットでもありデメリットと言えるのが、そのシンプルさ。
シンプルなデザインは重要な情報を引き立てたり、見やすいといった効果があるものの、
扱い方を間違えると、逆に必要な情報とそうでない情報の認識を誤らせてしまう可能性があります。
今でこそベタ塗りのボックスでも、ボックスの形状や文字によってそれがボタンかどうか判断できるようになりましたが、これもデザインが普及し、ユーザーの学習が進んだからこそ。
また、たとえ色や形状を変えたとして、立体感のないデザインで勝負するとなると、平面的な図形の並びは似た印象を与えがちで、注目して欲しいポイントを作るのが難しいところがあります。すると、重要なインターフェイスのUI性能が下がってしまう可能性があります。
そんな中、フラットデザインは短所を克服し、より良いものとするためにアップデートした概念の周知が進んでいます。
それがフラットデザイン2.0
平面的な表現に、シャドウやグラデーションなどのテクスチャーなどを取り入れたデザインです。
フラットデザインで問題だった、ボタンと他のオブジェクトの区別がつきにくい、といった課題を、
ボタンにうっすらとシャドウを入れることで”押せる”ボタンとして認識させたり、
色だけでは区別のつきにくかったボックスを、テクスチャを加えることで差別化できたりといった方法で解決できます。
そうすることで、フラットデザインの長所であるシンプルで見やすい＋マルチデバイスで再構成しやすいといったメリットはそのままに、ユーザビリティの改善ができるようになりました。
これも、CSSの進化で簡単なシャドウやテキストなら、画像でなくコードで作成できるようなったおかげではないでしょうか。
これからもWEBのトレンドや表現は進化を続けると思いますが、
ただ流行を追うだけでなく、なぜその表現が台等したのか、扱う上でのメリットデメリットは何かを
考えながら取り入れていけるよう、注目していきたいと思います。
