事例から学ぶ！マテリアルデザインとは【初心者向け】
UIデザインで今や欠かせない「マテリアルデザイン」。今回は、マテリアルデザインとは、どういった特徴があるのか、その勉強法など初心者の方向けに説明しています。デザイナーを目指す方は必見でしょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
シンプルな見た目なのにどこかリッチな印象を受ける、「マテリアルデザイン」
聞いたことはあるけど、誰かに説明できるほど詳しく分からないという方も多いのではないでしょうか。この記事では事例を用いながらマテリアルデザインとは何なのか解説していきたいと思います。勉強法・サイトも載せているので、これからデザイナーを目指す方は必見です！
なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。
目次
マテリアルデザインとは
マテリアルデザインとは直訳すると「物質デザイン」です。
デザインのパーツを物質として捉え、現実世界のルールに基づくことによって、より直感的な操作にユーザーを誘導するデザインです。
マテリアルデザインは、Googleの製品やアプリケーションによく使われており、Androidの普及とともに浸透していきした。
マテリアルデザインの特徴
3Dの奥行き感
マテリアルデザインは、Z軸つまり高さの概念を持たせ、影をつけることで立体的に表現しています。3Dで表現することで、同じオブジェクトが重なっても影を用いることで実際にそこに物体が存在しているかのようにデザインしているのです。
紙とインクの比喩
マテリアルデザインでは、カード型のリストやヘッダーなど様々な要素の部分は「紙」の比喩だと定義しています。
つまり、いくつもの紙を並べ先ほど紹介した影をつけることで立体感を表現しているのです。そして、文字や写真などは紙の上に乗っている「インク」の比喩だと定義しています。
アニメーションに意味を持たせる
ボタンなどタップした際にアニメーションを多く持たせているのが特徴です。パワーポイントのスライドなどで次のスライドに行く際にアニメーションをかけることがあるかと思いますが、マテリアルデザインも次の画面に行く際にアニメーションを採用しています。
そして、アニメーションの前後は関連性や繋がりを持っている必要があります。
アニメーション公式サイトでも動画で分かりやすくまとめています。
フラットデザインとの違い
文章で説明しても分かりにくいと思うので、よくマテリアルデザインと混同される「フラットデザイン」との違いを見ていきながら実際にマテリアルデザインを見ていきましょう。
まずフラットデザインの画像を見てみましょう。
見たことのある方がほとんどだと思いますが、モダンUIと言われる、Windowsのホーム画面はフラットデザインで作られています。
奥行きを感じさせず、すっきりとした印象を与えることができます。
次にマテリアルデザインを見ていきましょう。
こちらも皆さんご存知GoogleMapの画面です。
パッと見たところフラットデザインとの違いがわからないかもしれませんが、注目していただきたのは、ルート・乗り換えの上の矢印ボタンです。
周りに少し影があることがわかります。
マテリアルデザインはこのように「重なり」を意識して立体的に作られています。
また現実のルールにのっとり、重なった場合は影をつけ、平面なページながら、立体感を出しています。
こちらもマテリアルデザインです。
ボタンや、色の境目に影を付けることで、立体感を表現しています。
このように、強調したい部分を目につけやすくすることが、マテリアルデザインの強みです。
まとめて簡単に言うと、フラットデザインは、「二次元」、「すっきりとした印象」、「重なりは意識しない」。
マテリアルデザインは、「三次元」、「直感的な印象」、「重なりを意識する」。
似ているデザインですが、以上のような違いがあることがわかります。
実は私も！？独学で損する人の特徴
「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ
独学には向き不向きがあり、実はスクールが向いている人も大勢います。
そんな方のために参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
- ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
- ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った
少しでも当てはまる部分があれば、
スクールが向いているかもしれません。
お試しのつもりで、まずは一度
無料相談
に参加してみませんか？
現役エンジニア・デザイナーに何でも気軽に相談できる30分
を
すべて無料で
できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
マテリアルデザインの勉強法
Introduction – Material design
マテリアルデザインはAndroidによく使用されています。それもそのはず、Googleが紹介サイトを出して、デザインに推奨しています。
英語で書かれているサイトですが、動画もあるので理解できると思います。
マテリアルデザインは概念自体はそれほど多くないので、デザインの知識自体は上のサイトでほとんど得ることができます。
実際に作成しましょう
基礎知識がついたところで実際に作成してみましょう。
マテリアルデザインは、知識自体は簡単ですが実際に作成してみるととても難しいです。
また、色合いや影のつけ方を少し変えるだけで、印象が変わることを実感できると思います。
デザインの上達には、実際に作成してみるのが一番の上達法です！
頑張って自分の作品を作り上げましょう！
Materializeという海外サイトでマテリアルデザインを簡単に作成することができます。自分でゼロから作る必要がないので便利なツールです。
今回はマテリアルデザインについて解説していきました。マテリアルデザインは、より直感的な操作しやすい印象を与えることができます。
元はAndroidから広がっていったデザインですが、PC用サイトを作る際の最近のトレンドにもなってきています。マスターすればUIデザイナーとしても活躍できるスキルになり得るのでぜひチャレンジしてみてください。
[お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。自分でもデザインを扱えるようになりたい人はぜひご覧ください。
プログラミングを独学していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
厳しい試験を通過した講師
があなたの相談に真摯に向き合います。
「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
