マテリアルデザインについてよく学ぶのがWEBデザイナーへの近道かと思った

デザインツール「Sketch」をずっと触ってた8月とはうって変わって、WEBデザインについての記事を読みこむのにここ最近は時間を割いてます。なんか、ただ量をこなしてるだけで中身の成長が伴ってないような気がしたんですよね。で、先日Daily-UIで作ったやつを師匠に添削してもらってた時、マテリアルデザインについてよく知ったほうがいいなと思ったのでそういう記事を読んでます。

マテリアルデザインとは

2014年頃にGoogleが発表したWEBデザインのフレームワーク(=枠組み、構造)です。それまでのWEBサイトは、サイトごとにレイアウトがバラバラだったので、ユーザーがどのWEBサイトでも、初めて触るアプリとかでも迷わず使えるようにとつくられたものみたいです。ユーザーが直感でサイトを操作できるように、物理的なルールを絶対としてるのが特徴だなと感じました。たとえばこれはGoogle+の画面です。

マテリアルデザインではサイトを更生するボタンや文字、カード型のリストはすべて紙とインクで構成されているというルールがあるようです。この画面なら、一番下の灰色の大きな紙の上にカード型の紙が乗っていて、その上にメニューバーの紙が乗っているということです。この紙が乗っている順序を表すのですごく重要になるのが「影」になってきます。

こっちはGoogle Playの画面。紙とインクと影の概念で構成されてるというのが伝わってきます。なので影もただ適当につけるのではなくて、上のページのように、手前のメニューバーとと奥のカードの影はつけ方を変えて、現実の影のつき方にちゃんとのっとってやることで、ユーザーが現実世界で紙を触るような感じでWEBサイトをさわれるようになります。

マテリアルデザインは個性が出しにくい？

物質的な法則を第一にしているので、このマテリアルデザインではデザインのルールがものすごくたくさんあって、マテリアルデザイン以前のWEBデザインに比べてユーザーが使いやすくなる反面個性が出しづらいということがあります。ただ僕にとってはこのルールをバッチリ把握することが、早くWEBデザイナーの土俵に上がる近道のような気がしたので、目下これを黙々と読んだりマテリアルデザインを取り入れたサイトを眺めたりしてるところです。ただ2014年以降、Googleも年々このマテリアルデザインのルールをアップデートしているようで、ユーザーに親切かつサイトごとの個性も出せるようなものになってきているみたいです。 Googleのサービスだけでなくて、Twitterやfacebook、メルカリとかも意識してみたらマテリアルデザインを取り入れてあるなと気づきました。今このブログを書いてるwordpressのエディット画面もマテリアルデザインです。なるほど、直感的に使えるとはこういうことかという気分です。皆さんもひとつ、意識してよく使ってるサイトやアプリを見てみてください。このブログだと勉強してる自分の忘備録的な感じで、マテリアルデザインがどんなにすごいかいまいち伝わらないかと思うので、僕がよく見てるサイトを最後にリンク貼っておきます。サルワカ猿でもわかる説明ということで僕にピッタリです。今日はこんな感じで。