事例から学ぶ！マテリアルデザインとは【初心者向け】
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分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
マテリアルデザインの勉強法
Introduction – Material design
マテリアルデザインはAndroidによく使用されています。それもそのはず、Googleが紹介サイトを出して、デザインに推奨しています。
英語で書かれているサイトですが、動画もあるので理解できると思います。
マテリアルデザインは概念自体はそれほど多くないので、デザインの知識自体は上のサイトでほとんど得ることができます。
実際に作成しましょう
基礎知識がついたところで実際に作成してみましょう。
マテリアルデザインは、知識自体は簡単ですが実際に作成してみるととても難しいです。
また、色合いや影のつけ方を少し変えるだけで、印象が変わることを実感できると思います。
デザインの上達には、実際に作成してみるのが一番の上達法です！
頑張って自分の作品を作り上げましょう！
Materializeという海外サイトでマテリアルデザインを簡単に作成することができます。自分でゼロから作る必要がないので便利なツールです。
今回はマテリアルデザインについて解説していきました。マテリアルデザインは、より直感的な操作しやすい印象を与えることができます。
元はAndroidから広がっていったデザインですが、PC用サイトを作る際の最近のトレンドにもなってきています。マスターすればUIデザイナーとしても活躍できるスキルになり得るのでぜひチャレンジしてみてください。
[お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。自分でもデザインを扱えるようになりたい人はぜひご覧ください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
