近年、ウェブページのデザインはマテリアルデザインが推奨され、多くのウェブサイトが採用するようになってきました。ここでは、マテリアルデザインとはどんなものか、その特徴を紹介します。

マテリアルデザインの基礎知識

マテリアルデザインとはユーザーが直観的に理解しやすく、また影や奥行など現実世界に近い物理的な視覚効果を持つものを言います。2014年にGoogleがマテリアルデザインを推奨するデザインとしてから、導入するウェブサイトが徐々に増えてきました。

マテリアルデザインの具体的な特徴として、以下のような要素が挙げられます。

  • 要素を3D的に見せるために影をつける
  • 多種類の色数を使わずにすっきりとまとめる
  • 装飾をつけすぎないシンプルな画面
  • 一部アイコンにアニメーションをつけるなど操作が直観的にわかりやすい
  • スクロール連動型や色が変化するボタンなど

マテリアルデザインを作る時の基本の考え方

マテリアルデザインを作成する際に、一番基本となる考え方は、「紙」と「インク」です。実際の物質である紙とインクでできたような、物理的・立体的な感覚をウェブ上(2D)で再現するのがマテリアルデザインです。

紙の要素としては、厚さを持つ、重ねることができる、四角形や円形が基本で複雑な図形とはならないなどの特徴があります。これらはボタンやリスト、アイコン、バーなどに適用します。また、インクの要素としては自由に色が変更できること、複雑な図形も作成できることなどの特徴があり、これは色のある部分(文字、写真、画像、動画)に適用されます。