違いがわかりますか?フラットデザインとマテリアルデザイン

最近はシンプルなデザインのサイトやロゴをよく見かけるようになりましたね。ボタン一つとっても、背景がベタ塗りだったり、文字と線だけだったりそういうデザインをフラットデザインといいます。一方、質感だったり影だったりと立体的なものをマテリアルデザインといいます。身の回りではマテリアルデザインからフラットデザインになったものが多く存在します。

例えば、Googleのロゴマーク、1999年くらいは細く立体感のあるものでした。それが2016年現在ではベタ塗りの太いものに変わりました。

また、皆さんがよく利用されるLINEの画面お気づきでしょうか?吹き出しの部分に影がついていたのが、いつの間にか影が消えています。

そこで今回はフラットデザインとマテリアルデザインの違いについて、メリット・デメリットを紹介します。

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

装飾を限界まで控えたデザインなのでユーザーの目に優しくストレスもかかりにくいデザインです。それと合わせて、シンプルなデザインなので媒体のサイズが変わってもユーザーから見やすく、押しやすいデザインです。また、マテリアルデザインと比べファイルの容量が少なく済むので読み込みに時間がかかりにくく、ユーザーのストレスを軽減できます。

制作側からの目線でいうと、装飾をつけずにすむということと、比較的シンプルなデザインが多いのでコーディングの時間は削減できそうです。

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

上記にもありますが、装飾を限界まで控えたデザインになっているため、ボタンやリンクが見つけにくくなり、ユーザーに優しくありません。また、比較的シンプルなデザインのため個性的ではなくなり、他のフラットデザインのものとどうしても似てしまいます。

マテリアルデザインのメリット

影や質感を使い立体的なサイトになっているのでボタンやリンクが探しやすくなっています。さらに、フラットデザインに意味のある動きを付け加えてあげることで、ユーザーはストレスなく使用できます。

マテリアルデザインのデメリット

アニメーションなどを加えることでスマホ端末のバッテリーを消費したり、フラットデザインに比べファイルが大きくなってしまうので、工夫しながらの制作になってしまうかもしれません。

まとめ

今回フラットデザイン・マテリアルデザインのことを書きましたが、動かなさすぎる・シンプルすぎるデザインはユーザーが見ていて飽きてしまいますし、動きすぎるデザインはユーザーを疲れさせてしまいます。なので制作する際はどちらが適しているか?どこに動きをつけるべきか?どこをシンプルにすべきか?を考えながら上手にメリットを活かしていくスキルが必要になってきます。

スキルを高めるためにもいろいろなサイトを見て勉強していきたいです。

このエントリーをはてなブックマークに追加

筆者

Y.Urushizaki

1日を100%全力で生きるをモットーに毎日すごしています。幸せだなと思う瞬間は仕事終わりに「今日も頑張った」と思いながら駐車場まで歩く時と、近所の野良猫と遊んでいる時です。最近自覚したことは周囲も驚くほどの雨女だったことで、過去に行ったテーマパーク(ディズニー・ユニバ・富士急・ナガスパ)はほとんど雨の思い出がしかありません。たまにテーマパークで晴れると自分より強い晴れ男・晴れ女が存在する事実に少しテンションがあがります。

筆者が最近執筆した記事