Be simple

”当たり前”が誰かのためになる

マテリアルデザインのガイドラインを読む #1

はじめに

こんばんは!

お久しぶりです。最近個人アプリをマイクロな機能に絞ってリリースする方向にシフトチェンジしたzukkeyです。

やりたいことがありすぎて、時間がほしいこの頃。

 

さて、今日はマテリアルデザインガイドラインを読んでいくということを数か月前からやっていたので復習もかねてメモを書き残しておこうと思います。

 

一気にやると途中で挫折するとおもうので、小出しで回数を増やしていく感じにしてやっていきます。

 

マテリアルデザインとは

 

2014年にGoogleが発表したデザインのガイドラインのことです。

詳しくは以下参照。

qiita.com

 

上の記事はうまくまとめられていて全体をさらうのによいのではと思います。

 

僕は復習として詳しく読んで記事に書き残しておこうかなと思った次第です。

 

今回読んでいくのは、マテリアルデザインガイドラインの日本語訳版です。

詳しく読みたい人は以下参照。

マテリアル – 日本語

 

読んでいて残しておこうと思った部分だけまとめていく感じにします。

一応、英語版の方がいいらしいようですが僕は日本語を取り合えず先に読破していく所存です。

 

1.マテリアルデザイン

目標

ガイドラインには次のようにあります。

時代を超えて共通する優れたデザイン
の原則と、科学技術の革新性と可能性
とを融合させた視覚言語を作り出しま
す。  

 うーむ、抽象的なのですがデザインの原則と技術の進歩を合わせた共通の考え方を持つってことでいいのかな。

 

基本原理

なかなか難しい単語を使っているような気がするので、一応自分なりの理解を書いていきます。

マテリアルはメタファー(比喩)である

マテリアルはモノであり一種の比喩で、紙とインクからインスパイアされ、現実世界をもとに人にとってなじみのある感覚を取り入れることで、直感的に操作することができるようになるということ

 

大胆で生き生きとした、意識的なデザイン

見た目を良くするだけでなく、鮮明な画像や意識して選んだ色や意図的な余白により、階層構造や意図、焦点を表すことができるデザインということ

 

動きには意味がある

ユーザーの操作から動きが始まり、デザインが変化し、ユーザー体験の連続性を損なわないようにし、かつユーザーの注意をひいたり効果的な意図を示すのに有効であるということ

 

マテリアルとは

光と影

マテリアル環境では、仮想の光が場を照らし、主要光が方向性のある影を作り、環境光がすべての角度からやわらかな影を作ります。

f:id:rozkey59:20180415214112p:plain

色を使うというよりかは、高度によって影を示しz軸の奥行によって影ができるかを決めるということを意識する必要がありそう。

 

さいごに

一応コンポーネントまで読み進めているのですが、復習もかねてこのシリーズは定期的に書いていこうかなと思います。

最終的にはAndroidのサンプルをもとにマテリアルデザインの例を作成してまた記事を書いていこうと思います。

今日のところはこれで失礼します。