Google推奨マテリアルデザインとは?新基準までまとめて解説!

マテリアルデザイン WebDesign

マテリアルデザインは、2014年6月にGoogleが発表したWebやアプリデザインの考え方の事です。

それが2018年に入り、新基準でアップデートされました。

本記事ではマテリアルデザインの特徴から新基準のアップデート機能を解説していきます!

スポンサーリンク

・マテリアルデザインについて

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

マテリアルデザイン(Material Design)とはGoogleが提唱している「デザインの考え方」のことです。

マテリアル(Material)は直訳で「物質的な」「具体的な」という意味で、直感的に操作が出来ることを目的としています。

例えば「どのボタンがどのような意味をもっているのか」「どこならクリックできるのか」など、誰が見てもすぐにわかるように表現されています。

またマテリアルデザインは、デバイスごとのディスプレイサイズに合わせて、デザインを最適化しやすいように装飾を減らし、シンプルなデザインを基本としています!

このようにマテリアルデザインはユーザーに対して「分かりやすく」が第一になっています。

しかし、マテリアルデザインには複雑なルールがあります。

色、レイアウト、コンポーネント等の細かな詳細から原則まで、全て覚えてゼロからCSSを作るのは難しいと思います。

そこで簡単にマテリアルデザインを取り入れるには、MaterializenのCSSフレームワークなどチェックしてみるといいですよ!

②マテリアルデザインの4つの原則

タンジブルサーフェス

マテリアルデザインでは、画面が小さな四角い紙(英語だとサーフェス)によって出来ていると考えられています。

  • 紙が重なっていると、その下の紙には影が出来る
  • 紙と紙がくっつく
  • 紙と紙が離れる
  • 紙を動かす事が出来る

このことからマテリアルデザインは影をつけることで、ユーザーが「手前にあるものや奥にあるもの」「注目すべきところ、注目しなくてもよいところ」と一目で見て分かります。

また手前のボタンに影があることで、「奥側にある背景などは押さなくてもいい」ということを簡単に知らせることができます。

このように紙の概念をデジタル上で表現する事で、ユーザーがどのように動くのかというのを説明する事なく理解してもらえるデザイン手法のことです。

印刷物のようなデザイン

印刷業界でよく使われるキーラインがWebデザインでもプリントデザインでも重要になります。

グリッド線やキーラインなどのガイドラインを用いて、そこに文字やアイコンを合わせて配置することで、綺麗なレイアウト構成が得られます。

意味があるアニメーション

マテリアルデザインでは、アニーメーションをよく使いますが、それは単なる装飾ではなく、意味のあるアニメーションであるべきと考えています。

例えばGoogleカレンダーの日付を「押した」際に奥から予定の画面が出てきます。

反対に「戻る又は×」を押すと画面は戻って行きます。

こういった意味のあるアニメーションのデザインをすること。

アダプティブデザイン

PCやタブレット、携帯と閲覧するデバイスによってコンテンツの見せ方が違います。

アダプティブデザインは、特定の画面サイズでレイアウトが切り替わります。

そのため、幅は固定されているのでレイアウトは変化せず、テキストやボタンなどのコンテンツ要素が見切れてしまうことがあります。

つまり、「特定のサイズごとに最適化する」という考え方がアダプティブデザインとなります。

アダプティブデザインとレスポンシブデザインの違い

レスポンシブデザインは、1つのHTMLファイルに対してCSSのメディアクエリという機能を使い装飾を切り替え、あらゆる画面サイズに柔軟に対応する手法です。

どうしてもレイアウトの調整に限界があり、装飾具合によっては非表示にして、ソース上には存在する要素もあります。

それに対し、アダプティブデザインは「ブレークポイントに特化した最適化」という手法なので、基本的にはブレークポイントごとに別のレイアウト、サイズなどを読み込んでいきます。

そのため、レイアウト調整に限界はなく、無駄な非表示要素を読み込む必要がないので、読み込みも速くなります。

アダプティブデザイン→パフォーマンスやブレークポイントに特化したレイアウト
レスポンシブデザイン→あらゆるデバイスに対応
※ブレークポイント:ある特定の画面サイズでレイアウトを切り替える時の、その画面サイズのこと。

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

マテリアルデザインを勉強するのにオススメするのがオンラインスクールです。

いつでも好きな時間に勉強が出来るので、社会人の方や主婦の方にも良いと思います。

数あるオンラインスクールの中でもTechAcademy [テックアカデミー]には オンラインブートキャンプ UI/UXデザインコース があり、まさしくマテリアルデザインを学ぶためのコースです。

オンラインブートキャンプ 無料体験 もあるのでぜひ一度お試しください。

・2018年にアップデートされた3つの機能

①マテリアルテーマ

デザインを「体系的」にカスタマイズして、製品のブランドをより良く反映させるテーマです。

ここで「体系的」という表現が意味することを説明します。

ブランドは、色、タイポグラフィ、および形状によって視覚的に表されます。

このことから、マテリアルコンポーネントでこれらのことを変更する方法も必要です。

以前はこのような変更を行うために、複数のプラグインを使用してスケッチシンボル・ライブラリを更新する必要がありましたが、今は「マテリアルテーマエディター」というテーマが追加されたので必要がなくなりました。

②機能追加

色の変更/追加/更新

マテリアルデザインで定義された配色システムは、色をむやみに使用するのではなく、ブランドやサイトのトーンに合ったカラーをベースとして同系色を数種類使用します。

色がどこで使用されているかを理解し、それに応じて陰影・色合いを生成することが可能になった。

タイポグラフィ管理

タイポグラフィとイメージ写真、カラーによる表現はレイアウトを工夫することで、グラフィックデザインのような印象を作り出すことができます。

また視覚的に似ているタイプ階層を作成することができる。

シェイプ

マテリアル(カードや形)をアップデートするもので、マテリアルデザインの中核となり、自身のブランドに基づいてカスタムシェイプすることができる。

※シェイプとは画像編集ソフトや文書作成ソフトなどで、点や線、面を組み合わせて作成された図形のこと。

③ギャラリー強化

ギャラリーは下記の内容を加えて新しく進化しました。

  • Googleドキュメント、スプレッドシート、スライドを添付することが可能。
  • 同じ名前のファイルをアップロードすると、そのファイルのバージョンが作成される。
  • ワイヤフレームが実際のデザインでどのように変わるかを見ることが可能。
  • インスペクトモードで、シンボルを検出してそのコンポーネントのコードへのリンクを表示することが可能。
  • フォントファミリ(一つの括り)を識別し、Googleフォントへのリンクを表示することが可能。

※インスペクトとはデザインビューで、文字や画像や背景などページの要素にマウスカーソルを持って行くと、コードビュー上に対応するコードを反転させ、目立つように表示するものです。

・まとめ

マテリアルデザインは3Dのような立体的表現を用いて、直感的な操作性とユーザーの利便性を向上させることが出来ると言われています。

そのため、Googleで公開されているマテリアルデザインのガイドラインに沿って作成していくと要素を取り入れやすく、比較的簡単に導入することが可能ではないでしょうか?

マテリアルデザインを取り入れてより良いアプリやWebサイトを作っていきましょう。

この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
WebDesign
スポンサーリンク
シェアする
CreaveGraffitiをフォローする
Creavegraffiti | Webマーケティング情報

コメント

タイトルとURLをコピーしました