今さら聞くことができない「マテリアルデザイン」とは？
こんにちは、だいきです。
現在、最も優れていると言われているデザインの１つに「マテリアルデザイン」があります。これはGoogleが２０１４年に提唱したデザインの考え方です。これからも、「マテリアルデザイン」はより優れたデザインへとなると思いますので、ぜひこの機会にしっかりと学んでいきましょう。
マテリアルデザインとは
マテリアルデザインとは、直訳すると「物質デザイン」となります。つまり、「マテリアルデザイン」は、「物質世界、現実世界」に基づいたデザインだと言うことができます。
物質世界に基づいたデザインとは、現実世界のルール、例えば
- 光や影
- 重なり
- 奥行き
などをデザインに取り入れることで、ユーザーが感覚で捉えるようにしたデザインのことです。
また、マテリアルデザインは、デバイスごと（スマホ、PC、タブレットなど）ごとのディスプレイサイズに合わせ、デザインを最適化しやすいように装飾を減らしたシンプルなデザインが基本となります。今までのような装飾に凝ったデザインだと、デバイスごとに大きくデザインが崩れてしまう可能性があり、利用者にとってマイナスのイメージを与えてしまう可能性がありました。
マテリアルデザインの特徴
「紙」と「インク」の要素
ホームページ上のパーツ（ボタンやリストなど）は、「紙みたいなもの」と定義されています。そして、紙の上にある文字やアイコンといった要素は「インクみたいなもの」と定義されています。
「紙」の要素
・現実世界と同じく重ねることができる
・自由に伸縮できる
・厚さを持っている
・無色である
・複雑な形はとらない
などがあります
「インク」の要素
・画面上の色はインク要素となる
・インク要素は自由に色を変更することができる
・写真、動画、文字もインク要素である
などがあります
要素の重なりを３次元で表現する
マテリアルデザインでは、影を使い、各要素の関係や距離を直感的に理解できるようにしています。
例えば、影によって、ユーザーが何を選択することができるか（どの要素をクリックすることができるか）を直感的に理解できやすくなり、ユーザービリティが向上すると言われています。
自然で意味のあるアニメーション
連続性のあるアニメーション
ウェブページなどで、ボタンを押すと、画面の表示結果が繋がらずにボタンが押せたのか分からないことがあるのではないのでしょうか。
そのようなことを防ぐために、マテリアルデザインでは、ユーザーの操作に合わせて、アニメーションさせることで、操作が的確に行われたかどうかをユーザーに知らせることができるようにしています。
厳格なルール
マテリアルデザインの特徴以外にも、厳格なルールが決められています。このルールを守ることにより、デザインに一貫性が保たれます。そうすることで、ユーザーアビリティが向上すると言われています。
マテリアルデザインを取り入れたいならば、１度はGoogleから出ているマテリアルデザインのガイドラインを読むことをオススメします。
まとめ
マテリアルデザインは、ユーザーアビリティ向上させるためのデザインだと言うことができます。今後、マテリアルデザインは、より多くの企業スタンダードデザインになるでしょう。
以上、だいきでした。
