販促担当者のためのデジタルマーケティング情報メディア|baXooka[バズーカ]

「フラットデザイン」と「マテリアルデザイン」はどう違う?

皆さん、こんにちは!バズーカ運営チームのキムです。

今はウェブサイトのレイアウトを考える時に、「PCでどう表示するか?」ではなく、「スマホ、タブレット、PCそれぞれでどう表示すうか?」という思考が基本ですね。もちろん、閲覧するユーザーがその違いを意識させることではなく、デバイスの大きさを認識してレイアウトが切り替わる「レスポンシブデザイン」が主流です。
その中でも、今回はスマホやタブレットの表示に適しているといわれる「フラットデザイン」というデザインの概念と、それと似ているようで違う「マテリアルデザイン」についてご紹介します。

フラットデザインとは?

「フラットデザイン」は、一言でいえば名前通りに「シンプルなデザイン」です。
少し前まで流行っていた、実物を連想させる立体的デザイン(「スキューモーフィズム」)とは違い、装飾やグラデーションなどを抑え、極力シンプルな色彩と要素の配置をするデザイン考え方と生理できます。

なぜフラットデザインは流行ったのか?

有用性1:どのコンテンツとも合わせやすい

フラットデザインは、装飾要素を抑えているので「癖がない」ことが特徴です。これは、どのようなコンテンツが入っても違和感なく見えるという結果につながります。
ウェブサイトから「役立つコンテンツを提供」することが重要なポイントとなっている現在で、様々なコンテンツにも柔軟に合わせられるということはフラットデザインの有用性ですね。

有用性2:マルチデバイス対応も簡単

フラットデザインは構成要素の大きさや配置順番を、「CSS」というウェブページのスタイルをコントロールする言語で簡単に変更できるので、様々なデバイスの画面に対応できることも有用なポイントです。どのデバイスから訪問しても統一感あるものとして認識できるというユーザー側からのメリットもありますね。

フラットデザインのウェブサイト

the Gadget Flow

http://thegadgetflow.com/
最新技術を用いたアイデア商品を紹介、クラウドファンディングにつなげるサイトです。
写真の背景や、色感などが全く違う様々な商品イメージがフラットなデザインできれいに収まって見えていますね。

Canopy

https://canopy.co/
アマゾンに商品をキューレーションして見せてくれるサイトです。カード型のレイアウトでシンプルの極端を追求したようなデザインで、商品画像に集中できるレイアウトです。

Mon Cifaka online store

http://mon.cifaka.jp/

こちらは国内の事例で、岡山市にある雑貨屋さんのECサイト。ミニマルな構成で、商品に注目できるように構成されています。軽いアニメーションで、スクロールを楽しくしているところも面白いです。

マテリアルデザインとは?

見た目だけではよくフラットデザインと混同されやすい「マテリアルデザイン」ですが、もともとはGoogleが2014年6月に発表した概念で、「ユーザーが直感的に操作できる」ということを目指して要素の構成・配置をするデザイン思考です。

特徴としては、光と影の方向で要素に「質量感」を与えることです。
「これは重要でクリックするボタン」とか「これは説明文で、見るだけで良い」など、要素の特性・重要性をすぐわかるようにすることがマテリアルデザインのポイントです。

先程のフラットデザインが「シンプルさ」を追求した「視覚型」な考え方だとすると、マテリアルデザインはこれがクリック(タッチ)して動く部分かどうかを見てすぐ気づくようにするという「触覚型」な考え方と言えますね。

Googleが推薦していることから、Androidスマートフォン向けのアプリケーションを中心にその利用が増えていますが、ウェブサイトでもGoogleが運営するサイトに多く使われています。参考として幾つかご紹介します。

マテリアルデザインのウェブサイト

マテリアルデザインの原点 : Google Material Design Guidlines

https://material.google.com/
Googleが提供する、マテリアルデザインのレファレンスサイトです。その考え方から、アイコン、ボタンなどのテンプレートはもちろんアニメーションの例も紹介されています。

Android.com

https://www.android.com/
Android OS自体とそれを搭載しているスマホ・タブレットなどの案内を網羅しているサイトです。

inbox

https://www.google.com/inbox/
Googleのメールサービス「Inbox」を案内するランディングページです。機能説明のところに、スクロールに合わせて実際アプリケーションを使っているようなアニメーションが表示されることも面白いですね。

ユーザーを迷わせないことが一番!

フラットデザインは、単純に一時的な流行りというよりは、マルチデバイス+コンテンツ重視というウェブ全体の流れから選ばれるべきして選ばれた考え方ではないかと思います。また、マテリアルデザインは、フラットデザインの「操作性」を補うために提唱されたことではないかと。

限られた画面の中で、正確にユーザーが目的としている情報にたどり着けるようにすること!その目標はどちらも同じでしょうね。これからも、デバイスや通信環境の変化に合わせて、ユーザーにコンテンツを伝えるためにどういうデザイン思考が現れるか、その進化が楽しみですね。

The following two tabs change content below.
キム

キム

テクニカルディレクター。 フロントエンドコーディング、スマホ、アプリケーション、IoTなどに興味深いです。 たまに変な日本語が出てしまっても許してください…!
販促の最新トレンド、事例をお届け!
メルマガ登録情報入力
必須
必須
メールアドレス 必須
会社名 必須
SNSでフォローする