Skip links
フラットデザインとマテリアルデザイン

フラットデザインとマテリアルデザインの違いとは?特徴・歴史・選び方を比較解説


フラットデザインとマテリアルデザイン

スマートフォンの台頭によるデザインの変化

現代ではスマートフォンやウェブサイトのデザインが、その他のデザインにも多大なる影響をもたらしました。今日におけるデザインにおいて主流になっているのが、フラットデザインとマテリアルデザインです。

名称からも各々ははっきりとした違うものであるという扱いがされているものの、実際の各々を見比べてみた場合にはあまり違いがわからないと感じてしまう方が居るのも事実です。

フラットデザインとは

デザイナーにより様々な表現の方法がありますが、フラットデザインというのは単純明快に言うとその名の通り平面的に設計されている作品の事を指します。つまり、作られたものにグラデーションや影という立体感と奥行きが感じられる表現は積極的には施されていないという状態です。

マテリアルデザインとは

一方のマテリアルデザインというのは現実世界における物理の法則に基づいて設計されている物を指し、意識して作るとまるで実際に紙媒体に触れているように直感的な扱いをする事ができるようになります。そのため、フラットデザインとは相反するように重なりと奥行きをいかに強く感じられるようにできるのかを意識して作られています。

このような違いを知ると各々の差異点は影の有無のみに感じられてしまうのですが、単にフラットな様相に対して影を付けただけではマテリアルが構築されるわけではないというのが奥深いところですし、マテリアルに関しても全ての作品において必ず影が採用されているわけではありません。

実はそれぞれにはガイドラインが制定されているので、正確に詳細を知るためにはガイドラインを目にすると理解を深める事ができるのですが、ガイドラインによればそれぞれ流行りだした時期が異なる事がわかりますし、最初に用いるようになった企業が異なる様子もわかります。

フラットデザインが流行し始めて普及したのは2012年からであり、マテリアルデザインは2014年に大手検索エンジンのグーグルが発表をしたものです。

どちらを選ぶかは「情報量」と「操作のわかりやすさ」で考える

フラットとマテリアルは優劣で語られがちですが、実務では「どちらが向いているか」を目的から選ぶほうが役立ちます。フラットは要素を削ぎ落とすため、洗練された印象と軽さが得やすい一方、押せる場所とただの装飾の区別がつきにくくなることがあります。マテリアルは影や重なりで「これはボタンだ」という手掛かりを残すため、直感的に操作しやすくなります。

基準にすると良いのは、扱う情報が多く、操作の分かりやすさが重要な場面ではマテリアル寄りに、ブランドの世界観や静かな佇まいを見せたい場面ではフラット寄りに、と使い分ける発想です。どちらかに固執するより、「使う人が迷わないか」を軸に濃淡を調整すると、見た目と使いやすさのバランスが取りやすくなります。

 

マテリアルデザインとフラットデザインの未来

こうした様子からわかりますが、フラットデザインは言うなれば自然発生的に生まれたものであるのに対し、マテリアルデザインは検索エンジン最大手のGoogleが意識的に生み出したものであるという事なので、マテリアルデザインの方が決まり事がはっきりとしているという特徴があります。反面、フラットは自然発生的に生じたものなので正解が無いものの自由度が高く、今後も支持を得るジャンルの一つとして残っていくのではないでしょうか。

UIの潮流は、紙のグラフィックデザインにも波及している

フラットやマテリアルはWeb・アプリの話に見えますが、その影響は紙の印刷物にも静かに及んでいます。画面で見慣れた表現は「今っぽさ」の基準として人々の目に刷り込まれ、チラシやパンフレットの配色・余白・アイコンの扱いにも自然と反映されていきます。デジタルで主流になった感覚が、印刷物の第一印象をも左右するようになっているのです。

意識しておきたいのは、こうした潮流には周期があるということです。立体的な質感を細かく再現する表現と、極限まで削ぎ落とすフラットな表現は、時代とともに振り子のように行き来してきました。流行を追うこと自体が目的化すると、数年で古びてしまいます。トレンドは「今の空気を掴むための参照点」と捉えつつ、伝えたい中身に合っているかを最後の物差しにすると、長く見られるデザインに近づきます。

企業ロゴを作成する

 

▶︎ デザイン制作実績を見る / ▶︎ デザインのブログ記事一覧 / ▶︎ デザイン制作のガイド・媒体の特徴

最後までお読みいただきありがとうございます。共感する点・面白いと感じる点等がありましたら、【いいね!】【シェア】いただけますと幸いです。ブログやWEBサイトなどでのご紹介は大歓迎です!(掲載情報や画像等のコンテンツは、当サイトまたは画像制作者等の第三者が権利を所有しています。転載はご遠慮ください。)

この記事について

執筆: ASOBOAD編集部

デザインの潮流や作例調査をもとに記事制作・編集を行っています。

運営: ASOBOAD(アソボアド)

デザイン事務所AMIXが運営するオンライン完結型のデザインサービスです。