今回は名前だけなら一度は聞いたことがある人も多いだろう「マテリアルデザイン」について、簡単にご紹介します。
マテリアルデザインとは？
マテリアルデザインとは、Googleによって定められたデザインのガイドラインです。
簡単に言えば「このルール守ればとりあえず良い感じのUIになるよ」というもの。
今回はその内容について、ざっくりとご紹介します。
基本的な考え方
まずはマテリアルデザインの基本的な考え方について。
紙とインクでできている
UIは印刷物のように、紙とインクでできているという考え方をします。
そして、紙とインクにはそれぞれ以下のようなルールがあります。
紙
- 紙は1dpの厚さがある（かなり薄いけど平面ではない）
- 紙は重ねることができる（上の画像ではヘッダーの紙がコンテンツの紙に重なっている）
- 紙の形は矩形か正円のみ
- 紙は無地で模様はついていない
- 紙は折り畳んだり切ったりはできないが、伸縮はできる
最後のルールだけは現実世界と少しことなりますが、このようになっています。
インク
- テキストはもちろん、画像や動画もインク要素
- インクには厚さはない（影をつけたり立体表現をしてはいけない）
- インク要素は複雑な形を描いても良い（＝矩形や正円以外は必ずインクで表現する）
- インク要素は紙からはみ出してはいけない
現実世界の法則に則る
マテリアルデザインは現実世界の法則に則っています。
例えば、マテリアルデザインで頻繁に使われる要素である「影」ですが、こちらは奥行きに応じて付けるようにします。
手前にあるものは影のぼかしを大きく、奥にあるものは影のぼかしを小さくすることで、現実世界での影のつき方を再現しています。
ちなみに少し前の画像でも、手前にあるヘッダーの影はぼかしを大きく、奥にあるカード（コンテンツ）の影はぼかしを小さくしています。
また、逆に言えば同じ奥行きにある要素同士は、必ず同じ影のつき方をしなければならないということでもあります。
操作に合わせた適切なアニメーション
ユーザーの操作に合わせて、適切にアニメーションをさせることが大事です。
ユーザーが行なった操作によって、どの要素がどのように動いたのかをアニメーションによってユーザーに伝えます。
これがもし瞬時に画面を切り替えていたら、操作との関連性が薄く感じてしまいます。
例えばAndroidユーザーならよく分かると思うのですが、要素をタップした時に要素内で波紋のようなエフェクトが表示されますよね。
他にも、何か要素を開く時にシームレスにアニメーションをして開くことが多いはずです。
まとめ
マテリアルデザインについて、ざっくりとご紹介しました。
時間がある際にでも、一度マテリアルデザインのガイドラインを読んでみてはいかがでしょうか。
必ず参考になるはずです。
コメント