押さえておきたいトレンドデザイン！「フラットデザイン」と「マテリアルデザイン」

今回は、少し専門的な「デザイン」に関するお話です。

“デザインのお話”と言うと、デザイナーでは無い人にとっては「自分には関係無いテーマだ」と思われるかもしれませんね。

ですが、デザイナーでは無い人でも、最近はどんなデザインが流行っていて、そのデザインにはどんな特徴やメリットがあるのかを知っておく事は、ブランディングを図る際や、ユーザーやターゲットにアプローチする際に、大いに役立つ情報となります。

特に、「ロゴ」や「Webサイト」の作成を外注する際には、知っておいて損はありません。

そこで今回は、最近トレンドとなっている「フラットデザイン」と「マテリアルデザイン」について、デザイナーでは無い方にも分かりやすいよう2回に渡って詳しく解説していきたいと思います。

“トレンドのデザインを知る”という事

「フラットデザイン」と「マテリアルデザイン」のお話をする前に、トレンドのデザインを知る事のメリットについて、もう少しお話しておきましょう。

トレンドのデザインを知っておくメリットとして、「ロゴやWebサイト作成を外注する際に役立つ」と先述しました。

ですが、外注する側としては「トレンドのデザインでなくても良いから、自分たちが好むデザインで作ってもらおう」と思われるかもしれませんね。

しかし、“自分たちが好むデザイン”がトレンドから外れたデザインだった場合、デメリットが発生する可能性があります。

※トレンドデザインを取り入れるメリットは、記事【知っておいた方が良い?ロゴデザインのトレンドについて】で詳しく解説しています。ぜひ、併せてご覧ください。

「ロゴ」は“会社の顔”と言われる程、会社やお店・ブランドを象徴するものとして扱われ、ターゲットやユーザーに対して常に“会社のイメージ”を発信しています。

その為、トレンドのデザインを「ロゴ」に取り入れているかどうかで、ターゲットやユーザーが受け取る“会社の印象やイメージ”はかなり変わってきます。

一方「Webサイト」ですが、こちらはロゴ以上に多くの要素でデザインを表現できるので、より“会社の雰囲気・イメージ”を表すものとなります。

今や気になる会社やお店があればすぐにネットで検索する時代なので、大企業だけでなく小さな会社やお店でも「Webサイト」持つことは“当たり前”なものになっています。

ですので、単に「Webサイト」を持っているだけでは、ターゲットは興味を持ってくれません。

せっかく「Webサイト」を作ってもそれがトレンドから外れたデザインだった場合、ターゲットの興味を引くどころか興味を失ってしまう可能性もあるのです。

トレンドのデザインは、単に“流行っている”というのではなく、世の中の多くの人々がそれに価値を感じ、求めているデザインでもあります。

トレンドのデザインを追う事は必ずしも必要ではありませんが、「知らない」と「知っている」では、ブランディングの際に大きな差が生じてくるのです。

「フラットデザイン」、「マテリアルデザイン」とは？

似ているようで違う「フラットデザイン」と「マテリアルデザイン」

それでは、いよいよ本題の「フラットデザイン」と「マテリアルデザイン」について、解説していきましょう。

それぞれがどのようなデザインなのか、言葉で説明するよりもデザインそのものを見てもらった方がイメージしやすいと思いますので、まずはこちらをご覧ください。

「フラットデザイン」は、色がベタっと塗られた、平面的な（立体感や質感が無い）デザインです。

「フラットデザイン」は、最近のロゴで多く見られるデザインですね。

一方「マテリアルデザイン」は、パッと見た感じでは「フラットデザイン」と同じようですが、影があるので、“奥行きを感じるデザイン”となっています。

あえて“奥行き”と表現したのは、「マテリアルデザイン」の表現は“立体的”とは少し違うからです。

立体的なデザインと言うと、「スキューモーフィズム」というものがあります。

「スキューモーフィズム」とは質感までもリアルに表現されたデザインの事で、立体感のある見た目になっています。

まだ記憶に残ってい方も多いかと思いますが、「Instagram」のアイコンが現在のカラフルなグラデーションになる以前は、リアルなカメラのアイコンでしたね。

あのリアルなアイコンが「スキューモーフィズム」です。（ちなみに、新しいアイコンは「フラットデザイン」です。）

引用元：Instagram ICONS | Instagram

一方「マテリアルデザイン」は、そのような立体感のある表現ではありません。

“影”の表現はありますが、これは立体の影では無く、“平たいものが宙に浮いている影”なのです。

「フラットデザイン」と「マテリアルデザイン」の違いについて、一番分かりやすい“見た目”の違いを例に解説しましたが、「フラットデザイン」に影（奥行き）があれば「マテリアルデザイン」になる…という訳ではありません。

「マテリアルデザイン」は単に「平面的なものに影を付けるデザイン」ではなく、“どのようにWebサイトを作ればユーザーにとって使いやすいか”という考えに基づいて細かなガイドラインが定められた、“Webサイトの設計方法”の事なのです。

次回も引き続き「フラットデザイン」と「マテリアルデザイン」をテーマに、「マテリアルデザイン」のガイドラインや、2つのデザインがトレンドになった背景などについて解説していきます。