事例から学ぶ!マテリアルデザインとは【初心者向け】

UIデザインで今や欠かせない「マテリアルデザイン」。今回は、マテリアルデザインとは、どういった特徴があるのか、その勉強法など初心者の方向けに説明しています。デザイナーを目指す方は必見でしょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

シンプルな見た目なのにどこかリッチな印象を受ける、「マテリアルデザイン」

聞いたことはあるけど、誰かに説明できるほど詳しく分からないという方も多いのではないでしょうか。この記事では事例を用いながらマテリアルデザインとは何なのか解説していきたいと思います。勉強法・サイトも載せているので、これからデザイナーを目指す方は必見です!

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

目次

 

マテリアルデザインとは

マテリアルデザインとは直訳すると「物質デザイン」です。

デザインのパーツを物質として捉え、現実世界のルールに基づくことによって、より直感的な操作にユーザーを誘導するデザインです。

マテリアルデザインは、Googleの製品やアプリケーションによく使われており、Androidの普及とともに浸透していきした。

 

[PR] Webデザインで挫折しない学習方法を動画で公開中

マテリアルデザインの特徴

3Dの奥行き感

スクリーンショット 2016-07-27 12.31.37

マテリアルデザインは、Z軸つまり高さの概念を持たせ、影をつけることで立体的に表現しています。3Dで表現することで、同じオブジェクトが重なっても影を用いることで実際にそこに物体が存在しているかのようにデザインしているのです。

 

紙とインクの比喩

スクリーンショット 2016-07-27 12.40.58

マテリアルデザインでは、カード型のリストやヘッダーなど様々な要素の部分は「紙」の比喩だと定義しています。

つまり、いくつもの紙を並べ先ほど紹介した影をつけることで立体感を表現しているのです。そして、文字や写真などは紙の上に乗っている「インク」の比喩だと定義しています。

 

アニメーションに意味を持たせる

materialdesign_9

ボタンなどタップした際にアニメーションを多く持たせているのが特徴です。パワーポイントのスライドなどで次のスライドに行く際にアニメーションをかけることがあるかと思いますが、マテリアルデザインも次の画面に行く際にアニメーションを採用しています。

そして、アニメーションの前後は関連性や繋がりを持っている必要があります。

アニメーション公式サイトでも動画で分かりやすくまとめています。

 

フラットデザインとの違い

文章で説明しても分かりにくいと思うので、よくマテリアルデザインと混同される「フラットデザイン」との違いを見ていきながら実際にマテリアルデザインを見ていきましょう。

まずフラットデザインの画像を見てみましょう。

c9c4a95888484d8a078f6950724e1f77

見たことのある方がほとんどだと思いますが、モダンUIと言われる、Windowsのホーム画面はフラットデザインで作られています。

奥行きを感じさせず、すっきりとした印象を与えることができます。

次にマテリアルデザインを見ていきましょう。

1adb4740163feb15915e0332404270f1

こちらも皆さんご存知GoogleMapの画面です。

パッと見たところフラットデザインとの違いがわからないかもしれませんが、注目していただきたのは、ルート・乗り換えの上の矢印ボタンです。

周りに少し影があることがわかります。

マテリアルデザインはこのように「重なり」を意識して立体的に作られています。

また現実のルールにのっとり、重なった場合は影をつけ、平面なページながら、立体感を出しています。

e8f67cb14cadfee17451a075cbe496e1

こちらもマテリアルデザインです。

ボタンや、色の境目に影を付けることで、立体感を表現しています。

このように、強調したい部分を目につけやすくすることが、マテリアルデザインの強みです。

 

まとめて簡単に言うと、フラットデザインは、「二次元」、「すっきりとした印象」、「重なりは意識しない」。

マテリアルデザインは、「三次元」、「直感的な印象」、「重なりを意識する」。

似ているデザインですが、以上のような違いがあることがわかります。

 

マテリアルデザインの勉強法

Introduction – Material design

マテリアルデザインはAndroidによく使用されています。それもそのはず、Googleが紹介サイトを出して、デザインに推奨しています。

英語で書かれているサイトですが、動画もあるので理解できると思います。

マテリアルデザインは概念自体はそれほど多くないので、デザインの知識自体は上のサイトでほとんど得ることができます。

実際に作成しましょう

基礎知識がついたところで実際に作成してみましょう。

マテリアルデザインは、知識自体は簡単ですが実際に作成してみるととても難しいです。

 

また、色合いや影のつけ方を少し変えるだけで、印象が変わることを実感できると思います。

デザインの上達には、実際に作成してみるのが一番の上達法です!

頑張って自分の作品を作り上げましょう!

Materializeという海外サイトでマテリアルデザインを簡単に作成することができます。自分でゼロから作る必要がないので便利なツールです。

 

今回はマテリアルデザインについて解説していきました。マテリアルデザインは、より直感的な操作しやすい印象を与えることができます。

元はAndroidから広がっていったデザインですが、PC用サイトを作る際の最近のトレンドにもなってきています。マスターすればUIデザイナーとしても活躍できるスキルになり得るのでぜひチャレンジしてみてください。

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。自分でもデザインを扱えるようになりたい人はぜひご覧ください。