Material designと書くわけですが、Materialは原料、材料、素材といった意味があります。
でも素材のデザイン?っていうわけではないです。

先日、以下の記事が紹介されておりまして、早速読んでたわけですが。
Googleが「Material Design(マテリアルデザイン)」の概念を共有・普及させるための統一サポートページ「Material.io」を公開
ピンと来ない。

紙とインクのメタファーである。

とあるわけですが、元々紙(DTP)デザイナーだった僕ならわかるはず、と思いましたが、
よくよく考えたらDTPデザイナーつっても「え?商品はわかればいい、文字?読めるサイズなら問題ない。表面は写真をドーンでOK!!」という概念だったため、デザイナーと呼ぶには程遠い考え方だったためこんな理論や概念にもとづいての設計なんてしたことがないからピンとくるはずもない。そう、デザインって設計なんですよね。

マテリアルデザインについて少し調べる – Qiita
上記サイトで説明されていますが、どうやら意味のあるデザインというか、
・マテリアルデザインは「紙」と「インク」の要素でできている。
・マテリアルデザインは、要素の重なりを物理的にとらえ、平面の中に、明確なZ軸の概念を持つ(3次元)。
・意味のあるアニメーション・インタラクション

紙とインクの要素。
ということは、今は昔、デジタルブックで重要視されてた「めくる」という表現もそうなのかな?と思ってしまうが、あれを重要と思ったことは一度もない。
あのめくる、という行為が紙媒体に慣れたユーザーをWEBに近づける?みたいなことを聞いたこともあるが、作ってた側としてはマウス操作でのめくる行為はめんどくさいだけじゃないか?なんて思ってた。

以下、引用させていただきますが、

紙要素

画面上のUIパーツである、ボタンやバー、リストなどは、紙(紙みたいなもの)で出来ている要素と考える。
・紙要素は、現実世界と同じく重ねることができる。
・紙要素は、厚さをもっている(1dp)。
・紙要素は、短形、もしくは円形の形状。三角形や多角形のような複雑な形はとらない。
・紙要素は、自由に伸縮できる。
・紙要素は、無色。

インク要素

・画面上の色はインク要素となる(紙に印刷された状態)。
・画面上の写真、動画、文字もインク要素。
・インク要素は自由に色変更ができる(動画とかはリアルタイムで印刷され続ける)。 *複雑なシェイプ(三角形や多角形)は、インクとして紙に描くする。

目的は
スマートフォン、タブレット、テレビ、メガネ、腕時計などのデバイスで、統一されたデザインを取り入れることにより、操作性も統一されデバイスが変わっても使いやすいUIの実現。
現実世界のルール(奥行きや、影など、質量)を取り入れることで、直感的な操作を実現させる。
ことのようです。ふむふむ。

ちょっとブログの記事にするには勉強不足すぎたかな・・・。
とはいえ、このブログに書こうとしないといつまで経っても勉強なんてしないしな。
ただ、なんとなくWin8のスタート画面はわかりにくいし、あれがフラットデザインで、ボタン押すと回転しながら画面開くんですけど、あれ嫌い。

以下、いくつか記事並べますね。
マテリアルデザインとは〜基本概念と実務で使える無料フレームワーク6選 |ferret [フェレット]
Googleマテリアルデザインとフラットデザインって結局何が違うの?[UI/UX] – NAVER まとめ
Googleの提唱する「マテリアルデザイン」の事例を集めまくって無料で素材のダウンロードまで可能な「MaterialUp」
Googleのマテリアルデザインを使ったウェブサイトが作れる公式CSS/JS/HTMLコンポーネント「Material Design Lite」
Googleのマテリアルデザインの「動き」がどのような法則に従っているのかがよくわかるムービー「Material Design Motion」
よくわかるマテリアルデザインの設計コンセプト | fladdict
マテリアルデザインとは – 意味 | IT用語辞典 サバナビ
Material Designの翻訳|YoheiM .NET
Principles | Layout | Material Designの翻訳|YoheiM .NET

あ、ここまで書いてなんとなく腑に落ちた。
物質の質量をデザインに取り入れるってことか。多分。

スポンサーリンク

コメントを残す

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

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください