さらに詳しく解説！「フラットデザイン」と「マテリアルデザイン」

前回の記事では、トレンドのデザインを知っておいた方が良い理由や、「フラットデザイン」・「マテリアルデザイン」の見た目の違いなどについて解説しました。

 

今回は、「フラットデザイン」と「マテリアルデザイン」がトレンドとなった理由や、それぞれのデザインのメリットなどについて、解説していきます。

 

 

 

 

 

「フラットデザイン」がトレンドになった訳とは？

「フラットデザイン」と「マテリアルデザイン」は、“何となく流行っている”のでありません。

この2つのデザインがトレンドとなった背景には、近年の私たちの“生活環境の変化”が関わっていたのです。

 

まずは、先にトレンドとなった「フラットデザイン」から解説していきましょう。

 

 

 

「フラットデザイン」流行のきっかけ

「フラットデザイン」は、近年ロゴやWebサイトのデザインでトレンドになっていますが、ポスター等の印刷物の業界では、以前から存在していたデザインの手法です。

 

その「フラットデザイン」が、2002年に「マイクロソフト」から公開されたソフトウェアで取り入れられ、その後2010年発売の「Windows Phone 7」でも使用されるなど、デジタルの世界で少しずつ使われ始めていました。

 

そして2013年。

「Apple」がリリースした「iOS7」に「フラットデザイン」を採用をした事がきっかけで、一気に「フラットデザイン」がトレンドとなって行ったのです。

※画像引用元：Wikipedia |iOS7

 

 

なぜ、「フラットデザイン」がトレンドに？

先述したように「フラットデザイン」は「iOS7」以前、「Windows Phone 7」などでも採用されていました。

それではなぜ「iOS7」のリリースが、「フラットデザイン」流行のきっかけになったのでしょうか？

 

「iOS7」がリリースされた2013年と言うと、実はちょうどスマートフォンの保有率が急増している時期でもありました。

 

引用元：総務省 | 令和元年 情報通信機器の保有状況

 

スマートフォン保有率の増加に伴い、スマートフォンでWebサイトを閲覧する人も増加。

その為、この時期からWebサイトをはじめロゴデザインなどにも、“スマートフォンで表示される事”に重点を置いたデザインが見られるようになりました。

「フラットデザイン」はちょうど、“スマートフォンでの表示”に向いたデザインだった事もあって、トレンドとなって行ったのです。

 

 

「フラットデザイン」はスマートフォン向きなデザイン

前回の記事で、立体的なデザイン「スキューモーフィズム」について少し解説しましたが、「フラットデザイン」がトレンドとなる以前は「スキューモーフィズム」がトレンドでした。

 

しかしこのリアルなデザインは、表示サイズの小さなスマートフォンに向いているとは言えないデザインです。

なぜなら、小さなスマートフォンの画面ではリアルな質感や立体感よりも、シンプルでスッキリ見えやすい方が“ユーザーに優しいデザイン”だからです。

 

 

シンプルで見やすい「フラットデザイン」は、小さなスマートフォンの画面表示に最適なデザインです。

 

「スキューモーフィズム」自体は現在でも使われている（特にゲーム等で）デザインですが、スマートフォンでの表示を考慮したWebサイト作りにおいてはあまり採用されなくなり、「フラットデザイン」が取って代わって行ったのです。

 

 

 

「フラットデザイン」を採用するメリットとは？

「フラットデザイン」には、スマートフォンで見やすいという事以外にもメリットがあります。

 

「フラットデザイン」は「スキューモーフィズム」に比べて表示の為の情報量が少なくて済む為、Webサイトのページの読み込みが早いといった利点もあります。

“ページの読み込みが早い”という事は、操作の快適性に繋がるので、スマートフォンユーザーにとっては重要なポイントですよね。

 

操作が快適なWebサイトを作る事は会社やお店のイメージアップに繋がるので、大きなメリットとなります。

 

 

 

「マテリアルデザイン」がトレンドになった訳とは？

