管理人が半年で筋肉量+4kgを達成した筋トレグッズ

マテリアルデザインとは(基礎)

今回は基礎的なマテリアルデザインの考え方についてご説明いたします。

かなり初歩的な内容ですので、お気軽に御覧ください。

なるべく図を使用して解説しています。

スポンサードサーチ

基本原理

マテリアルデザインの基本的な考え方としては、以下のようになっています。

  1. 実際に触れることのできる現実世界に基づいた表現
  2. 印刷物向けデザインの基本要素を取り入れている
  3. 連続性のある動き

 

上の3つを少しだけ細かく説明すると、マテリアルデザインでは高低差、影等を利用して物理法則を表現しています。文字や画像、余白の使い方なども印刷物向けのデザインを参考にしており、それにより階層構造や重要なポイントを示すようになっています。それに加えて動きを与えることで、ユーザの注意を引いたり、なめらかで自然な感覚を表現しているんですね。

 

マテリアルとは?

3D の世界

マテリアルデザインでは、オブジェクトがx、y、z 軸の方向を持つ空間と考えられています。

x、y、z 軸を持つ 3D 空間

オブジェクト(物体)の奥行きと影

x軸、y軸のサイズはさまざまですが、z軸(厚さは)均一(1dp)です。

画像左:適切な表現。高さと幅はマテリアルによって異なる。 画像右:不適切な表現。マテリアルの厚さは常に 1 dp 。

また、マテリアルには影があります。

ただし、「影をつける=マテリアル」ではありません。「影がつくデザインの1つにマテリアルデザインがある」というイメージです。常に影が使われるわけではなく、わかりやすく、見やすくするために影を使用しているのです。

 

スポンサードサーチ

高度とシャドウ

マテリアルデザインのオブジェクトは現実世界のオブジェクトに似た性質を持っています。
現実世界では、オブジェクトを積み重ねたり他のオブジェクトに貼り付けたりできますが、オブジェクトが別のオブジェクトを通り抜けることはできません。
また、オブジェクトは影を投影し、光を反射します。
こうした性質をマテリアルデザインは踏襲しているため、ユーザーにとって馴染みのある空間モデルが形成されます。この空間モデルを支えているのが高度とシャドウの概念です。

下図は、複数のカードと1つのFABを持つアプリのレイアウトの例と、コンポーネントの Z 軸方向の高度を示した横断面図です。
コンポーネントごとに高度は決まっています。

 

まとめ

今回はマテリアルデザインの基礎について記事を作成しました。今後、さらに踏み込んだ内容についても書きたいと思っているので、ご期待ください!

それでは最後までご視聴ありがとうございました。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です