スマートフォンユーザーの使い勝手を重視した「フラットデザイン」。

しかし、そこから新たに「マテリアルデザイン」が誕生しました。

 

「フラットデザイン」で平面的なデザインになったのに、なぜ再び“影”が加えられた「マテリアルデザイン」が誕生したのでしょうか？

 

 

 

「マテリアルデザイン」の誕生

「マテリアルデザイン」は、2014年に「Google」から明確なガイドラインが定められたデザインとして“発表されたもの”です。

つまり、自然に発生したものでは無く、意図して作られたデザインだったのです。

 

画像引用元：MATERIAL DESIGN

 

「マテリアルデザイン」のガイドラインを要約すると、“ユーザーにとって、閲覧しやすく、操作しやすいWebサイトやサービスの為のデザイン”です。

 

「フラットデザイン」は、小さなスマートフォンの画面で見やすく、Webサイトなどのページの読み込みも早くて使いやすいデザインではありましたが、平面的なデザインだと「タップできるボタンかどうかが分かりにくい」といったデメリットがありました。

 

そこで、このような“フラットデザインの使いにくさ・分かりにくさ”を解消する為に、ユーザーが使いやすくなるデザインのルールを細かく定め、「マテリアルデザイン」として発表されたのです。

 

 

 

なぜ、「マテリアルデザイン」がトレンドに？

「マテリアルデザイン」によって、Webサイトの使いやすさが飛躍的に向上しました。

そして、「マテリアルデザイン」を採用するWebサイトが急増…トレンドデザインとなるのは自然な流れですよね。

 

また、少し専門的なお話になりますが、2014年に仕様変更となった「HTML（プログラミング言語）」も、「マテリアルデザイン」がトレンドとなった事に関係しています。

 

それまで表現しにくかった「マテリアルデザイン」が、2014年の「HTML5」・2016年の「HTML5.1」によって作りやすくなり、Webサイト作成に積極的に採用されるようになったのです。

 

 

 

「マテリアルデザイン」を採用するメリットとは？

前回の記事で「マテリアルデザイン」には奥行きを感じさせる“影”があると解説しました。

これは「マテリアルデザイン」が、現実世界のような奥行きや重なりを表現する事で、ユーザーが理解・操作しやすくする事を目的としたデザインにしているからです。

 

つまり「マテリアルデザイン」を採用すると、“ユーザーにとって使いやすいWebサイトが必然的に作れる”のです。

 

例えば、重なりの一番上にある要素に影があれば（下図左）、要素がいくつかあっても操作しているのがどれなのか分かりやすくなります。しかし影が無い（下図右）と要素が同列に見えてしまうので、どれを操作しているのか（操作が有効になっているのか）が分かりにくくなってしまいます。

 

「マテリアルデザイン」は奥行きの為の影以外にも、「操作前後で画面が切り替わるアニメーション」や「ページを見やすくする為に色数を抑えた配色」など、ユーザーが操作しやすくする為のデザインのルールが細かく定められています。

 

画像引用元：MATERIAL DESIGN

 

ルールが細かく定められていると、「マテリアルデザインでWebサイトを作ると、デザインの自由度が下がるのでは…」と感じてしまう方もいるかもしれませんね。

 

確かにデザインの自由度が低くなる部分があるかもしれませんが、「マテリアルデザイン」を採用すればユーザーにとって使いやすいWebサイトやサービスになる事は間違いありません。

 

どんなに見た目が良いWebサイトが出来上がっても、操作性が悪かったり、目的のページに辿り着けなかったりすればユーザーの直帰率が上がってしまうので、せっかく作ったWebサイトの意味が無くなってしまいます。

 

 

「マテリアルデザイン」の方が操作性が良いと解説しましたが、決して「フラットデザイン」の方が劣っているという事ではありません。

「フラットデザイン」でも、やり方によっては“ユーザーの使いやすいデザイン”にする事もできます。

 

それぞれのデザインのメリット・デメリットを理解した上で、ターゲットやユーザーに適したデザインを採用しましょう。